@charset "utf-8";
@import url("common.css");
@import url("main.css");

/* About */
/* 공통 컨테이너 */
.container {max-width: 1400px;margin: 0 auto;padding: 0 20px;}

/* 메인 비주얼 */
.main-visual {position: relative; height: 500px; background: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), url('../images/intro.png') center center/cover no-repeat; display: flex; align-items: center; justify-content: center; color: #fff; margin-bottom: 80px;}
.visual-content {text-align: center; z-index: 2;}
.visual-text h1 {font-size: 1.2rem; font-weight: 400; margin-bottom: 20px; opacity: 0.9;}
.visual-text h2 {font-size: 3rem; font-weight: 700; margin-bottom: 30px;}
.visual-text p {font-size: 1.3rem; line-height: 1.6; max-width: 800px; margin: 0 auto; opacity: 0.9;}


.section-title {font-size: 2.5rem;font-weight: 700;text-align: left;margin-bottom: 60px;color: #333;position: relative;}
.section-title::before {content: '';position: absolute;top: -15px;left: 0;width: 60px;height: 3px;background: #2266ff;border-radius: 2px;}
.about-intro {padding: 20px 0 120px 0;text-align: left;position: relative;background: #fff;}
.about-intro .container {position: relative;z-index: 2;}

.intro-content {margin: 0 auto; }
.intro-greeting {font-size: 1.8rem;font-weight: 600;color: #333;margin-bottom: 30px;text-align: left; line-height: 1.4;}
.intro-description {font-size: 1.1rem;line-height: 1.8;color: #555;text-align: justify;word-break: keep-all;}

/* 소개 영상 섹션 */
.intro-video {background: #f8f9fa;padding: 120px 0;}
.video-container {max-width: 1000px;margin: 0 auto;position: relative;padding-bottom: 45%;height: 0;overflow: hidden;border-radius: 12px;box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);}
.video-container iframe {position: absolute;top: 0;left: 0;width: 100%;height: 100%;border-radius: 12px;}

/* 탭 네비게이션 */
.tab-navigation {position: absolute; bottom: 0; left: 0; right: 0; background: rgba(60, 81, 129, 0.5); padding: 0;}
.tab-buttons {display: flex; justify-content: center; gap: 0; flex-wrap: wrap; width: 100%; margin: 0 auto;}
.tab-btn {padding: 0; background: transparent; border: none; color: #fff; font-size: 1.1rem; font-weight: 500; cursor: pointer; transition: all 0.3s ease; white-space: nowrap; position: relative; border-bottom: 3px solid transparent; height: 60px; display: flex; align-items: center; justify-content: center; flex: 1; min-width: 200px;}
.tab-btn:hover {color: #fff; background: rgba(255, 255, 255, 0.1);}
.tab-btn.active {color: #2266ff; font-weight: 600; background: #fff; border-bottom: 3px solid #fff;}

/* 탭 콘텐츠 */
.tab-content {position: relative;}
.tab-panel {display: none; animation: fadeIn 0.5s ease-in-out;}
.tab-panel.active {display: block;}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* 주요연혁 섹션 */
.company-history {background: #fff; padding: 20px 0 120px 0;}
.history-content {display: flex; align-items: flex-start; gap: 80px; margin-top: 60px;}
.history-image {flex: 0 0 400px;}
.history-image img {width: 100%; height: auto; border-radius: 12px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);}

.main-business {background: #fff; padding: 20px 0 120px 0;}
.business-content {max-width: 1200px; margin: 0 auto; margin-top: 60px;}

.business-areas {display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin-bottom: 80px;}
.business-area {text-align: left; display: flex; flex-direction: column; height: 400px; padding: 30px; border-radius: 12px; background: #fff; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); transition: all 0.3s ease; position: relative;}
.business-area:hover {box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); transform: translateY(-2px);}
.business-area-icon {width: 80px; height: 80px; background: #e3f2fd; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 20px;}
.business-area-icon img {width: 45px; height: 45px; object-fit: contain; max-width: 45px; max-height: 45px;}
.business-area:nth-child(1) .business-area-icon img {width: 60px; height: 60px; max-width: 60px; max-height: 60px; object-fit: contain;}
.business-area:nth-child(4) .business-area-icon img {width: 55px; height: 55px; max-width: 55px; max-height: 55px; object-fit: contain;}
.business-number {position: absolute; top: 20px; right: 20px; font-size: 2rem; font-weight: 700; color: #2266ff; opacity: 0.5;}
.business-content-text {flex: 1; display: flex; flex-direction: column; margin-top: 100px;}
.business-area h4 {font-size: 1.3rem; font-weight: 700; color: #333; margin-bottom: 20px; line-height: 1.4;}
.business-area p {font-size: 1rem; line-height: 1.7; color: #666; margin-bottom: 20px; word-break: keep-all;}
.business-sub-items {margin-bottom: 25px;}
.sub-item-row {display: flex; gap: 20px; margin-bottom: 5px;}
.sub-item {font-size: 1rem; color: #2266ff; font-weight: 500; line-height: 1.4;}

/* 타임라인 스타일 */
.timeline {max-width: 800px; margin: 0 auto; position: relative; padding-left: 50px;}
.timeline::before {content: '';position: absolute;left: 20px;top: 0;bottom: 0;width: 2px;background: #e9ecef;}
.timeline-item {position: relative;margin-bottom: 50px;padding-left: 40px;}
.timeline-dot {position: absolute;left: -30px;top: 10px;width: 16px;height: 16px;background: #2266ff;border: 4px solid #fff;border-radius: 50%;box-shadow: 0 0 0 3px #e9ecef;z-index: 2;}
.timeline-content {background: #f8f9fa;padding: 25px;border-radius: 12px;border-left: 4px solid #2266ff;transition: all 0.3s ease;}
.timeline-content:hover {background: #e9ecef;transform: translateX(10px);box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);}
.timeline-year {font-size: 1.5rem;font-weight: 700;color: #2266ff;margin-bottom: 15px;}
.timeline-details p {font-size: 1.1rem;line-height: 1.6;color: #333;margin-bottom: 8px;font-weight: 500;}
.timeline-details p:last-child {margin-bottom: 0;}
.timeline-new {flex: 1;position: relative;}
.timeline-new::before {content: '';position: absolute;left: 15%;top: 0;bottom: 0;width: 2px;background: #e9ecef;border-left: 2px dashed #e9ecef;}
.timeline-row {display: flex;align-items: flex-start;margin-bottom: 40px;position: relative;}
.timeline-year-col {width: 20%;position: relative;padding-right: 30px;}
.timeline-year-col::after {content: '';position: absolute;right: -6px;top: 40%;transform: translateY(-50%);width: 12px;height: 12px;background: #2266ff;border-radius: 50%;z-index: 2;}
.timeline-year {font-size: 1.8rem;font-weight: 700;color: #2266ff;text-align: right;}
.timeline-content-col {flex: 1;padding-left: 50px;}
.timeline-list {list-style: none;padding: 0;margin: 0;}
.timeline-list li {font-size: 1.1rem;line-height: 1.6;color: #333;margin-bottom: 8px;position: relative;padding-left: 20px;}
.timeline-list li::before {content: '-';position: absolute;left: 0;color: #666;font-weight: bold;}
.timeline-list li:last-child { margin-bottom: 0;}

/* Product */
/* 제품소개 페이지 */
.product-section {background: #fff; padding: 150px 0 120px 0;}
.product-section .section-title {margin-bottom: 40px;}
.product-section .container {max-width: 1400px;}
.product-wrap {position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden;}
.product-list {display: flex; align-items: stretch; width: 100%; transition: transform 0.3s ease; will-change: transform;}
.product-card {list-style: none; text-align: left; flex: 0 0 360px; margin-right: 30px;}
.product-link {text-decoration: none; color: inherit; display: block;}
.product-card:last-child {margin-right: 0;}
.product-card .product-image {border: 1px solid #ddd; width: 443px; height:300px; border-radius: 3px; overflow: hidden;  display: flex; align-items: center; justify-content: center; background: #ffffff; box-sizing: border-box;}
.product-card:hover .product-image {border: 1px solid #2266ff;cursor: pointer;}
.product-card .product-image img {width: 70%; height: auto; object-fit: cover; display: block;}
.product-name {font-size: 1.25rem; font-weight: 800; margin: 16px 0 8px; color: #111; transition: color 0.2s ease;}
.product-card:hover .product-name {color: #2266ff;}
.product-subtitle {font-size: 1rem; color: #444; font-weight: 600;}

.product-arrow {background: transparent; border: none; width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; cursor: pointer; position: absolute; top: 33%;  z-index: 10;}
.product-arrow.left {left: 8px;}
.product-arrow.right {right: 8px;}
.product-arrow img {transition: opacity 0.3s ease;}
.product-arrow img.hover {display: none;}
.product-arrow:hover img.default {display: none;}
.product-arrow:hover img.hover {display: block;}
.product-arrow.disabled {opacity: 0.4; pointer-events: none;}


/* Product-detail */
/* 제품 미리보기 */
.product-preview {position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); background: rgba(248, 249, 250, 0.1); padding: 20px 40px; border-radius: 12px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15); z-index: 1000; display: none;}
.preview-gallery {display: flex; gap: 15px; flex-wrap: nowrap; overflow-x: hidden; overflow-y: hidden; scrollbar-width: none; -ms-overflow-style: none; max-width: 700px; cursor: grab; user-select: none;}
.preview-gallery::-webkit-scrollbar {display: none;}
.preview-item {border: 1px solid #ddd; flex: 0 0 120px; text-align: center; cursor: pointer; border-radius: 8px; overflow: hidden; background: #fff; box-shadow: 0 2px 10px rgba(0,0,0,0.1);}
.preview-item:hover {box-shadow: 0 4px 20px rgba(0,0,0,0.2);}
.preview-item.active {border: 1px solid #2266ff; box-shadow: 0 4px 20px rgba(34,102,255,0.3);}
.preview-item img {width: 100%; height: 80px; object-fit: cover; border-radius: 8px 8px 0 0;}
.preview-title {display: block; padding: 12px 5px; font-size: 0.9rem; font-weight: 500; color: #333; background: #fff;}




/* 플로팅 네비게이션 버튼 */
.product-navigation {position: fixed; top: 50%; transform: translateY(-50%); width: 100%; z-index: 9999; pointer-events: none; left: 0; right: 0;}
.nav-btn {position: absolute; background: rgba(255,255,255,0.95); border: 1px solid #ddd; border-radius: 50%; width: 60px; height: 60px; display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; transition: all 0.3s ease; pointer-events: auto; box-shadow: 0 4px 20px rgba(0,0,0,0.15); z-index: 10000;}
.nav-btn:hover {background: #fff; box-shadow: 0 6px 25px rgba(0,0,0,0.25); transform: scale(1.1);}
.prev-btn {left: 30px;}
.next-btn {right: 30px;}
.nav-arrow {font-size: 2.2rem; font-weight: bold; color: #8a8a8a; line-height: 1; margin-top: -8px;}
.nav-text {display: none;}

/* 제품 상세 페이지 */
.product-detail-intro {background: linear-gradient(to right, #f8f9fa 55%, #fff 45%); padding:180px 0;}
.product-detail-content {display: flex; align-items: center; gap: 80px;}
.product-detail-image {flex: 1; margin-left: 50px;}
.product-detail-image img {width: 100%; height: auto; border-radius: 8px; }
.product-detail-info {flex: 1; margin-left: 150px;}
.product-detail-title {font-size: 2.5rem; font-weight: 800; color: #111; margin-bottom: 10px;}
.product-detail-subtitle {font-size: 1.5rem; font-weight: 600; color: #444; margin-bottom: 30px;}
.product-detail-description {font-size: 1.1rem; line-height: 1.8; color: #333; text-align: justify; word-break: keep-all;}

/* 제품 특징 섹션 */
.product-features {background: #fff; padding: 200px 0;}
.features-content {display: flex; align-items: center; gap: 80px;}
.features-image {flex: 1;}
.features-image img {width: 100%; height: auto; border-radius: 8px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);}
.features-info {flex: 1;}
.features-title {font-size: 2rem; font-weight: 700; color: #111; margin-bottom: 30px;}
.features-list {list-style: none; padding: 0;}
.features-list li {font-size: 1.1rem; line-height: 1.8; color: #333; margin-bottom: 15px; padding-left: 20px; position: relative;}
.features-list li:before {content: "•"; color: #2266ff; font-weight: bold; position: absolute; left: 0;}

/* 하이라이트 섹션 */
.product-highlights {background: #fff; padding: 120px 0;}
.highlights-grid {display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; margin-top: 60px;}
.highlight-card {text-align: center; padding: 100px 20px; background: #f8f9fa; border-radius: 12px; }
.highlight-icon {margin-bottom: 20px;}
.highlight-icon img {width: 80px; height: 80px; object-fit: contain;}
.highlight-title {font-size: 1.2rem; font-weight: 700; color: #111; margin-bottom: 8px;}
.highlight-subtitle {font-size: 0.9rem; color: #666; font-weight: 500;}


/* 공지사항 메인 비주얼 */
.notice-section {background: #fff; padding: 20px 0 120px 0;}
.notice-section .section-title {margin-bottom: 40px;}
.notice-visual {position: relative; height: 500px; background: linear-gradient(rgba(0, 39, 90, 0.4), rgba(0, 29, 48, 0.5)), url('../images/intro2.png') center center/cover no-repeat; display: flex; align-items: center; justify-content: center; color: #fff; margin-bottom: 80px;}
.visual-content {text-align: center; z-index: 2;}
.visual-text h1 {font-size: 1.2rem; font-weight: 400; margin-bottom: 20px; opacity: 0.9;}
.visual-text h2 {font-size: 3rem; font-weight: 700; margin-bottom: 30px;}
.visual-text p {font-size: 1.3rem; line-height: 1.6; max-width: 800px; margin: 0 auto; opacity: 0.9;}

/* 공지사항 탭 네비게이션 */
.notice-visual .tab-navigation {position: absolute; bottom: 0; left: 0; right: 0; background: rgba(60, 81, 129, 0.5); padding: 0;}
.notice-visual .tab-buttons {display: flex; justify-content: flex-start; gap: 0; flex-wrap: wrap; width: 100%; margin: 0 auto; }
.notice-visual .tab-btn {border: none;  font-size: 1.1rem; cursor: pointer; transition: all 0.3s ease; white-space: nowrap; position: relative; height: 60px; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; min-width: 200px;}
.notice-visual .tab-btn:hover {color: #fff; background: rgba(255, 255, 255, 0.1);}
.notice-visual .tab-btn.active {color: #2266ff; font-weight: 600; background: #fff; border-bottom: 3px solid #fff;}

/* 검색 및 필터 섹션 */
.search-filter-section {background: #f8f9fa; padding: 30px; border-radius: 8px; margin-bottom: 30px;}
.search-container {display: flex; align-items: center; gap: 15px; max-width: 800px; margin: 0 auto;}
.filter-dropdown {flex: 0 0 120px;}
.filter-select {width: 100%; padding: 0 15px; height: 48px; border: 1px solid #ddd; border-radius: 4px; background: #fff url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e") no-repeat right 8px center; background-size: 16px; font-size: 1rem; cursor: pointer; -webkit-appearance: none; -moz-appearance: none; appearance: none;}
.search-input-container {flex: 1; display: flex; gap: 10px;}
.search-input {flex: 1; height: 48px; padding: 0 15px; border: 1px solid #ddd; border-radius: 4px; font-size: 1rem; box-sizing: border-box;}
.search-button {flex: 0 0 100px; height: 48px; padding: 0 15px; background: #2266ff; color: #fff; border: none; border-radius: 4px; font-size: 1rem; font-weight: 500; cursor: pointer; transition: background-color 0.3s ease;}
.search-button:hover {background: #1a4fd9;}

/* 게시판 테이블 */
.board-table-container {margin-top: 30px; overflow-x: auto; -webkit-overflow-scrolling: touch; scroll-behavior: smooth;}

/* 상세보기에서는 스크롤 제거 */
.post-detail-section .board-table-container {overflow-x: visible;}
.post-detail-section .board-table {min-width: auto;}

/* 페이징 스타일 */
.pagination-container {display: flex;justify-content: center;align-items: center;margin-top: 40px;margin-bottom: 60px;}
.pagination {display: flex;align-items: center;gap: 8px;}
.page-btn {display: flex;align-items: center;justify-content: center;width: 40px;height: 40px;border: 1px solid #ddd;background: #fff;color: #666;text-decoration: none;border-radius: 6px;font-size: 0.95rem;font-weight: 500;transition: all 0.3s ease;cursor: pointer;}
.page-btn:hover {background: #f8f9fa;border-color: #2266ff;color: #2266ff;transform: translateY(-2px);box-shadow: 0 4px 12px rgba(34, 102, 255, 0.15);}
.page-btn.active {background: #2266ff;border-color: #2266ff;color: #fff;font-weight: 600;}
.page-btn.prev-btn,
.page-btn.next-btn {width: 40px;font-weight: 600;color: #333;}
.page-btn.prev-btn:hover,
.page-btn.next-btn:hover {background: #2266ff;border-color: #2266ff;color: #fff;}


.board-table {width: 100%; min-width: 600px; border-collapse: collapse; background: #fff;}
.board-table th {background: #f8f9fa; padding: 20px 10px; text-align: center; font-weight: 600; color: #333; border-bottom: 1px solid #ddd; font-size: 1rem; border-top: 1px solid #333;}
.board-table td {padding: 20px 10px; text-align: center; border-bottom: 1px solid #eee; font-size: 1rem;}
.board-table tbody tr:hover {background: #f8f9fa;cursor: pointer;}
.body-table{border-top: 1px solid #333;}

.col-no {width: 80px;}
.col-title {text-align: left !important;}
.col-author {width: 120px;}
.col-date {width: 120px;}
.col-views {width: 80px;}

.post-row {cursor: pointer; transition: background-color 0.3s ease;}
.post-title {color: #333; text-decoration: none; transition: color 0.3s ease;}
.post-title:hover {color: #2266ff;}



/* 상세 디테일 */
.post-detail-section {background: #fff; padding: 150px 0 120px 0;}
.post-info-table {background: #f8f9fa; border-top: 1px solid #333; border-bottom: 1px solid #ddd; margin-bottom: 40px; overflow: hidden;}
.info-row {display: flex; border-bottom: 1px solid #ddd;}
.info-row:last-child {border-bottom: none;}
.info-label {width: 220px; background: #f8f9fa; padding: 20px 15px; font-weight: 600; color: #333; display: flex; align-items: center;}
.info-value {flex: 1; padding: 20px 15px; background: #fff; display: flex; align-items: center;}

/* 게시글 내용 영역 */
.post-content {background: #fff; border-bottom: 2px solid #ddd; padding: 30px; margin-bottom: 40px; min-height: 500px; box-sizing: border-box;}

.attachment-item {display: flex; align-items: center;margin-right: 20px; }
.attachment-item:last-child {margin-bottom: 0;}
.attachment-icon {width: 16px; height: 16px; object-fit: contain;}
.file-name {color: #333; text-decoration: none; cursor: pointer; transition: color 0.3s ease;}
.file-name:hover {color: #2266ff;}

/* 하단 */
.list-btn-container {text-align: right; margin-bottom: 20px;}
.list-btn {background: #2266ff; color: #fff; text-decoration: none; padding: 15px 30px; border-radius: 6px; font-weight: 600; transition: background-color 0.3s ease; display: inline-block; font-size: 1rem; border: none; cursor: pointer;}
.list-btn:hover {background: #1a4fd9;}
.nav-table {width: 100%; border-collapse: collapse;}
.nav-row {border-bottom: 1px solid #ddd; padding: 15px 0;}
.nav-row:last-child {border-bottom: none;}
.nav-label {width: 80px; padding: 15px 0; font-weight: 600; color: #333; vertical-align: middle;}
.nav-title {padding: 15px 0; color: #333; vertical-align: middle;}
.nav-date {width: 120px; text-align: right; padding: 15px 0; color: #333; vertical-align: middle;}


/* 반응형 디자인 */
@media (max-width: 1080px) {
    /* 연혁 타임라인 모바일 반응형 */
    .history-content {flex-direction: column;gap: 40px;}
    .history-image {flex: 0 0 auto; max-width: 100%;}
    .timeline {padding-left: 0; max-width: 100%;}
    .timeline::before {left: 0;}
    .timeline-item {padding-left: 25px; margin-bottom: 40px;}
    .timeline-dot {left: -20px; width: 12px; height: 12px; border-width: 3px;}
    .timeline-year-col{width: 80px;}
    .timeline-year-col::after {right: 15%}
    .timeline-new::before {left: 10px;}
    .timeline-content {padding: 20px;}
    .timeline-year {font-size: 1.3rem; margin-bottom: 12px; text-align: left;}
    .timeline-details p {font-size: 1rem;}
    .timeline-content-col {padding-left: 0px;}

    /* 주요사업 모바일 반응형 */
    .business-areas {grid-template-columns: 1fr; gap: 30px; margin-bottom: 60px;}
    .business-area {height: auto; padding: 25px;}
    .business-area:nth-child(4), .business-area:nth-child(5), .business-area:nth-child(6) {margin-top: 20px;}
    .business-area h4 {font-size: 1.2rem; margin-bottom: 15px;}
    .business-area p {font-size: 0.95rem; margin-bottom: 15px;}
    .business-sub-items {margin-bottom: 20px;}
    .sub-item {font-size: 0.95rem; margin-bottom: 3px;}
    .business-area-icon {width: 80px; height: 80px; margin-top: 15px; transform: translateY(-5px);}
    .business-area-icon img {width: 45px; height: 45px;}
    .business-area:nth-child(1) .business-area-icon img {width: 55px; height: 55px;}
    .business-area:nth-child(4) .business-area-icon img {width: 45px; height: 45px;}
}

@media (max-width: 768px) {
    .main-visual, .notice-visual {height: 400px;}
    .visual-text h1 {font-size: 1rem;}
    .visual-text h2 {font-size: 2.2rem;}
    .visual-text p {font-size: 1.1rem;}
    
    .section-title {font-size: 2rem;margin-bottom: 40px}
    .intro-greeting {font-size: 1.3rem;}
    .intro-description {font-size: 1rem;}
    .video-container {max-width: 100%; padding-bottom: 60%;}
    .product-section {padding: 100px 0 80px;}
    .product-list {gap: 0;}
    .product-card {flex: 0 0 100%; margin-right: 24px;}
    .product-card .product-image {height: 300px; width: 100%;}
    .product-arrow.left {left: 8px;}
    .product-arrow.right {right: 8px;}
    
    /* 탭 네비게이션 모바일 반응형 */
    .tab-navigation {padding: 0; position: absolute; bottom: 0; left: 0; right: 0; background: rgba(60, 81, 129, 0.5); height: 60px;}
    .tab-buttons {max-width: 100%; flex-direction: row; gap: 0; width: 100%;}
    .tab-btn {padding: 0; background: transparent; border: none; color: #fff; font-size: 1rem; font-weight: 500; cursor: pointer; transition: all 0.3s ease; white-space: nowrap; position: relative; border-bottom: 3px solid transparent; height: 60px; display: flex; align-items: center; justify-content: center; flex: 1; min-width: auto;}
    .tab-btn:hover {color: #fff; background: rgba(255, 255, 255, 0.1);}
    .tab-btn.active {color: #2266ff; font-weight: 600; background: #fff; border-bottom: 3px solid #fff;}

    .product-detail-intro {padding:150px 0 100px 0; background: linear-gradient(to right, #f8f9fa 100%, #fff 0%); }
    .product-detail-image { margin-left: 0px;}
    .product-detail-info { margin-left: 0px;}
    .product-detail-content, .features-content {flex-direction: column; gap: 40px;}
    .product-detail-title {font-size: 2.5rem;}
    .product-detail-subtitle {font-size: 1.3rem;}
    .product-features {background: #fff; padding: 100px 0 80px 0;}
    .features-info {align-self: flex-start;}
    .features-title {font-size: 1.8rem;}
    .highlights-grid {grid-template-columns: repeat(2, 1fr); gap: 20px;}
    .highlight-card {padding: 30px 15px;}
    .highlight-icon img {width: 50px; height: 50px;}

    .search-container {flex-direction: column; gap: 10px;}
    .filter-dropdown {flex: 0 0 auto; width: 100%;}
    .search-input-container {display: flex; gap: 10px; align-items: center; width: 100%;}
    .search-input {flex: 1; min-width: 0;}
    .search-button {flex-shrink: 0; width: 80px;}
    .board-table {font-size: 0.9rem;}
    .board-table th, .board-table td {padding: 20px 5px;}
    .col-no {width: 50px;}
    .col-author {width: 80px;}
    .col-date {width: 90px;}
    .col-views {width: 50px;}
    .col-title {white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 150px;}
    .list-btn-container {text-align: center;}

    .post-detail-section {padding: 100px 0 80px 0;}
    .info-label {width: 100px;  }
    .info-value {padding: 15px;}
    .post-navigation {flex-direction: column; gap: 20px; align-items: stretch;}
    .nav-links {flex-direction: column; gap: 15px;}
    .list-btn-container {text-align: center;}

    .product-preview {padding: 10px 20px; bottom: 40px;}
    .preview-gallery {gap: 10px; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; padding: 0; -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none; max-width: 80vw;}
    .preview-gallery::-webkit-scrollbar {display: none;}
    .preview-item {flex: 0 0 80px; min-width: 80px; max-width: 80px;}
    .preview-item img {height: 50px; width: 100%; object-fit: contain;}
    .preview-title {font-size: 0.7rem; padding: 5px 3px;}
    
     /* 모바일 플로팅 버튼 */
     .nav-btn {display: none;}

}