section.stnWrap img {
    max-width: 100%;
}


article.stnHeaderTitle {
    margin-top: 2rem;
    display: flex; gap: 1rem; flex-direction: column;
}
article.stnHeaderTitle > div.description {
    font-weight: 300; font-size:.875rem; color:#666;
}

section.stnGoodsWrap {
    display:grid; grid-template-columns:1fr 1fr; gap: 1rem;
}


article.stnGoodsWrap {
    display: flex; flex-direction: column;
}
article.stnGoodsWrap > div.goodsCode {
    margin-left:auto; color:#666; font-size:.75rem; margin-bottom: 2rem;
}
article.stnGoodsWrap > div.from-group { display: flex;  font-size:.875rem; font-weight:400; color:#333; border-bottom:1px solid #ebebeb; margin-bottom:1rem; padding-bottom:1rem; }
article.stnGoodsWrap > div.from-group > div { display:flex;align-items:center;  }
article.stnGoodsWrap > div.from-group > div.title {
    width:150px;
}
article.stnGoodsWrap > div.from-group > div.text > strong.listPrice { text-decoration: line-through; }
article.stnGoodsWrap > div.from-group > div.text > strong { font-weight: 400; font-size:1.25rem; }
article.stnGoodsWrap > div.from-group > div.text { display:flex; align-items: flex-end; }
article.stnGoodsWrap > div.from-group > div.text.stnPrice { min-width:120px;  justify-content: flex-end;}

article.stnGoodsWrap > div.totAmount {
    width:100%;
    font-weight: 400; font-size:.875rem; color:#666;
    display: flex; align-items: flex-end; justify-content: flex-end; border-bottom:0;
    margin-top: 2rem;
}
article.stnGoodsWrap > div.totAmount > label { margin-right:1rem; }
article.stnGoodsWrap > div.totAmount > strong { font-size:1.5rem; color:red; }
article.stnGoodsWrap > div.stnOrderListBtn {
    margin-top: 2rem;
    display: grid; grid-template-columns:.5fr .5fr .5fr 1fr;
    border: 1px solid #ebebeb;
}
article.stnGoodsWrap > div.stnOrderListBtn > button {
    border-left:1px solid #ebebeb;
    border-radius: 0 0 0 0;
    padding:.5rem 0;
    display:flex;align-items:center; justify-content: center;
}
article.stnGoodsWrap > div.stnOrderListBtn > button:hover > i {
    color:#333;
}
article.stnGoodsWrap > div.stnOrderListBtn > button:first-child {
    border-left:none;
}
article.stnGoodsWrap > div.stnOrderListBtn > button > i {
    font-size:1.5rem; color: #b1b1b1;
}
article.stnGoodsWrap > div.stnOrderListBtn > button#stnOrderBtn {
    background: #000;
    color: #fff;
}





section.stnViewTabMenu {

}
section.stnViewTabMenu > div.stnQnaWrapBtn {
    margin-bottom: 1rem; display: flex; justify-content: flex-end;
}
section.stnViewTabMenu > div.stnQnaWrapBtn > button {
    line-height: unset; padding:.25rem 1rem; font-size: .75rem;
}
article.stnViewTabMenu {
    margin: 6rem 0 4rem 0;
    width:100%;
    display: flex; justify-content: space-around;
}
article.stnViewTabMenu2 {
    margin: 6rem 0 1rem 0;
    width:100%;
    display: flex; justify-content: space-around;
}
article.stnViewTabMenu  > a {
    text-decoration: none; color: #666; display: block; border-bottom:2px solid #ebebeb; width:100%; text-align: center; font-size:1rem;
    padding:1rem 0;
}
article.stnViewTabMenu  > a:hover {
    border-bottom:2px solid #acacac;
}
article.stnViewTabMenu  > a.active {
    border-bottom:2px solid #000;
}

