@charset "utf-8";

/* Post 상단 Fixed 영역 */
#fixedWrap {
    position: sticky;
    top: 60px;
    /* 헤더 높이만큼 고정 시작 지점 설정 */
    left: 0;
    width: 100%;
    height: calc(100dvh - 80px);
    /* 전체 높이에서 헤더를 뺀 만큼 */
    box-sizing: border-box;
    z-index: 1;
}

#fixedWrap .fixedInner {
    height: 100%;
    display: flex;
}

#fixedWrap .fixedImage,
#fixedWrap .fixedDesc {
    height: 100%;
}

/* PC: 이미지는 높이 100%로 채우고 폭은 실제 종횡비(--img-ratio, JS 주입)대로 →
   세로형은 좁고 가로형은 넓게, 썸네일 높이가 통일됨. 나머지 폭은 .fixedDesc가 차지.
   max-width로 가로 긴 이미지가 .fixedDesc를 다 먹는 것 방지(초과분은 cover로 채움).
   ※ 비율 1.7 이상 와이드 11건은 이미지 파일 자체를 비율 보정해 두므로 별도 처리 없음. */
#fixedWrap .fixedImage {
    flex: 0 0 auto;
    width: auto;
    max-width: 70%;
    aspect-ratio: var(--img-ratio, 1.7);
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: no-repeat;
}

#fixedWrap .fixedDesc {
    flex: 1 1 0;
    min-width: 0;
}

/* 와이드(≥1.7, JS가 .heroWide 토글): 이미지 70% 고정 + cover(좌우 잘림 감수), desc 30% 고정 */
#fixedWrap.heroWide .fixedImage {
    flex: 0 0 70%;
    width: 70%;
    max-width: none;
    aspect-ratio: auto;
}
#fixedWrap.heroWide .fixedDesc {
    flex: 0 0 30%;
}

#fixedWrap .fixedDesc {
    padding: 4vw;
    display: flex;
    flex-direction: column;
    gap: 1vh;
}

#fixedWrap .sectionTitle {
    width: max-content;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

#fixedWrap .sectionTitle .iconBack {
    width: 24px;
    height: 24px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath fill='%23000' d='M47 239c-9.4 9.4-9.4 24.6 0 33.9L207 433c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9L97.9 256 241 113c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0L47 239z'/%3E%3C/svg%3E");
    background-size: auto 100%;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    transition: all 0.15s ease-in-out;
}

#fixedWrap .sectionTitle:hover .iconBack {
    transform: translateX(-10px);
}

#fixedWrap .sectionTitle h1 {
    font-size: 24px;
    color: #000;
    font-weight: 600;
}

/* 디자이너 갱신본에 미정의된 자체 추가 클래스 (구분자 '|' + 카테고리명) */
#fixedWrap .sectionTitle .sectionDivider { font-size: 20px; font-weight: 300; line-height: 1; }
#fixedWrap .sectionTitle .sectionCat { font-size: 20px; font-weight: 500; }

#fixedWrap .postTitle {
    font-size: 4vw;
    font-weight: 700;
    line-height: 1.15;
    word-break: keep-all;
    margin-top: 10vh;
    text-decoration: underline;
    text-decoration-thickness: .3vw;
    text-underline-offset: .8vw;
}

/* 어절 단위 줄바꿈 — 각 단어는 내부에서 안 끊김(예: <춘화추월>), 공백에서만 줄바꿈 */
#fixedWrap .postTitle span {
    white-space: nowrap;
}

#fixedWrap .tagList {
    margin-top: 20px;
    display: flex;
    align-items: center;
    gap: 20px;
}

#fixedWrap .tagList .postTag {
    font-size: 20px;
    font-weight: 500;
}

#fixedWrap .tagList .postTag:before {
    content: "#";
    margin-right: 5px;
    display: inline-block;
}

#fixedWrap .editor {
    margin: auto 0 0 auto;
}

#fixedWrap .editor ul {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

#fixedWrap .editor li {
    display: flex;
    align-items: center;
    gap: 20px;
}

