/* ----------------------------------------------------------------
  BHinfo NavBar Fix v2024.05.29.19:43 (모바일&PC 네비 완벽 대응)
  - 상단 네비바 고정시 로고/메뉴 깨짐 현상 완벽 해결
  - 모바일: 높이/폰트/아이콘/좌우정렬/스크롤 침범 방지
  - PC: 기존과 동일 유지
  - body padding-top도 네비 실 높이에 맞춰 자동
  - hamburger 등 추가 고려
------------------------------------------------------------------- */
/* [2024-05-29 22:30] CookieRun 웹폰트 세팅 (훈키/AI) */
@font-face {
    font-family: 'CookieRun';
    src: url('/fonts/BMHANNAPro.woff2') format('woff2'),
         url('/fonts/BMHANNAPro.woff') format('woff'),
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}
/* [2024-05-29 22:45] 아리따돋움 웹폰트 세트(훈키/AI) */
@font-face {
  font-family: 'AritaDotumKR';
  src: url('/fonts/AritaDotumKR-Thin.woff2') format('woff2'),
       url('/fonts/AritaDotumKR-Thin.woff') format('woff'),
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'AritaDotumKR';
  src: url('/fonts/AritaDotumKR-Light.woff2') format('woff2'),
       url('/fonts/AritaDotumKR-Light.woff') format('woff'),
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'AritaDotumKR';
  src: url('/fonts/AritaDotumKR-Medium.woff2') format('woff2'),
       url('/fonts/AritaDotumKR-Medium.woff') format('woff'),
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'AritaDotumKR';
  src: url('/fonts/AritaDotumKR-SemiBold.woff2') format('woff2'),
       url('/fonts/AritaDotumKR-SemiBold.woff') format('woff'),
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'AritaDotumKR';
  src: url('/fonts/AritaDotumKR-Bold.woff2') format('woff2'),
       url('/fonts/AritaDotumKR-Bold.woff') format('woff'),
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ===== 상단 네비바 고정 & 반응형 레이아웃 ===== */
.site-navbar-fixed {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  z-index: 11000;
  background: #fff;
  box-shadow: 0 3px 18px rgba(30,60,110,0.08);
  transition: box-shadow 0.22s, background 0.16s;
}
.site-navbar-fixed nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 66px;
  padding: 0 24px 0 18px !important;
  /* 위아래는 따로! */
  box-sizing: border-box;
}
/* 네비 로고 높이 자동 대응 (PC/모바일) */
.site-navbar-fixed nav img {
  max-height: 42px;
  height: auto;
  width: auto;
  margin-top: 2px;
  margin-bottom: 2px;
}
/* 네비 메뉴 영역 */
.site-navbar-fixed .text-lg {
  display: flex;
  align-items: center;
}
.site-navbar-fixed a {
  font-size: 1.05rem;
  font-weight: 600;
  padding: 7px 14px;
  border-radius: 11px;
  color: #184089;
  transition: background 0.19s, color 0.19s;
  text-decoration: none;
  margin-left: 1px;
}
.site-navbar-fixed a:hover {
  background: #eaf1ff;
  color: #2563eb;
}
/* 햄버거버튼(모바일 전용) 정렬 */
.site-navbar-fixed #hamburgerbtn {
  display: flex;
  align-items: center;
  height: 44px;
}
/* -----------------------------------------------------------
  [Dream] 모바일 햄버거 메뉴 오버레이 v2024.05.29.20:25 (훈키/AI)
  - 모바일: 햄버거 클릭 시 전체 검정 오버레이+중앙 메뉴
  - PC: 기존 네비와 동일, 오버레이 아예 안 보임
------------------------------------------------------------ */

/* 모바일 햄버거 메뉴 오버레이 (body에 하나만, id=mobileMenuOverlay) */
.mobile-menu-overlay {
  display: none;
  position: fixed;
  z-index: 99999;
  left: 0; top: 0; width: 100vw; height: 100vh;
  background: rgba(15,15,18,0.96);
  transition: opacity 0.23s;
  opacity: 0;
  pointer-events: none;
}
.mobile-menu-overlay.active {
  display: flex;
  opacity: 1;
  pointer-events: auto;
  align-items: center;
  justify-content: center;
  animation: fadeInMenu 0.32s;
}
@keyframes fadeInMenu {
  0% { opacity: 0; }
  100% { opacity: 1; }
}
/* 메뉴 컨텐츠 세로 중앙 */
.mobile-menu-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: right;      /* 세로 중앙! */
  min-width: 62vw;
  max-height: 84vh;            /* 높이 제한 (소셜까지 포함) */
  overflow-y: auto;            /* 넘치면 스크롤 */
  padding: 32px 0 54px 0;      /* 위/아래 여유! */
  background: none;
  box-sizing: border-box;
}
/* 메뉴 항목 (텍스트) */
.mobile-menu-content a {
  color: #fff;
  font-size: 2.05rem;
  font-weight: 700;
  margin: 18px 0;
  text-align: center;
  letter-spacing: -0.02em;
  text-decoration: none;
  transition: color 0.17s;
  border-radius: 12px;
  padding: 7px 30px 7px 30px;
}
.mobile-menu-content a:hover {
  background: #233b87;
  color: #53b2ff;
}
/* 닫기(X) 버튼 */
.mobile-menu-close {
  position: absolute;
  top: 26px;
  right: 36px;
  font-size: 2.9rem;
  font-weight: 800;
  color: #fff;
  cursor: pointer;
  z-index: 2;
  opacity: 0.74;
  transition: opacity 0.13s, color 0.13s;
}
.mobile-menu-close:hover { opacity: 1; color: #ff5555; }

/* ----------- 모바일(650px 이하) ------------ */

@media (max-width: 650px) {
  /* PC 메뉴/소셜 숨김, 햄버거만 보임 */
  .site-navbar-fixed nav .text-lg, 
  .site-navbar-fixed .flex-1,     
  .site-navbar-fixed #desktopMenu { display: flex !important; padding: 10px 0 10px 0;} 
  .site-navbar-fixed #hiddenMenu { display: none !important; } 
  
  .site-navbar-fixed #hamburgerbtn { display: flex !important; }
  .mobile-menu-overlay { display: flex !important; }
 
}
/* PC에서는 오버레이 숨김 */
@media (min-width: 651px) {
  .mobile-menu-overlay { display: none !important; }
}
/* 모바일 오버레이 내 소셜아이콘 (2024-05-29 21:05, Hoonki/AI) */
.mobile-social-area {
  display: flex;
  justify-content: center;
  margin-top: 18px;
  gap: 23px;
}
.mobile-social-icon {
  width: 38px; height: 38px;
  border-radius: 10px;
  box-shadow: 0 1px 7px #0002;
  background: #fff;
  transition: box-shadow 0.19s, transform 0.15s;
  margin: 0 3px;
}
.mobile-social-icon:hover {
  box-shadow: 0 4px 22px #2463eb22;
  transform: scale(1.15);
}

/* ----------- 모바일(650px 이하) ------------ */
@media (max-width: 650px) {
  .site-navbar-fixed nav {
    min-height: 49px;
    padding: 0 7px !important;
    /* 모바일에선 더 얇게, 좌우 여백 작게 */
  }
  .site-navbar-fixed nav img {
    max-height: 34px;
    margin: 0;
  }
  .site-navbar-fixed .text-lg a {
    font-size: 0.93rem;
    padding: 7px 7px;
    margin-right: 2px;
  }
  /* 햄버거 높이/폭/터치 */
  .site-navbar-fixed #hamburgerbtn {
    height: 38px;
    min-width: 38px;
  }
  /* 메뉴 감추기/펼치기 등은 js에서 처리, 스타일 충돌만 방지 */
}

