html, body {height: 100%;margin: 0;}
body {display: flex;flex-direction: column;}
.inner {width: 1200px;margin: 0 auto;position: relative;}

:root {
  --main-color: #f37142;
}

#header .logo {height: 175px;position: relative;}
#header .logo > a {font-size: 3em;font-weight: bold;width: max-content;padding: 9px;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);cursor: pointer;}

#menu {height: 55px;width: 100%;border-top: 1px solid #191817;border-bottom: 1px solid #191817;box-sizing: border-box;}
#menu a {cursor: pointer;}
#menu .menu-icon {padding: 0 20px;cursor: pointer;}
#menu .depth01, #menu .depth01 ul {list-style: none;padding: 0;margin: 0;}
#menu .depth01 {display: flex;justify-content: center;align-items: center;list-style: none;background-color: #fff;padding: 0;margin: 0;height:100%;}
#menu .has-sub .depth1_menu::after {content: none;}
#menu .depth01 > li {position: relative;margin: 0 25px;}
#menu .depth01 > li > a {position: relative;display: block;text-decoration: none;color: #333;font-size: 28px;font-weight: 600;line-height: 60px;transition: color 0.3s;width: fit-content;}
#menu .depth01 > li > a.active {content: '';position: absolute;bottom: 15%;left: 50%;transform: translateX(-50%);width: 0;height: 3px;background-color: #000;transition: width 0.2s ease;}
#menu .depth01 > li:hover > a:hover, #menu .depth01 > li:hover > a.active {width: 100%;}
#menu .depth02 a, #menu .depth03 a {display: block;text-decoration: none;color: #333;padding: 10px 20px;background: #fff;white-space: nowrap;border-bottom: 1px solid #eee;}
#menu .mm02 {position: relative;display: inline-block;}
#menu .depth02 {position: absolute;top: 96%;left: 0;min-width: 250px;box-shadow: 0 4px 10px rgba(0,0,0,0.1);z-index:10;}
#menu .depth02 li {position: relative;}
#menu .depth03 {position: absolute;top: 0;left: 100%;min-width: 150px;box-shadow: 4px 4px 10px rgba(0,0,0,0.1);border-left: 1px solid #eee;}
#menu .depth02 li:hover > a {background: var(--main-color);color: #fff;}
#menu .depth02 li a {display: flex;justify-content: space-between;align-items: center;padding: 12px 15px;text-decoration: none;color: #333;background: #fff;border-bottom: 1px solid #f0f0f0;position: relative;}
#menu .has-sub > a::after {content: '';width: 20px;height: 20px;background-image: url('../image/icon/chevron_right_24dp_1F1F1F_FILL0_wght400_GRAD0_opsz24.svg');background-size: contain;background-repeat: no-repeat;display: inline-block;transition: all 0.2s;}
#menu .depth02 li:hover > a {background-color: var(--main-color);color: #fff;}
#menu .has-sub:hover > a::after {filter: brightness(0) invert(1);}


#mobile-menu-btn {
  display: none; /* PC에선 숨김 */
  flex-direction: column;
  justify-content: space-between;
  width: 25px;
  height: 18px;
  cursor: pointer;
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 15;
}
#mobile-menu-btn span {
  display: block;
  width: 100%;
  height: 3px;
  background-color: #333;
  transition: 0.3s;
}

/* --- 메뉴 배경 레이어 --- */
#menu-overlay {
  display: none;
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.5);
  z-index: 16;
}

.mobile-close { display: none; }

#footer {padding:2% 0;border-top: 1px solid #191817;box-sizing: border-box;width: 100%;background: #fff;flex-shrink: 0}
#footer p {display:block;line-height:1.6;font-size:1.2em;font-weight:600;}
#footer .copyright {font-size:1em; text-align: center;padding-top:2%;font-weight:400;}

#container {flex: 1; display: flex;flex-direction: column;}
#container.side-container > .inner {flex: 1;display: flex;align-items: flex-start;gap: 40px;padding: 40px 0;}