#fixedWrap .editor span {
    font-size: 14px;
    font-weight: 400;
    text-align: right;
    flex: 1;
}

#fixedWrap .editor p {
    font-size: 14px;
    font-weight: 600;
}

/* Post 내용 시작 */
/* #contentWrap 베이스·반응형은 common.css. 글 상세 특이: 배경색·z-index, 히어로 위라 margin-top 0. */
#contentWrap {
    margin-top: 0;
    background-color: var(--bgColor);
    /* 히어로(#fixedWrap)는 스크롤 시 opacity 0으로 페이드아웃되므로 강제 100vh 불필요.
       짧은 글에서 목록~푸터 사이 빈 공간(들쑥날쑥) 유발하던 min-height 제거. */
    z-index: 10;
}

/* 내용 */
#postView {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
}

#postView .post {
    margin-top: 30px;
    padding: 30px 0;
}

#postView .post p {
    font-size: 16px;
    color: #000;
    font-weight: 400;
    word-break: keep-all;
}

#postView .post strong {
    font-size: 16px;
    color: #000;
    font-weight: 700;
}

#postView .post hr {
    height: 0;
    margin-top: 20px;
    margin-bottom: 20px;
    border-top: 1px solid #e2e2e2;
    box-sizing: content-box;
    display: block;
}

#postView .post img {
    width: 100%;
    height: auto;
}

/* 제품 카드 박스 */
.itemCard {
    margin: 25px 0;
    padding: 20px;
    background-color: #fff;
    border-radius: 20px;
}

.itemCard .card {
    position: relative;
    display: flex;
    align-items: stretch;
    overflow: hidden;
}

.itemCard .card .cardLink {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.itemCard .card .itemImg {
    width: 50%;
    min-height: 300px;
    flex-shrink: 0;
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    border-radius: 15px;
}

.itemCard .itemInfo {
    padding: 30px;
    background-color: #000;
    border-radius: 15px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 15px;
}

.itemCard .itemInfo .name {
    font-size: 24px;
    color: #fff !important;
    font-weight: 700;
}

.itemCard .itemInfo .info {
    font-size: 15px;
    color: #ccc !important;
    line-height: 1.6;
    word-break: keep-all;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    line-clamp: 2;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.itemCard .itemInfo .price {
    font-size: 20px;
    color: var(--keyColor);
    font-weight: 600;
}

.itemCard .thumbBox {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
}

.itemCard .thumb {
    width: 80px;
    height: 80px;
    margin: 0;
    padding: 0;
    border-radius: 8px;
    background-size: cover;
    background-position: 50% 50%;
}

/* 이미지 슬라이드 박스 */
.postSlider {
    width: 100%;
    margin: 25px 0;
}

.postSlider .slideItem {
    position: relative;
    padding-bottom: 30px;
    overflow: hidden;
}

.postSlider .slideItem img {
    width: 100%;
    height: auto;
}

.postSlider .slick-arrow {
    position: absolute;
    top: 50%;
    width: 50px;
    height: 50px;
    background-color: #fff;
    background-size: auto 60%;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    border: 0;
    border-radius: 50%;
    text-indent: -9999px;
    transition: all 0.25s ease-in-out;
    transform: translateY(-50%);
    cursor: pointer;
    z-index: 1;
}

.postSlider .slick-arrow:hover {
    background-color: var(--keyColor);
}

.postSlider .slick-arrow.slick-prev {
    left: 15px;
    background-image: url("../images/icon_left.svg");
}

.postSlider .slick-arrow.slick-next {
    right: 15px;
    background-image: url("../images/icon_right.svg");
}

/* 이전글, 다음글, 목록 버튼 */
#fNavWrap {
    text-align: center;
}

#fNavWrap .postNav {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 20px;
}

#fNavWrap .postNav .btnPrev,
#fNavWrap .postNav .btnNext {
    width: 50%;
    padding: 20px 10px;
    border-top: 1px solid #5e5e5e;
    border-bottom: 1px solid #5e5e5e;
    transition: all 0.25s ease-in-out;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 15px;
}