/* ----------- 바디 패딩 자동화 ----------- */
/* 네비 고정 때문에 가려지는 현상 방지 (PC/모바일 둘 다 적용) */
body {
  padding-top: 72px !important;  /* 네비 실 높이 */
}
@media (max-width: 650px) {
  body {
    padding-top: 51px !important;  /* 모바일 네비 높이 */
  }
}


/* ======== 메인 슬라이드(타이틀/서브) ======== */
.big-blue {
  font-size: 5rem !important;
  font-weight: bold !important;
  color: #1da1f2 !important;
  line-height: 1.1 !important;
}
.white-bold {
  color: #fff !important;
  font-weight: bold !important;
  font-size: 2.2rem !important;
  text-shadow: 2px 2px 8px #0007 !important;
}
.s-fade-txt {
  position: absolute;
  z-index: 2;
  min-width: 300px;
  max-width: 90vw;
  width: auto;
}
@media (max-width: 768px) {
  .big-blue { font-size: 3.0rem !important; }
  .white-bold { font-size: 1.5rem !important; }
}

/* ======== About 페이지 (배경/오시는 길) ======== */
/* ===== Markdown 스타일 커스텀 (About 전용) ===== */

/* --- 구분선 */
.about-page-bg hr, .about-page-bg .prose hr {
  border: none;
  border-top: 2.5px dashed #1976d2;
  margin: 2.2rem 0;
  opacity: 0.36;
}

/* ##, ### 등 h2~h4 섹션타이틀 */
.about-page-bg h2, .about-page-bg h3, .about-page-bg h4 {
  font-weight: bold;
  color: #16347a;
  margin-top: 2.7rem;
  margin-bottom: 1.3rem;
  letter-spacing: -0.01em;
  position: relative;
  padding-left: 38px;
}
.about-page-bg h2::before, .about-page-bg h3::before {
  /* 파란 불릿 또는 아이콘 */
  color: #7976d2;
  font-size: 1.08em;
  position: absolute;
  left: 0; top: 2px;
  opacity: 0.90;
}
.about-page-bg h4::before {
  content: "»";
  color: #a878fe;
  font-size: 1.05em;
  position: absolute;
  left: 0; top: 3px;
  opacity: 0.82;
}

/* * - 리스트 */
.about-page-bg ul > li, .about-page-bg .prose ul > li {
  position: relative;
  padding-left: 28px;
  margin-bottom: 0.25em;
}
.about-page-bg ul > li::before, .about-page-bg .prose ul > li::before {

  color: #1976d2;
  font-size: 1.1em;
  position: absolute;
  left: 0; top: 3px;
  font-weight: bold;
}

