/* ============================================
   Market 게시판 스킨 (마켓)
   ============================================ */

/* YES24 웹폰트 - jsDelivr CDN (WebFontWorld 한국 폰트 CDN) */
/* 만약 아래 CDN URL이 작동 안하면 fonts 폴더에 직접 업로드 후 url() 경로만 교체 */
@font-face {
    font-family: 'YES24';
    src: url('https://cdn.jsdelivr.net/gh/webfontworld/yes24/YES24.woff2') format('woff2'),
         url('https://cdn.jsdelivr.net/gh/webfontworld/yes24/YES24.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

.market-board {padding: 0;}
.market-board .cinner {max-width: 1400px;margin: 0 auto;padding: 0;}
@media all and (max-width: 640px){ .market-board .cinner {margin: 0 20px;} }

/* ============================================
   상단 인트로
   ============================================ */
.market-board .mk-intro {display: flex;flex-direction: column;align-items: center;margin: 50px 0 60px;}
.market-board .mk-intro__txt {text-align: center;margin-bottom: 150px;}
.market-board .mk-intro__tit {margin: 0 0 16px;font-family: 'Pretendard', sans-serif;font-size: 40px;line-height: 1.4;font-weight: 700;letter-spacing: 0;text-align: center;}
.market-board .mk-intro__tit > span {color: #222;display: block;font-weight: 700;}
.market-board .mk-intro__tit > strong {color: var(--color-main);font-weight: 700;}
.market-board .mk-intro__desc {color: #666666;font-family: 'Pretendard', sans-serif;font-size: 24px;font-weight: 600;line-height: 1.4;letter-spacing: 0;margin: 0;text-align: center;}
.market-board .mk-intro__banner {position: relative;width: 100%;max-width: 100%;}
.market-board .mk-intro__bannerimg {width: 100%;height: auto;display: block;}
.market-board .mk-intro__badge {position: absolute;top: -80px;left: 40px;width: 196px;height: 228px;z-index: 2;}
.market-board .mk-intro__badge > img {width: 100%;height: 100%;object-fit: contain;}

/* ============================================
   카테고리 탭
   ============================================ */
.market-board .mk-cates {display: flex;justify-content: center;gap: 70px;margin: 0 0 50px;padding: 0;list-style: none;}
.market-board .mk-cates > li {position: relative;padding: 0 4px 16px;}
.market-board .mk-cates > li > a {color: #888;font-size: 1em;font-weight: 500;transition: color .2s;display: inline-block;}
.market-board .mk-cates > li.on > a {color: var(--color-main);font-weight: 700;}
.market-board .mk-cates > li.on::after {content: '';position: absolute;bottom: -2px;left: 50%;transform: translateX(-50%);width: 84px;height: 6px;background: #4F8255;}
.market-board .mk-cates > li:hover > a {color: var(--color-main);}

/* ============================================
   관리자 버튼 영역
   ============================================ */
.market-board .mk-btn-top {display: flex;justify-content: flex-end;align-items: center;gap: 8px;margin-bottom: 20px;flex-wrap: wrap;}
.market-board .mk-btn-top .btn-all-chk {display: inline-flex;align-items: center;gap: 8px;padding: 8px 14px;background: #fff;border: 1px solid #DDD;border-radius: 4px;color: #555;font-size: .92em;cursor: pointer;margin: 0;}
.market-board .mk-btn-top .btn-all-chk input {width: 16px;height: 16px;margin: 0;}
.market-board .mk-btn-top .btn-delete {padding: 8px 14px;background: #fff;color: #C0392B;border: 1px solid #C0392B;border-radius: 4px;font-size: .92em;cursor: pointer;}
.market-board .mk-btn-top .btn-write {padding: 8px 18px;background: var(--color-main);color: #fff;border-radius: 4px;font-size: .92em;border: 1px solid var(--color-main);}

/* ============================================
   상품 그리드 (4열)
   ============================================ */
.market-board .mk-grid {display: grid;grid-template-columns: repeat(4, 1fr);gap: 40px 24px;list-style: none;padding: 0;margin: 0;}
.market-board .mk-card {position: relative;border: 1px solid #E5E5E5;border-radius: 0 0 12px 12px;overflow: hidden;background: #fff;transition: box-shadow .25s;}
.market-board .mk-card:hover {box-shadow: 0 6px 20px rgba(0,0,0,.06);}
.market-board .mk-chk-cell {position: absolute;top: 8px;left: 8px;z-index: 3;padding: 4px;background: rgba(255,255,255,.85);border-radius: 4px;}
.market-board .mk-chk-cell input {width: 18px;height: 18px;accent-color: var(--color-main);cursor: pointer;}
.market-board .mk-card__link {display: block;}
.market-board .mk-card__img {aspect-ratio: 1/1;overflow: hidden;background: #F3F3F3;margin: 0;}
.market-board .mk-card__img > img {width: 100%;height: 100%;object-fit: cover;display: block;transition: transform .35s;}
.market-board .mk-card__link:hover .mk-card__img > img {transform: scale(1.04);}
.market-board .mk-card__img .no-img {display: block;width: 100%;height: 100%;background: #EEE;}
.market-board .mk-card__info {padding: 20px 18px 22px;}
.market-board .mk-card__name {margin: 0 0 8px;color: #000;font-size: 22px;font-weight: 600;line-height: 1.4;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;min-height: 2.8em;}
.market-board .mk-card__sum {margin: 0 0 14px;color: #666666;font-size: 18px;font-weight: 400;line-height: 1.4;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;}
.market-board .mk-card__price {margin: 0 0 16px;color: #000;font-size: 28px;font-weight: 600;line-height: 1;}
.market-board .mk-card__price .won {font-size: 22px;font-weight: 400;margin-left: 2px;}
.market-board .mk-card__brand {margin: 0;padding-top: 14px;color: #4F8255;font-size: 20px;font-weight: 600;}

.market-board .mk-empty {padding: 100px 20px;text-align: center;color: #888;font-size: 1.05em;}

/* ============================================
   페이징
   ============================================ */
.market-board .mk-pg {margin-top: 60px;}
.market-board .mk-pg .pagination {display: flex;justify-content: center;gap: 4px;margin: 0;padding: 0;list-style: none;}
.market-board .mk-pg .page-link {display: flex;align-items: center;justify-content: center;min-width: 36px;height: 36px;padding: 0 10px;border: 1px solid transparent;color: #555;font-size: .92em;background: transparent;}
.market-board .mk-pg .page-item.active .page-link {background: var(--color-main);color: #fff;}
.market-board .mk-pg .page-link:hover {color: var(--color-main);}
.market-board .mk-more {margin-top: 60px;text-align: center;}
.market-board .mk-more__btn {display: inline-block;min-width: 240px;padding: 16px 36px;background: #fff;border: 1px solid #DDD;border-radius: 6px;color: #333;font-size: 1em;font-weight: 600;cursor: pointer;transition: .2s;}
.market-board .mk-more__btn:hover {border-color: var(--color-main);color: var(--color-main);}
.market-board .mk-more__btn.is-loading {opacity: .6;cursor: default;}

/* ============================================
   상세 보기 (view)
   ============================================ */
.mk-view-page .mk-view {padding-top: 30px;}

/* 상단 - 이미지 + 정보 좌우 분할 (grid 사용, 정보영역이 이미지 높이만큼 stretch) */
.mk-view__top {display: grid;grid-template-columns: minmax(0, 580px) 1fr;gap: 80px;padding-bottom: 70px;border-bottom: 1px solid #E5E5E5;margin-bottom: 70px;align-items: stretch;}
.mk-view__gallery {position: relative;width: 100%;}

/* 슬라이드 - 시안 비율 580×485 (약 7:6), 라운딩 없음 */
.market-board .mk-gallery-box {width: 100%;aspect-ratio: 580 / 485;position: relative;background: #F5F5F5;overflow: hidden;}
.market-board .mk-gallery-box .mk-swiper {position: absolute;top: 0;left: 0;right: 0;bottom: 0;width: 100%;height: 100%;}
.market-board .mk-swiper .swiper-wrapper {height: 100%;}
.market-board .mk-swiper .swiper-slide img {width: 100%;height: 100%;object-fit: cover;display: block;}

/* 좌우 화살표 - 시안에서 제거됨 */
.mk-swiper-prev,
.mk-swiper-next {display: none !important;}

/* 페이지네이션 - 이미지 아래 (외부 위치), 활성 도트 주황색 #FF6A00 */
.mk-view__gallery .mk-swiper-pg {position: absolute;top: 100%;left: 0;right: 0;display: flex;justify-content: center;gap: 10px;margin-top: 18px;}
.mk-view__gallery .mk-swiper-pg .swiper-pagination-bullet {width: 12px;height: 12px;background: #D9D9D9;opacity: 1;margin: 0 !important;border-radius: 50%;transition: background .2s;cursor: pointer;}
.mk-view__gallery .mk-swiper-pg .swiper-pagination-bullet-active {background: #FF6A00;}

.mk-view__no-img,
.mk-no-img {background: #F5F5F5;width: 100%;aspect-ratio: 580 / 485;}

/* 정보 영역 */
.mk-view__info {min-width: 0;display: flex;flex-direction: column;padding-top: 0;min-height: 100%;}
.mk-view__title {margin: 0 0 18px;color: #171717;font-size: 40px;font-weight: 700;line-height: 1.4;}
.mk-view__excerpt {margin: 0 0 20px;color: #666666;font-size: 24px;font-weight: 500;line-height: 1.4;}
.mk-view__price {margin: 0 0 24px;color: #171717;font-size: 33px;font-weight: 700;line-height: 1;}
.mk-view__price .won {font-size: 24px;margin-left: 4px;font-weight: 400;color: #171717;}
.mk-view__meta {list-style: none;padding: 20px 0;margin: 45px 0;border-top: 1px solid #E5E5E5;border-bottom: 1px solid #E5E5E5;}
.mk-view__meta > li {display: flex;gap: 10px;padding: 5px 0;color: #666666;font-size: 20px;line-height: 1.4;}
.mk-view__meta .lab {color: #666666;font-weight: 500;flex: 0 0 auto;}
.mk-view__meta .val {color: #171717;font-weight: 700;}

/* 버튼 영역 - 정보 박스 맨 아래로 */
.mk-view__btns {display: flex;gap: 14px;margin-top: auto;}
.mk-view__btns .btn {flex: 1;padding: 17px 14px;text-align: center;font-size: 1em;font-weight: 600;border-radius: 999px;transition: .2s;line-height: 1.2;}
.mk-view__btns .btn-story {background: #fff;color: var(--color-main);border: 1.5px solid var(--color-main);}
.mk-view__btns .btn-story:hover {background: var(--color-main);color: #fff;}
.mk-view__btns .btn-buy {background: var(--color-main);color: #fff;border: 1.5px solid var(--color-main);}
.mk-view__btns .btn-buy:hover {background: var(--color-acc, #256426);border-color: var(--color-acc, #256426);}
.mk-view__btns .btn-disabled {background: #F5F5F5;color: #BBB;border: 1.5px solid #EEE;cursor: not-allowed;pointer-events: none;flex: 1;text-align: center;padding: 17px 14px;font-weight: 600;border-radius: 999px;font-size: 1em;line-height: 1.2;}

/* 본문 - 인용구 스타일 (좌우 큰 따옴표, YES24 폰트, 본문도 YES24) */
.mk-view__body {padding: 60px 0 80px;color: #333;font-family: 'YES24', 'Pretendard', sans-serif;font-size: 34px;line-height: 1.4;text-align: center;font-weight: 400;position: relative;max-width: 880px;margin: 0 auto;letter-spacing: 0;}
.mk-view__body::before {content: '\201C';display: block;font-family: 'YES24', Georgia, 'Times New Roman', serif;font-size: 100px;font-weight: 400;line-height: 1;color: #C9C9C9;text-align: center;margin-bottom: 30px;height: 60px;overflow: hidden;}
.mk-view__body::after {content: '\201D';display: block;font-family: 'YES24', Georgia, 'Times New Roman', serif;font-size: 100px;font-weight: 400;line-height: 1;color: #C9C9C9;text-align: center;margin-top: 30px;height: 60px;}
.mk-view__body img {max-width: 100%;height: auto;display: block;margin: 24px auto;}
.mk-view__body p {margin-bottom: 0;font-family: inherit;}

@media all and (max-width: 1024px){
    .mk-view__body {font-size: 26px;padding: 50px 0 70px;}
    .mk-view__body::before,
    .mk-view__body::after {font-size: 80px;height: 50px;}
}
@media all and (max-width: 768px){
    .mk-view__body {font-size: 18px;padding: 40px 0 60px;}
    .mk-view__body::before,
    .mk-view__body::after {font-size: 60px;height: 40px;margin: 0 0 20px;}
    .mk-view__body::after {margin: 20px 0 0;}
}

/* 상품 소개 (특징/이용방법/유의사항) - PNG 아이콘 사용 */
.mk-info {padding: 60px 0 30px;border-top: 1px solid #E5E5E5;margin-bottom: 30px;}
.mk-info__head {margin: 0 0 50px;color: #4F8255;font-family: 'Pretendard', sans-serif;font-size: 38px;font-weight: 700;line-height: 1;text-align: left;letter-spacing: 0;}
.mk-info__sec {margin-bottom: 50px;padding: 0;border: 0;}
.mk-info__sec:last-child {margin-bottom: 0;}
.mk-info__tit {display: flex;align-items: center;gap: 12px;margin-bottom: 18px;color: #222;font-size: 1.2em;font-weight: 700;letter-spacing: -.01em;}
.mk-info__ico {flex: 0 0 28px;width: 28px;height: 28px;object-fit: contain;display: block;}
.mk-info__txt {padding-left: 40px;color: #555;font-size: .98em;line-height: 1.95;}

/* 관리자 */
.mk-view__admin {display: flex;justify-content: flex-end;gap: 6px;margin-bottom: 30px;}
.mk-view__admin .btn-mini {padding: 6px 14px;background: #F3F3F3;color: #555;border-radius: 4px;font-size: .85em;}
.mk-view__admin .btn-mini:hover {background: var(--color-main);color: #fff;}

/* 하단 CTA - 이미지만 (이미지 자체에 텍스트 포함) */
.mk-cta {display: grid;grid-template-columns: 1fr 1fr;gap: 20px;margin: 60px 0 60px;}
.mk-cta__card {position: relative;display: block;overflow: hidden;line-height: 0;}
.mk-cta__img {width: 100%;height: auto;display: block;transition: transform .5s;}
.mk-cta__card:hover .mk-cta__img {transform: scale(1.03);}

/* 목록 버튼 - 가로 전체 너비 + 라운드, 텍스트 20px Pretendard */
.mk-view__btns-bottom {margin-top: 40px;}
.mk-view__btns-bottom .btn-list {display: block;width: 100%;padding: 22px 30px;background: #fff;border: 1px solid #DDD;color: #000;border-radius: 8px;font-family: 'Pretendard', sans-serif;font-weight: 600;font-size: 20px;line-height: 1.4;text-align: center;letter-spacing: 0;transition: .2s;}
.mk-view__btns-bottom .btn-list:hover {border-color: var(--color-main);color: var(--color-main);}

@media all and (max-width: 768px){
    .mk-info__head {font-size: 24px;margin: 0 0 36px;}
    .mk-view__btns-bottom .btn-list {font-size: 16px;padding: 18px 20px;}
}

/* ============================================
   반응형
   ============================================ */
@media all and (max-width: 1199px){
    .market-board .mk-grid {grid-template-columns: repeat(3, 1fr);}
}
@media all and (max-width: 1024px){
    .market-board .mk-intro__tit {font-size: 1.33em;}
    .market-board .mk-intro__badge {width: 100px;height: 100px;top: -20px;left: 20px;}
    .market-board .mk-cates {gap: 30px;}
    .mk-view__top {grid-template-columns: 1fr;gap: 36px;}
    .mk-view__gallery,
    .mk-view__info {width: 100%;}
    .mk-cta {grid-template-columns: 1fr;gap: 14px;}
}
@media all and (max-width: 768px){
    .market-board .mk-grid {grid-template-columns: repeat(2, 1fr);gap: 30px 16px;}
    .market-board .mk-card__name {font-size: 17px;}
    .market-board .mk-card__sum {font-size: 14px;}
    .market-board .mk-card__price {font-size: 22px;}
    .market-board .mk-card__price .won {font-size: 16px;}
    .market-board .mk-card__brand {font-size: 15px;}
    .market-board .mk-intro__badge {width: 80px;height: 80px;top: -16px;left: 10px;}
    .market-board .mk-cates {gap: 20px;}
    .market-board .mk-cates > li > a {font-size: .92em;}
    .mk-view__title {font-size: 28px;}
    .mk-view__excerpt {font-size: 18px;}
    .mk-view__price {font-size: 26px;}
    .mk-view__price .won {font-size: 18px;}
    .mk-view__meta > li {font-size: 16px;}
    .mk-view__btns .btn {padding: 12px 14px;font-size: .92em;}
}

/* ============================================
   글쓰기 폼 (간소화)
   ============================================ */
.market-board #bo_w {padding: 30px 0;}
.market-board #bo_w h2.sr-only {position: absolute;width: 1px;height: 1px;padding: 0;margin: -1px;overflow: hidden;clip: rect(0,0,0,0);}
.mk-write__top {margin-bottom: 30px;padding-top: 14px;border-top: 3px solid var(--color-main);max-width: 220px;}
.mk-write__title {color: #222;font-size: 1.5em;font-weight: 700;margin: 0;}
.mk-write__list {list-style: none;margin: 0;padding: 0;border-top: 1px solid #E5E5E5;}
.mk-write__row {display: flex;align-items: flex-start;gap: 30px;padding: 20px 0;border-bottom: 1px solid #EEE;}
.mk-write__lab {flex: 0 0 130px;padding-top: 10px;color: #333;font-weight: 600;font-size: .95em;margin: 0;}
.mk-write__lab .req {color: #C0392B;}
.mk-write__field {flex: 1;min-width: 0;}
.mk-write__field input[type="text"],
.mk-write__field input[type="number"],
.mk-write__field select,
.mk-write__field textarea {width: 100%;padding: 10px 14px;border: 1px solid #DDD;border-radius: 4px;font-size: 1em;color: #333;background: #fff;}
.mk-write__field input:focus,
.mk-write__field textarea:focus,
.mk-write__field select:focus {border-color: var(--color-main);outline: none;}
.mk-write__field .desc {margin: 6px 0 0;color: #888;font-size: .82em;}

/* 상품명 줄바꿈 가이드 */
.proj-title-hint {display: flex;align-items: center;flex-wrap: wrap;gap: 8px;margin: 10px 0 0;padding: 10px 14px;background: #F7F7F7;border-radius: 4px;color: #555;font-size: .88em;line-height: 1.5;}
.proj-title-hint i.fa-info-circle {color: var(--color-main);font-size: 1em;}
.proj-br-code {display: inline-block;padding: 3px 10px;background: #fff;border: 1px solid #DDD;border-radius: 3px;color: #C5371F;font-family: 'Courier New', monospace;font-size: .95em;font-weight: 500;}
.btn-copy-br {display: inline-flex;align-items: center;gap: 5px;padding: 4px 12px;border: 1px solid var(--color-main);background: #fff;color: var(--color-main);border-radius: 3px;font-size: .85em;font-weight: 600;cursor: pointer;transition: .2s;}
.btn-copy-br:hover {background: var(--color-main);color: #fff;}
.btn-copy-br.copied {background: var(--color-main);color: #fff;}
.proj-title-hint__ex {display: block;width: 100%;margin-top: 4px;padding-top: 8px;border-top: 1px dashed #DDD;color: #888;font-size: .92em;}
.mk-write__btns {display: flex;justify-content: center;gap: 10px;margin-top: 40px;padding-top: 30px;border-top: 1px solid #E5E5E5;}
.mk-write__btns .btn-submit,
.mk-write__btns .btn-cancel {min-width: 160px;padding: 12px 30px;border-radius: 4px;font-weight: 600;font-size: 1em;cursor: pointer;text-align: center;line-height: 1.5;}
.mk-write__btns .btn-submit {background: var(--color-main);color: #fff;border: 1px solid var(--color-main);}
.mk-write__btns .btn-cancel {background: #fff;color: #555;border: 1px solid #DDD;display: inline-flex;align-items: center;justify-content: center;}

@media all and (max-width: 768px){
    .mk-write__row {flex-direction: column;gap: 8px;padding: 16px 0;}
    .mk-write__lab {flex: 0 0 auto;padding-top: 0;}
}