#fNavWrap .postNav .btnNext {
    flex-direction: row-reverse;
}

#fNavWrap .postNav .btnPrev:hover,
#fNavWrap .postNav .btnNext:hover {
    background-color: #fff;
}

#fNavWrap .postNav .navLabel {
    position: relative;
    min-width: 80px;
    padding: 0 15px;
}

#fNavWrap .postNav .navLabel:before {
    content: "";
    position: absolute;
    top: 50%;
    width: 20px;
    height: 20px;
    margin-top: -10px;
    background-size: auto 16px;
    background-position: 50% 50%;
    background-repeat: no-repeat;
}

#fNavWrap .postNav .navLabel:after {
    content: "";
    position: absolute;
    top: 50%;
    width: 1px;
    height: 10px;
    margin-top: -5px;
    background-color: #5e5e5e;
}

#fNavWrap .postNav .btnPrev .navLabel {
    text-align: right;
}

#fNavWrap .postNav .btnNext .navLabel {
    text-align: left;
}

#fNavWrap .postNav .btnPrev .navLabel:before {
    left: 0;
    background-image: url("../images/icon_left.svg");
}

#fNavWrap .postNav .btnNext .navLabel:before {
    right: 0;
    background-image: url("../images/icon_right.svg");
}

#fNavWrap .postNav .btnPrev .navLabel:after {
    right: 0;
}

#fNavWrap .postNav .btnNext .navLabel:after {
    left: 0;
}

#fNavWrap .postNav .navTitle {
    font-size: 16px;
    color: #000;
    font-weight: 500;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    line-clamp: 1;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

#fNavWrap .btnList {
    min-width: 80px;
    font-size: 16px;
    color: #fff;
    font-weight: 500;
    line-height: 40px;
    margin-top: 30px;
    background-color: #000;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/*