/* --- 블록 인용문(콜아웃, 연락처 등) */
.about-page-bg blockquote, .about-page-bg .prose blockquote {
  background: linear-gradient(90deg,#e9f1fd 80%,#f2f6fc 100%);
  border-left: 5px solid #2563eb;
  color: #12355a;
  font-size: 1.15em;
  font-style: normal;
  margin: 2.2em 0 1.2em 0;
  padding: 1.25em 1.2em 1.15em 2.3em;
  border-radius: 1.2em;
  position: relative;
}
.about-page-bg blockquote::before {
  font-size: 1.3em;
  position: absolute;
  left: 0.7em;
  top: 0.92em;
  opacity: 0.7;
}
.about-page-bg blockquote strong { color: #2878fe; font-weight: 700; }

.about-page-bg blockquote a { color: #1966c5; text-decoration: underline; }

/* > 인용문 스타일 (Markdown에서 '>>') */
.about-page-bg blockquote > p {
  margin: 0;
}

/* 강조 텍스트 */
.about-page-bg strong, .about-page-bg b {
  color: #1838a5;
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* 연락처/이메일 강조 (필요시) */
.about-page-bg .prose a[href^="mailto:"],
.about-page-bg .prose a[href^="tel:"] {
  color: #db2517;
  font-weight: bold;
  text-decoration: underline;
}

/* ===== 타이핑 효과 (훈키 그라데이션 버전) ===== */
.typing-title {
  font-family: 'CookieRun', '맑은 고딕', sans-serif;     /* 오빠 폰트 우선 */
  font-size: 4.3rem;
  font-weight: 900;
  letter-spacing: 0.01em;
  margin-bottom: 36px;
  text-align: center;
  padding-top: 30px;
  /* ---- 그라데이션 텍스트 ---- */
  background: linear-gradient(90deg, #1947E5 5%, #1567ef 60%, #28cdfb 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;      /* 표준 */
  color: transparent;         /* 혹시 몰라서 fallback */
  /* ---- 살짝 그림자/입체감 ---- */
  text-shadow: 0 1.5px 12px #1a3471a6;
}

/* 타이핑 커서와 텍스트 그라데이션 적용 */
#typing-text {
  font-family: 'CookieRun', '맑은 고딕', sans-serif;
  font-size: inherit;
  font-weight: inherit;
  /* ---- 동일 그라데이션 적용 ---- */
  background: linear-gradient(90deg, #ff47E5 5%, #15ffef 60%, #28cdfb 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  /* ---- 커서 효과 ---- */
  border-right: 2.5px solid #1976d2;
  padding-right: 8px;
  animation: blink-cursor .8s steps(1) infinite;
  /* ---- 살짝 입체감 ---- */
  text-shadow: 0 1.5px 12px #1a3471a6;
}

/* 커서 깜빡임 애니메이션 (공통) */
@keyframes blink-cursor {
  0%, 100% { border-color: #1976d2; }
  50% { border-color: transparent; }
}

/* ---- 모바일 반응형 ---- */
@media (max-width: 650px) {
  .typing-title {
    font-size: 2.1rem !important;
    padding-top: 10px !important;
    margin-bottom: 20px !important;
    line-height: 1.13 !important;
    word-break: keep-all;
  }
}

.about-page-bg {
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  width: 100%;
  padding: 0;
}
.about-page-bg::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background: url('/images/about-bg.avif') center center/cover no-repeat !important;
  opacity: 0.1 !important;
  z-index: 0 !important;
  pointer-events: none !important;
}
.about-page-bg > * {
  position: relative !important;
  z-index: 1 !important;
}
@media (min-width: 1024px) {
  .address-floating {
    position: absolute;
    top: 220px;
    right: 80px;
    width: 320px;
    background: rgba(255,255,255,0.9);
    border-radius: 16px;
    box-shadow: 0 4px 24px #0074b85f;
    border: 1.5px solid #1da1f2;
    z-index: 10;
    padding: 22px 24px 18px 24px;
    font-size: 1.0rem;
  }
}
@media (max-width: 1023px) {
  .address-floating {
    position: static !important;
    margin: 20px auto 0 auto;
    display: block;
    width: 95%;
    max-width: 370px;
    box-shadow: 0 2px 16px #0001;
    background: #f6f8fa;
    border-radius: 10px;
    padding: 12px 10px;
  }
}

@media (max-width: 650px) {
  /* 상단 h1 타이틀(페이지 제목) 크기 줄이기 */
  .about-page-bg .title,
  .title.text-3xl {
    font-size: 1.35rem !important;  /* ★ 모바일에서 적당히 */
    line-height: 1.28 !important;
    margin-bottom: 0.7rem !important;
    word-break: keep-all;
    letter-spacing: -0.01em;
    padding-top: 60px;
  }
}
/* ===== custom.css - v2024.05.23.1 ===== */
/*섹션 배경*/
.product-section-bg {
  background: #f7f8fa;
  padding: 44px 0 44px 0;
  border-radius: 0; /* 전체 사각, 원하면 16px 정도만 */
}

/* 메인 타이틀 */
.main-title {
  font-size: 2.6rem;
  font-weight: 800;
  color: #17409B;
  margin-bottom: 18px;
  letter-spacing: 0.01em;
  text-align: center;
  text-shadow: 0 3px 12px #bdd3fb3c;
  padding-top: 14px;
  padding-bottom: 8px;
  border-bottom: 4px solid #1683fd2c;
}

/* 섹션 타이틀 */
.section-title {
  font-size: 1.45rem;
  font-weight: bold;
  color: #333;
  margin: 34px 0 12px 15px;
  border-left: 6px solid #2563eb;
  padding-left: 12px;
}

/* 제품 리스트 전체 래퍼 (한줄에 3개, 줄바꿈) */
.product-card-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 24px;
  padding: 0 0 40px 0;
  list-style: none;
  margin: 0;
}

/* 개별 카드 디자인 */
.product-card {
  background: #fff;
  border-radius: 24px;
  box-shadow: 0 3px 18px rgba(60,110,180,0.10);
  overflow: hidden;
  padding: 22px 18px 15px 18px;
  flex: 1 1 280px;
  max-width: 325px;
  min-width: 270px;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 14px;
  min-height: 325px;
  position: relative;
  transition: box-shadow 0.18s;
}
.product-card:hover {
  box-shadow: 0 6px 24px rgba(36,99,235,0.13);
}

/* 제품 썸네일 */
.thumb-img {
  max-width: 190px;
  max-height: 140px;
  border-radius: 16px;
  margin-bottom: 12px;
  box-shadow: 0 2px 6px rgba(50,50,80,0.06);
}

/* 제품명 */
.product-name {
  font-size: 1.12rem;
  font-weight: 700;
  color: #184089;
  text-align: center;
  margin: 5px 0 10px 0;
  letter-spacing: 0.5px;
  word-break: keep-all;
}

/* 사양리스트 (3줄만 리스트에) */
.product-spec {
  padding-left: 16px;
  color: #313150;
  text-align: left;
  line-height: 1.5;
  word-break: keep-all;
  min-height: 50px;
  font-size: 0.95rem; /* 더 작게 */
  margin: 0 0 7px 0;
  max-height: none;   /* 모달에서는 무제한 */
  overflow: hidden;
}

/* 자세히 버튼 */
.detail-btn {
  background: #2563eb;
  color: #fff;
  border: none;
  border-radius: 18px;
  font-size: 1.03rem;
  padding: 7px 24px;
  margin-top: 9px;
  font-weight: 500;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(36,99,235,0.05);
  transition: background 0.18s;
  margin-bottom: 0;
}
.detail-btn:hover { background: #17409b; }

/* ====== Modal ====== */
.modal-bg {
  position: fixed;
  left:0; top:0; width:100vw; height:100vh;
  z-index: 20000;
  background: rgba(0,0,0,0.35);
  display: flex;
  align-items: center;
  justify-content: center;
}
.modal-content {
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 10px 34px rgba(36,99,235,0.12);
  padding: 32px 30px 22px 30px;
  min-width: 330px;
  max-width: 99vw;
  min-height: 220px;
  /* 원래: max-height: 92vh; → 더 키우거나 없애기 */
  max-height: none !important; 
  overflow-y: auto;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.modal-close {
  position: absolute;
  top: 13px;
  right: 20px;
  font-size: 2rem;
  color: #888;
  cursor: pointer;
  z-index: 2;
  transition: color 0.12s;
}
.modal-close:hover { color: #2463eb; }
.thumb-img-modal {
  width: 94%;
   max-height: 250px;
  margin: 16px 0 20px 0;
  border-radius: 16px;
  box-shadow: 0 2px 8px rgba(36,99,235,0.08);
}
@media (max-width: 992px) {
  .product-card-list { gap: 14px; }
  .product-card { min-width: 45vw; max-width: 98vw; }
}
@media (max-width: 650px) {
  .product-card-list { flex-direction: column; gap: 7px; }
  .product-card { min-width: 90vw; max-width: 99vw; }
  .main-title { font-size: 1.7rem;
                  padding-top: 100px; }
  .section-title { font-size: 1.08rem; }
}

/* ====== Main strip ====== */
.strip-products-grid {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 2rem;
margin-top: 2rem;
  width: 100%;
  padding: 16px 10px 10px 10px;
}
.strip-row {
  display: flex;
  gap: 16px;
  justify-content: center;
}
.strip-card {
  width: 210px;
  background: #fff;
  border-radius: 1rem;
  box-shadow: 0 4px 20px rgba(0,0,0,.09);
  padding: 16px 10px 10px 10px;
  text-align: center;
  position: relative;
  transition: transform 0.22s cubic-bezier(.22,1,.36,1);
}
.strip-card:hover {
  transform: translateY(-8px) scale(1.05) rotate(-1deg);
  box-shadow: 0 12px 32px rgba(60,110,255,.13);
}
.strip-title {
  font-size: 1.1rem;
  font-weight: 700;
  margin-top: 8px;
}
.strip-card img {
  width: 90%;
  max-height: 135px;
  object-fit: contain;
  border-radius: 0.7rem;
  box-shadow: 0 2px 12px rgba(50,50,50,.10);
  background: #f3f7fc;
}
@media (max-width: 767px){
  .strip-row {gap:10px;}
  .strip-card {width: 46vw;}
}



/* -------------------------------------------------------------------------
 * Dream 포트폴리오 그리드/카드 커스텀 스타일 (2024-05-27, Hoonki/AI)
 * 적용 위치: /static/css/custom.css
 * ------------------------------------------------------------------------- */

/* [공통] 포트폴리오 카드 그리드 영역 - 항상 grid, 한 줄에 3개(PC) */
.portfolio-grid {
  display: grid;
  grid-template-columns: 1fr;      /* 기본: 1개 (모바일) */
  gap: 54px;                       /* 카드 간격 */
  margin-bottom: 44px;
  padding-bottom: 22px;
  justify-items: center;           /* 각 카드 중앙 정렬 */
}

/* [반응형] sm(640px~)에서는 2개, md(768px~)부터 3개 */
@media (min-width: 640px) {
  .portfolio-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 768px) {
  .portfolio-grid { grid-template-columns: repeat(3, 1fr); }
}
/* [반응형] xl(1280px~)에서 4개 */
@media (min-width: 1280px) {
  .portfolio-grid { grid-template-columns: repeat(4, 1fr); }
}


/* 카드 디자인 */
.portfolio-card {
  border-radius: 28px;
  background: #fff;
  box-shadow: 0 8px 32px 0 #d0e5ff50, 0 1.5px 8px 0 #b9c7d81a;
  margin-bottom: 10px;
  border: 1.5px solid #ecf2fa;
  transition: box-shadow 0.28s, transform 0.2s;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 220px;
  width: 80%;
  min-width: 260px;
  max-width: 430px;
}
.portfolio-card:hover {
  box-shadow: 0 18px 54px 0 #aac7f988, 0 2px 16px 0 #b9c7d82a;
  transform: translateY(-10px) scale(1.045);
  border: 1.5px solid #ff0000;
  z-index: 3;
}

/* 카드 hover시 하단까지 동일 배경 */
.portfolio-card:hover,
.portfolio-card:hover .card-text-area {
  background: #f7f8fa;
}
/* 카드 내부 여백, 타이틀 */
.portfolio-card .p-6, .portfolio-card .p-5 {
  padding: 1.5rem 1.2rem 1.1rem 1.2rem;
}
.portfolio-card h2 {
  font-size: 1.16rem;
  font-weight: 800;
  margin-bottom: 0.5rem;
  color: #000;
  letter-spacing: 0.01em;
}

/* 상세 상단 title */



/* 대표 이미지 라운드/그림자/사이즈 */
.portfolio-card img {
  border-radius: 24px 24px 0 0;
  box-shadow: 0 2px 18px #aac7f914;
  background: #f7f8fa;
  width: 100%;
  height: 12rem;
  object-fit: cover;
  display: block;
}

/* No Image 카드 높이 맞춤 */
.portfolio-card .no-image {
  width: 100%;
  height: 12rem;
  background: #f7f8fa;
  color: #aab1b7;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  border-radius: 24px 24px 0 0;
}

/* 제품 링크 버튼 스타일 */
.portfolio-card a.product-link {
  display: inline-block;
  background: #e4eeff;
  color: #1756d6;
  font-size: 0.92rem;
  font-weight: 600;
  padding: 0.34rem 1.05rem;
  margin: 0 5px 5px 0;
  border-radius: 999px;
  text-decoration: none;
  transition: background 0.18s, color 0.18s;
}
.portfolio-card a.product-link:hover {
  background: #cfe4ff;
  color: #093c8b;
}

/* 날짜 표시 */
.portfolio-card .date {
  color: #8e97a3;
  font-size: 0.86rem;
  margin-top: auto;
  margin-bottom: 4px;
  font-family: 'Consolas', 'Menlo', monospace;
}

/* 카드 내용 영역 배경, hover 효과 */
.card-text-area { background: #fff; transition: background 0.22s; }
.portfolio-card:hover .card-text-area { background: #f7f8fa; }

/* 모바일(650px 이하): 카드 간격, 최대폭 확장 */
@media (max-width: 650px) {
  .portfolio-grid { gap: 18px; }
  .portfolio-card { width: 98vw; min-width: 80vw; max-width: 82vw; }
}

/* 상세 패널 (모달아님, 인라인 블록) */
/* [2024-05-30 01:33] Dream-style 상세: 네비/타이틀 아래에, 리스트를 밀면서 등장 (오버레이X) */
/* ============= 포트폴리오 인라인 상세 패널 ============= */
.portfolio-detail-panel {
  width: 100%;               /* 반응형 전체폭(가장 중요) */
  max-width: 100vw;          /* 최대 폭 제한 (데스크탑 기준) */
  margin: 0px auto 32px auto; /* 위아래 여백: 네비-타이틀-상세-리스트 구분감 */
  /*background: linear-gradient(135deg, #f7f8fa 40%, #e3e9f8 100%);*/
  /* ↑ 그라데이션: 밝은 블루-민트톤(고급, 튀지 않음) */
  /*border-radius: 10px;         /* 라운드 효과 (각진 느낌이면 0으로 변경) */
  /*border: 3px solid #c8c8c8;   /* 미디엄 블루 테두리 */
  /*box-shadow: 0 6px 44px #93c2f82c, 0 1px 8px #1b2f5018;
  /* ↑ 은은한 그림자, 분리감 강조 */
  padding: 14px 56px 42px 56px; /* 내부 여백(상,우,하,좌) */
  position: static;            /* 흐름 그대로(오버레이X, 리스트를 아래로 밀림) */
  z-index: 3;                  /* 여러 패널이 겹칠 때 우선순위 */
  min-height: 70vh;           /* 내용 적을 때도 충분히 보이게 */
  animation: fadeInup 0.35s;   /* 등장시 자연스럽게 위로 뜨는 효과 */
  overflow-y: auto;            /* 상세 내용이 많으면 내부만 스크롤 */
  max-height: 85vh;            /* 전체 화면 높이의 80%까지만 커지고, 내부 스크롤 */
}

/* ===== 데스크탑→모바일 점진적 반응형 ===== */
@media (max-width: 650px) {
  .portfolio-detail-panel {
    max-width: 98vw;
    padding: 10px 7px 20px 7px;
    border-radius: 10px;
    margin-top: 0px;   /* 네비 높이+타이틀 만큼만 */
    max-height: 75vh;
  }
}

/* ===== 타이틀/날짜(상세 내부 텍스트 강조) ===== */
.portfolio-detail-panel h2 {
  font-size: 2.1rem;         /* 크고 강하게 */
  font-weight: 700;
  color: #000;            /* 블루 강조 */
  margin-bottom: 20px;
  letter-spacing: 0.01em;
  text-align: center;
  text-shadow: 0 2px 12px #d9eafcbb;
  padding-top: 0px;
}
.portfolio-detail-panel .date {
  font-size: 1.05rem;
  color: #5e9eff;
  margin-top: 14px;
  margin-bottom: 2px;
  text-align: center;
  font-family: 'Consolas','Menlo',monospace;
}

/* ===== fadeInUp 애니메이션: 상세 등장시 부드럽게 ===== */
@keyframes fadeInUp {
  0% { opacity: 0; transform: translateY(70px);}
  100% { opacity: 1; transform: translateY(0);}
}


/* [2024-05-30 00:00] 동영상 썸네일+재생버튼 오버레이 (훈키/AI) */
.video-thumb-wrap {
  position: relative;
  display: inline-block;
  width: 94%;
  border-radius: 18px;
  margin-bottom: 18px;
  overflow: hidden;
  cursor: pointer;
  background: #000;
}
.video-thumb {
  display: block;
  width: 100%;
  border-radius: 18px;
}
.video-play-btn {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 64px; height: 64px;
  background: rgba(32,32,32,0.48);
  border-radius: 50%;
  display: flex; justify-content: center; align-items: center;
  z-index: 1;
  transition: background 0.17s;
}
.video-play-btn::before {
  content: "";
  display: block;
  width: 0; height: 0;
  border-left: 28px solid #fff;
  border-top: 16px solid transparent;
  border-bottom: 16px solid transparent;
  margin-left: 7px;
}
.video-thumb-wrap:hover .video-play-btn {
  background: #2563ebcc;
}

/* =================== BHINFO FOOTER 스타일 =================== */
/* 메인 딥네이비 배경+흰색 폰트 (전문성 강조) */
.site-footer {
  background: #22335c;      /* 딥네이비 메인배경 */
  color: #fff;              /* 기본 텍스트 화이트 */
  padding: 40px 0 30px 0;
  width: 100%;
  box-shadow: 0 0 12px 0 rgba(34,51,92,.09);
  letter-spacing: 0.01em;
  position: relative;
}

/* ====== 하단 메뉴 (Home, Call, Email 등) ====== */
.footer-menu-row {
  display: flex;
  justify-content: flex-end;  /* 우측정렬 */
  gap: 2.2rem;
  margin-bottom: 0.5rem;
  margin-right: 2.3vw;
  padding-bottom: 0.3rem;
  align-items: flex-start;
}
.footer-menu-link {
  color: #8bb5ff;
  font-size: 1.13rem;
  font-weight: 500;
  transition: color 0.17s;
  text-decoration: none;
}
.footer-menu-link:hover {
  color: #2563eb;
  text-decoration: underline;
}

/* PC에서는 이메일만 보임, 모바일에서는 전화만 보임 */
.footer-email-pc { display: none; }
.footer-call-mobile { display: block; }

.footer-email-pc:hover {
  background: #233b87;
  color: #53b2ff;
}
@media (min-width: 640px) {
  .footer-email-pc { display: inline-block; }
  .footer-call-mobile { display: none; }

  .footer-call-mobile:hover {
  background: #233b87;
  color: #53b2ff;
  }
}
/* ====== 업체정보 ====== */
.footer-container {
  max-width: 540px;
  margin: 0 auto;
  text-align: center;
  padding-bottom: 1.5rem;
}
.footer-name {
  font-size: 2.1rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 1rem;
  margin-top: 0.2rem;
  letter-spacing: 0.04em;
}
.footer-address, .footer-bizno, .footer-tel {
  font-size: 1rem;
  color: #c7d4e9;
  margin-bottom: 3px;
  font-weight: 400;
}
.footer-tel a {
  color: #8bb5ff;
  font-weight: 600;
  text-decoration: none;
  transition: color 0.15s;
}
.footer-tel a:hover {
  color: #2563eb; /* 브랜드 파란색 */
  text-decoration: underline;
}
.footer-copy {
  margin-top: 22px;
  font-size: 0.97rem;
  color: #8bb5ff;
  opacity: 0.8;
  font-weight: 400;
}

/* ====== 반응형 모바일 ====== */
@media (max-width: 650px) {
  .footer-menu-row {
    margin-bottom: 0.5rem;
    padding-bottom: 0.3rem;
    gap: 1.1rem;
    margin-right: 2vw;
    justify-content: flex-end;
    align-items: flex-start;
  }
  .footer-name {
    font-size: 1.3rem;
    margin-top: 0.2rem;
    margin-bottom: 1rem;
  }
  .footer-container {
    max-width: 97vw;
    padding: 0 8px 1.5rem 8px;
  }
  .footer-address, .footer-bizno, .footer-tel {
    font-size: 0.92rem;
  }
  .footer-copy {
    font-size: 0.88rem;
    margin-top: 15px;
  }
}

/* ===================== Carrd Contact 전체 ===================== */
/* -- 전체 배경 및 배치 -- */
.contact-bg-carrd {
  background: linear-gradient(150deg,#eef5fc 60%,#d8e9f7 100%);
  min-height: 80vh;
  padding: 54px 0;
}
.contact-main-flex-carrd {
  display: flex;
  gap: 64px;
  max-width: 1160px;
  margin: 0 auto;
  justify-content: center;
  align-items: flex-start;
}
@media (max-width: 1023px) {
  .contact-main-flex-carrd { gap: 24px; max-width: 98vw; }
}
@media (max-width: 750px) {
  .contact-main-flex-carrd { flex-direction: column; gap: 0; }
}

/* -- 좌측 타이틀/설명 -- */

/* ===== [Contact 페이지] 좌측 타이틀/설명/회사/아이콘 중앙 정렬 ===== */
.contact-left-block,
.contact-title-carrd {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
/* ===== Carrd-style 박스: 타이틀+desc 한 박스 ===== */
.contact-descbox-carrd {
  max-width: 520px;
  margin: 0 auto 32px auto;
  padding: 32px 30px 28px 30px;
  background: #fff;
  border-radius: 32px;
  border: 1.5px solid #ecedf0;
  box-shadow: 0 8px 24px 0 rgba(40,70,120,0.10), 0 2px 8px 0 rgba(36,36,52,0.08);
  text-align: center;
  transition: box-shadow 0.23s;
}
.contact-title-carrd {
  font-size: 1.7em;
  font-weight: bold;
  margin-bottom: 5px;
  letter-spacing: 0.02em;
  color: #29326a;
  text-align: center;
}
.contact-desc-carrd {
  text-align: left;
  font-size: 1.09em;
  line-height: 1.7;
  padding: 0;
}
@media (max-width: 650px) {
  .contact-descbox-carrd {
    max-width: 98vw;
    padding: 10px 8px 10px 8px;
    border-radius: 19px;
    margin-bottom: 10px;

  }
  .contact-title-carrd {
    font-size: 1.10em;
    margin-bottom: 8px;

  }
}
.contact-left-block {
  flex: 1 1 0;
  min-width: 280px;
  max-width: 480px;
  background: none;
  padding: 37px 14px 0 0;
}


/* -- 문의 폼(흰 라운드 박스) -- */
.contact-right-block {
  flex: 1 1 0;
  min-width: 320px;
  max-width: 620px;
  min-height: 520px; /* 원하는 최소 높이로 조정 */
  background: #fff;
  border-radius: 28px;
  box-shadow: 0 6px 28px #b2d6f755, 0 2px 16px #aed7fd1c;
  padding: 40px 30px 25px 30px;
  margin: 0 auto;
  position: relative;
}
@media (max-width: 700px) {
  .contact-right-block {
    max-width: 98%;
    padding: 16px 2vw 10px 2vw;
    border-radius: 18px;
  }
}

/* -- 폼 입력칸/버튼 -- */
.contactform-carrd {
  display: flex;
  flex-direction: column;
  gap: 22px;
  background: #f9fbff;
  border-radius: 20px;
  box-shadow: 0 6px 28px #2578ff22, 0 2px 12px #aed7fd14;
  padding: 38px 32px 26px 32px;
  width: 100%;
  max-width: 100%
  margin: 0 auto 20px auto;
}
.contactform-carrd input,
.contactform-carrd select,
.contactform-carrd textarea {
  background: #f2f6fd;
  border: 1.7px solid #d7e7fc;
  border-radius: 12px;
  font-size: 1.13rem;
  padding: 15px 18px;
  color: #223b7e;
  transition: border-color 0.18s, box-shadow 0.18s;
  font-family: 'AritaDotumKR','맑은 고딕',sans-serif;
  box-shadow: 0 1px 6px #bedafe18;
}
.contactform-carrd input:focus,
.contactform-carrd select:focus,
.contactform-carrd textarea:focus {
  outline: none;
  border-color: #3478ff;
  background: #eaf3fe;
  box-shadow: 0 2px 14px #94bfff33;
}
.contactform-carrd select {
  appearance: none;
  background-image: url('data:image/svg+xml;utf8,<svg fill="none" stroke="%233478ff" stroke-width="2" viewBox="0 0 24 24"><path d="M6 9l6 6 6-6"/></svg>');
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 22px 22px;
}
.contactform-carrd textarea {
  min-height: 100px;
  max-height: 230px;
  resize: vertical;
}
.contactform-carrd button[type="submit"] {
  background: linear-gradient(90deg, #3478ff 25%, #2c9fff 100%);
  color: #fff;
  font-weight: 700;
  font-size: 1.17rem;
  padding: 16px 0;
  border: none;
  border-radius: 18px;
  box-shadow: 0 3px 18px #2478eb2c;
  cursor: pointer;
  letter-spacing: 0.02em;
  margin-top: 8px;
  transition: background 0.17s, box-shadow 0.16s, transform 0.12s;
  font-family: 'AritaDotumKR','맑은 고딕',sans-serif;
}
.contactform-carrd button[type="submit"]:hover {
  background: linear-gradient(90deg, #2563eb 10%, #34c3ff 90%);
  box-shadow: 0 6px 32px #2563eb28;
  transform: translateY(-2px) scale(1.035);
}
.contactform-carrd input::placeholder,
.contactform-carrd textarea::placeholder {
  color: #92abd2;
  opacity: 1;
  font-size: 1.04rem;
  font-family: 'AritaDotumKR','맑은 고딕',sans-serif;
}
@media (max-width: 600px) {
  .contactform-carrd {
    padding: 18px 7px 16px 7px;
    max-width: 99vw;

  }
  .contactform-carrd input,
  .contactform-carrd select,
  .contactform-carrd textarea {
    font-size: 1.05rem;
    padding: 13px 9px;
  }
  .contactform-carrd button[type="submit"] {
    font-size: 1.04rem;
    padding: 13px 0;
  }
}

/* -- 문의 폼 아래(박스 밖): 회사/아이콘/카피 -- */
.contact-bottom-carrd {
  margin: 32px auto 0 auto;
  padding: 0 0 30px 0;
  background: none;
  max-width: 430px;
  text-align: center;
}
.contact-companyinfo-carrd {
  font-size: 1.06rem;
  color: #4d658a;
  margin-bottom: 8px;
  padding: 0;
}
.contact-social-carrd {
  display: flex;
  justify-content: center;
  gap: 26px;
  margin: 16px 0 7px 0;
}
.icon-btn {
  background: #f7f8fa;
  border-radius: 50%;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 12px #b3d5fa33;
  transition: box-shadow 0.18s, background 0.13s, transform 0.12s;
}
.icon-btn:hover {
  background: #eaf4ff;
  box-shadow: 0 8px 24px #2463eb22;
  transform: scale(1.13);
}
.contact-copyright-carrd {
  color: #98a3bc;
  font-size: 0.97rem;
  margin-top: 10px;
  text-align: center;
}
/* PC 기본: 왼쪽만 보이고, 모바일(650px 이하)에선 오른쪽(폼 아래)만 보임 */
.contact-bottom-pc { display: block; }
.contact-bottom-mobile { display: none; }

@media (max-width: 650px) {
  .contact-bottom-pc { display: none !important; }
  .contact-bottom-mobile { display: block !important; }
}


/* 우클리방지 및 선택 금지 */

body {
  user-select: none;        /* 텍스트 선택 금지 */
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}
img, video {
  pointer-events: none;     /* 이미지 드래그/우클릭 방지 */
}

/* ====== 커스텀 로딩 스피너 ====== */
#loading-spinner {
  position: fixed;
  left: 0; top: 0; width: 100vw; height: 100vh;
  background: rgba(18,19,24,0.97);
  z-index: 99999;
  display: flex; align-items: center; justify-content: center;
  font-size: 2rem; font-weight: 700;
  font-family: 'Pretendard', 'sans-serif';
  letter-spacing: 0.12em;
  color: #fff;
  transition: opacity .2s;
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  pointer-events: auto;
}
#loading-spinner .rainbow {
  background: linear-gradient(90deg, #ff595e, #ffca3a, #8ac926, #1982c4, #6a4c93, #ff595e 95%);
  background-size: 400% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  animation: rainbowMove 2s linear infinite;
  font-size: 2em;
  user-select: none;
}
@keyframes rainbowMove {
  0%   { background-position: 0% 50%; }
  100% { background-position: 400% 50%; }
}
 

/* ==========================
   Contact Us 스타일 전체
   2025-06-20
   ========================== */

/* 리스트 및 테이블 */
#contact-list-wrap, #contact-admin-wrap {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  box-sizing: border-box;
  min-height: 430px; /* 테이블+페이지네이션 최소 확보 */
}
.contact-table {
    width: 100% !important;
    min-width: 0 !important;
    table-layout: auto !important;
    font-size: 1em;
    border-collapse: separate !important;
    border-spacing: 0 !important;
}

.contact-table th, .contact-table td {
    padding: 8px 10px !important;  /* 좌우 10px, 위아래 8px */
    font-size: 0.97em !important;
    word-break: break-all !important;
    box-sizing: border-box !important;
}

.contact-table th { background: #f6f6f6; }
.contact-thumb { width: 50px; height: 50px; object-fit: cover; cursor:pointer; border-radius: 5px; margin:2px; }

/* 버튼 */
.contact-btn { padding: 5px 12px; margin:2px; border-radius:5px; border:1px solid #1c90f3; background:#2196f3; color:#fff; cursor:pointer; }
.contact-btn[disabled] { opacity: 0.6; cursor: not-allowed; }

/* 모달 */
.contact-modal { position:fixed; left:0; top:0; width:100vw; height:100vh; background:rgba(0,0,0,0.4); z-index:1000; display:flex; align-items:center; justify-content:center; }
.contact-modal-content { background:#fff; padding:30px; border-radius:12px; width:90%; max-width:500px; position:relative; }
.contact-close { position:absolute; right:20px; top:12px; font-size:28px; cursor:pointer; }
@media (max-width: 650px) {
	.contact-modal-content { top : 20px;}
}


/* 드롭존 (드래그/클릭) */
.contact-drop-area {
  border:2px dashed #2196f3; border-radius:8px; padding:18px; text-align:center;
  background:#f8fbff; cursor:pointer; margin-bottom:12px;
  transition: border-color 0.2s, background 0.2s;
}
.contact-drop-area.dragover { border-color:#1769aa; background:#e7f3fd; }
/* 포커스(키보드 접근성) */
.contact-drop-area:focus { outline: 2px solid #2196f3; }

/* 썸네일 */
#contact-img-thumb img { margin:4px; border:1px solid #aaa; border-radius: 5px; width:50px; height:50px; object-fit:cover; }

/* 스피너 */
.contact-spinner { color:#2196f3; font-weight:bold; }

/* 입력/텍스트 */
input, textarea { width: 100%; margin: 6px 0; padding:8px; border-radius:5px; border:1px solid #bbb; }
input[type=file] { display:none; }

@media (max-width: 750px) {
  .contact-main-flex-carrd {
    flex-direction: column !important;
    gap: 0 !important;
    align-items: stretch !important;
  }
  .contact-right-block {
    width: 99vw !important;
    min-width: 99vw !important;
    max-width: 99vw !important;
    padding: 12px 0 16px 0 !important;
    margin: 0 auto !important;
    border-radius: 18px !important;
    box-sizing: border-box !important;
    overflow-x: visible !important;
    /* flex: none !important;  // 필요시 */
  }
  .contact-table {
    width: 100% !important;
    min-width: 0 !important;
    table-layout: auto !important;
    font-size: 1em;
  }
  .contact-table th, .contact-table td {
    padding: 6px 3px !important;
    font-size: 0.97em !important;
    word-break: break-all !important;
    box-sizing: border-box !important;
  }
}


/* 포트폴리오 DETAil부분 */
/* 전체 detail 박스 */
.pfdetail-container {
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 4px 24px #e5eaf2;
    padding: 38px 32px 32px 32px;
    margin-top: 30px;
    margin-bottom: 40px;
    max-width: 960px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* 메인 제목 (상단) */
.pfdetail-main-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: #1967d2;
    margin-top: 40px;
    margin-bottom: 34px;
    letter-spacing: -1px;
}

/* 개별 타이틀 */
.pfdetail-title {
    font-size: 2.1rem;
    font-weight: 600;
    margin-bottom: 10px;
    color: #19263a;
    letter-spacing: -0.7px;
}

/* 한줄 요약 */
.pfdetail-summary {
    font-size: 1.12rem;
    color: #425169;
    background: #f6f7fa;
    padding: 10px 16px;
    border-radius: 8px;
    margin-bottom: 3px;
}

/* 제품, 날짜 */
.pfdetail-product,
.pfdetail-date {
    font-size: 1.02rem;
    color: #555;
    margin-bottom: 3px;
}

/* 미디어 리스트: flex로 row 정렬, 테이블 셀 느낌 */
.pfdetail-media-list {
    display: flex;
    flex-wrap: wrap;
    gap: 18px 24px;
    margin-top: 22px;
    border-top: 1.5px solid #e5eaf2;
    padding-top: 20px;
    justify-content: flex-start;
}

/* 개별 이미지/비디오 */
.pfdetail-media {
    background: #fafbfc;
    border-radius: 12px;
    box-shadow: 0 1px 7px #e8ebf1;
    padding: 14px 12px;
    min-width: 400px;
    max-width: 600px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.pfdetail-media img,
.pfdetail-media video {
    max-width: 600px;
    max-height: 600px;
    border-radius: 7px;
    margin-bottom: 5px;
    box-shadow: 0 1px 4px #e5eaf2;
}

/* 모바일 대응 */
@media (max-width: 600px) {
  .pfdetail-container { margin-top: 80px; padding: 12px 5px; }
  .pfdetail-main-title, .pfdetail-title { font-size: 1.25rem !important; }
  .pfdetail-media-list { gap: 8px 5px; }
  .pfdetail-media { min-width: 120px; max-width: 99vw; padding: 7px 3px;}
  .pfdetail-media img, .pfdetail-media video { max-width: 90vw; max-height: 28vw; }
}


/*뒤로 가기 버튼!!!*/
.pfdetail-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 11px 22px 11px 16px;
    font-size: 1.08rem;
    font-weight: 600;
    color: #1761c5;
    background: linear-gradient(90deg, #f4f6fa 80%, #e3ebf9 100%);
    border: 1.5px solid #c1d3ef;
    border-radius: 32px;
    box-shadow: 0 1.5px 10px #e7ecf7;
    cursor: pointer;
    transition: background 0.17s, color 0.16s, border-color 0.14s, box-shadow 0.19s;
    outline: none;
    margin-bottom: 26px;
    margin-top: 6px;
    letter-spacing: -0.5px;
    position: relative;
    overflow: hidden;
}

.pfdetail-back-btn:hover {
    background: linear-gradient(90deg, #dbeeff 60%, #e9f3fe 100%);
    color: #0d4b8e;
    border-color: #7ab7ed;
    box-shadow: 0 3px 18px #b9dbfa44;
}

.pfdetail-back-icon {
    font-size: 1.28em;
    margin-right: 1px;
    transform: translateX(-2px);
    transition: transform 0.18s;
}

.pfdetail-back-btn:hover .pfdetail-back-icon {
    transform: translateX(-7px) scale(1.15);
}

/* 모바일 대응 */
@media (max-width: 600px) {
    .pfdetail-back-btn {
        padding: 8px 12px 8px 10px;
        font-size: 0.98rem;
    }
}



 /* 포트폴리오 detail 이미지 모달 CSS */


    .portfolio_image-modal {
      display: none;
      position: fixed;
      z-index: 9999;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.9);
      justify-content: center;
      align-items: center;
    }

    .portfolio_modal-content {
      position: relative;
      max-width: 90%;
      max-height: 90%;
      text-align: center;
    }

    .portfolio_modal-content img {
      max-width: 100%;
      max-height: 80vh;
      object-fit: contain;
    }

    .portfolio_modal-close {
      position: absolute;
      top: -40px;
      right: 0;
      color: white;
      font-size: 32px;
      font-weight: bold;
      cursor: pointer;
      z-index: 10001;
    }

    .portfolio_modal-close:hover {
      color: #ccc;
    }

    .portfolio_modal-nav {
      position: absolute;
      top: 50%;
      width: 100%;
      display: flex;
      justify-content: space-between;
      transform: translateY(-50%);
      pointer-events: none;
    }

    .portfolio_modal-nav-btn {
      background: rgba(0, 0, 0, 0.5);
      color: white;
      border: none;
      font-size: 24px;
      padding: 10px 15px;
      cursor: pointer;
      border-radius: 5px;
      pointer-events: auto;
      transition: background 0.3s;
    }

    .portfolio_modal-nav-btn:hover {
      background: rgba(0, 0, 0, 0.8);
    }

    .portfolio_modal-prev {
      margin-left: -50px;
    }

    .portfolio_modal-next {
      margin-right: -50px;
    }

    .portfolio_modal-counter {
      position: absolute;
      bottom: -40px;
      left: 50%;
      transform: translateX(-50%);
      color: white;
      font-size: 14px;
    }

    /* 포트폴리오 디테일 페이지 전용 스타일 */
    .portfolio-detail-media-container {
      display: flex;
      flex-wrap: wrap;
      gap: 15px;
      margin: 20px 0;
    }

    .portfolio-detail-image-wrapper {
      display: inline-block;
      margin: 10px;
      position: relative;
      border-radius: 8px;
      overflow: visible; /* 클릭 영역 제한 방지 */
    }

    .portfolio-detail-video-wrapper {
      display: inline-block;
      margin: 10px;
      position: relative;
      border-radius: 8px;
    }

    /* 이미지 클릭 가능하도록 스타일 추가 */
    .portfolio-detail-clickable-image {
      cursor: pointer !important;
      transition: transform 0.2s ease, box-shadow 0.2s ease !important;
      border-radius: 8px;
      pointer-events: auto !important; /* 클릭 가능 보장 */
      user-select: none;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      position: relative;
      z-index: 1; /* 다른 요소보다 위에 */
    }

    .portfolio-detail-clickable-image:hover {
      transform: scale(1.05);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    }

    .portfolio-detail-clickable-image:active {
      transform: scale(0.98);
    }

    /* 반응형 */
    @media (max-width: 768px) {
      .portfolio_modal-nav-btn {
        font-size: 20px;
        padding: 8px 12px;
      }
      
      .portfolio_modal-prev {
        margin-left: -30px;
      }
      
      .portfolio_modal-next {
        margin-right: -30px;
      }
    }