#aside {width: 250px;flex-shrink: 0;}
#aside a {cursor: pointer;}
#aside h2 {background-color: var(--main-color);color: #fff;padding: 15px 20px;margin: 0;font-size: 18px;}
#aside .lnb_list {list-style: none;padding: 20px 0;margin: 0;}
#aside .lnb_list > li > a {display: flex;justify-content: space-between;align-items: center;padding: 12px 20px;color: #333;text-decoration: none;font-weight: 500;position: relative;}
#aside .depth03 {list-style: none;padding: 5px 0 10px 40px;display: none;}
#aside .depth03 li a {display: block;padding: 8px 0;color: #666;text-decoration: none;font-size: 14px;position: relative;}
#aside .depth03 li a:hover, #aside .depth03 li a.active {color: #333;}
#aside .depth03 li a::after {content: '';position: absolute;bottom: 0;left: 0;width: 0;height: 2px;background-color: #333;}
#aside .depth03 li a:hover::after, #aside .depth03 li a.active::after {width: 40%;}
#aside .lnb_list > li > a {display: flex;justify-content: space-between;align-items: center;padding: 15px 20px;color: #333;text-decoration: none;font-weight: 500;position: relative;border-bottom: 1px solid #f4f4f4;}
#aside .has-sub > a::after {content: '';width: 20px;height: 20px;background-image: url('../image/icon/chevron_right_24dp_1F1F1F_FILL0_wght400_GRAD0_opsz24.svg');background-size: contain;background-repeat: no-repeat;transform: rotate(-90deg);transition: transform 0.3s ease;}
#aside .has-sub.active > a::after {transform: rotate(90deg);}
#aside li.active > a {color: var(--main-color);background-color: #fffaf8;}
#aside li.active > a::before {content: '';position: absolute;left: 0;top: 0;width: 4px;height: 100%;background-color: var(--main-color);}

#product-gallery {flex: 1;}
#product-gallery .gallery-grid {display: grid;grid-template-columns: repeat(3, 1fr);gap: 30px 20px;}
#product-gallery .item {display: block;text-decoration: none;color: inherit;background: #fff;border: 1px solid #eee;border-radius: 12px;overflow: hidden;transition: all 0.3s ease;isolation: isolate;-webkit-backface-visibility: hidden;-moz-backface-visibility: hidden;-webkit-transform: translate3d(0, 0, 0);}
#product-gallery .item:hover {transform: translateY(-8px);box-shadow: 0 15px 30px rgba(0,0,0,0.1);border-color: var(--main-color);}
#product-gallery .item .thumb {width: 100%;height: 290px;background-color: #f9f9f9;display: flex;align-items: center;justify-content: center;overflow: hidden;position: relative;}
#product-gallery .item .thumb img {width: 105%;height: 105%;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);object-fit: contain;transition: transform 0.3s;}
#product-gallery .item:hover .thumb img {transform: translate(-50%, -50%) scale(1.05);}
#product-gallery .item .info {padding: 20px;border-top: 1px solid #eee;}
/* #product-gallery .item .brand {font-size: 13px;color: var(--main-color);font-weight: bold;margin-bottom: 5px;} */
#product-gallery .item .name {font-size: 17px;font-weight: 600;color: #333;margin-bottom: 12px;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;}
#product-gallery .item .price {font-size: 18px;font-weight: 800;color: #000;}

#container.product-detail > .inner {display: block;}
#container.product-detail > .inner > .detail-tabs, #container.product-detail > .inner > .detail-cs-info {display: block;min-width: 0;}
#container.product-detail {margin:40px 0;}
#container.product-detail .detail-top {display: flex;gap: 50px;align-items: stretch;margin-bottom: 50px;}
#container.product-detail .detail-images {flex: 1;display: flex;flex-direction: column;}
#container.product-detail .main-img {border: 1px solid #eee;border-radius: 15px;overflow: hidden;}
/* #container.product-detail .main-img img {width: 100%;object-fit: cover;height: 290px;} */


#container.product-detail .detail-images {
  width: 500px;
  flex-shrink: 0;
}

#container.product-detail .swiper.mySwiper {
  width: 80% !important;
  height: 80%;
  border: 1px solid #eee;
  border-radius: 12px;
  overflow: hidden;
}

