@charset "utf-8";

#subscribe {
    position: fixed;
    top: 0;
    /* JS에서 설정 */
    left: 0;
    width: 100%;
    /* bottom 값은 JS에서 버튼 높이에 맞춰 동적으로 할당됩니다. */
    background-color: #000;
    border-top: 1px solid #eaeaea;
    padding: 0;
    /* 내부 subInner로 이동 */
    overflow: visible;
    /* 하단 토글 버튼 노출을 위해 visible로 변경 */
    transform: translateY(-100%);
    transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    z-index: 98;
}

#subscribe .subInner {
    width: 100%;
    height: auto;
    /* 내용에 맞춰 높이 조절 */
    max-height: inherit;
    /* 부모의 max-height를 상속받아 스크롤 활성화 */
    padding: 60px 40px;
    overflow-y: auto;
    /* 실제 콘텐츠 스크롤 담당 */
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box;
    /* padding이 높이에 포함되도록 설정 */
}

#subscribe.open {
    box-shadow: 0 10px 10px 0 rgba(0, 0, 0, 0.1);
    transform: translateY(0);
}

#subscribe .subWrap {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    gap: 60px;
    /* subInfo와 subForm 사이 간격 */
    align-items: flex-start;
}

#subscribe .subInfo,
#subscribe .subForm {
    width: 100%;
    flex: 1;
}

#subscribe .subInfo h1 {
    font-size: 32px;
    color: var(--keyColor);
    font-weight: 700;
    margin-bottom: 20px;
}

#subscribe .subInfo p {
    font-size: 16px;
    color: #e2e2e2;
    word-break: keep-all;
}

#subscribe .subInfo span {
    font-size: 15px;
    color: #fff;
    font-weight: 500;
    margin-top: 15px;
    display: block;
}

#subscribe .subForm .form {
    display: flex;
    gap: 15px;
}

#subscribe .subForm label {
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#subscribe .subForm label strong {
    font-size: 14px;
    color: #fff;
    font-weight: 600;
}

#subscribe .subForm input[type="text"] {
    width: 100%;
    height: 40px;
    font-size: 16px;
    padding: 0 10px;
    border: 1px solid #eaeaea;
    border-radius: 5px;
    outline: none;
}

#subscribe .privacy {
    margin-top: 25px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

#subscribe .privacy u {
    color: var(--keyColor);
    text-decoration-thickness: 0;
    text-underline-offset: .2vw;
}

#subscribe .checkboxItem {
    display: flex;
    align-items: flex-start;
    cursor: pointer;
}

/* 텍스트는 자연 흐름(단어 단위 줄바꿈) + 가짜 박스는 absolute로 좌상단 고정(hanging indent) */
#subscribe .checkboxItem span {
    position: relative;
    padding-left: 30px;
    font-size: 15px;
    color: #fff;
    line-height: 1.4;
    word-break: keep-all;
}

#subscribe .checkboxItem span::before {
    content: "";
    position: absolute;
    left: 0;
    top: 1px;
    width: 20px;
    height: 20px;
    background-color: #fff;
    border: 1px solid #eaeaea;
    border-radius: 4px;
}

#subscribe .checkboxItem input[type="checkbox"]:checked+span::before {
    background-color: var(--keyColor);
    border-color: var(--keyColor);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='%23000' d='M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z'/%3E%3C/svg%3E");
    background-size: 14px auto;
    background-position: center;
    background-repeat: no-repeat;
}

#subscribe .btnSubmit {
    display: inline-block;
    width: auto;
    font-size: 16px;
    color: #000;
    font-weight: 600;
    line-height: 40px;
    margin-top: 30px;
    padding: 0 35px;
    background-color: var(--keyColor);
    border: 0;
    border-radius: 5px;
    cursor: pointer;
}

#subscribe .btnSubToggle {
    position: absolute;
    top: 100%;
    left: 50%;
    font-size: 16px;
    color: var(--keyColor);
    font-weight: 700;
    line-height: 40px;
    padding: 0 20px;
    background-color: #000;
    border: 0;
    border-radius: 0 0 10px 10px;
    transform: translateX(-50%);
    z-index: 10000;
    height: 40px;
    /* 버튼 높이 명시 */
    cursor: pointer;
}

#subscribe.open .btnSubToggle {
    color: var(--keyColor);
    background-color: #000;
    box-shadow: 0 10px 10px 0 rgba(0, 0, 0, 0.1);
}

/* #contentWrap 베이스·반응형은 common.css로 이관(공통). */

/* 뉴스레터 */
#newsLetter {
    margin-top: 30px;
}

#newsLetter .newsPostList {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
}

#newsLetter .newsPost {
    position: relative;
    width: calc((100% - 80px) / 3);
    height: auto;
    padding: 20px;
    background-color: #fff;
    border-radius: 30px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

#newsLetter .newsPost .postImg {
    width: 100%;
    aspect-ratio: 1.5743;
    background-color: #eaeaea;
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    border-radius: 20px;
    overflow: hidden;
}

#newsLetter .newsPost .textWrap {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    flex: 1; /* 카드 남은 높이 채움 → newsDate를 바닥으로 밀어냄 */
}

#newsLetter .newsPost .textWrap .newsVol {
    font-size: 16px;
    color:var(--pointColor);
    font-weight: 600;
    word-break: keep-all;
}

#newsLetter .newsPost .textWrap .newsSubject {
    font-size: 20px;
    color: #000;
    font-weight: 600;
    word-break: keep-all;
}

