.subpage__inner{
  max-width: var(--container, 1200px);
}
.case-search{
  margin: 22px auto 34px !important;
  width: min(860px, 94vw);
  max-width: none;

  padding-bottom: 0 !important;
}

.case-search__bar{
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 999px;
  padding: 7px 12px;

  box-shadow: var(--home-shadow-soft, 0 14px 34px rgba(0,0,0,0.34));
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.case-search__select{
  display: none;
}

.case-search__input{
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--home-text, rgba(255,255,255,0.92));
  font-size: 14px;
  padding: 9px 12px;
  outline: none;
  border-radius: 999px;
  transition: background .14s ease;
}
.case-search__input::-webkit-search-cancel-button,
.case-search__input::-webkit-search-decoration,
.case-search__input::-webkit-search-results-button,
.case-search__input::-webkit-search-results-decoration{
  -webkit-appearance: none;
  appearance: none;
  display: none;
}
.case-search__input::-ms-clear,
.case-search__input::-ms-reveal{
  display: none;
  width: 0;
  height: 0;
}

.case-search__input:focus{
  background: rgba(255,255,255,0.03);
}

.case-search__input::placeholder{
  color: rgba(255,255,255,0.45);
}

.case-search__btn{
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border: 0;
  background: transparent !important;
  cursor: pointer;
  display: grid;
  place-items: center;
  color: var(--home-accent, #FFD400);
  border-radius: 0;
  transition: transform .12s ease, color .12s ease;
}

.case-search__btn:hover{
  transform: translateY(-1px);
}

.case-search__btn:focus-visible{
  outline: 2px solid var(--home-accent, #FFD400);
  outline-offset: 3px;
}

.case-search__btn svg{
  width: 26px;
  height: 26px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.case-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 34px 34px;
  align-items: start;
}

.case-card{
  text-decoration: none;
  color: inherit;
  display: block;
  border-radius: var(--home-radius-md, 16px);
  outline: none;
}

.case-card:focus-visible{
  outline: 2px solid var(--home-accent, #FFD400);
  outline-offset: 6px;
}

.case-thumb{
  position: relative;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--home-border, rgba(255,255,255,0.12));
  border-radius: 14px;
  overflow: hidden;
  aspect-ratio: 16/9;
  box-shadow: var(--home-shadow-soft, 0 14px 34px rgba(0,0,0,0.34));
  transition: border-color .12s ease, box-shadow .12s ease;
}

.case-thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1);
  transition: transform .18s ease;
}