#container.product-detail .swiper-slide img {
  width: 100% !important;
  height: 100%;
  object-fit: cover;
  background-color: #fff;
}

#container.product-detail .thumb-list {
  display: flex;
  gap: 10px;
  margin-top: 15px;
  list-style: none;
  padding: 0;
}

#container.product-detail .thumb-list li {
  width: 80px;
  height: 80px;
  cursor: pointer;
  border: 1px solid #eee;
}

#container.product-detail .thumb-list li img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#container.product-detail .detail-info {flex: 1;display: flex;flex-direction: column;justify-content: flex-start; }
#container.product-detail .badge-best {color: var(--main-color);border: 1px solid var(--main-color);padding: 2px 8px;font-size: 12px;font-weight: bold;}
#container.product-detail .price-table {background: #f8f8f8;padding: 20px;border-radius: 10px;margin:20px 0;}
#container.product-detail .price-table .table-title {font-weight: 600;font-size: 1.2em;position: relative;padding-bottom:10px;margin-bottom: 10px;}
#container.product-detail .price-table .table-title::after {content: '';position: absolute;top:110%;left:0;width: 100%;height: 2px;background-color: #000;}
#container.product-detail .price-table ul {list-style: none;padding: 0;}
#container.product-detail .price-table li {display: flex;justify-content: space-between;padding: 10px 0;border-bottom: 1px solid #ddd;}
#container.product-detail .price-table li.highlight {background-color: var(--main-color);font-weight: bold;padding: 12px 10px;margin: 0 -10px;color:#fff;}
#container.product-detail .info-footer span {font-weight: bold;}
#container.product-detail .detail-tabs {border-top: 1px solid #eee;padding-top: 40px;}
#container.product-detail .detail-tabs a {background-color: var(--main-color);padding:10px 40px;color:#fff;cursor: pointer;}
#container.product-detail .detail-tabs img {margin:10px auto;display: block;max-width: 60%}
#container.product-detail .detail-cs-info {margin-top: 80px;border-top: 1px solid #eee;padding-top: 40px;}
#container.product-detail .cs-row {margin-bottom: 40px;}
#container.product-detail .cs-row h3 {display: inline-block;background-color: var(--main-color);padding: 2px 5px;margin-bottom: 15px;font-size: 16px;color:#fff;}
#container.product-detail .cs-row p, #container.product-detail .cs-row li {font-size: 14px;color: #666;line-height: 1.8;}

