@font-face {
  font-family: 'Pretendard-Regular';
  src: url('https://fastly.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
:root{
  --color-brand:#4FD1C5;
  --text-main:#202224;
  --text-muted:#64748B;
  --line:#E5E7EB;
  --body:#F8F9FA;
  --sidebar-bg:#ffffff;
  --sidebar-fg:#A2A6B9;
  --sidebar-active-bg:#4FD1C5;
  --radius:16px;
  --sidebar-w:280px;
  --sidebar-w-collapsed:76px;
  --bs-nav-link-color:#A2A6B9;
  --bs-nav-link-hover-color:#A2A6B9;
}

.m0 {margin:0;}
.mb22 {margin-bottom:22px !important;}
.m20tb {margin:20px 0 !important;}
.mb4 {margin-bottom:4px !important}

html,body{height:100%}
body{
  font-family:'Pretendard-Regular', system-ui, -apple-system, Segoe UI, Roboto, 'Apple SD Gothic Neo', sans-serif;
  color:var(--text-main);
  background:var(--body);
}

/* Grid layout */
.layout{display:grid;grid-template-columns:var(--sidebar-w) 1fr; min-height: 100vh; }
.layout.sidebar-collapsed{grid-template-columns:var(--sidebar-w-collapsed) 1fr}

/* Sidebar */
.sidebar{
  background:var(--sidebar-bg);
  width:var(--sidebar-w);
  transition:width .28s ease, box-shadow .2s ease;
  /* 높이는 콘텐츠에 맞춰 쭉 늘어나게 */
  align-self: stretch;        /* 그리드 행 높이에 맞춰 늘어남 */
  min-height: 100vh;           /* 안전망 */
  position: relative;         /* 그림자/배경용 컨테이너 */
  box-shadow:0 16px 44px rgba(0,0,0,.07);
}
/* 스티키는 안쪽에만! */
.sidebar-inner{
  position: sticky;
  top: 0;                     /* 상단 고정 위치 */
  height: calc(100vh);        /* 스티키 영역 높이 = 화면 높이 */
  overflow-y: auto;           /* 내용이 넘치면 사이드바 내부 스크롤 */
}
.sidebar-footer {padding: 24px; color:#A2A6B9;}

.sidebar .separator, .sidebar-footer .separator {
  display: block;
  height: 1px;
  background-color: rgba(178,184,199,0.2);  /* #B2B8C7, 20% */
  /* nav 좌우 패딩만큼 음수 마진 → 패딩을 무시하고 전체폭(펼침 280px/접힘 76px)으로 표시 */
}
.sidebar .separator {  margin: 24px calc(-1 * var(--nav-x)) 0;}
.sidebar-footer .separator {margin: 0 calc(-1 * var(--nav-x)) 24px; }

/* brand */
.brand {
  height: 88px;
  padding-left: 24px;
  padding-right: 24px;
  display: flex;
  align-items: center;       /* 세로 가운데 정렬 */
  justify-content: center;   /* 가로 가운데 정렬 */
  text-align: center;
  margin-bottom: 24px;
}

.brand-logo {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #202224;
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 800;
  flex-shrink: 0;
}

.brand-text {
  display: flex;
  flex-direction: column;
  align-items: center;  /* 텍스트도 가운데 정렬 */
}

.brand-text small {
  color: #A2A6B9;
}


/* 기존 .nav{padding:24px;} 를 다음으로 교체 */
.sidebar .nav, .sidebar .sidebar-footer {
  --nav-x: 24px;                 /* 좌우 패딩 값을 변수로 통일 */
  padding-left: var(--nav-x);
  padding-right: var(--nav-x);
}

.nav-title{color:#A2A6B9;font-size :14px; font-weight: 700;letter-spacing:.1em;margin:24px 12px; height:17px;}
.nav-link,.nav-nolink{color:var(--sidebar-fg);height: 44px; border-radius:12px;padding:10px 12px;display:flex;align-items:center;gap:10px}
.nav-link .icon, .nav-nolink .icon{width:20px;height:20px;display:inline-grid;place-items:center;}
.nav-link .icon {color:#4FD1C5}
.nav-nolink .icon {color:#A2A6B9;}
.nav-link.active, .nav-link.nav-link.active:hover{background:var(--sidebar-active-bg);color:#fff; height: 44px; border-radius: 99px;}
.nav-link.active .icon{color:#fff}
.nav-link:hover{background:#F4F7F9;color:#6B7280;border-radius: 99px;}
.sidebar .label{white-space:nowrap;transition:opacity .2s ease; font-size: 14px; font-weight:600;}

/* Collapsed state */
.layout.sidebar-collapsed .sidebar{width:var(--sidebar-w-collapsed)}
.layout.sidebar-collapsed .sidebar .brand-text,
.layout.sidebar-collapsed .sidebar .label,
.layout.sidebar-collapsed .sidebar .nav-title,
.layout.sidebar-collapsed .sidebar .sidebar-footer{opacity:0;pointer-events:none;visibility:hidden}

.layout.sidebar-collapsed .sidebar .brand{padding:24px;}
.layout.sidebar-collapsed .sidebar .nav-link{justify-content:center;width:40px; }
.layout.sidebar-collapsed .sidebar .icon{margin:0}

/* 사이드바 접혔을 때 (sidebar-collapsed) */
.layout.sidebar-collapsed .brand {
  justify-content: center;   /* 로고만 가운데 */
}
.layout.sidebar-collapsed .brand-text {
  display: none;             /* 텍스트 숨기기 */
}
.layout.sidebar-collapsed .sidebar .nav, .layout.sidebar-collapsed .sidebar .sidebar-footer {padding:0;}

/* ========== COLLPASED (사이드바 접힘) 정렬 보정 ========== */

/* 1) 접힘 상태에서는 nav 자체 좌우 패딩 제거 (한가운데 정렬 핵심) */
.layout.sidebar-collapsed .sidebar .nav {
  --nav-x: 0;
  padding-left: 0;
  padding-right: 0;
}

/* 2) label은 공간까지 제거 */
.layout.sidebar-collapsed .sidebar .label {
  display: none !important;
}

/* 3) 링크를 '정원형 버튼'으로 만들어 아이콘을 정확히 중앙에 */
.layout.sidebar-collapsed .sidebar .nav-link,
.layout.sidebar-collapsed .sidebar .nav-nolink {
  justify-content: center;
  align-items: center;
  width: 44px;              /* 정사각 */
  height: 44px;
  padding: 0;               /* 내부 여백 제거 */
  margin: 0 auto;         /* 가운데 배치 */
  border-radius: 999px;
}

/* 4) 아이콘 박스/아이콘 크기 고정 */
.layout.sidebar-collapsed .sidebar .nav-link .icon,
.layout.sidebar-collapsed .sidebar .nav-nolink .icon {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.layout.sidebar-collapsed .sidebar .nav-link .icon svg,
.layout.sidebar-collapsed .sidebar .nav-nolink .icon svg {
  width: 20px;
  height: 20px;
  display: block;
}

/* 5) 접힘 상태에서 active/hover 배경 처리 (동그란 버튼) */
.layout.sidebar-collapsed .sidebar .nav-link.active {
  background: var(--sidebar-active-bg);
  color: #fff;
}

/* 6) 접힘 상태 separator: nav 패딩 제거했으니 좌우 풀로 */
.layout.sidebar-collapsed .sidebar .separator,
.layout.sidebar-collapsed .sidebar-footer .separator {
  left: 0;
  width: 100%;
}

/* (선택) 접힘 상태 footer는 숨기고 싶다면 
.layout.sidebar-collapsed .sidebar .sidebar-footer {
  opacity: 0; visibility: hidden; pointer-events: none;
}
*/

/* 1) 접힘 상태에서 separator 숨김 */
.layout.sidebar-collapsed .sidebar .separator,
.layout.sidebar-collapsed .sidebar-footer .separator {
  display: none !important;
}

/* 2) 섹션 아이콘(접힘 전용) 기본은 숨김 */
.nav-title-collapsed {
  display: none;
  height: 17px;
  margin: 24px auto;    /* 가운데 정렬 */
} 

/* 접힘 상태에서 섹션 아이콘 보이기, 타이틀은 숨김(공간 제거) */
.layout.sidebar-collapsed .sidebar .nav-title {
  display: none !important;
}
.layout.sidebar-collapsed .sidebar .nav-title-collapsed {
  display: block;
}

/* 접힘에서도 footer를 강제로 표시 */
.layout.sidebar-collapsed .sidebar .sidebar-footer{
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  padding: 24px 0; /* nav와 동일하게 좌우 0 */
}

/* 접힘 상태에서도 footer 표시 + 수평 중앙 정렬 컨테이너화 */
.layout.sidebar-collapsed .sidebar .sidebar-footer{
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;

  /* 좌우 패딩 제거해 정가운데 배치 기반 만들기 */
  --nav-x: 0;
  padding-left: 0 !important;
  padding-right: 0 !important;

  /* 아이콘 버튼들을 수직 스택 + 중앙 정렬 */
  display: flex;
  flex-direction: column;
  align-items: center;    /* ⬅️ 핵심: 가로 중앙 정렬 */
}

.layout.sidebar-collapsed .sidebar .sidebar-footer .nav-nolink .label{
  display: none !important;  /* 텍스트는 숨김 */
}

/* ========== 부드러운 전환용 공통 트랜지션 ========== */
.sidebar .brand-text,
.sidebar .label,
.sidebar .nav-title,
.sidebar .sidebar-footer .label {
  transition: opacity .22s ease, transform .28s ease;
  will-change: opacity, transform;
}

/* 접힐 때 텍스트를 서서히 숨기는 중간 상태 */
.sidebar-text-hiding .sidebar .brand-text,
.sidebar-text-hiding .sidebar .label,
.sidebar-text-hiding .sidebar .nav-title,
.sidebar-text-hiding .sidebar .sidebar-footer .label {
  opacity:0; transform:translateX(-8px); visibility:hidden; pointer-events:none; transition: opacity .22s, transform .28s;
}

/* 애니메이션 종료 후 실제로 DOM 공간에서 제거(탭 이동 방지) */
.sidebar-hide-text .sidebar .brand-text,
.sidebar-hide-text .sidebar .label,
.sidebar-hide-text .sidebar .nav-title {
  display: none !important;
}

/* 펼칠 때 '바로 보이도록' — 옵션 B용 */
.sidebar-animating.sidebar-expanding .sidebar .brand-text,
.sidebar-animating.sidebar-expanding .sidebar .label,
.sidebar-animating.sidebar-expanding .sidebar .nav-title {
  display: initial !important;
  opacity: 1;              /* ← 0 → 1로 변경 */
  transform: none;         /* ← translateX 제거 */
  visibility: visible;
}


.sidebar-animating.sidebar-expanding .sidebar .brand-text,
.sidebar-animating.sidebar-expanding .sidebar .label,
.sidebar-animating.sidebar-expanding .sidebar .nav-title {
  /* 다음 프레임에 opacity 1로 애니메이션 (JS에서 강제 리플로우 후 클래스 유지) */
}

/* 접힘 상태의 아이콘 버튼(48x48) 규칙은 그대로 유지해도 OK */



/* Topbar */
.topbar {
    height: 76px;                /* 전체 높이 고정 */
    padding: 12px 24px;          /* 위아래 12px, 좌우 24px */
    background: transparent;
    display: flex;
    align-items: center;
    gap: 24px;                   /* 토글과 검색바 간격 */
  }
.btn-toggle{width:40px;height:40px;border-radius:12px;border:1px solid #E7EAF0;background:#fff;display:grid;place-items:center}
.btn-toggle .icon-hamburger{display:none}
/* Default expanded → show X */
.has-sidebar .btn-toggle .icon-close{display:block}
/* When collapsed → show hamburger */
.sidebar-collapsed .btn-toggle .icon-close{display:none}
.sidebar-collapsed .btn-toggle .icon-hamburger{display:block}

.search-pill{
  grid-template-columns:22px 1fr auto;align-items:center;gap:10px;
  background:#F8FAFC;border:1px solid var(--line);border-radius:999px;
  padding:8px 8px 8px 14px;min-width:520px
}
.search-pill .search-icon{width:20px;height:20px}
.search-pill input{border:none;background:transparent;box-shadow:none}
.btn-search{background:var(--color-brand);color:#fff;border:none;border-radius:999px;padding:8px 18px;font-weight:700}


/* 1) 토글 버튼: 배경/테두리 제거, 햄버거 기본 표시 */
.topbar{ padding:0 24px; background:transparent; margin-bottom: 8px;}

.btn-toggle {
    width: 20px;
    height: 20px;
    border: none;
    background: transparent;
    display: grid;
    place-items: center;
    padding: 0;                   /* 버튼 안쪽 여백 제거 */
  }
  .btn-toggle svg {
    width: 20px;
    height: 20px;
    stroke: #64748B;
  }

/* expanded(기본) = 햄버거 보이기, collapsed = X 보이기 */
.has-sidebar .btn-toggle .icon-hamburger{ display:block; }
.has-sidebar .btn-toggle .icon-close{ display:none; }
.sidebar-collapsed .btn-toggle .icon-hamburger{ display:none; }
.sidebar-collapsed .btn-toggle .icon-close{ display:block; }

/* 2) 검색 필: 두꺼운 민트 보더 + 라이트 글로우, 높이 업 */

/* ========== Search bar spec ========== */
.search-pill{
    /* size */
    width: 400px;
    height: 52px;
  
    /* layout */
    display: grid;
    grid-template-columns: 20px 1fr 55px; /* icon / input / button */
    align-items: center;                   /* 세로 중앙 */
    gap: 10px;
  
    /* 스타일(필요시 유지/수정) */
    background: #fff;
    border: 1px solid #4FD1C5;
    border-radius: 999px;
    padding: 10px 10px 10px 16px;          /* 좌측 약간 여유 */
  }
.search-pill .search-icon{
    width: 20px;
    height: 20px;
    display: block;
    color: #4FD1C5;
}
.search-pill input{
    border: none;
    background: transparent;
    box-shadow: none;
    padding: 0 8px;
  
    /* 텍스트 스펙 */
    font-size: 14px;
    color: #202224;
  }
  /* input focus 시 하이라이트 제거 */
.search-pill input:focus,
.search-pill input:focus-visible{
  outline: none !important;
  box-shadow: none !important;
}

/* 버튼 스펙 */
.search-pill .btn-search{
    width: 55px;
    height: 28px;
    line-height: 28px;     /* 텍스트 수직 중앙 */
    padding: 0;            /* 고정 사이즈 유지 */
    border: none;
    border-radius: 999px;
    background: #4FD1C5;
    color: #fff;
    font-weight: 700;
    display: inline-flex;
    align-items: center;    /* 세로 중앙 */
    justify-content: center;/* 가로 중앙 */
  }

/* 3) 우측 Auth: 색상/구분선 */
/* ========== Auth (로그인/회원가입) ========== */
.auth {
    margin-left: auto;              /* 오른쪽 끝으로 정렬 */
    display: flex;
    align-items: center;
  }
  
  .auth a {
    font-size: 14px;
    font-weight: 600;
    color: #64748B !important;
    text-decoration: none;
  }
.auth .auth-sep{
  display:inline-block; width:1px; height:14px;
  background:#64748B; opacity:.7; margin:0 12px;
}

/* ================= Main ================= */
.content {padding: 0 24px;}

/* ================= Banner ================= */
.dash-banner{
  width:100%;
  height:100px;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 20px;
  /*border: 1px solid #4FD1C5;*/

  /* 배경: 이미지 + 색 오버레이 */
  background: 
    linear-gradient(rgba(59,203,190,0.7), rgba(59,203,190,0.7)), 
    url('./images/banner-bg.png');   /* 배경 이미지 경로 수정 */
  background-size: cover;
  background-position: top;
  background-repeat: no-repeat;
  }
  .dash-img-banner {
    display:flex; 
    justify-content:center; 
    align-items:center;
    height:100px; 
    background:#f9f9f9; 
    cursor:pointer; 
    border-radius: 8px; 
    margin-bottom: 30px; 
    overflow: hidden;}
  .dash-img-banner img {border-radius: 8px; width:100%; }
.image-modal .modal-content{
  /* Bootstrap: display:flex; width:100% → 컨텐츠 크기에 맞게 */
  display: inline-block !important;
  width: auto !important;

  /* 배경/테두리 제거(이미지만 깔끔하게) */
  padding: 0;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;

  /* 화면 안전망 (컨테이너는 내용에 맞춰 줄어들지만, 최대치는 제한) */
  max-width: 90vw;
  max-height: 90vh;

  position: relative; /* 닫기 버튼 위치 기준 */
}
/* 모달 안의 “대상 이미지”를 원본 크기 + 화면에 맞춰 축소 */
.image-modal .modal-content img[data-role="image-modal-target"]{
  display: block;

  /* 원본 크기 우선 */
  width: auto !important;
  height: auto !important;

  /* 단, 화면 밖으로는 나가지 않게 */
  max-width: 90vw !important;
  max-height: 90vh !important;

  margin: 0 auto; /* 가로 중앙 (선택) */
}
.image-modal .modal-content button {
  position:absolute; 
  top: 10px;
  right: 10px;
  width:36px; 
  height:36px;
  border:0; 
  border-radius:50%; 
  background:#fff; 
  color:#111; 
  font-size:22px;
  box-shadow:0 4px 16px rgba(0,0,0,.25); cursor:pointer;
}
.image-modal .modal-content img {
  display: block;
  border-radius: 8px;

  /* 원본 크기 유지 */
  width: auto;
  height: auto;

  /* 단, 화면(viewport)을 넘지 않도록 제약 */
  max-width: 90vw;
  max-height: 90vh;

  margin: 0 auto; /* 가운데 정렬 (선택) */
}

  .dash-img-banner {
    display:flex; justify-content:center; align-items:center;
  height:100px; background:rgba(59,203,190,0.7); cursor:pointer;
  }
  .dash-banner img {max-width:100%; max-height:100%; }
  
  .dash-banner__inner{
    display:flex;
    align-items:center;                  /* 세로 중앙 */
    justify-content:space-between;       /* 좌측: 텍스트 / 우측: 버튼 */
    gap:24px;
    min-height: 96px;                    /* 적정 높이감 */
    padding: 20px 24px;
  }
  
  .dash-banner__copy{
    text-align:left;                     /* 텍스트 좌정렬 */
    color:#ffffff;
  }
  
  .dash-banner__title{
    margin:0 0 6px 0;
    font-size:24px;                      /* spec */
    font-weight:600;                     /* spec */
    line-height:1.2;
    color:#fff;
  }
  
  .dash-banner__subtitle{
    margin:0;
    font-size:16px;                      /* spec */
    font-weight:500;                     /* spec */
    line-height:1.4;
    color:#fff;
    opacity:.95;                         /* 가독성 살짝 강화 */
  }
  
  /* CTA 버튼: 120x40, 화이트 배경, 텍스트 스타일 */
  .dash-banner__cta{
    /* width:120px;  */                        /* spec */
    height:40px;                         /* spec */
    display:inline-flex;
    align-items:center;                  /* 중앙 정렬 */
    justify-content:center;              /* 중앙 정렬 */
    background:#ffffff;                  /* spec */
    color:#202224;
    font-size:16px;                      /* spec */
    font-weight:600;                     /* spec */
    line-height:20px;                    /* spec에 맞춤 높이감 */
    border-radius:4px;
    text-decoration:none;
    padding-left: 15px;
    padding-right: 15px; 
  }
  
  /* Hover(선택) */
  .dash-banner__cta:hover{
    filter: brightness(.98);
  }
  

/* ========== Widgets 3-column Grid ========== */
.widgets { margin-bottom: 20px; }
.widgets-grid{
    display: grid;
    grid-template-columns: 1.3fr 1.3fr 1.3fr 1fr; /* 가운데 카드가 더 넓음 */
    gap: 20px;
}

/* 카드 스타일 (라운드+소프트 그림자) */
.widget-card{
  position: relative; /* ::after용 기준 */
  background:#fff;
  border-radius:8px;
  overflow:hidden;
  box-shadow: 0 0 44px rgba(0,0,0,0.1);
  height: 300px;
  display:flex;              /* ← 추가 */
  flex-direction:column;     /* ← 추가 */
}

/* 그라데이션 오버레이 */
.widget-card::after {
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:16px;   /* 그라데이션 높이 */
  pointer-events:none; /* 클릭 방해 X */
  background:linear-gradient(to top, rgba(255,255,255,1), rgba(255,255,255,0));
}
/* 끝까지 스크롤 시 오버레이 제거 */
.widget-card.scrolled-end::after {
  opacity:0;
  transition:opacity .3s;
}


/* 카드 헤더 */
.widget-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 16px 18px 16px;
  flex:0 0 auto;             /* ← 추가(고정 높이 영역) */
}
.widget-title{
  margin:0; font-size:14px; font-weight:700; color:#202224;
}

/* View All 버튼 */
.btn-viewall{
  display:inline-flex; align-items:center; justify-content:center;
  height:32px; padding:0 12px;
  background:#F9F9FA; color:#6E829F;
  border-radius:8px; text-decoration:none; font-weight:600; font-size:10px;
}

/* 카드 바디  */
.widget-body{ 
  padding:0 16px 18px;
  overflow: scroll; 
  flex:1 1 auto;             /* ← 남은 공간 채우기 */
  min-height:0;              /* ← Chrome에서 자식 스크롤 허용 핵심 */
  overflow:auto;             /* ← 스크롤 필요할 때만 표시 */
  box-sizing:border-box;
  scrollbar-width: thin;
  scrollbar-color: #4FD1C5 transparent;
  /* Firefox 전용 스크롤바 */
  scrollbar-width: thin;
  scrollbar-color: #4FD1C5 transparent;
}

/* WebKit(크롬/엣지/사파리) 스크롤바 */
.widget-body::-webkit-scrollbar{
  width:8px;
}
.widget-body::-webkit-scrollbar-track{
  background: transparent;
}
.widget-body::-webkit-scrollbar-thumb{
  background: #4FD1C5;
  border-radius: 8px;
  background-clip: padding-box;
}
.widget-body::-webkit-scrollbar-thumb:hover{
  background:#35b6ac;
}

/* 리스트 기본 여백 제거(스크롤 공간 절약) */
.price-list{
  margin:0; padding:0;
  list-style:none;
}

/* 최근 업데이트 단가 리스트 */
.price-list{
    list-style:none;
    margin:0;
    padding:4px 0;               /* 위아래 여백 살짝 */
    display:flex;
    flex-direction:column;
    gap:14px;                    /* 항목 간 간격 (디자인 여백) */
  }
  
  .price-item{
    display:flex;
    align-items:center;
    min-height:30px;             
    gap:10px;
    position:relative;
  }
  
  .price-mark{
    width:4px;
    height:100%;
    min-height:30px;
    background:#4FD1C5;          /* 좌측 바 색상 */
    border-radius:2px;
    flex:0 0 4px;                /* 고정 폭 */
  }
  
  .price-name{
    font-size:14px;             
    font-weight:500;            
    color:#202224;
    flex:1;                      /* 이름은 좌측 가변 */
    line-height:30px;            /* 수직 중앙정렬 느낌 */
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  
  /* 우측 배지: 높이 20px, 패딩 0 6px, 폰트 10px */
  .price-badge, .notice-badge{
    height:20px;                 
    display:inline-flex;
    align-items:center;
    padding:0 6px;              
    font-size:12px;             
    color:#474c55;
    background:#F3F4F6;
    border-radius:4px;
    line-height:1;               /* 정확한 높이 매칭 */
    flex:0 0 auto;
  }
  

  .my-table {
    width: 100%;
    border-collapse: collapse;
  }
  
  .my-table th,
  .my-table td {
    border: 1px solid #ECF3FB;
    padding: 14px;
    text-align: left;
    color: #202224;
  }
  
  .my-table th {
    font-weight: 700;
    text-align: center;
    font-size: 14px;
  }

  .my-table td {font-size: 10px;}
  .my-table tbody tr td:first-child{font-size: 12px;}

  .my-table tbody tr td:last-child {
    text-align: center;
  }
  
  .status {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 10px;
    font-weight: 600;
  }
  
  .status.in-progress, .status-blue {
    background: #EEF2FF;
    color: #6366F1;
  }
  
  .status.pending, .status-yellow {
    background: #FFF7ED;
    color: #F59E0B;
  }
  
  .status.cancel,.status-cancel  {
    background: #FEF2F2;
    color: #EF4444;
  }

  .notice-card {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 0 44px rgba(0,0,0,0.1);
    padding: 16px;
    width: 360px;
  }
  
  .notice-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
  }
  
  .notice-header h3 {
    font-size: 16px;
    font-weight: 700;
    color: #202224;
  }
  
  .notice-header .view-all {
    font-size: 14px;
    font-weight: 500;
    color: #94A3B8;  
    text-decoration: none;
  }
  
  .notice-list {
    list-style: none;
    margin: 0;
    padding: 0;
    flex-direction: column;
  }
  
  .notice-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 0;
    border-bottom: 1px solid #ECF3FB;
    gap: 20px;
    min-height: 75px;       /* 최소 높이 */
  }
  
  .notice-list li:last-child {
    border-bottom: none;
  }
  
  .notice-text {
    font-size: 14px;         
    color: #202224;
    flex: 1;
    display: -webkit-box;        /* Flexbox 기반 박스 */
  -webkit-line-clamp: 2;       /* 최대 2줄 */
  -webkit-box-orient: vertical; 
    white-space: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-left:16px;
    text-decoration: none;
  }
  
  .notice-badge {margin-right:16px;}


  /* ===== Promotion ===== */
.promotion-header{
    display:flex; align-items:center; justify-content:space-between;
    margin-bottom:10px; /* 타이틀 ↔ 카드 간격 */
  }
  
  .promotion-title{
    font-size:16px; font-weight:700; color:#212B37;
  }
  
  .promotion-nav{ display:flex; align-items:center; gap:10px; }
  .nav-btn {
    display: flex;
    align-items: center;
    background: #fff;
    border: none;
    border-radius: 4px;
    width:24px;
    height:24px;
    cursor: pointer;
  }
  .prev-btn { left: 10px; }
  .next-btn { right: 10px; }
  
  .nav-btn svg {
    color: #64748B; /* 아이콘 색상 */
  }  
  .nav-btn:disabled{ opacity:.4; cursor:not-allowed; }
  
  .promotion-section {padding:0;}
  .promotion-page{ font-size:12px; color:#6E829F; line-height:1; }
  .promotion-page b{ font-weight:700; }
  .promotion-page span{ font-weight:500; }
  
  /* Viewport & pages */
  .promotion-viewport{ position:relative; }
  .promotion-grid{
    display:grid; 
    grid-template-columns:repeat(6,minmax(0,1fr));
    gap:20px;
    transition: opacity .25s ease, transform .28s ease;
    align-items: stretch;
  }
  .promotion-grid[hidden]{ display:none; }
  
  /* 카드 */
  .promo-card{
    background:#fff; 
    border-radius:8px; 
    overflow:hidden;
    box-shadow: 0 0 44px rgba(0, 0, 0, 0.12);;
    display:flex; 
    flex-direction:column;
    height: 100%;
  }
  .promo-thumb{
    /* 임시 썸네일 영역 */
    background:#e8f7f5;
    height: 150px;
    overflow: hidden;
  }
  .promo-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;   /* 비율 유지하면서 영역 꽉 채움 */
    object-position: top; /* 중앙 기준으로 잘라줌 */
  }
  .promo-meta{ 
    padding:16px; 
    flex:1;  
    display:flex; 
    flex-direction:column; 
    gap:15px; 
  }
  .promo-title{ 
    margin:0; 
    font-size:14px; 
    font-weight:600; 
    color:#202224;
    line-height:1.4;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
  }
  
  .btn-cta{
    background:#4FD1C5; 
    border:none; 
    border-radius:4px; 
    color:#fff;
    height:36px; 
    font-weight:600; 
    font-size:12px;
    margin-top:auto; 
  }
  .btn-cta:hover {background:#4FD1C5;}




  /* ========== Off-canvas for tablet & below ========== */
/* 임계점은 992px (부트스트랩 md/lg 사이). 필요 시 값 조정 */
@media (max-width: 992px){
    /* 그리드 → 한 열, 메인 전체폭 */
    .layout{ grid-template-columns: 1fr !important; }
  
    /* 사이드바를 화면 밖으로 빼 두고 슬라이드로 표시 */
    .sidebar{
      position: fixed;
      inset: 0 auto 0 0;             /* top:0; left:0; bottom:0 */
      width: var(--sidebar-w);
      height: 100vh;
      transform: translateX(-100%);  /* 초기: 화면 밖 */
      transition: transform .28s ease;
      z-index: 1040;                  /* 헤더/콘텐츠 위 */
      box-shadow: 0 16px 44px rgba(0,0,0,.18); /* 떠있는 느낌 */
    }
  
    /* 오픈 상태 */
    .sidebar-open .sidebar{
      transform: translateX(0);
    }
  
    /* 접힘 상태 클래스를 모바일에서는 무시(폭 고정) */
    .sidebar-open.layout.sidebar-collapsed .sidebar{
      width: var(--sidebar-w);        /* 오프캔버스에서는 축소폭 쓰지 않음 */
    }
  
    /* 배경 어둡게 */
    .sidebar-backdrop{
      position: fixed; inset: 0;
      background: rgba(15, 23, 42, .35);
      opacity: 0; pointer-events: none;
      transition: opacity .28s ease;
      z-index: 1030;
    }
    .sidebar-open .sidebar-backdrop{
      opacity: 1; pointer-events: auto;
    }
  
    /* 모바일에서 사이드바 안의 스크롤 */
    .sidebar-inner{ height: 100%; overflow-y: auto; }
  
    /* 상단 토글/검색 배치 보정(선택) */
    .topbar{ padding: 12px 16px; gap: 16px; }

    /* =========================
   Off-canvas open = Expanded
   (≤ 992px 일 때 사이드바 열리면 항상 펼친 스타일)
   ========================= */

   /* 폭은 항상 전체 폭(축소폭 미사용) */
  .sidebar-open .sidebar{
    width: var(--sidebar-w);
  }

  /* 접힘때 숨기던 텍스트/푸터/타이틀 강제 노출 */
  .sidebar-open .sidebar .brand-text,
  .sidebar-open .sidebar .label,
  .sidebar-open .sidebar .nav-title,
  .sidebar-open .sidebar .sidebar-footer{
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    display: initial !important;
    transform: none !important;
  }

  /* nav/푸터 패딩도 펼친 값 적용 */
  .sidebar-open .sidebar .nav,
  .sidebar-open .sidebar .sidebar-footer{
    --nav-x: 24px;
    padding-left: var(--nav-x) !important;
    padding-right: var(--nav-x) !important;
  }

  /* 구분선 보이기 */
  .sidebar-open .sidebar .separator,
  .sidebar-open .sidebar-footer .separator{
    display: block !important;
  }

  /* 링크 버튼을 ‘원형 44x44’로 만들던 접힘 규칙 무시 → 기본(가로형) 유지 */
  .sidebar-open .sidebar .nav-link,
  .sidebar-open .sidebar .nav-nolink{
    width: auto !important;
    height: 44px !important;
    padding: 10px 12px !important;
    margin: 0 !important;
    border-radius: 12px !important;
    justify-content: flex-start !important;
  }

  .sidebar-open .sidebar .nav-link .icon,
  .sidebar-open .sidebar .nav-nolink .icon{
    width: 20px; height: 20px;
    display: inline-grid;
    place-items: center;
  }

  /* 접힘 전용 섹션 점(아이콘) 숨기기 */
  .sidebar-open .sidebar .nav-title-collapsed{
    display: none !important;
  }
  }
  

  /* 반응형: 그리드 열 수 감소 */
  @media (max-width: 1200px){
    .promotion-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  }
  @media (max-width: 992px){
    .promotion-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  }
  @media (max-width: 576px){
    .promotion-grid{ grid-template-columns:1fr; }
  }


  /* Footer Style */
.site-footer {
    margin-top: 50px;
    font-size: 12px;
    color: #64748B;
    line-height: 1.6; /* 줄 간격 조금 여유 */
    text-align: left; 
  }
  .site-footer p a {color: #64748B;} 
  

/* ===== Responsive ===== */
@media (max-width: 1200px){
    .widgets-grid{ grid-template-columns: repeat(2, 1fr); }
    .promo-thumb{ height: 150px; }
}

@media (max-width: 768px){
    .dash-banner__inner{
      flex-direction:column;             /* 버튼을 아래로 */
      align-items:flex-start;            /* 좌측 정렬 유지 */
    }
    .dash-banner__cta{
      margin-top:12px;
    }
    .auth{display:none!important}
    .widgets-grid{ grid-template-columns: 1fr; }
    /*.promo-thumb{ height: 100%; }*/
  }
  
@media (max-width: 992px){
    .search-pill{min-width:0;width:100%}
    }
   





    /* ========== Off-canvas(≤992px) 강제 펼침 스타일 ========== */
@media (max-width: 992px){
    /* 화면 폭은 한 열만 */
    .layout{ grid-template-columns: 1fr !important; }
  
    /* 오프캔버스 사이드바(왼쪽에서 슬라이드) */
    .sidebar{
      position: fixed;
      inset: 0 auto 0 0;          /* top:0; left:0; bottom:0 */
      width: var(--sidebar-w);
      height: 100vh;
      transform: translateX(-100%);
      transition: transform .32s ease;
      z-index: 1040;
      box-shadow: 0 16px 44px rgba(0,0,0,.18);
    }
    .sidebar-open .sidebar{ transform: translateX(0); }
  
    /* 배경 백드롭 */
    .sidebar-backdrop{
      position: fixed; inset: 0;
      background: rgba(15, 23, 42, .35);
      opacity: 0; pointer-events: none;
      transition: opacity .28s ease;
      z-index: 1030;
    }
    .sidebar-open .sidebar-backdrop{ opacity: 1; pointer-events: auto; }
  
    /* 열렸을 때는 항상 '펼침 UI'로 보이게 (접힘 흔적 무시) */
    .sidebar-open .sidebar{
      width: var(--sidebar-w);
    }
    .sidebar-open .sidebar .brand-text,
    .sidebar-open .sidebar .label,
    .sidebar-open .sidebar .nav-title,
    .sidebar-open .sidebar .sidebar-footer{
      opacity: 1 !important; visibility: visible !important;
      pointer-events: auto !important; display: initial !important;
      transform: none !important;
    }
    .sidebar-open .sidebar .nav,
    .sidebar-open .sidebar .sidebar-footer{
      --nav-x: 24px;
      padding-left: var(--nav-x) !important;
      padding-right: var(--nav-x) !important;
    }
    .sidebar-open .sidebar .separator,
    .sidebar-open .sidebar-footer .separator{
      display: block !important;
    }
    .sidebar-open .sidebar .nav-link,
    .sidebar-open .sidebar .nav-nolink{
      width: auto !important; height: 44px !important;
      padding: 10px 12px !important; margin: 0 !important;
      border-radius: 12px !important; justify-content: flex-start !important;
    }
    .sidebar-open .sidebar .nav-title-collapsed{ display:none !important; }
  }
  
  /* ========== 모바일(오프캔버스) 토글 아이콘 우선 규칙 ========== */
  /* 모바일 진입 시: 기본 햄버거 */
  body.mobile-mode .btn-toggle .icon-hamburger { display: block !important; }
  body.mobile-mode .btn-toggle .icon-close     { display: none  !important; }
  /* 모바일에서 사이드바가 열리면: X 표시 */
  body.mobile-mode.sidebar-open .btn-toggle .icon-hamburger { display: none  !important; }
  body.mobile-mode.sidebar-open .btn-toggle .icon-close     { display: block !important; }


  /* === Icon toggle (Desktop) ===================================== */
/* 데스크탑: 펼쳐짐(기본) = X, 접힘 = 햄버거 */
body.has-sidebar:not(.mobile-mode) .btn-toggle .icon-hamburger { display: none; }
body.has-sidebar:not(.mobile-mode) .btn-toggle .icon-close      { display: block; }
body.sidebar-collapsed:not(.mobile-mode) .btn-toggle .icon-hamburger { display: block; }
body.sidebar-collapsed:not(.mobile-mode) .btn-toggle .icon-close      { display: none; }

/* 모바일(off-canvas): 닫힘=햄버거, 열림=X  (이 규칙은 그대로 유지) */
body.mobile-mode .btn-toggle .icon-hamburger { display: block; }
body.mobile-mode.sidebar-open .btn-toggle .icon-hamburger { display: none; }
body.mobile-mode.sidebar-open .btn-toggle .icon-close { display: block; }


/* 모바일/태블릿용 아이콘 버튼 */
.btn-auth-icon{
  width:36px; height:36px; border-radius:99px;
  background:#f3f4f6; display:grid; place-items:center;
  padding: 4px;; color:#6E829F;
}
.btn-auth-icon:hover, .btn-auth-icon:active{ background:#f3f4f6; color:#6E829F; background:#f3f4f6; }
.btn-auth-icon:focus, .btn-auth-icon:active {border: none;}
.btn-auth-icon svg {color:#6E829F}


/* 드롭다운 메뉴 살짝 조정(선택) */
.dropdown-menu{
  border-radius:4px; border:none; box-shadow:0 10px 24px rgba(0,0,0,.08);
  padding:10px 8px;
}
.dropdown-item{ font-size:14px; color: #6B7280; padding:10px 10px;}
.dropdown-item:focus, .dropdown-item:hover {background-color:#f3f4f6; border-radius: 4px;}



/* ===== Subpage Header ===== */
.page-head{
  margin: 8px 0 16px;
  display: flex;
  align-items: center;   /* 세로 중앙 정렬 */
  justify-content: space-between; /* 좌=제목 / 우=breadcrumb */
  gap: 12px;             /* 제목과 breadcrumb 간격 */
}
.page-title{
  margin: 0 0 8px 0;
  font-size: 18px;
  font-weight: 700;
  color: var(--text-main);
}
.page-breadcrumb .breadcrumb{
  margin: 0;
  padding: 0;
  font-size: 12px;
  color: #4FD1C5;
  display: flex;
  align-items: center; /* 세로 가운데 정렬 */
}
.page-breadcrumn .breadcrumb-item {  display: flex; align-items: center;}
.page-breadcrumb .breadcrumb-item a{ color: #4FD1C5; text-decoration: none; }
.page-breadcrumb .breadcrumb-item.active{ color: var(--text-main); }

/* breadcrumb 구분자: 텍스트 '>' 제거하고 SVG 화살표로 표시 */
.page-breadcrumb .breadcrumb-item + .breadcrumb-item::before{
  content: "";
  display: inline-block;
  width: 14px;
  height: 18px;
  margin-right: 5px;
  background-repeat: no-repeat;
  background-size: 14px 14px;
  background-position: center;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='%234FD1C5'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3' /%3E%3C/svg%3E");
}






/* ===== Subpage Body/Card ===== */
.content-section{ margin-bottom: 30px; }

/* 카드 스타일(사이트 톤과 동일) */
.content-card{
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 0 44px rgba(0,0,0,.07);
  overflow: hidden;
  padding: 16px;
}

/* 카드 헤더/바디/푸터 */
.content-card__head{
  display:flex; align-items:center; gap:12px;
  padding: 12px 0;
}
.content-card__title, .content-side p{
  margin:0; font-size:14px; font-weight:700; color:#202224;
}
.content-card__actions button { border-radius: 4px;}
.content-card__actions button .icon svg{width:10px; height:10px;}
.content-card__actions{ margin-left:auto; }

.content-card__body{ padding: 16px 0; }
.content-card__foot{ padding: 12px 16px; }


/* 테이블 기본 */
table {
  width: 100%;
  border-collapse: collapse;
  font-family: 'Pretendard-Regular', system-ui, sans-serif;
  color: #202224;
  font-size: 14px;
}

/* 셀 공통 */
th, td {
  border: 1px solid #ECF3FB;
  padding: 14px;
  text-align: left;
  vertical-align: middle;
}

/* 헤더 */
th {
  background: #F8F9FA;
  font-weight: 600;
  text-align: center;
}


/* 테이블 행 hover */
table tbody tr:hover {
  background-color: #F8F9FA;
}

td {
  font-weight: 500;
  text-align: center;
}

.text-left {text-align: left;}

table tr td a {text-decoration: none; color:#202224; cursor: pointer;}
/* 상태 뱃지 */
.status {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  text-align: center;
}
.table-bidinfo tr:hover{background: transparent;}

.table-bidtotal thead th:nth-child(4),
.table-bid thead th:nth-child(4),
.table-bid thead th:nth-child(5),
.table-bid thead th:nth-child(6),
.table-bid thead th:nth-child(7),
.table-bid thead th:nth-child(8),
.table-bid thead th:nth-child(9) {
  background-color: #FFC658;   /* 진한 배경 */
  color: #fff;                 /* 흰색 글자 */
}

/* tbody (데이터 영역) */
.table-bid tbody td:nth-child(4),
.table-bid tbody td:nth-child(5),
.table-bid tbody td:nth-child(6),
.table-bid tbody td:nth-child(7),
.table-bid tbody td:nth-child(8),
.table-bid tbody td:nth-child(9) {
  background-color: rgba(255, 198, 88, 0.1); /* #FFC658, 10% */
  color: #111827;                            /* 기본 진한 글자 */
}

/* 2) 열 너비 및 정렬 (필요시 조정) */
.table-bid col:nth-child(1){ width:50px; }    /* No */
.table-bid col:nth-child(2){ width:80px; }    /* 식품명 */  
.table-bid col:nth-child(5){ width:80px; }    /* 제품규격 */  
.table-bid col:nth-child(12){ width:50px; }   /* 수정 */

/* 테이블 안 input 스타일 */
.table-bid td input[type="number"],
.table-bid td input[type="text"],
.table-bid td input[type="date"] {
  width: 80px;                /* 고정 너비 */
  min-width: 80px;            /* 줄어들지 않도록 */
  max-width: 80px;            /* 커지지 않도록 */
  box-sizing: border-box;     /* 패딩 포함 계산 */
}

/* 포커스 시에도 하이라이트 제거 */
.table-bid td input:focus {
  outline: none;              /* 외곽선 제거 */
  box-shadow: none;           /* Bootstrap 기본 shadow 제거 */
  border-color: #d1d5db;      /* 기본 border 색상 (회색톤) 유지 */
}

.table-bidtotal tr:hover{
  background: transparent;
}
/* table-bidtotal 내 textarea focus 시 하이라이트 제거 */
.table-bidtotal textarea:focus {
  outline: none;        /* 기본 파란 테두리 제거 */
  box-shadow: none;     /* Bootstrap 기본 shadow 제거 */
  border-color: #d1d5db; /* 평상시와 같은 border 유지 (회색톤) */
}
.table-bidtotal textarea, .table-bidtotal textarea:active, .table-bidtotal textarea:focus{border-color: #DEE7F1;}
.table-bidtotal textarea {height:100px; resize: none;   font-size: 14px; /* 크기 조절 비활성화 */}

/* ===== Pagination (공통 재사용) ===== */
.pager{
  --pg-size: 40px;               /* 버튼 높이 */
  --pg-gap: 12px;                /* 버튼 간격 */
  --pg-radius: 4px;              /* 둥근 정도 */
  --pg-border: #DEE7F1;          /* 테두리색 */
  --pg-active-border: #DEE7F1;   /* 활성 보더 */
  --pg-active-bg: #DEE7F1;       /* 활성 배경(아주 연한 민트) */
  --pg-text: #202224;            /* 기본 글자색 */
  --pg-muted: #6B7280;           /* 비활성/보조색 */
  --pg-bg: #ffffff;              /* 기본 배경 */
  display: flex; justify-content: center;
  margin: 16px 0;
  color: var(--pg-text);
  font-family: 'Pretendard-Regular', system-ui, -apple-system, Segoe UI, Roboto, 'Apple SD Gothic Neo', sans-serif;
  font-size: 14px; font-weight: 600;
}

.pager > ul{
  display: flex; align-items: center; gap: var(--pg-gap);
  list-style: none; margin: 0; padding: 0;
}


/* 버튼 공통 */
.pager button{
  min-width: var(--pg-size);
  height: var(--pg-size);
  padding: 0 12px;
  border: 1px solid var(--pg-border);
  border-radius: var(--pg-radius);
  background: var(--pg-bg);
  color: var(--pg-text);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  cursor: pointer;
  transition: box-shadow .15s ease, border-color .15s ease, background-color .15s ease;
}

/* 포커스 접근성 */
.pager button:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(79,209,197,.25);
  border-color: var(--pg-active-border);
}

/* hover */
.pager button:hover{ border-color: var(--pg-active-border); }

/* 활성 페이지 */
.pager .active > button{
  background: var(--pg-active-bg);
  border-color: var(--pg-active-border);
}

/* 이전/다음 버튼: 아이콘 + 텍스트 가로 중앙 정렬 */
.pager .prev button,
.pager .next button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;              /* 아이콘과 텍스트 간격 */
  white-space: nowrap;   /* 줄바꿈 방지 */
  font-weight: 500;
}


/* 이전/다음 */
.pager .prev button svg,
.pager .next button svg{ display: block;width: 20px; }
.pager .prev.disabled button,

.pager .prev.disabled button,
.pager .next.disabled button,
.pager button:disabled{
  opacity: .45; cursor: not-allowed;
}

/* 좁은 화면: 글자 숨기고 아이콘만(이전/다음) */
@media (max-width: 480px){
  .pager .prev button span,
  .pager .next button span{ display: none; }
  .pager{ --pg-size: 36px; --pg-gap: 8px; font-size: 13px; }
}

/* ===== 모달 ===== */

/* Overlay */
.modal-login {
  display: none;
  /* position: fixed; inset: 0; */
  /* background: rgba(0,0,0,.65); */
/*   z-index: 1050; */
  justify-content: center; align-items: center;
}

/* 박스 */
.modal-content-login {
  width: 600px;
  max-width: 94vw;
  background: #fff;
  border-radius: 8px;
/*   box-shadow: 0 30px 120px rgba(0,0,0,.35), 
              0 8px 24px rgba(0,0,0,.15);
  overflow: hidden;
  animation: modalIn .25s ease-out;
  display: flex;
  flex-direction: column; */
  padding:24px 20px;
}

/* 헤더 */
.modal-header-login {
  display: flex; justify-content: space-between;
  align-items: center;
  border:none;
  /* padding:0; */
  margin-bottom:8px;
}

.modal-icon-login {
  width: 27px;
  height: 27px;
  background-color: rgb(79 209 197 / 10%);
  border-radius: 50%;

  display: flex;              /* flex 컨테이너 */
  align-items: center;        /* 세로 중앙 */
  justify-content: center;    /* 가로 중앙 */
}
.modal-icon-login svg {
  width: 15px; height: 15px;
  color: #4FD1C5;
}

.modal-close-login {
  border: none; background: transparent;
  color: #202224;
  cursor: pointer;
  width: 27px;
  height:27px;
  border-radius: 50%;
}
.modal-close-login:hover { background: #F3F4F6; }

/* 타이틀 */
.modal-title-login {
  padding: 0;
  margin-bottom:8px;
  font-size:16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.modal-title-login h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  color: #202224;
  display: flex;
  align-items: center;
  justify-content: center;
}
.modal-title-login p {font-size:12px; color:#64748B; margin:0;}

/* 구분선 */
.modal-divider {
  border-top: 1px solid rgba(178,184,199,.2);
  margin: 10px 0 18px;
}

/* 바디 */
.modal-body-login {
  padding: 0;
}
/* 폼 */
/* 공통 폼 행 */
.form-row {
  display: flex;
  align-items: center; /* label과 textarea 높이 맞춤 */
  gap: 12px;               /* label과 input 사이 간격 */
  margin-bottom: 10px;
}

/* label */
.form-row label {
  width: 100px;            /* 레이블 고정 폭 */
  font-weight: 500;
  color: #202224;
  flex-shrink: 0;          /* label 폭 줄어들지 않게 */
  display: flex;
  align-items: center;     /* input 높이와 수직 중앙정렬 */
  font-size: 14px;
}

/* input, textarea */
.form-row input,
.form-row textarea,
.form-row select {
  flex: 1;                  /* 남은 공간 모두 차지 */
  padding: 8px 12px;
  border: 1px solid #E2E8F0;
  border-radius: 6px;
  font-size: 14px;
  font-family: inherit;
  color: #202224;
  background-color: #fff;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.content-card__actions select {font-size: 12px; color: #64748B;}
.form-row input:focus::placeholder {color:transparent;}
.form-select:focus {border: 1px solid #E2E8F0; box-shadow: none; font-size: 12px; color: #64748B;}
.for-row input.form-check-input {width: 1.1em;
  height: 1.1em;}

/* 포커스 스타일 */
.form-row input:focus,
.form-row textarea:focus,
.form-row select:focus {
  outline: none;
  border-color: #4FD1C5;
  box-shadow: 0 0 0 2px rgba(79, 209, 197, 0.2);
}
input::placeholder,
textarea::placeholder {
  color: #64748B !important;   
  opacity: 1;       /* 일부 브라우저는 투명도 낮게 적용되므로 강제로 100% */
}
/* focus 시 placeholder 숨기기 */
.form-row input:focus::placeholder,
textarea:focus::placeholder {
  color: transparent;
}

/* textarea 높이 */
.form-row textarea {
  min-height: 200px;
  resize: vertical; /* 사용자 크기 조절 허용 */
  font-size: 12px;
}
.forgotpw {
  color:#4FD1C5;
  text-decoration: underline;
}
.forgotpw:hover {filter: brightness(0.95);}

.tbl-link {background-color: transparent;
  border: none;text-align: left; padding:0;}


/* === 상세 보기 표(style) === */
/* 모달 상세 표 기본 */
.view-table{
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;            /* colgroup 폭 고정에 유리 */
  font-size: 14px;
  color: #202224;
}
.view-table tr:hover {background-color: transparent;}
.view-table th, .view-table td{
  border: 1px solid #ECF3FB;
  padding: 20px;
  vertical-align: middle;
  word-break: break-word;
}
.view-table th {text-align: center;}
.view-table td {text-align:left; color: #64748B;}
.view-table tr.ans-row th {
  background: #EEF2FF;
}
/* 1열(라벨) 고정폭 */
.view-table col.col-key{ width: 145px; }

/* 헤더셀(라벨) 스타일 */
.view-table th{
  background: #F8F9FA;
  font-weight: 600;
  color: #202224;
}
.view-modal-divider {
  border-top: 1px solid rgba(178, 184, 199, .2);
  margin:18px 0;}
  .login-options {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
  }
  .login-options 
  .forgot-link {
    font-size: 0.9rem;
    color: #4FD1C5;
    text-decoration: underline;
  }
  
  .forgot-link:hover {
    text-decoration: underline;
  }
  
  .login-submit {
    text-align: center;
    margin-top: 10px;
  }
  
  .login-submit .btn {
    width: 120px;
  }
  /* 체크박스 공통 스타일 */
  .remember-label {
    display: inline-flex;   /* 가로로 정렬 */
    align-items: center;    /* 세로 가운데 정렬 */
    gap: 10px;              /* 체크박스와 텍스트 간격 */
    font-size: 14px;
    cursor: pointer;
    line-height: 1.4;       /* 줄 간격 살짝 줄여줌 */
    white-space: nowrap;    /* 줄바꿈 방지 */
  }  

/* 체크박스 크기와 색상 */
.remember-label input[type="checkbox"] {
  appearance: none;       /* 기본 브라우저 스타일 제거 */
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border: 1px solid #4FD1C5;
  border-radius: 4px;
  cursor: pointer;
  position: relative;
  padding: 8px;;
}

/* 체크 상태 */
.remember-label input[type="checkbox"]:checked {
  background-color: #4FD1C5;
  border-color: #4FD1C5;
}

.remember-label input[type="checkbox"]:checked::after {
  content: "✓";
  color: #fff;
  font-size: 12px;
  position: absolute;
  left: 2px;
  top: -1px;
  color: white;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6"> <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" /> </svg>");

}

/* 약관 카드 */
.terms-card{
  margin-top:18px;
  padding:14px;
  border:1px solid #DEE7F1;
  border-radius:8px;
}
.terms-card .terms-title{
  font-weight:700;
  color:var(--text-strong);
  margin-bottom:10px;
  letter-spacing:-0.2px;
}
.terms-card .terms-body {
  background:#fff;
  border-radius:10px;
  height:160px;
  /* overflow:auto; */
  line-height:1.6;
  font-size:14px;
  color:#374151;
  padding-right:14px;      /* 글자와 스크롤바 간격 */
  box-sizing:border-box;
  scrollbar-width: thin;
  scrollbar-color: #4FD1C5 transparent;
}

/* 스크롤바 (크롬/사파리/엣지) */
.terms-card .terms-body::-webkit-scrollbar {
  width: 4px;    /* 두께 */
  height: 4px;
}
.terms-card .terms-body::-webkit-scrollbar-track {
  background: transparent;
}
.terms-card .terms-body::-webkit-scrollbar-thumb {
  background:#4FD1C5;
  border-radius: 8px;
  background-clip: content-box;
  border: 2px solid transparent; /* thumb와 글자 사이 여백 */
}
.terms-card .terms-body{ scrollbar-color: #4FD1C5 transparent; scrollbar-width: thin; } /* 파폭 */

/* 약관 동의 라인 */
.agree-row{
  display:flex;
  align-items:center;
  gap:4px;                 /* 체크박스-텍스트 간격 10px */
  margin-top:12px;
  font-size:14px;
}

/* 접근성 보존: 실제 체크박스는 시각적으로 숨기고 커스텀 박스 사용 */
.agree-row input[type="checkbox"]{
  appearance:none; -webkit-appearance:none;
  position:absolute; width:1px; height:1px; margin:-1px; padding:0; border:0;
  clip:rect(0 0 0 0); clip-path: inset(50%); overflow:hidden; ;
}
.agree-row .agree-box{
  width:16px; height:16px;
  border:1px solid #4FD1C5;
  border-radius:4px;
  display:inline-flex; align-items:center; justify-content:center;
  background:#fff;
  position:relative;
}
.agree-row input[type="checkbox"]:checked {
  background-color: #4FD1C5;
  border-color: #4FD1C5;
}

/* 체크 상태 배경/테두리 */
.agree-row input[type="checkbox"]:checked + .agree-box{
  background:#4FD1C5; border-color:#4FD1C5;
}

/* 체크 아이콘은 형제 span의 ::after로 */
.agree-row input[type="checkbox"]:checked + .agree-box::after{
  content:""; position:absolute; inset:0; margin:auto;
  width:12px; height:12px; background-repeat:no-repeat; background-size:12px 12px; background-position:center;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='2.2' stroke='white'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m4.5 12.75 6 6 9-13.5'/%3E%3C/svg%3E");
}

/* 전체 form을 한 줄로 */
#noticeFilterForm {
  display: flex;
  align-items: center;       /* 세로 중앙 정렬 */
  gap: 20px;                 /* 각 요소 사이 간격 */
  flex-wrap: wrap;           /* 화면 좁아지면 줄 바꿈 가능 */
}

/* 각 form-row를 flex 아이템으로 */
#noticeFilterForm .form-row {
  display: flex;
  align-items: center;
  gap: 5px;                  /* label과 input 사이 간격 */
  margin: 0;                 /* 기본 margin 제거 */
}

/* 기간 input 범위 정렬 */
#noticeFilterForm .input-range {
  display: flex;
  align-items: center;
  gap: 5px;                  /* 시작일 ~ 종료일 사이 간격 */
}

/* 레이블 최소 너비 지정 (필요시 조정) */
#noticeFilterForm label {
  width: 30px;
  font-weight: 500;
}

/* 버튼은 height 맞추기 */
#noticeFilterForm .side-form__actions {
  display: flex;
  align-items: center;
  margin: 0;
}
#noticeFilterForm .side-form__actions .btn {
  height: 34px;              /* input과 높이 맞춤 */
}

/* 전체 input placeholder 색상 */
#noticeFilterForm input::placeholder {
  color: #64748B;    /* 원하는 색상으로 변경 */
  opacity: 1;        /* 일부 브라우저에서 opacity 기본값이 0.5이므로 1로 고정 */
}

/* 웹킷 계열 브라우저 */
#noticeFilterForm input::-webkit-input-placeholder {
  color: #64748B;
}

/* 파이어폭스 */
#noticeFilterForm input::-moz-placeholder {
  color: #64748B;
}

/* IE */
#noticeFilterForm input:-ms-input-placeholder {
  color: #64748B;
}

/* Edge */
#noticeFilterForm input::-ms-input-placeholder {
  color: #64748B;
}
/* 검색폼 안 달력 아이콘 색상 변경 (웹킷) */
/* date input 안의 텍스트 */
input[type="date"]::placeholder {
  color: #94A3B8;  /* placeholder 전용 색상 */
}
input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(34%) sepia(13%) saturate(502%) hue-rotate(189deg) brightness(94%) contrast(92%);
  cursor: pointer;
}


#noticeFilterForm input::placeholder {
  color: #64748B;
  opacity: 1;
}
#noticeFilterForm input::-webkit-input-placeholder { color: #64748B; }
#noticeFilterForm input::-moz-placeholder { color: #64748B; }
#noticeFilterForm input:-ms-input-placeholder { color: #64748B; }
#noticeFilterForm input::-ms-input-placeholder { color: #64748B; }


  
/* 푸터 */
.modal-footer {
  border: none;
  display: flex; justify-content: flex-end;
  gap: 10px;
  padding:0;
}
.modal-footer .login-btn {text-align: center;}
.modal-footer-between {
  border: none;
  display: flex;
  justify-content: space-between; /* 좌/우로 나눔 */
  align-items: center;
  padding: 0 10px;
}
.modal-footer-between .footer-left, .modal-footer-between .footer-right {
  display: flex;
  align-items: center;
  gap: 10px; /* 버튼 여러 개일 경우 간격 */
}

.textbtn{ background: transparent; border: none; color:#4FD1C5 ;}
.textbtn svg {width:15px; height:15px;}
.btn {
  border: none; cursor: pointer;
  font-weight: 600;
  font-size:12px;
  border-radius: 4px;
  /* padding: 8px 20px; */
  display: inline-flex;
  align-items: center;
  gap: 6px;     
}

.btn-primary, .btn-primary:active, .btn-primary:focus, .btn-primary:focus-visible{
  background: #4FD1C5; color: #fff;
}
.btn-secondary {
  background: #F3F4F6; color: #475569;
}
.btn-danger {background:#FB4242; color:#fff}
.btn-danger-border, .btn-danger-border:hover{
  color: #FB4242;               /* 글자색 */
  border: 1px solid #FB4242;    /* 테두리 */
  filter: brightness(.95);
}
.btn svg {
  stroke: currentColor;         /* 글자색과 동기화 */
  width: 15px;
}
.btn-primary:hover { background: #4FD1C5; filter: brightness(.95); }
.btn-secondary:hover { background: #E2E8F0; }
.btn-full {
  display: block;
  width: 100%;
  text-align: center;
}
.text-danger {color: #FB4242;   }
.text-warning {color:#FFC658;}

/* 
@keyframes modalIn {
  from {opacity: 0; transform: translateY(-10px);}
  to {opacity: 1; transform: translateY(0);}
}

 */