#newsLetter .newsPost .textWrap .newsDate {
    font-size: 14px;
    color: #515151;
    font-weight: 400;
    word-break: keep-all;
    margin-top: auto; /* 카드 바닥 고정 */
    padding-top: 10px;
}

/*
Tablet Device Less than 1023px or greater than 768px
*/
@media all and (min-width:768px) and (max-width:1023px) {
    #newsLetter .newsPostList {
        display: flex;
        gap: 20px;
        /* 여백을 20px로 줄임 */
    }

    #newsLetter .newsPost {
        width: calc((100% - 20px) / 2);
        padding: 15px 15px 60px 15px;
    }

    #newsLetter .newsPost .tagBox {
        left: 15px;
        bottom: 15px;
    }
}

/*
Mobile Device Less than 768px
*/
@media all and (max-width:767px) {

    #subscribe .subInfo h1 {
    font-size: 24px;
    }

    #subscribe .subWrap {
        flex-direction: column;
        gap: 30px;
    }

    #subscribe .subInner {
        padding: 40px 20px;
        /* padding-bottom은 JS에서 동적으로 계산하여 적용 */
    }

    #subscribe .subForm {
        text-align: center;
    }

    #subscribe .subForm .form {
        flex-direction: column;
    }

    #newsLetter .newsPostList {
        display: flex;
        gap: 16px;
        /* 모바일 화면에 맞춰 여백을 조금 줄여주는 것이 좋습니다 */
    }

    #newsLetter .newsPost {
        width: 100%;
        padding: 10px 10px 20px 10px;
        border-radius: 20px;
    }

    #newsLetter .newsPost .postImg {
        border-radius: 15px;
    }

    #newsLetter .postImg .link {
        top: 10px;
        right: 10px;
    }

    #newsLetter .newsPost .textWrap h2 {
        font-size: 16px;
    }

    #newsLetter .newsPost .textWrap p {
        min-height: auto;
        font-size: 14px;
    }

    #newsLetter .newsPost .tagBox {
        left: 10px;
        bottom: 10px;
    }
}

/* ───────────────────────────────────────────────────────────
   blade @push('styles')에서 이관 (CSS 정리)
   - 구독폼 보강분: index·main-subscribe 공통(중복 제거)
   - 목록 카드 오버레이 링크(index) / 상세 #nlShow(show)
   파일 끝에 두어 위 #subscribe 기본 규칙을 의도대로 오버라이드.
   ─────────────────────────────────────────────────────────── */

/* 구독 결과 메시지 (성공/실패) */
#subscribe .subAlert { margin-bottom: 16px; padding: 10px 14px; font-size: 14px; border-radius: 6px; }
#subscribe .subAlert--err { background: #3a0d1f; color: #ffd9e6; border: 1px solid #66132e; }
#subscribe .subAlert--ok { background: #0e2e1f; color: #c8f0d9; border: 1px solid #185c3c; }

/* checkboxItem: 실제 input 숨김 → span::before(가짜 박스)만 노출 */
#subscribe .checkboxItem input[type="checkbox"] { position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0; }

/* 디자이너 css가 input[type="text"]만 잡아 email type 보강 */
#subscribe .subForm input[type="email"] { width: 100%; height: 40px; font-size: 16px; padding: 0 10px; border: 1px solid #eaeaea; border-radius: 5px; outline: none; }

/* form.subForm 직접 사용 시 좌측 정렬 (btnSubmit 폭은 위에서 관리) */
#subscribe form.subForm { display: block; }
#subscribe .privacy { align-items: flex-start; }

/* 뉴스레터 목록 — 카드 전체 클릭 overlay (li가 .newsPost 그리드 셀) */
#newsLetter .newsPost .newsLink { position: absolute; inset: 0; z-index: 1; }

/* ── 뉴스레터 상세 (newsletter/show) ───────────────────────── */
#nlShow { position: relative; width: 100%; max-width: 720px; margin: 60px auto; padding: 0 10px; box-sizing: border-box; }
#nlShow .nlHead { padding: 10px 0 24px; border-bottom: 2px solid #111; margin-bottom: 28px; }
#nlShow .nlHead .nlVol { font-size: 14px; color: var(--pointColor); font-weight: 600; margin-bottom: 10px; }
#nlShow .nlHead h1 { font-size: 28px; font-weight: 700; line-height: 1.3; word-break: keep-all; }
/* 스티비 본문(이메일 HTML — 인라인 스타일 보유) 가운데 정렬, 이미지 반응형 */
#nlShow .newsletterBody { width: 100%; overflow-x: hidden; }
#nlShow .newsletterBody img { max-width: 100%; height: auto; }
#nlShow .newsletterBody table { max-width: 100% !important; }
/* 스티비 본문 컨테이너(인라인 width:94%)를 100%로 — max-width(630)는 인라인 유지 */
#nlShow .newsletterBody .stb-container { width: 100% !important; }
#nlShow .nlNav { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 40px 0 80px; padding-top: 24px; border-top: 1px solid #ddd; }
#nlShow .nlNav a { font-size: 15px; color: #333; font-weight: 500; }
#nlShow .nlNav .nlList { padding: 10px 26px; background: #111; color: #fff; border-radius: 100vh; }
#nlShow .nlNav .nlSpacer { flex: 1; }
#nlShow .nlNav .nlNext { text-align: right; }

@media (max-width: 767px) {
    #nlShow { margin: 30px auto; }
    #nlShow .nlHead h1 { font-size: 22px; }
}