Mobile Device Less than 768px
*/
@media all and (max-width:767px) {
    #fixedWrap {
        position: static;
        height: auto;
    }

    #fixedWrap .fixedInner {
        display: flex;
        flex-direction: column;
        min-height: calc(100dvh - 60px); /* 헤더를 제외한 첫 화면의 전체 높이 확보 */
    }

    #fixedWrap .fixedImage {
        position: fixed; /* 모바일에서 이미지를 화면에 고정 */
        top: 60px; /* 공통 헤더 높이만큼 띄움 */
        left: 0;
        width: 100%;
        max-width: none; /* PC 기본 규칙의 max-width:70% 상속 해제 — 모바일은 전체폭 */
        aspect-ratio: auto;
        height: calc(100dvh - 60px); /* 고정된 상태로 화면을 가득 채움 */
        z-index: 1;
        pointer-events: none; /* 화면 전체를 덮는 fixed 이미지가 하단 푸터 등 클릭을 가로채지 않게(이미지 클릭 기능 없음) */
    }

    #fixedWrap .fixedDesc {
        position: relative;
        z-index: 2; /* 고정된 이미지보다 위에 오도록 설정 */
        flex: 0 0 auto;
        height: auto;
        margin-top: auto; /* 이미지를 제외한 나머지 하단 영역에 배치 */
        opacity: 1 !important;
        background-color: inherit;
    }

    #fixedWrap .sectionTitle {
        gap: 6px;
    }

    #fixedWrap .sectionTitle .iconBack {
        width: 18px;
        height: 18px;
    }

    #fixedWrap .sectionTitle:hover .iconBack {
        transform: none;
    }

    #fixedWrap .sectionTitle h1 {
        font-size: 18px;
    }

    #fixedWrap .sectionTitle .sectionDivider,
    #fixedWrap .sectionTitle .sectionCat { font-size: 16px; }

    #fixedWrap .postTitle {
        font-size: 24px;
        margin-top: 20px;
    }

    #fixedWrap .tagList {
        margin-top: 10px;
        gap: 10px;
    }

    #fixedWrap .tagList .postTag {
        font-size: 16px;
    }

    #fixedWrap .editor {
        margin: 20px 0 0 0;
    }

    #fixedWrap .editor ul {
        flex-direction: column;
        gap: 8px;
    }

    /* 모바일: role(span)을 nowrap+고정폭으로 — 이름이 길어도 role이 압축돼 세로로 깨지지 않게(한 줄 유지, 이름만 줄바꿈) */
    #fixedWrap .editor li {
        align-items: flex-start;
        gap: 10px;
    }
    #fixedWrap .editor span {
        flex: 0 0 auto;
        white-space: nowrap;
        text-align: left;
    }
    #fixedWrap .editor p {
        flex: 1;
        min-width: 0;
    }

    #postView .card.choice {
        width: calc(50% - 10px);
    }

    .itemCard {
        padding: 15px;
    }

    .itemCard .card {
        flex-direction: column;
    }

    .itemCard .card .itemImg {
        width: 100%;
        min-height: 300px;
    }

    .itemCard .itemInfo {
        padding: 15px;
        gap: 10px;
    }

    .itemCard .thumb {
        width: 60px;
        height: 60px;
    }

    .postSlider .slick-arrow {
        width: 40px;
        height: 40px;
        background-size: auto 60%;
    }

    #fNavWrap .postNav {
        border-top: 1px solid #5e5e5e;
        flex-direction: column;
        gap: 0;
    }

    #fNavWrap .postNav .btnPrev,
    #fNavWrap .postNav .btnNext {
        width: 100%;
        padding: 15px 0;
        border-top: 0;
        border-bottom: 1px solid #5e5e5e;
        display: flex;
        align-items: center;
        gap: 15px;
    }

    #fNavWrap .postNav .btnNext {
        flex-direction: row;
    }

    #fNavWrap .postNav .navLabel {
        position: relative;
        min-width: 20px;
        padding: 0;
        text-indent: -9999px;
    }

    #fNavWrap .postNav .btnPrev .navLabel {
        text-align: left;
    }

    #fNavWrap .postNav .navLabel:before {
        transform: rotate(90deg);
    }

    #fNavWrap .postNav .navLabel:after {
        display: none;
    }

    #fNavWrap .postNav .btnNext .navLabel:before {
        left: 0;
    }

    #fNavWrap .postNav .btnPrev .navLabel:after {
        right: 0;
    }

    #fNavWrap .postNav .btnNext .navLabel:after {
        left: 0;
    }
}

/* === YouTube 임베드 카드 (썸네일 + 재생 아이콘 + Fancybox 팝업) — YouTubeBlock 렌더링용 === */
#postView .post .ytEmbed {
    position: relative;
    display: block;
    margin: 30px auto;
    width: 100%;
    max-width: 100%;
    border-radius: 16px;
    overflow: hidden;
    background-color: #000;
    text-decoration: none;
    cursor: pointer;
}

#postView .post .ytEmbed.ytWide {
    aspect-ratio: 16 / 9;
}

#postView .post .ytEmbed.ytShort {
    aspect-ratio: 9 / 16;
    max-width: 360px;
}

#postView .post .ytEmbed .ytThumb {
    width: 100%;
    height: 100%;
    margin: 0;
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    transition: transform 0.3s ease;
}

#postView .post .ytEmbed:hover .ytThumb {
    transform: scale(1.04);
}

/* 재생 버튼은 common.css의 .btnPlay 사용. 재생은 data-fancybox(Fancybox iframe 팝업)로 처리. */

/* === YouTubeBlock — 사용자 업로드 썸네일(풀사이즈, 원본 비율) === */
#postView .post .ytEmbed.ytCustom {
    aspect-ratio: auto;
    max-width: 100%;
    background-color: transparent;
}

#postView .post .ytEmbed.ytCustom .ytThumbImg {
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
    transition: transform 0.3s ease;
}

#postView .post .ytEmbed.ytCustom:hover .ytThumbImg {
    transform: scale(1.02);
}