div.stnOrderList {
    background: #f9f9f9; padding:1rem 1rem; font-size:.875rem; color:#333; display: flex; flex-direction: column; gap: 1rem;
}
div.stnOrderList > div > div.stnOrderListQry {
    border:1px solid #CCC; background: #FFF; display:flex; align-items:center; justify-content:center;
}
div.stnOrderList > div  > div.stnOrderListQry > button.btnQry {
    cursor: pointer; border:0;  outline: none; background: transparent;
}
div.stnOrderList > div  > div.stnOrderListQry > button.btnQry2 {
    cursor: unset; border:0;  outline: none; background: transparent; border:1px solid #CCC; border-top:0; border-bottom:0; padding:.5rem 1rem;
}
div.stnOrderList > div  > div.stnOrderListQry > button {
    padding:.5rem .5rem;
}


section#review article { margin-bottom: 0; }

div.reviewWrapPc {
    display: grid; grid-template-columns:100px 100px 1fr 150px 150px; font-size: .875rem;
}
div.reviewWrapPc > div.head {
    background: #f9f9f9; text-align: center; padding:1rem 0; border-bottom:1px solid #dfdfdf;
}
div.reviewWrapPc > div.body {
    text-align: center; padding:1rem 0; border-bottom:1px solid #dfdfdf;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
div.reviewWrapPc > div.body > i {
    color: #FFD700;
}
div.reviewWrapPc > div.body > i.none {
    color: #dfdfdf;
}

div.reviewWrapM {
    display: none; flex-direction: column; margin-top: 1rem;
}
div.reviewWrapM > div.list {
    display: flex; flex-direction: column; padding:.5rem 1rem; gap: .5rem; border-bottom:1px solid #ebebeb;
}


div.reviewWrapM > div.list > div.body {
    display: flex; gap: .5rem;
}
div.reviewWrapM > div.list > div.body > div.name {
    font-size: .875rem;
}
div.reviewWrapM > div.list > div.body > div.star {
    font-size:.75rem; display:flex;align-items:center;justify-content:center;
}
div.reviewWrapM > div.list > div.body > div.star > i {
    color: #FFD700;
}
div.reviewWrapM > div.list > div.body > div.date {
    color: #666; font-size: .75rem;
}
div.reviewWrapM > div.list > div.cont {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: .875rem;
}
article.stnQnaWrap {
    display: flex; flex-direction: column; gap: .5rem;
}


/* Mobile */
@media (max-width: 599px) {
    section.stnGoodsWrap {
        grid-template-columns:1fr;
    }
    article.stnGoodsWrap > div.stnOrderListBtn {
        margin-top: 2rem;
        display: grid; grid-template-columns:1fr 1fr 1fr;
        border: 1px solid #ebebeb;
    }
    article.stnGoodsWrap > div.stnOrderListBtn > button#stnOrderBtn { grid-column:1/4 }
    div.reviewWrapPc { display: none; }
    div.reviewWrapM { display: flex; }
}

/* Fold / Flip */
@media (min-width: 600px) and (max-width: 767px) {
    section.stnGoodsWrap {
        grid-template-columns:1fr;
    }
    article.stnGoodsWrap > div.stnOrderListBtn {
        margin-top: 2rem;
        display: grid; grid-template-columns:1fr 1fr 1fr 2fr;
        border: 1px solid #ebebeb;
    }
    div.reviewWrapPc { display: none; }
    div.reviewWrapM { display: flex; }
}

/* Tablet */
@media (min-width: 768px) and (max-width: 1024px) {

}

/* Small Desktop / Laptop */
@media (min-width: 1025px) and (max-width: 1439px) {

}

/* Large Desktop / WQHD 이상 */
@media (min-width: 1440px) {

}

.dialog {
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 100000;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    font-family: var(--FontFamily);
}

.dialog>.tb {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}
.dialog > .tb > div.inner > div.header {
    padding:1.5rem 1rem;
    border-bottom: 1px solid #ebebeb;
    text-align: center;
    font-size:1rem;
    color:#333;
    font-weight: 500;
}

.dialog>.tb .inner {
    max-width: 500px;
    width:100%;
    background: #fff;
    border-radius: 20px 20px;
}

.dialog .ct {
    padding:1rem 1rem;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.dialog .bottom {
    width:100%;
    display: flex; justify-content: space-between; flex-direction: row; align-items: center;
}
.dialog .bottom > button {
    width:50%;
    padding:.5rem 0;
    background: #f1f1f1;
    border:1px solid #f1f1f1;
    border-radius: 0 0 0 20px;
}
.dialog .bottom > button:last-child {
    width:50%;
    color:#FFF;
    background: #007bff;
    border:1px solid #007bff;
    border-radius: 0 0 20px 0;
}

/* =========================
   QNA WRAP
========================= */
.qna-item {
    padding:.5rem 0;
    border-bottom: 1px solid #e5e5e5;
}

/* =========================
   Q 버튼
========================= */
.qna-q {
    width: 100%;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    background: #fff;
    border: 0;
    text-align: left;
    cursor: pointer;
    box-sizing: border-box;
}

/* disabled 스타일 (답변 없음) */
.qna-q[disabled] {
    cursor: default;
    opacity: 0.7;
}

/* =========================
   답변 대기중 라벨
========================= */
.status.waiting {
    font-size: 12px;
    color: #ff6b6b;
    border: 1px solid #ff6b6b;
    padding: 2px 6px;
    border-radius: 4px;
    white-space: nowrap;
    flex-shrink: 0;
}

.status.complete {
    font-size: 12px;
    color: #333;
    border: 1px solid #333;
    padding: 2px 6px;
    border-radius: 4px;
    white-space: nowrap;
    flex-shrink: 0;
}
/* =========================
   Q 제목 (핵심)
   닫힘: 한 줄 + 말줄임
========================= */
.qna-title {
    flex: 1;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    line-height: 1.4;
}

/* =========================
   열림 상태: 전체 표시
========================= */

/* =========================
   화살표
========================= */
.arrow {
    margin-left: auto;
    transition: transform .2s ease;
    flex-shrink: 0;
}

/* 화살표 회전 */
.qna-item.active .arrow {
    transform: rotate(180deg);
}

/* =========================
   답변 영역
========================= */
.qna-a {
    display: none;
    font-size: .875rem;
    line-height: 1.6;
    color: #333;
    box-sizing: border-box;
}
.qna-title2 {
    margin: .5rem 0;
    font-size: .75rem;
}
.qna-a2 {
    padding: .5rem .5rem;
    background: #f9f9f9;
    font-size: .75rem;
}

/* =========================
   답변 없는 항목
========================= */
.qna-item.no-answer .qna-q {
    cursor: default;
    color: #999;
}





.chk_box {  position: relative; padding-left: 25px; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; top:0; font-size:.8125rem; color:#666; line-height: 2rem; }
.chk_box input[type="checkbox"] { display: none; }
.chk_box > .on { width: 18px; height: 18px; background: #ddd; position: absolute; top:50%; transform: translateY(-50%); left: 0;  border-radius:4px 4px;  }
.chk_box input[type="checkbox"]:checked + .on { background: #000; }
.chk_box > .on:after { content: ""; position: absolute; display: none; }
.chk_box input[type="checkbox"]:checked + .on:after { display: block; }
.chk_box > .on:after { width: 6px; height: 12px; border: solid #fff; border-width: 0 2px 2px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); position: absolute; left: 6px; top: 0; }
.chk_box:hover { color:#000; }








.modal-bg {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.6);
    z-index: 9999;
}

.modal-box {
    background: #fff;
    width: 90%;
    max-width: 600px;
    margin: 10vh auto;
    padding: 20px;
    border-radius: 8px;
    position: relative;
}

.modal-close {
    position: absolute;
    top: 10px;
    right: 14px;
    font-size: 24px;
    border: none;
    background: none;
    cursor: pointer;
}

.modal-meta {
    font-size: 13px;
    color: #888;
    margin-bottom: 10px;
}
div#reviewModal div#modalContent {
    white-space: pre-line;
    background: #f7f7f7;
    padding:1rem 1rem;
    min-height: 200px;
    font-weight: 300;
    font-size: .875rem;
}