@charset "UTF-8";
/* ============================================================
   상세페이지 콘텐츠 스타일 — 3브랜드(제이키즈/제키브로/보이티브) 공용 단일 정본
   - 이 파일 하나만 관리한다. 브랜드별 스킨 shopdetail.css 에는 콘텐츠 규칙을 두지 않는다.
   - model_size 착용정보 데이터는 별도 관리(아래 @import). 계절마다 model-size.css 만 갱신.
   - 루트 관례: 제이키즈/제키브로 = #prdDetail .prd_info / 보이티브 = .prd_info · .cont_model
   ============================================================ */
@import url("model-size.css");

/* ====== 여백 유틸리티 ====== */
.gap10 { margin-top: 10px; }
.gap20 { margin-top: 20px; }
.gap50 { margin-top: 50px; }
.gap100 { margin-top: 100px; }
.gap150 { margin-top: 150px; }
.gap200 { margin-top: 200px; }
.gap300 { margin-top: 300px; }

/* ====== 공지 박스 ====== */
.detail_notic { margin: 50px auto; text-align: center; height: auto; border: 1px solid #000; padding: 10px; max-width: 80%; background: #f1e3e3; }
.detail_notic > .title { font-size: 24px; font-weight: 700; color: #e00; padding-top: 30px; }
.detail_notic > .content { font-size: 16px; font-weight: 400; color: #000; padding-bottom: 30px; padding-top: 30px; }
.detail_notic.denim_notic { background: #f0f0f0; border: 1px solid #333; }
.detail_notic.denim_notic > .title { color: #000; font-size: 24px; }
.detail_notic.blue { background: #e3e7f1; }
.detail_notic.blue > .title { color: #00e; }

/* ====== 세탁 안내 ====== */
.noticeDrying { border: 1px solid #ddd; margin: 50px auto; padding: 20px; clear: both; }
.noticeDrying p { line-height: 1.5; font-size: 16px; margin: 12px; word-break: keep-all; }
.noticeColor { border: 1px solid #ddd; margin: -51px auto 50px; padding: 20px; clear: both; }
.noticeColor p { line-height: 1.5; font-size: 16px; margin: 12px; word-break: keep-all; }

/* ====== 악세서리 정보 ====== */
div.acc_info { text-align: center; width: fit-content; max-width: 90%; margin: 0 auto; }
div.acc_info pre { line-height: 1.5; color: #000; }
div.acc_info pre.acc_tit { font-size: 24px; font-weight: 700; margin: 50px auto 0; }
div.acc_info pre.acc_txt_tit { font-size: 24px; font-weight: 700; margin: 90px auto 30px; }
div.acc_info pre.acc_txt_sub { font-size: 14px; text-align: left; box-sizing: border-box; padding: 30px; border: 1px solid #999; }

/* ====== 제이키즈·제키브로 (#prdDetail / detail2026) ====== */
#prdDetail.prdPage { max-width: 1200px; margin: 0 auto; text-align: center; clear: both; }
#prdDetail.prdPage:after { clear: both; }
#prdDetail.prdPage img { clear: both; max-width: 100%; }
#prdDetail p.colorname { font-size: 18px; font-weight: 700; text-transform: uppercase; margin-bottom: 24px; }
#prdDetail p.colorname:after { content: " 착용모습"; }
#prdDetail p.coodi { font-size: 12px; text-transform: uppercase; text-align: center; margin-bottom: 24px; margin-top: -24px; }
#prdDetail p.detailInfo { font-weight: 400; font-size: 14px; line-height: 1.7; color: #000; margin: 24px auto 0; padding: 24px 20px; width: 80%; }
#prdDetail p.detailTitle { font-size: 30px; margin-top: 80px; margin-bottom: 48px; text-align: center; font-weight: 500; }
#prdDetail p.detailTitle:after { content: "DETAIL VIEW"; }
#prdDetail p.dt_color { float: left; width: 100%; margin: 1em 0 3em; font-size: 18px; text-transform: uppercase; text-align: center; }
#prdDetail p.dt_color2 { float: left; width: 50%; margin: 1em 0 3em; font-size: 18px; text-transform: uppercase; text-align: center; }
#prdDetail .pt_fsb { clear: both; overflow: hidden; margin-bottom: 120px; }
#prdDetail .pt_fsb img { display: block; float: left; width: calc(50% - 10px); padding: 5px; clear: none; }
#prdDetail p.mov_caption { text-align: left; font-size: 18px; font-weight: 700; }

#prdDetail .prd_info { position: relative; }
#prdDetail .prd_info p { word-break: keep-all; white-space: normal; text-align: left; }
#prdDetail .prd_info p.prd_title { font-size: 24px; font-weight: 700; line-height: 1.5; margin-bottom: 1em; margin-top: 2em; }
#prdDetail .prd_info p.prd_infotxt { font-size: 18px; font-weight: 400; line-height: 1.5; margin: 1em 0 3em; }
#prdDetail .prd_info p.prd_spec { font-size: 18px; font-weight: 700; margin-top: 12px; }
#prdDetail .prd_info p.colorname { font-size: 18px; font-weight: 700; text-transform: uppercase; }
#prdDetail .prd_info p.coodi { font-size: 12px; text-transform: uppercase; margin: inherit; text-align: left; }
#prdDetail .prd_info p.model_size { font-size: 16px; font-weight: 700; text-transform: uppercase; }
#prdDetail .prd_info p.model_size:after { content: " 착용"; }
p.model_size.center { float: right; position: absolute; right: 20px; top: 20px; margin: 0; text-shadow: 1px 1px 0 #eee, -1px 1px 0 #eee, 1px -1px 0 #eee, -1px -1px 0 #eee; }
#prdDetail .prd_info p.model_size + p.model_size { top: 40px; }

/* ====== 보이티브 (.prd_info · .cont_model / detail2025_bv) ====== */
.prd-detail.prdPage { max-width: 1000px; margin: 0 auto; text-align: center; clear: both; }
.prd-detail.prdPage img { clear: both; }
.prd-detail p.colorname { font-size: 18px; font-weight: 700; text-transform: uppercase; margin-bottom: 30px; }
.prd-detail p.colorname:after { content: " 착용모습"; }
.prd-detail p.coodi { font-size: 12px; text-transform: uppercase; text-align: center; margin-bottom: 30px; margin-top: -30px; }
.prd-detail p.detailInfo { font-weight: 400; font-size: 14px; line-height: 1.7; color: #000; margin: 30px auto 0; padding: 30px 20px; width: 80%; }
.prd-detail p.detailTitle { font-size: 30px; margin-top: 80px; margin-bottom: 30px; text-align: center; }
.prd-detail p.detailTitle:after { content: "DETAIL VIEW"; }
.prd-detail p.dt_color { float: left; width: 100%; margin: 30px 0 60px; font-size: 18px; text-transform: uppercase; text-align: center; }
.prd-detail p.dt_color2 { float: left; width: 50%; margin: 30px 0 60px; font-size: 18px; text-transform: uppercase; text-align: center; }
.prd-detail .pt_fsb { clear: both; overflow: hidden; margin-bottom: 160px; }
.prd-detail .pt_fsb img { display: block; float: left; width: calc(50% - 10px); padding: 5px; }
.prd-detail p.mov_caption { text-align: left; font-size: 18px; font-weight: 700; }

.prd_info { max-width: 1200px; box-sizing: border-box; margin: 0 auto; }
.prd_info p { word-break: keep-all; white-space: normal; text-align: left; margin: inherit; }
#detail_section .prd_info { margin-top: 2em; margin-bottom: 3em; } /* 보이티브: 첫 prd_info 상하 여백 */
#detail_section .prd_info ~ .prd_info { margin-top: 0; margin-bottom: 0; } /* 둘째 이후는 리셋 → 첫째만 여백 */
p.prd_title { font-size: 24px; font-weight: 700; line-height: 1.5; margin-bottom: 1em; margin-top: 0; }
p.prd_infotxt { font-size: 18px; font-weight: 400; line-height: 1.5; margin: 30px 0 0; }
p.prd_spec { font-size: 18px; font-weight: 700; margin-top: 1em; }
p.colorname { font-size: 18px; font-weight: 700; text-transform: uppercase; }
p.coodi { font-size: 12px; text-transform: uppercase; margin: inherit; text-align: left; }
p.model_size { font-size: 14px; font-weight: 500; margin-top: 1em; }
p.model_size.center { text-align: center; }
p.model_size:before { content: ''; }
p.model_size:after { content: '착용모습'; }
.cont_model { position: relative; }
.cont_model p.model_size { position: absolute; right: 1em; font-size: 1.2em; font-weight: 700; text-transform: uppercase; text-shadow: -1px 0 #ddd, 0 1px #ddd, 1px 0 #ddd, 0 -1px #ddd; }
.cont_model p.model_size:nth-child(2) { top: 1.5em; }

/* ====== 모바일 오버라이드 ====== */
@media screen and (max-width: 720px) {

    /* 공지 박스 */
    .detail_notic { width: 90%; box-sizing: border-box; line-height: 1.2; }
    .detail_notic > .title { font-size: 20px; padding-top: 1em; }
    .detail_notic > .content { font-size: 15px; padding-bottom: 1em; padding-top: 1em; word-break: keep-all; }
    .shopdetail .shopdetailItem .shopdetailImage div.detail_notic { margin: 1em auto; width: calc(95% - 2em) !important; padding: 1em; }
    .shopdetail .shopdetailItem .shopdetailImage div.detail_notic > .title { font-size: 22px; font-weight: 700; color: #e00; padding-top: 1em; }
    .shopdetail .shopdetailItem .shopdetailImage div.detail_notic > .content { font-size: 15px; padding-bottom: 1em; padding-top: 1em; word-break: keep-all; }
    .shopdetail .shopdetailItem .shopdetailImage div.detail_notic.denim_notic { background: #f0f0f0; border: 1px solid #333; }
    .shopdetail .shopdetailItem .shopdetailImage div.detail_notic.denim_notic > .title { color: #000; }

    /* 세탁 안내 */
    .noticeDrying { border: 1px solid #eee; width: 90%; margin: 30px auto; padding: 10px 0; }
    .noticeDrying p { font-size: 12px; margin: 1em; text-align: center; }
    .noticeColor { border: 1px solid #eee; width: 90%; margin: -31px auto 30px; padding: 10px 0; }
    .noticeColor p { font-size: 12px; margin: 1em; text-align: center; }

    /* 악세서리 정보 */
    div.acc_info pre { font-size: 10px; white-space: pre-wrap; }
    div.acc_info pre.acc_tit,
    div.acc_info pre.acc_txt_tit { font-size: 24px; margin: 50px auto 0; }

    /* 크레마핏 플로팅버튼 */
    #creFit_wrap { display: none; position: fixed; z-index: 99; padding-top: 100px; top: 0; left: 0; width: 100%; height: calc(100% - 100px - 6em); overflow: auto; background-color: rgba(0, 0, 0, 0.4); }
    #creFit_wrap .creFit_contents { background: #fff; margin: auto; padding: 1em; border: 1px solid #fff; width: 80%; min-height: 50%; max-height: calc(100% - 5em); overflow: auto; }
    #creFit_wrap .creFit_close { color: #aaa; float: right; font-size: 2em; font-weight: 400; }
    #delivery_notic { width: calc(100% - 2em) !important; }

    /* 제이키즈·제키브로 모바일 */
    #prdDetail p.colorname { font-size: 18px; margin-bottom: 30px; }
    #prdDetail p.coodi { font-size: 14px; margin-bottom: 30px; margin-top: -30px; }
    #prdDetail p.detailInfo { font-size: 12px; line-height: 1.5; padding: 30px 0; }
    #prdDetail p.detailTitle { font-size: 22px; margin-top: 0; margin-bottom: 30px; }
    #prdDetail p.dt_color,
    #prdDetail p.dt_color2 { margin: 1em 0 2em; font-size: 14px; }
    #prdDetail .pt_fsb { margin-bottom: 160px; }
    #prdDetail .pt_fsb img { width: 95%; padding: 1%; float: none; }
    #prdDetail .prd_info { padding: 60px 30px; max-width: 100%; box-sizing: border-box; }
    #prdDetail .prd_info p { margin: inherit; }
    #prdDetail .prd_info p.prd_title { font-size: 20px; margin-top: 0; }
    #prdDetail .prd_info p.prd_infotxt { font-size: 14px; margin: 2em 0; }
    #prdDetail .prd_info p.colorname { font-size: 22px; }
    #prdDetail .prd_info p.coodi { font-size: 14px; }
    #prdDetail .prd_info p.model_size { font-size: 14px; line-height: 1.2; z-index: 9; position: relative; }
    #prdDetail .prd_info p.model_size ~ p.model_size { margin-top: 0; }
    #prdDetail > .prd_info:not(.first-info) { padding: 8px; position: relative; }
    #prdDetail > .prd_info:not(.first-info) p.model_size.center { text-align: right !important; position: absolute; top: 2em; right: 1em; text-shadow: -1px 0 #eee, 0 1px #eee, 1px 0 #eee, 0 -1px #eee; }
    #prdDetail .prd_info p.model_size.center + p.model_size.center { top: 5em; }
    #prdDetail .prd_info p.model_size.center { font-size: 14px; font-weight: 500; }

    /* 보이티브 모바일 */
    p.colorname { font-size: 18px; font-weight: 700; text-transform: uppercase; margin-bottom: 30px; }
    p.coodi { font-size: 14px; text-transform: uppercase; text-align: center; margin-bottom: 30px; margin-top: -30px; }
    p.detailInfo { font-size: 12px; line-height: 1.5; word-break: keep-all; font-weight: 400; color: #000; margin: 0 auto; padding: 30px 0; width: 80%; }
    p.detailTitle { font-size: 22px; margin-bottom: 30px; text-align: center; }
    p.dt_color { float: left; width: 100%; margin: 1em 0 2em; font-size: 14px; text-transform: uppercase; text-align: center; }
    p.dt_color2 { float: left; width: 50%; margin: 1em 0 2em; font-size: 14px; text-transform: uppercase; text-align: center; }
    .pt_fsb { margin-bottom: 160px; }
    .pt_fsb img { width: 95%; padding: 1%; }
    .prd_info { padding: 60px 30px; max-width: 100%; box-sizing: border-box; }
    .prd_info p { word-break: keep-all; white-space: normal; text-align: left; margin: inherit; }
    .prd_info p.prd_title { font-size: 18px; font-weight: 700; line-height: 1.5; margin-bottom: 1em; margin-top: 0; letter-spacing: -1px; }
    .prd_info p.prd_infotxt { font-size: 14px; font-weight: 400; line-height: 1.5; margin: 2em 0 0; }
    .prd_info p.prd_spec { font-size: 18px; font-weight: 700; margin-top: 1em; }
    .prd_info p.colorname { font-size: 22px; font-weight: 700; text-transform: uppercase; }
    .prd_info p.coodi { font-size: 14px; text-transform: uppercase; margin: inherit; text-align: left; }
    .prd_info p.model_size { font-size: 14px; font-weight: 700; text-transform: uppercase; line-height: 1.5; margin-top: 1em; }
    .prd_info p.model_size.center { text-align: center; }
    .prd_info p.model_size:after { content: " 착용"; }
    .cont_model { position: relative; }
    .cont_model p.model_size { position: absolute; right: 1em; font-weight: 700; }
    .cont_model p.model_size:nth-child(2) { top: 1.5em; }
}