.container-header-bar {display: flex;justify-content: space-between;align-items: center;padding: 0 0 15px;border-bottom: 1px solid #eee;margin-bottom:40px;min-height: 46px;}
.breadcrumb {font-size: 13px;color: #888;}
.breadcrumb a {color: #888;text-decoration: none;}
.breadcrumb span {color: #333;font-weight: bold;}
.product-filter select {padding: 5px 10px;border: 1px solid #ddd;border-radius: 4px;outline: none;font-family: 'Pretendard Variable', sans-serif;}


.board-table { 
  width: 100%; 
  border-collapse: collapse; 
  table-layout: fixed; 
}
.board-title { margin-bottom: 30px; border-bottom: 2px solid #333; padding-bottom: 15px; }
.board-title h2 { font-size: 24px; font-weight: 700; color: #111; }

.board-table th, .board-table td { 
  padding: 15px 10px; 
  text-overflow: ellipsis; 
  white-space: nowrap; 
  overflow: hidden; 
}

.table-responsive { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.board-table { width: 100%; border-collapse: collapse; min-width: 600px;}
.board-table th { background: #f9f9f9; border-top: 1px solid #e1e1e1; border-bottom: 1px solid #e1e1e1; padding: 15px 10px; font-weight: 600; font-size: 15px; }
.board-table td { padding: 15px 10px; border-bottom: 1px solid #eee; text-align: center; font-size: 14px; color: #666; }

.board-table td.subject { text-align: left; color: #333; }
.board-table td.subject a { text-decoration: none; color: inherit; transition: 0.2s;cursor: pointer;}
.board-table td.subject a:hover { color: var(--main-color); text-decoration: underline; }

.col-num { width: 80px; }
.col-date { width: 120px; }
.col-writer { width: 100px; }

.no-data { padding: 50px 0 !important; color: #999 !important; }

.view-wrapper { padding: 40px 0; max-width: 900px; margin: 0 auto; }
  
.view-header { border-top: 2px solid #333; border-bottom: 1px solid #ddd; padding: 25px 15px; background: #fcfcfc; }
.view-header h2 { font-size: 22px; font-weight: 700; color: #111; margin-bottom: 15px; line-height: 1.4; }
.view-info { display: flex; gap: 20px; font-size: 14px; color: #888; }
.view-info span b { color: #555; font-weight: 500; margin-right: 5px; }

.view-content { padding: 40px 15px; min-height: 300px; line-height: 1.8; font-size: 16px; color: #333; border-bottom: 1px solid #ddd; word-break: break-all; }
.view-content img { max-width: 100%; height: auto; }

.view-footer { margin-top: 30px; display: flex; justify-content: center; gap: 10px; }
.btn-list { 
  display: inline-block; padding: 12px 30px; background: #555; color: #fff; 
  text-decoration: none; border-radius: 4px; font-size: 15px; transition: 0.2s; 
}
.btn-list:hover { background: #333; }


.faq-wrapper {  max-width: 800px; }
.faq-title {
    margin-bottom: 30px;
    border-bottom: 2px solid #333;
    padding-bottom: 15px;
}
.faq-title h2 { font-size: 24px; font-weight: 700; color: #111; }

.faq-item { border-bottom: 1px solid #eee; }

.faq-question { 
  width: 100%; padding: 20px; text-align: left; background: #fff;
  border: none; outline: none; cursor: pointer; display: flex;
  justify-content: space-between; align-items: center; transition: 0.3s;
}
.faq-question:hover { background: #f9f9f9; }
.faq-question .q-text { font-size: 17px; font-weight: 600; color: #333; }
.faq-question .q-icon { font-size: 18px; color: #999; transition: 0.3s; }

.faq-answer { 
  max-height: 0; overflow: hidden; background: #fcfcfc;
  transition: max-height 0.3s ease-out; 
}
.faq-answer-inner { padding: 25px; font-size: 15px; color: #666; line-height: 1.8; }
.faq-answer-inner b { color: #333; }

.faq-item.active .faq-answer { max-height: 500px;}
.faq-item.active .q-icon { transform: rotate(180deg); color:var(--main-color); }
.faq-item.active .q-text { color: var(--main-color); }

.image-section {
    padding: 60px 0;
    text-align: center;
  }

  .content-img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
    border-radius: 8px;
  }


@media (max-width: 1199px) {
  .inner {
    width: 100%;
    max-width: 1024px;
    padding: 0 20px;
    box-sizing: border-box;
  }
  
  #product-gallery .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}

@media (max-width: 1100px) {
  #board-wrapper {width:70%;}
  .board-table {min-width: auto;}
}

@media (max-width: 1023px) {
  .inner {
    max-width: 768px;
  }
  
  #container.product-detail .detail-top {
    gap: 30px;
  }
  
  #aside {
    width: 200px;
  }

  #menu .depth01 > li {
    margin: 0 15px;
  }
  #menu .depth01 > li > a {
    font-size: 24px;
  }

  #container.product-detail .detail-top {
    flex-direction: column;
  }

  #container.product-detail .detail-images {
    width: 100%;
    max-width: 100%;
    margin: 0;
  }

  #container.product-detail .thumb-list {
    display: none;
  }

  #container.product-detail .swiper {
    border: none;
    border-radius: 0;
  }
  #container.product-detail .thumb-list {
    display: none;
  }

  #container.product-detail .detail-images {
    width: 100%;
  }

  #container.product-detail .swiper-slide img {

  height: 100%;}
  
  #container.product-detail .swiper.mySwiper {
    height: auto;
    aspect-ratio: 1 / 1;
    border: none;
    border-radius: 0;
  }

  #menu .depth02 {display: none !important;}
}

@media (max-width: 767px) {
  #header .logo { height: 120px; }
  #header .logo > a { font-size: 2.4em; }

  #container.side-container > .inner {
    flex-direction: column;
    padding: 20px;
  }

  #container.side-container > .inner {align-items: normal;}
  #aside {
    display: none;;
  }

  #footer {
    text-align: center;
    padding: 30px 20px;
  }
  #footer p {
    font-size: 1.15em;
  }


  #mobile-menu-btn { display: flex; }

  #header .logo {
    height: 60px;
    text-align: left;
    padding-left: 60px;
  }
  #header .logo > a {
    font-size: 1.6em;
    position: static;
    transform: none;
    line-height: 60px;
  }

  #menu {
    position: fixed;
    top: 0;
    left: -280px;
    width: 280px;
    height: 100%;
    background: #fff;
    z-index: 18;
    transition: 0.3s ease;
    border: none;
    display: block !important;
  }

  #menu .inner {padding:0;}

  #menu #nav ul {padding:0;}

  #menu.active { left: 0; }

  #menu .depth01 {
    flex-direction: column;
    align-items: flex-start;
    padding-top: 50px;
  }
  #menu .depth01 > li {
    width: 100%;
    margin: 0;
    border-bottom: 1px solid #f4f4f4;
  }
  #menu .depth01 > li > a {
    padding: 0 20px;
    line-height: 50px;
    width: 100%;
  }

  #menu .depth02 {
    position: static;
    box-shadow: none;
    background: #f9f9f9;
    min-width: 100%;
  }
  
  .mobile-close {
    position: absolute;
    top: 5px;
    right: -35px;
    font-size: 24px;
    cursor: pointer;
    display: none;
    color:#fff;
  }

  #menu .depth02 {
    display: none;
    position: static;
    box-shadow: none;
    background: #f9f9f9;
    min-width: 100%;
  }

  #menu .depth03 {
    display: none;
    position: static;
    min-width: 100%;
    box-shadow: none;
    border-left: none;
    background: #f1f1f1;
    padding-left: 20px;
  }

  #menu .depth03 li a {
    line-height: 40px;
    font-size: 14px;
    border-bottom: 1px solid #e5e5e5;
  }

  #menu .has-sub.open > a::after {
    transform: rotate(90deg);
  }

  #menu .depth02, 
  #menu .depth03 {
    display: none !important; 
    position: static;
    box-shadow: none;
    width: 100%;
  }

  #menu .depth02.active, 
  #menu .depth03.active {
    display: block !important;
  }

  #menu .depth03 {
    background-color: #f1f1f1;
    padding-left: 20px;
  }

  #board-wrapper {width:100%;}

  .board-title h2 { font-size: 20px; }
  .board-table th, .board-table td { padding: 12px 8px; font-size: 13px; }

  .col-num, .col-writer, .col-date,
  .board-table td:nth-child(1),
  .board-table td:nth-child(3),
  .board-table td:nth-child(4) {
    display: none;
  }

  .board-table th:nth-child(2),
  .board-table td.subject {
    width: 100% !important;
    display: block;
    box-sizing: border-box;
  }

  .table-responsive {
    overflow-x: hidden;
  }

  .board-table {
    min-width: 100%;
  }

  .board-table td.subject {
    padding: 20px 15px;
    font-size: 16px;
    border-bottom: 1px solid #eee;
  }

  .view-wrapper { padding: 20px 0; }
  .view-header h2 { font-size: 18px; }
  .view-info { flex-direction: column; gap: 5px; }
  .view-content { font-size: 15px; padding: 30px 15px; }

  .faq-wrapper { padding: 30px 15px; }
  .faq-title h2 { font-size: 20px; }
  .faq-question .q-text { font-size: 15px; }

  .image-section {
    padding: 30px 15px;
  }
}

@media (max-width: 480px) {
  #menu .depth01 {
    justify-content: flex-start;
    overflow-x: auto;
    white-space: nowrap;
    padding: 0 10px;
  }
  
  #product-gallery .gallery-grid {
    grid-template-columns: 1fr;
  }

  #container.product-detail .detail-tabs a {
    display: block;
    text-align: center;
    padding: 12px 0;
  }

  #container.product-detail .detail-tabs img {
    max-width: 100%;
  }

  .container-header-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
  }
}