@charset "utf-8";

.letter-board {width:100%;}
.letter-board .sec-head {margin-bottom:40rem;}

.community-bar {
    display:flex;align-items:center;justify-content:space-between;gap:20rem;flex-wrap:wrap;
    margin:0 0 40rem;
}
.community-total {color:var(--bk-deep);font-size:var(--font16);font-weight:var(--fw-semibold);letter-spacing:-.32rem;}

.btn_write_letter {
    flex:none;display:inline-flex;align-items:center;justify-content:center;height:auto;padding:12rem 20rem;
    border:1px solid var(--bk-deep);border-radius:var(--radius-full);background:var(--wh);color:var(--bk-deep);
    font-size:var(--font18);font-weight:var(--fw-semibold);letter-spacing:-.36rem;
}
.btn_write_letter:hover {background:var(--main-pale);color:var(--bk-deep);}

/* 상단 컨텐츠(대표 편지) — 좌 이미지 / 우 텍스트 */
.letter-featured {position:relative;margin:0 0 60rem;}
.letter-feat-btn {
    display:flex;align-items:stretch;width:100%;padding:0;text-align:left;overflow:hidden;
    border:0;background:transparent;cursor:pointer;
}
.letter-feat-img {
    position:relative;width:560rem;aspect-ratio:560/440;overflow:hidden;
    background:var(--gray-200);
}
.letter-feat-img.is-empty {background:var(--main-pale);}
.letter-feat-img > img {
    display:block;width:100%;height:100%;object-fit:cover;
}
.letter-feat-badge {
    position:absolute;top:24rem;left:24rem;z-index:1;
    display:inline-flex;align-items:center;padding:10rem 18rem;border-radius:var(--radius-full);
    background:var(--main-light);color:var(--wh);font-size:var(--font16);font-weight:var(--fw-semibold);letter-spacing:-.32rem;
}
.letter-feat-body {
    display:flex;flex-direction:column;justify-content:center;gap:20rem;
    padding:0rem 60rem;background:var(--main-pale);width:calc(100% - 560rem);
}
.letter-feat-body .card-tit {
    margin:0;color:var(--bk-deep);font-size:var(--font28, 28rem);font-weight:var(--fw-bold);line-height:1.4;letter-spacing:-.56rem;
}
.letter-feat-body .card-tit::before {content:'“';}
.letter-feat-body .card-tit::after {content:'”';}
.letter-feat-body .card-excerpt {
    margin:0;color:var(--bk-deep);font-size:var(--font18);line-height:1.5;letter-spacing:-.36rem;
    display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;
}
.letter-feat-body .card-meta {
    display:flex;align-items:center;gap:8rem;margin:0;
    color:var(--main-light);font-size:var(--font16);font-weight:var(--fw-medium);letter-spacing:-.32rem;
}
.letter-feat-body .card-date::before {content:"·";margin-right:8rem;}