.case-card:hover .case-thumb img{
  transform: scale(1.02);
}
.case-card:hover .case-thumb{
  border-color: var(--home-accent, #FFD400);
}

.case-card:hover .case-title{
  color: var(--home-accent, #FFD400);
}
.case-card:focus-visible .case-thumb{
  border-color: var(--home-accent, #FFD400);
}

.case-card:focus-visible .case-title{
  color: var(--home-accent, #FFD400);
}
.case-plus{
  display: none !important;
}

.case-title{
  margin-top: 14px;
  text-align: center;
  font-size: 19px;
  font-weight: 900;
  letter-spacing: .02em;
  line-height: 1.25;
  color: #fff;
  text-shadow: 0 10px 22px rgba(0,0,0,0.35);
  transition: color .12s ease;
}

.case-pager{
  margin-top: 0 !important;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px !important;               

  user-select: none;
  flex-wrap: wrap;
  padding: 26px 0 18px; 
  background: transparent !important;
}

.case-pager .pbtn{
  width: 38px;
  height: 38px;
  border-radius: 9px;

  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(0,0,0,0.30);
  cursor: pointer;

  color: rgba(255,255,255,0.70);
  font-size: 13px;
  font-weight: 800;

  transition: background .12s ease, border-color .12s ease, color .12s ease, transform .12s ease;
}

.case-pager .pbtn:hover{
  border-color: rgba(255,212,0,0.45);
  background: rgba(0,0,0,0.45);
  color: rgba(255,255,255,0.92);
  transform: translateY(-1px);
}

.case-pager .pbtn.is-on{
  background: var(--home-accent, #FFD400);
  border-color: rgba(255,212,0,0.85);
  color: #111;
  font-weight: 900;
  transform: none;
}

.case-pager .navbtn{
  width: 32px;
  height: 32px;
  border-radius: 0;
  border: 0 !important;
  background: transparent !important;
  cursor: pointer;
  color: rgba(255,255,255,0.38);
  font-size: 0;
  line-height: 1;

  display: grid;
  place-items: center;

  transition: background .12s ease, transform .12s ease, border-color .12s ease, color .12s ease;
}

.case-pager .navbtn:hover{
  transform: translateY(-1px);
  color: var(--home-accent, #FFD400);
}

.case-pager .navbtn:disabled{
  opacity: .35;
  cursor: default;
  transform: none;
}
.case-pager .navbtn,
.case-pager .pbtn.navbtn,
#casePager .navbtn,
#casePager .pbtn.navbtn{
  width: auto !important;
  height: auto !important;
  padding: 0 10px !important;

  border: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: none !important;
}
.case-pager .navbtn:hover,
.case-pager .pbtn.navbtn:hover,
#casePager .navbtn:hover,
#casePager .pbtn.navbtn:hover{
  color: var(--home-accent, #FFD400) !important;
}


.case-pager .navbtn::before{
  content: "<";
  display: block;
  width: 1em;
  height: 1em;
  font-size: 22px;
  line-height: 1.3;
  text-align: center;
  transform: translateY(1px);
}
.case-pager .navbtn.prev::before,
.case-pager .navbtn:first-child::before{
  content: "<";
  transform: translate(-1px, 1px);
}
.case-pager .navbtn.next::before,
.case-pager .navbtn:last-child::before,
.case-pager .navbtn:last-child::before,
.case-pager .navbtn:last-of-type::before{
  content: ">";
  /* > 가 오른쪽으로 치우치면 첫 값(-/+)만 조절 */
  transform: translate(1px, 1px);
}
.case-pager .dots,
.case-pager .pbtn.dots{
  color: var(--home-accent, #FFD400) !important;
  opacity: .9;
  width: auto !important;
  min-width: 0 !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 -6px !important;  
  line-height: 1 !important;

  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;

  pointer-events: none;
}


@media (max-width: 1000px){
  .case-grid{ grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px){
  .case-search{ margin: 16px auto 22px !important; }
  .case-search__bar{ padding: 8px 10px; gap: 8px; }
  .case-search__input{ padding: 7px 12px; font-size: 14px; }
  .case-search__btn{ width: 40px; height: 40px; }

  .case-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 12px;
  }

  /* 모바일: 카드 컴팩트 */
  .case-thumb{ border-radius: 12px; }
  .case-title{ font-size: 15.5px; margin-top: 10px; }

  /* 모바일 히어로 조절 코드 (요청 고정 적용) */
  .page-hero{ height: 270px !important; }
  .page-hero .page-hero__title,
  .page-hero .hero-title,
  .page-hero h1{
    font-size: clamp(37px, 8vw, 37px) !important;
  }

  /* 특정 폭(360~601 등)에서 카드가 '잘리는' 현상 방지 */
  .subpage__inner,
  .case-grid,
  .case-card{
    overflow: visible !important;
    height: auto !important;
  }

}

/* 아주 작은 화면에서는 다시 1열 */
@media (max-width: 360px){
  /* 초소형 화면에서도 2열 유지 */
  .case-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .case-title{ font-size: 15px; margin-top: 8px; }
}

@media (prefers-reduced-motion: reduce){
  .case-thumb img,
  .case-search__btn,
  .case-pager .pbtn,
  .case-pager .navbtn{
    transition: none !important;
  }
}

.subpage__inner :where(.case-pager, .pagination, .pager, nav[aria-label*="pagination"], nav[aria-label*="Pagination"]){
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 4px !important;             
  column-gap: 4px !important;
  row-gap: 7px !important;
}

.subpage__inner :where(.case-pager, .pagination, .pager) :where(ul, ol){
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 4px !important;
  padding: 0 !important;
  margin: 0 !important;
  list-style: none !important;
}

/* li/child 기본 여백 제거 (여기서 '… 주변이 벌어짐'이 자주 발생) */
.subpage__inner :where(.case-pager, .pagination, .pager) :where(li){
  margin: 0 !important;
  padding: 0 !important;
}

/* ... (ellipsis) 색/여백: 클래스명이 무엇이든 최대한 잡아주기 */
.subpage__inner :where(.case-pager, .pagination, .pager) :where(
  .dots, .ellipsis, .more, .break, .gap, .separator,
  [class*="dot"], [class*="ellip"], [class*="break"]
){
  color: var(--home-accent, #FFD400) !important; 
  opacity: .9 !important;
  background: transparent !important;
  border: 0 !important;

  /* ... 좌우 벌어짐 강제 축소 */
  padding: 0 !important;
  margin: 0 -6px !important;

  width: auto !important;
  min-width: 0 !important;
  height: auto !important;
  line-height: 1 !important;
}
.subpage__inner :where(.case-pager, .pagination, .pager) li > span{
  color: var(--home-accent, #FFD400) !important;
  opacity: .9 !important;
  padding: 0 !important;
  margin: 0 -6px !important;
  line-height: 1 !important;
}
.subpage__inner :where(.case-pager, .pagination, .pager) :where(a, button).dots,
.subpage__inner :where(.case-pager, .pagination, .pager) :where(a, button).ellipsis,
.subpage__inner :where(.case-pager, .pagination, .pager) :where(a, button)[class*="dot"],
.subpage__inner :where(.case-pager, .pagination, .pager) :where(a, button)[class*="ellip"]{
  color: var(--home-accent, #FFD400) !important;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 -6px !important;
  width: auto !important;
  min-width: 0 !important;
  height: auto !important;
  border-radius: 0 !important;
}

.subpage__inner :where(.case-pager, .pagination, .pager) :where(.pbtn).dots,
.subpage__inner :where(.case-pager, .pagination, .pager) :where(.pbtn).ellipsis,
.subpage__inner :where(.case-pager, .pagination, .pager) :where(.pbtn).more{
  width: auto !important;
  min-width: 0 !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 -6px !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: var(--home-accent, #FFD400) !important;
}

#casePager{
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 7px !important;          
  column-gap: 7px !important;
  row-gap: 10px !important;
}

#casePager > *{ margin: 0 !important; }
#casePager > span{
  color: var(--home-accent, #FFD400) !important;
  opacity: .9 !important;
  padding: 0 !important;
  margin: 0 -2px !important;     
  line-height: 1 !important;
}
#casePager .dots,
#casePager .ellipsis,
#casePager .pbtn.dots,
#casePager .pbtn.ellipsis{
  color: var(--home-accent, #FFD400) !important;
  opacity: .9 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;

  width: auto !important;      
  min-width: 0 !important;
  height: auto !important;

  padding: 0 !important;
  margin: 0 -2px !important;     
  line-height: 1 !important;

  pointer-events: none;
}


#casePager .pbtn:disabled:not(.is-on),
#casePager .pbtn[aria-disabled="true"]:not(.is-on){
  color: var(--home-accent, #FFD400) !important;
  opacity: .9 !important;

  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;

  width: auto !important;      
  min-width: 0 !important;
  height: auto !important;

  padding: 0 !important;
  margin: 0 -2px !important;     
  line-height: 1 !important;

  pointer-events: none;
}

.case-pager .pbtn.is-on,
#casePager .pbtn.is-on{
  width: 36px !important;
  height: 36px !important;
  border-radius: 9px !important;
  padding: 0 !important;
  display: grid !important;
  place-items: center !important;
}
/* SITE DESIGN : HYUNJUNCHO */
/* U0lURSBERVNJR04gSFlVTkpVTkNITw== */

/* ==========================================================
   추가 보강(600px 초과에서도 잘림 방지 + 2열 고정)
   - 다른 공통 CSS에서 desktop 구간에 overflow/height를 건드리는 경우를 강제로 상쇄
   ========================================================== */

/* 모든 폭: 리스트/카드/래퍼가 잘리지 않도록 강제 */
.subpage__inner,
.subpage__content,
.subpage__body,
.page-section,
.section,
.case-section,
.case-area,
.case-wrap,
.case-grid-wrap,
.case-grid,
.case-card{
  overflow: visible !important;
  height: auto !important;
  max-height: none !important;
}

/* 600px 초과에서도 '무조건 2개씩' 유지 (다른 규칙 덮어쓰기) */
@media (min-width: 601px){
  .case-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* 이미지가 "카드 밖으로 잘린다" 느낌이면: 비율 박스 유지 + 내부 정렬 */
.case-thumb{
  height: auto !important;
}