@charset "UTF-8";
/* ==========================================================================
   한우선물세트 페이지 (/hanwoo-gift-set/)
   사이트 공통 컬러 : 레드 #7b0412 / 골드 #eec386 / 크림 #faf8f4
   클래스는 gs 접두어로 사이트 공통 스타일과 겹치지 않게 한다.
   ========================================================================== */

.gs {padding:40px 0 120px; background-color:#ffffff; font-family:"PretendardR", sans-serif; color:#3a3530; word-break:keep-all;}
.gs .contentWrap {max-width:1200px;}
.gs strong {font-family:"PretendardB", sans-serif; font-weight:normal;}

/* 현재 위치 */
.gsBreadcrumb {font-size:14px; color:#8a837a;}
.gsBreadcrumb a {color:#8a837a;}
.gsBreadcrumb a:hover {color:#7b0412;}
.gsBreadcrumb i {font-size:12px; margin:0 4px;}

/* 소개 */
.gsHero {padding:50px 0 10px; text-align:center;}
.gsKicker {font-family:"PretendardM", sans-serif; font-size:14px; letter-spacing:0.18em; color:#a8793d; margin-bottom:14px;}
.gsHero h1 {font-family:"NanumMjB", serif; font-size:46px; line-height:1.3; color:#7b0412;}
.gsLead {max-width:820px; margin:22px auto 0; font-size:17px; line-height:1.8; color:#4d4843;}
.gsToc {display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-top:30px;}
.gsToc a {display:inline-block; padding:8px 18px; border:1px solid #e3d8c8; border-radius:30px; font-family:"PretendardM", sans-serif; font-size:15px; color:#4d4843; background-color:#faf8f4;}
.gsToc a:hover {border-color:#7b0412; color:#7b0412;}

/* 공통 블록 */
.gsBlock {padding-top:90px; scroll-margin-top:20px;}
.gsBlock h2 {font-family:"NanumMjB", serif; font-size:34px; line-height:1.35; color:#191919; margin-bottom:28px; text-align:center;}
.gsBlock h3 {font-family:"PretendardB", sans-serif; font-weight:normal; font-size:20px; line-height:1.4; color:#191919;}
.gsText {font-size:16px; line-height:1.8; color:#4d4843; margin-bottom:24px;}
.gsText a {color:#7b0412; text-decoration:underline; text-underline-offset:3px;}
.gsNote {margin-top:18px; font-size:14px; color:#8a837a;}

/* 세트 카드 */
.gsCards {display:grid; grid-template-columns:repeat(3, 1fr); gap:32px;}
.gsCard {display:flex; flex-direction:column; border:1px solid #ebe6dd; border-radius:16px; overflow:hidden; background-color:#ffffff; scroll-margin-top:20px;}
.gsCard:target {border-color:#7b0412; box-shadow:0 0 0 2px #7b0412;}
.gsCard > img {display:block; width:100%; height:auto; aspect-ratio:1 / 1; object-fit:cover; background-color:#f2f1ed;}
.gsCardBody {display:flex; flex-direction:column; flex:1; padding:22px 22px 24px;}
.gsBadge {align-self:flex-start; padding:3px 10px; border-radius:4px; font-family:"PretendardM", sans-serif; font-size:13px; color:#7b0412; background-color:#f6ebe0;}
.gsCard h3 {margin-top:10px; font-size:22px;}
.gsCard h3 span {color:#7b0412;}
.gsDesc {margin-top:6px; font-size:15px; line-height:1.6; color:#6a6259;}
.gsParts {display:grid; grid-template-columns:repeat(2, 1fr); gap:6px; margin-top:16px;}
.gsParts li {display:flex; justify-content:space-between; padding:8px 12px; border-radius:8px; background-color:#faf8f4; font-size:15px; color:#7b0412;}
.gsMeta {margin-top:12px; font-size:14px; color:#8a837a;}
.gsPrice {margin-top:auto; padding-top:16px; display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 10px;}
.gsPrice del {font-size:15px; color:#a8a29a;}
.gsPrice strong {font-size:26px; color:#191919;}
.gsUnit {flex-basis:100%; font-size:14px; color:#7b0412;}

/* 버튼 — base.css 의 a:link{color:#000} 보다 우선하도록 .gs 를 붙인다 */
.gs .gsBtn {display:block; margin-top:16px; padding:14px 10px; border-radius:8px; text-align:center; font-family:"PretendardB", sans-serif; font-size:16px; color:#ffffff; background-color:#7b0412;}
.gs .gsBtn:hover {background-color:#5e030d;}

/* 비교표 */
.gsTableWrap {overflow-x:auto; -webkit-overflow-scrolling:touch; border-top:2px solid #7b0412;}
.gsTable {width:100%; min-width:760px; border-collapse:collapse; font-size:15px;}
.gsTable caption {position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0);}
.gsTable th, .gsTable td {padding:16px 12px; border-bottom:1px solid #ebe6dd; text-align:left; vertical-align:middle; line-height:1.5;}
.gsTable thead th {font-family:"PretendardB", sans-serif; font-weight:normal; background-color:#faf8f4; color:#4d4843; white-space:nowrap;}
.gsTable tbody th {font-family:"PretendardB", sans-serif; font-weight:normal; white-space:nowrap;}
.gsTable tbody th a {color:#7b0412; text-decoration:underline; text-underline-offset:3px;}
.gsTable .num {text-align:right; white-space:nowrap;}

/* 추천 박스 */
.gsGrid {display:grid; grid-template-columns:repeat(3, 1fr); gap:24px;}
.gsBox {padding:26px 24px; border-radius:14px; background-color:#faf8f4;}
.gsBox p {margin-top:10px; font-size:15px; line-height:1.7; color:#4d4843;}
.gsPick {margin-top:16px; padding-top:14px; border-top:1px solid #e3d8c8;}
.gsPick li {display:flex; justify-content:space-between; gap:10px; padding:5px 0; font-size:15px;}
.gsPick a {font-family:"PretendardB", sans-serif; color:#7b0412; text-decoration:underline; text-underline-offset:3px;}
.gsPick span {color:#6a6259;}
.gsCorp {margin:24px 0 0; text-align:center;}

/* 품질 */
.gsPoints {display:grid; grid-template-columns:repeat(3, 1fr); gap:20px;}
.gsGrade {display:flex; justify-content:center; gap:30px; margin:40px 0 24px;}
.gsGrade figure {margin:0; text-align:center;}
.gsGrade img {display:block; max-width:100%; height:auto; border-radius:10px;}
.gsGrade figcaption {margin-top:10px; font-family:"PretendardB", sans-serif; font-size:16px; color:#7b0412;}
#quality .gsText {text-align:center;}

/* 포장·배송 */
.gsInfo {border-top:2px solid #7b0412;}
.gsInfo > div {display:flex; gap:24px; padding:20px 8px; border-bottom:1px solid #ebe6dd;}
.gsInfo dt {flex:0 0 130px; font-family:"PretendardB", sans-serif; font-size:16px; color:#7b0412;}
.gsInfo dd {flex:1; font-size:16px; line-height:1.7;}

/* 후기 */
.gsReviews {display:grid; grid-template-columns:repeat(3, 1fr); gap:20px;}
.gsReviews li {padding:26px 24px; border-radius:14px; background-color:#7b0412; color:#ffffff;}
.gsReviews p {font-size:16px; line-height:1.7;}
.gsReviews span {display:block; margin-top:14px; font-size:13px; color:#eec386;}

/* FAQ */
.gsFaq {border-top:2px solid #7b0412;}
.gsFaq details {border-bottom:1px solid #ebe6dd;}
.gsFaq summary {position:relative; padding:20px 40px 20px 8px; cursor:pointer; list-style:none; font-family:"PretendardB", sans-serif; font-size:17px; color:#191919;}
.gsFaq summary::-webkit-details-marker {display:none;}
.gsFaq summary::before {content:"Q."; margin-right:8px; color:#7b0412;}
.gsFaq summary::after {content:"+"; position:absolute; right:10px; top:50%; transform:translateY(-50%); font-size:24px; color:#7b0412;}
.gsFaq details[open] summary::after {content:"−";}
.gsFaq details p {padding:0 8px 22px 34px; font-size:16px; line-height:1.8; color:#4d4843;}

/* 관련 글 */
.gsRelated {display:grid; grid-template-columns:repeat(3, 1fr); gap:16px;}
.gsRelated a {display:flex; justify-content:space-between; align-items:center; gap:10px; height:100%; padding:20px 22px; border:1px solid #ebe6dd; border-radius:12px; font-family:"PretendardM", sans-serif; font-size:16px; line-height:1.5; color:#3a3530; box-sizing:border-box;}
.gsRelated a:hover {border-color:#7b0412; color:#7b0412;}

/* 구매 안내 */
.gsCta {margin-top:100px; padding:50px 24px; border-radius:18px; text-align:center; background-color:#7b0412; color:#ffffff;}
.gsCta h2 {font-family:"NanumMjB", serif; font-size:32px; line-height:1.35;}
.gsCta p {margin-top:12px; font-size:16px; color:#f6ebe0;}
.gsCtaBtns {display:flex; justify-content:center; gap:12px; margin-top:24px;}
.gsCtaBtns .gsBtn {margin-top:0; min-width:240px; padding:14px 24px;}
.gs .gsBtnWhite {color:#7b0412; background-color:#eec386;}
.gs .gsBtnWhite:hover {background-color:#ffffff;}
.gs .gsBtnLine {border:1px solid #ffffff; background-color:transparent; color:#ffffff;}
.gs .gsBtnLine:hover {background-color:rgba(255,255,255,0.12);}

/* ------------------------------ 반응형 ------------------------------ */
@media (max-width:1400px) {
    .gsHero h1 {font-size:40px;}
}

@media (max-width:980px) {
    .gs {padding:24px 0 90px;}
    .gsHero {padding-top:34px;}
    .gsHero h1 {font-size:32px;}
    .gsLead {font-size:16px;}
    .gsBlock {padding-top:64px; scroll-margin-top:84px;}
    .gsCard {scroll-margin-top:84px;}
    .gsBlock h2 {font-size:27px;}
    .gsCards {grid-template-columns:repeat(2, 1fr); gap:20px;}
    .gsGrid, .gsPoints, .gsReviews, .gsRelated {grid-template-columns:1fr; gap:14px;}
    .gsCta h2 {font-size:26px;}
}

@media (max-width:640px) {
    .gsHero h1 {font-size:28px;}
    .gsToc {gap:8px;}
    .gsToc a {padding:6px 14px; font-size:14px;}
    .gsBlock h2 {font-size:23px; margin-bottom:20px;}
    .gsCards {grid-template-columns:1fr;}
    .gsCardBody {padding:18px 18px 20px;}
    .gsGrade {gap:12px;}
    .gsInfo > div {flex-direction:column; gap:6px;}
    .gsInfo dt {flex-basis:auto;}
    .gsFaq summary {font-size:16px;}
    .gsCtaBtns {flex-direction:column;}
    .gsCtaBtns .gsBtn {min-width:0;}
}