/* Grid cards */
.letter-grid {
    display:grid;grid-template-columns:repeat(3,1fr);gap:24rem;
    margin:0;padding:0;list-style:none;
}
.letter-card {position:relative;margin:0;}
.letter-card-btn {
    display:flex;flex-direction:column;width:100%;height:100%;padding:0;text-align:left;
    border:1px solid var(--gray-200);background:var(--wh);overflow:hidden;cursor:pointer;
    transition:border-color .2s;
}
.letter-card-btn:hover {border-color:var(--main-light);}
.letter-card-img {
    width:100%;aspect-ratio:417/260;background:var(--main-pale);overflow:hidden;
}
.letter-card-img > img {
    display:block;width:100%;height:100%;object-fit:cover;
}
.letter-card-body {
    display:flex;flex-direction:column;gap:16rem;padding:28rem;
}
.letter-card .card-badge {
    display:inline-block;align-self:flex-start;padding:4rem 10rem;border-radius:var(--radius-full);
    background:var(--main);color:var(--wh);font-size:var(--font14);font-weight:var(--fw-semibold);
}
.letter-card .card-tit {
    margin:0;color:var(--bk-deep);font-size:var(--font24);font-weight:var(--fw-bold);line-height:1.5;letter-spacing:-.48rem;
}
.letter-card .card-excerpt {
    margin:0;color:var(--gray-500);font-size:var(--font18);line-height:1.5;letter-spacing:-.36rem;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.letter-card .card-meta {
    display:flex;justify-content:space-between;gap:12rem;margin:0;
    font-size:var(--font14);letter-spacing:-.28rem;
}
.letter-card .card-name {color:var(--main-light);}
.letter-card .card-date {color:var(--gray-500);}
.letter-grid .empty_list {grid-column:1/-1;padding:80rem 0;text-align:center;color:var(--color-text-muted);}

.community-more {display:flex;justify-content:center;margin-top:60rem;}
.btn_more_stories {
    display:inline-flex;align-items:center;justify-content:center;width:200rem;height:60rem;
    border:1px solid var(--bk-deep);border-radius:var(--radius-full);background:var(--wh);color:var(--bk-deep);
    font-size:var(--font20);font-weight:var(--fw-bold);letter-spacing:-.4rem;
}
.btn_more_stories:hover {background:var(--main-pale);}

/* Popup — 헤더(고정) → 이미지 → 제목/본문 → 이름·날짜 */
.letter-popup .pop-bx {
    width:560rem;max-height:86vh;display:flex;flex-direction:column;gap:0;
    padding:32rem;border-radius:20rem;overflow:hidden;
}
.letter-popup .pop-head {
    display:flex;align-items:center;justify-content:space-between;gap:16rem;margin:0 0 20rem;
}
.letter-popup .pop-label {
    margin:0;font-size:var(--font18);font-weight:var(--fw-semibold);letter-spacing:-.36rem;color:var(--bk-deep);
}
.letter-popup .close-btn {
    display:flex;width:28rem;height:28rem;flex:none;align-items:center;justify-content:center;line-height:0;
}
.letter-popup .close-btn img {display:block;width:100%;height:auto;}
.letter-popup .pop-img {
    width:100%;aspect-ratio:14/11;margin:0 0 24rem;overflow:hidden;background:var(--main-pale);
}
.letter-popup .pop-img[hidden] {display:none !important;}
.letter-popup .pop-img > img {
    display:block;width:100%;height:100%;object-fit:cover;
}
.letter-popup .pop-body {display:flex;flex-direction:column;gap:16rem;min-height:0;}
.letter-popup .pop-subject {
    margin:0;font-size:var(--font20);font-weight:var(--fw-bold);line-height:1.5;letter-spacing:-.48rem;color:var(--bk-deep);
}
.letter-popup .pop-con {
    flex:1;min-height:0;max-height:28vh;overflow-y:auto;
    font-size:var(--font15);line-height:1.5;letter-spacing:-.36rem;color:var(--gray-500);
}
.letter-popup .pop-con p {margin:0 0 1em;}
.letter-popup .pop-con p:last-child {margin-bottom:0;}
.letter-popup .pop-con img {max-width:100%;height:auto;}
.letter-popup .pop-foot {
    display:flex;align-items:center;justify-content:space-between;gap:12rem;margin-top:8rem;
}
.letter-popup .pop-name {
    color:var(--main-light);font-size:var(--font14);font-weight:var(--fw-medium);letter-spacing:-.32rem;
}
.letter-popup .pop-date {
    color:var(--gray-500);font-size:var(--font13);letter-spacing:-.28rem;
}

@media (max-width:1024px) {
    .letter-feat-btn {flex-direction:column;}
    .letter-feat-img {flex:none;width:100%;aspect-ratio:335/263;}
    .letter-feat-body {padding:32rem 28rem;width:100%;}
    .letter-feat-body .card-tit {font-size:22rem;}
    .letter-grid {grid-template-columns:repeat(2,1fr);gap:16rem;}
    .letter-card .card-tit {font-size:var(--font20);}
    .letter-card .card-excerpt {font-size:var(--font16);}
}
@media (max-width:800px) {
    .letter-grid {grid-template-columns:1fr;gap:12rem;}
    .letter-card-body {padding:20rem;}
    .community-bar {flex-direction:column;align-items:stretch;}
    #letter-con .community-bar{flex-direction:row;justify-content: space-between;align-items: center;}
    .btn_write_letter,
    .btn_more_stories {width:fit-content;justify-content:center;}
    .letter-feat-body {padding:24rem 20rem;}
    .letter-feat-badge {top:16rem;left:16rem;padding:8rem 14rem;font-size:var(--font14);}
    .letter-popup .pop-bx {width:calc(100vw - 40rem);padding:24rem;}
    .letter-popup .pop-subject {font-size:var(--font20);}
    .letter-popup .pop-con {font-size:var(--font16);max-height:32vh;}
    .letter-popup .pop-img{aspect-ratio:232/182;}
}