@charset "utf-8";

/* MOCO100 카드형 게시판 — layouts/moco100/css/main.css 의 .mc-stats-card 계승 */

.board--moco100-cards {
    background-color: rgb(241, 243, 245);
    padding-bottom: clamp(32px, 6vw, 64px);
}

.board--moco100-cards .mc-board-cards-area {
    max-width: min(1600px, 100%);
    margin: 0 auto;
    padding: 0 clamp(20px, 4vw, 48px);
}

.mc-board-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(18px, 2.5vw, 28px);
    align-items: stretch;
}

@media (max-width: 799px) {
    .mc-board-cards {
        grid-template-columns: 1fr;
    }
}

/* main.css 카드 폭 고정 해제 → 그리드 셀에 맞춤 */
.board--moco100-cards .mc-board-cards .mc-stats-card {
    width: 100%;
    max-width: none;
}

.board--moco100-cards .mc-stats-card__media:not(:has(img)) {
    background: linear-gradient(165deg, #e4e6ea 0%, #d8dce2 100%);
}

/* 미디어 이미지: main.css(.mc-stats-card__media img, cover·center top) 그대로 — 별도 contain 없음 */

/*
 * [썸네일] → [아이콘 | 유형·평형] → [제목] → [지역·회색]
 * 지역/유형/평형 idx: 스킨 설정 또는 목록 확장변수 1·2·3번째
 */
.board--moco100-cards .mc-stats-card__body {
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.board--moco100-cards .mc-stats-card__meta {
    flex-shrink: 0;
}

.board--moco100-cards .mc-stats-card__type {
    flex: 1;
    min-width: 0;
}

/* 확장변수 HTML이 p/div를 넣어도 한 줄로 유지 */
.board--moco100-cards .mc-stats-card__type p,
.board--moco100-cards .mc-stats-card__type div {
    display: inline;
    margin: 0;
    padding: 0;
    font: inherit;
    color: inherit;
}

.board--moco100-cards .mc-stats-card__loc p,
.board--moco100-cards .mc-stats-card__loc div {
    display: inline;
    margin: 0;
    padding: 0;
    font: inherit;
    color: inherit;
}

.board--moco100-cards .mc-stats-card__title {
    display: block;
    width: 100%;
}

.mc-stats-card--notice {
    position: relative;
}

.mc-stats-card--notice::before {
    content: "공지";
    position: absolute;
    top: clamp(12px, 2vw, 18px);
    left: clamp(12px, 2vw, 18px);
    z-index: 2;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: #fff;
    background: var(--mc-blue, rgb(63, 104, 254));
    border-radius: 8px;
    pointer-events: none;
}

/* 카테고리 탭 — 밝은 배경용 */
.cTab--moco {
    max-width: min(1600px, 100%);
    margin: 0 auto clamp(20px, 3vw, 32px);
    padding: 0 clamp(20px, 4vw, 48px);
}

.cTab--moco::after {
    content: "";
    display: block;
    clear: both;
}

.cTab--moco li {
    border-color: rgba(0, 0, 0, 0.1);
}

.cTab--moco li a {
    color: #5c5f66;
    background: #fff;
}

.cTab--moco li:hover a,
.cTab--moco li.on a {
    color: #111;
    border-top-color: var(--mc-blue, rgb(63, 104, 254));
}

/* 하단 툴바 */
.list_footer--moco {
    max-width: min(1600px, 100%);
    margin: clamp(28px, 4vw, 48px) auto 0;
    padding: 0 clamp(20px, 4vw, 48px);
}

.list_footer--moco .btnArea {
    margin-bottom: 16px;
}

.list_footer--moco .board_search {
    margin-bottom: 20px;
}

/* board.default.css float 해제 → 버튼/검색/페이지네이션 정렬 안정화 */
.board--moco100-cards .list_footer--moco {
    display: flow-root;
}

.board--moco100-cards .list_footer--moco .btnArea {
    float: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: 8px 10px;
}

.board--moco100-cards .list_footer--moco .board_search {
    float: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 12px;
    position: relative;
}

.board--moco100-cards .list_footer--moco .board_search select {
    height: auto;
    min-height: 36px;
    padding: 6px 10px;
    border: 1px solid #e0e2e6;
    border-radius: 8px;
    background: #fff;
    font-size: 14px;
}

.board--moco100-cards .list_footer--moco .board_search .search_input {
    position: relative;
    flex: 1 1 220px;
    min-width: 0;
}

.board--moco100-cards .list_footer--moco .board_search .iText {
    width: 100%;
    max-width: 320px;
    height: auto;
    min-height: 36px;
    line-height: 1.3;
    padding: 8px 12px 8px 34px;
    border: 1px solid #e0e2e6;
    border-radius: 8px;
    box-sizing: border-box;
}

.board--moco100-cards .list_footer--moco .board_search .iText:focus {
    max-width: none;
    border-color: var(--mc-blue, rgb(63, 104, 254));
    outline: none;
    box-shadow: 0 0 0 2px rgba(63, 104, 254, 0.15);
}

.board--moco100-cards .list_footer--moco .board_search .xi-magnifier {
    top: 50%;
    left: 10px;
    transform: translateY(-50%);
    font-size: 16px;
    color: #8b8f98;
}

.board--moco100-cards .list_footer--moco .board_search .btn[type="submit"] {
    position: static;
    flex-shrink: 0;
    min-height: 36px;
    padding: 0 18px;
    border-radius: 8px;
    font-weight: 600;
    border: 1px solid var(--mc-blue, rgb(63, 104, 254));
    background: var(--mc-blue, rgb(63, 104, 254));
    color: #fff;
    cursor: pointer;
}

.board--moco100-cards .list_footer--moco .board_search .btn[type="submit"]:hover {
    filter: brightness(1.05);
}

.board--moco100-cards .list_footer--moco .board_search > a.btn {
    flex-shrink: 0;
    align-self: center;
}

/* PC: 왼쪽 검색(한 줄) · 오른쪽 쓰기/태그… · 아래 페이지네이션 (list.html 순서: 검색 → 버튼 → 페이지) */
@media (min-width: 768px) {
    .board--moco100-cards .list_footer--moco {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-rows: auto auto;
        gap: 14px 24px;
        align-items: center;
    }

    .board--moco100-cards .list_footer--moco .board_search {
        grid-column: 1;
        grid-row: 1;
        margin-bottom: 0;
        flex-wrap: nowrap;
        min-width: 0;
    }

    .board--moco100-cards .list_footer--moco .btnArea {
        grid-column: 2;
        grid-row: 1;
        margin-bottom: 0;
        flex-wrap: nowrap;
    }

    .board--moco100-cards .list_footer--moco .mc-board-pagination {
        grid-column: 1 / -1;
        grid-row: 2;
        padding-top: 0;
    }

    @supports selector(:has(*)) {
        .board--moco100-cards .list_footer--moco:not(:has(.board_search)) .btnArea {
            grid-column: 1 / -1;
            justify-self: end;
        }
    }

    /* PC: 검색창이 그리드 1열 전체로 늘어나지 않도록 최대 너비 제한 */
    .board--moco100-cards .list_footer--moco .board_search .search_input {
        flex: 0 1 auto;
        min-width: 160px;
        max-width: min(400px, 100%);
        width: min(400px, 100%);
    }

    .board--moco100-cards .list_footer--moco .board_search .iText {
        max-width: 100%;
        width: 100%;
    }

    .board--moco100-cards .list_footer--moco .board_search .iText:focus {
        max-width: 100%;
    }

    /* PC에서도 쓰기·태그… = 모바일과 동일 카드 버튼 (기본 .btn만 덮어씀) */
    .board--moco100-cards .list_footer--moco .btnArea .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        flex: 1 1 0;
        min-width: 0;
        min-height: 42px;
        margin: 0;
        padding: 8px 10px;
        font-size: clamp(12px, 1.1vw, 14px);
        font-weight: 600;
        line-height: 1.15;
        text-align: center;
        white-space: nowrap;
        border-radius: 10px;
        box-sizing: border-box;
        background: #fff;
        border: 1px solid #dfe1e6;
        color: #1a1a1a;
        text-decoration: none;
        transition: border-color 0.15s ease, background 0.15s ease;
    }

    .board--moco100-cards .list_footer--moco .btnArea .btn:hover {
        border-color: #c8ccd4;
        background: #fafbfc;
    }

    .board--moco100-cards .list_footer--moco .btnArea .btn:active {
        background: #f4f5f7;
    }
}

/* 모바일: 쓰기·태그·설정… 한 줄 · 검색 세로 스택 · 페이지네이션 가운데 */
@media (max-width: 767px) {
    .board--moco100-cards .list_footer--moco {
        display: flex;
        flex-direction: column;
    }

    .board--moco100-cards .list_footer--moco .mc-board-pagination {
        order: 3;
    }

    .board--moco100-cards .list_footer--moco .btnArea {
        order: 1;
        display: flex;
        flex-wrap: nowrap;
        gap: 6px;
        justify-content: stretch;
        margin-bottom: 20px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }

    .board--moco100-cards .list_footer--moco .btnArea .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 4px;
        flex: 1 1 0;
        min-width: 0;
        min-height: 42px;
        margin: 0;
        padding: 8px 6px;
        font-size: clamp(11px, 3.2vw, 13px);
        font-weight: 600;
        line-height: 1.15;
        text-align: center;
        white-space: nowrap;
        border-radius: 10px;
        box-sizing: border-box;
        background: #fff;
        border: 1px solid #dfe1e6;
        color: #1a1a1a;
        text-decoration: none;
        transition: border-color 0.15s ease, background 0.15s ease;
    }

    .board--moco100-cards .list_footer--moco .btnArea .btn:active {
        background: #f4f5f7;
    }

    .board--moco100-cards .list_footer--moco .board_search {
        order: 2;
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        margin-bottom: 8px;
    }

    .board--moco100-cards .list_footer--moco .board_search select {
        width: 100%;
        min-height: 46px;
        padding: 10px 12px;
        font-size: 16px;
        border-radius: 12px;
    }

    .board--moco100-cards .list_footer--moco .board_search .search_input {
        flex: none;
        width: 100%;
        max-width: none;
    }

    .board--moco100-cards .list_footer--moco .board_search .iText {
        max-width: none;
        width: 100% !important;
        min-height: 46px;
        padding: 12px 14px 12px 42px;
        font-size: 16px;
        border-radius: 12px;
    }

    .board--moco100-cards .list_footer--moco .board_search .xi-magnifier {
        left: 14px;
    }

    .board--moco100-cards .list_footer--moco .board_search .btn[type="submit"] {
        width: 100%;
        min-height: 48px;
        padding: 12px 16px;
        font-size: 16px;
        border-radius: 12px;
    }

    .board--moco100-cards .list_footer--moco .board_search > a.btn {
        width: 100%;
        text-align: center;
        min-height: 46px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 12px;
        box-sizing: border-box;
    }

    .board--moco100-cards .list_footer--moco .mc-board-pagination {
        width: 100%;
        max-width: 100%;
        justify-content: center;
        padding: 20px 0 12px;
        margin: 0 auto;
        box-sizing: border-box;
    }

    .board--moco100-cards .list_footer--moco .mc-board-pagination__pages {
        justify-content: center;
    }
}

/* 페이지네이션 — « 숫자 … » · 배경 없음 · 현재 검정 굵게 */
.mc-board-pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: clamp(14px, 2.2vw, 22px);
    padding: clamp(20px, 3vw, 32px) 0;
    font-family: var(--font-cond, "Encode Sans Condensed", "Noto Sans KR", sans-serif);
}

.mc-board-pagination__edge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 2px;
    font-size: 18px;
    font-weight: 400;
    line-height: 1;
    color: #cccccc;
    text-decoration: none;
    background: none;
    border: 0;
    border-radius: 0;
    min-width: 0;
    min-height: 0;
    transition: color 0.15s ease;
}

a.mc-board-pagination__edge:hover {
    color: #999999;
    background: none;
}

.mc-board-pagination__edge.is-disabled {
    cursor: default;
    pointer-events: none;
    color: #cccccc;
    opacity: 1;
}

.mc-board-pagination__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 2px;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.2;
    color: #999999;
    text-decoration: none;
    background: none;
    border: 0;
    border-radius: 0;
    min-width: 0;
    min-height: 0;
    transition: color 0.15s ease;
}

a.mc-board-pagination__num:hover {
    color: #000000;
    background: none;
}

.mc-board-pagination__num.is-current {
    font-weight: 700;
    color: #000000;
    cursor: default;
}

.mc-board-pagination__ellipsis {
    display: inline-flex;
    align-items: center;
    padding: 0 2px;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.2;
    color: #999999;
    user-select: none;
}

.mc-board-pagination__pages {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: clamp(10px, 1.8vw, 18px);
}

.mc-board-cards-empty {
    text-align: center;
    padding: clamp(48px, 8vw, 80px) 20px;
    font-size: 16px;
    color: #5c5f66;
}

/* 읽기 화면 — 대표 이미지 1장 · 히어로 · 현장정보 2×2 · 오른쪽 철거 정보 카드 */
/* 레이아웃 body overflow-x:hidden 이 sticky를 막는 경우 대비(모던 브라우저) */
@supports selector(:has(*)) {
    body:has(.board_read--moco) {
        overflow-x: clip;
    }

    .mc-sub-content:has(.board_read--moco),
    .mc-container:has(.board_read--moco) {
        overflow: visible;
    }
}

.board--moco100-cards .board_read--moco {
    /* 폭·좌우 패딩 = .mc-board-cards-area(목록)과 동일 */
    --read-moco-layout-gap: clamp(24px, 3vw, 40px);
    /* 본문(왼쪽) : 철거 정보(오른쪽) = 7 : 3 */

    max-width: min(1600px, 100%);
    margin: 0 auto;
    padding: clamp(24px, 4vw, 40px) clamp(20px, 4vw, 48px) clamp(40px, 6vw, 64px);
    color: #1a1a1a;
    overflow: visible;
}

/* 이미지1: 왼쪽 세로 스택 | 오른쪽 철거 정보 한 덩어리 */
.board--moco100-cards .read-moco-layout {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 3fr);
    gap: var(--read-moco-layout-gap);
    align-items: stretch;
    overflow: visible;
}

/* 오른쪽 열만: 그리드 행 높이 = 왼쪽과 동일 → 스티키가 거기서 멈춤 (flex 쓰면 높이가 내용만큼만 잡히는 경우 있음) */
.board--moco100-cards .read-moco-aside-col {
    min-width: 0;
    align-self: stretch;
    min-height: 0;
}

.board--moco100-cards .read-moco-gallery {
    display: block;
    margin-bottom: clamp(20px, 2.5vw, 28px);
}

.board--moco100-cards .read-moco-gallery__cell {
    position: relative;
    width: 100%;
    aspect-ratio: 530 / 331;
    overflow: hidden;
    border-radius: 12px;
    background: #e8eaee;
}

.board--moco100-cards .read-moco-gallery__cell img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}

.board--moco100-cards .read-moco-hero {
    padding: clamp(20px, 2.4vw, 28px);
    margin-bottom: clamp(22px, 2.8vw, 32px);
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
}

.board--moco100-cards .read-moco-hero .mc-stats-card__meta {
    margin-bottom: clamp(10px, 1.2vw, 14px);
}

.board--moco100-cards .read-moco-hero__title {
    font-family: var(--font-cond, "Encode Sans Condensed", "Noto Sans KR", sans-serif);
    font-size: clamp(22px, 2.4vw, 28px);
    font-weight: 800;
    line-height: 1.28;
    margin: 0 0 clamp(8px, 1vw, 10px);
    letter-spacing: -0.03em;
}

.board--moco100-cards .read-moco-hero__title a {
    color: #000000;
    text-decoration: none;
}

.board--moco100-cards .read-moco-hero__title a:hover {
    color: var(--mc-blue, rgb(63, 104, 254));
}

.board--moco100-cards .read-moco-hero__loc {
    margin: 0;
}

.board--moco100-cards .read-moco-siteinfo__heading {
    font-size: clamp(17px, 1.6vw, 19px);
    font-weight: 800;
    margin: 0 0 clamp(14px, 1.6vw, 18px);
    letter-spacing: -0.02em;
}

.board--moco100-cards .read-moco-siteinfo__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(12px, 1.5vw, 16px);
}

.board--moco100-cards .read-moco-siteinfo__box {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 92px;
    padding: 14px 16px;
    background: #ffffff;
    border: 1px solid #e2e4e8;
    border-radius: 12px;
}

.board--moco100-cards .read-moco-siteinfo__label {
    font-size: 12px;
    font-weight: 500;
    color: #7a7d85;
    letter-spacing: -0.02em;
}

.board--moco100-cards .read-moco-siteinfo__value {
    align-self: flex-end;
    text-align: right;
    font-size: clamp(15px, 1.4vw, 17px);
    font-weight: 700;
    color: #111111;
    line-height: 1.35;
}

.board--moco100-cards .read-moco-siteinfo__value p,
.board--moco100-cards .read-moco-siteinfo__value div {
    display: inline;
    margin: 0;
    padding: 0;
    font: inherit;
    color: inherit;
}

/* 스티키: 읽기 블록(.read-moco-layout) 하단까지 — 해제하지 말 것 */
.board--moco100-cards .read-moco-aside {
    min-width: 0;
    position: -webkit-sticky;
    position: sticky;
    top: clamp(88px, 12vh, 140px);
    z-index: 5;
}

/* 철거 정보 카드 */
.board--moco100-cards .read-moco-aside-panel {
    padding: clamp(18px, 2vw, 22px);
    background: #ffffff;
    border: 1px solid #e4e6ea;
    border-radius: 14px;
}

.board--moco100-cards .read-moco-aside-panel__title {
    font-size: 17px;
    font-weight: 800;
    margin: 0 0 16px;
    letter-spacing: -0.02em;
}

.board--moco100-cards .read-moco-aside-panel__rows {
    margin: 0;
    padding: 0;
}

.board--moco100-cards .read-moco-aside-panel__row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 12px;
}

.board--moco100-cards .read-moco-aside-panel__row:last-child {
    margin-bottom: 0;
}

.board--moco100-cards .read-moco-aside-panel__k {
    flex-shrink: 0;
    font-size: 13px;
    font-weight: 500;
    color: #7a7d85;
}

.board--moco100-cards .read-moco-aside-panel__v {
    flex: 1;
    min-width: 0;
    text-align: right;
    font-size: 15px;
    font-weight: 700;
    color: #111111;
    line-height: 1.4;
}

.board--moco100-cards .read-moco-aside-panel__v p,
.board--moco100-cards .read-moco-aside-panel__v div {
    display: inline;
    margin: 0;
    padding: 0;
    font: inherit;
    color: inherit;
}

.board--moco100-cards .read-moco-aside-panel__actions {
    margin: 18px 0 0;
}

.board--moco100-cards .read-moco-aside-panel__actions--list {
    margin-top: 10px;
}

.board--moco100-cards .read-moco-btn {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 14px 16px;
    font-size: 15px;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    border-radius: 10px;
    letter-spacing: -0.02em;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.board--moco100-cards .read-moco-btn--primary {
    color: #ffffff;
    background: var(--mc-blue, rgb(63, 104, 254));
    border: 1px solid transparent;
    border-radius: 999px;
}

.board--moco100-cards .read-moco-btn--primary:hover {
    filter: brightness(1.06);
    color: #ffffff;
}

.board--moco100-cards .read-moco-btn--ghost {
    color: #111111;
    background: #ffffff;
    border: 1px solid #c8ccd4;
    border-radius: 999px;
}

.board--moco100-cards .read-moco-btn--ghost:hover {
    border-color: #111;
    color: #111;
}

.board--moco100-cards .read-moco-read-footer {
    margin-top: clamp(32px, 4vw, 48px);
    padding-top: clamp(24px, 3vw, 32px);
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}

/* 읽기 하단 수정·삭제·목록 — 목록 푸터와 동일 카드 버튼 (PC·모바일, 롤백 방지) */
.board--moco100-cards .read-moco-read-footer .btnArea {
    float: none;
    clear: both;
    text-align: initial;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
    justify-content: stretch;
    align-items: stretch;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

.board--moco100-cards .read-moco-read-footer .btnArea .etc {
    display: contents;
}

.board--moco100-cards .read-moco-read-footer .btnArea .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    flex: 1 1 0;
    min-width: 0;
    min-height: 42px;
    margin: 0;
    padding: 8px 6px;
    font-size: clamp(11px, 2.8vw, 14px);
    font-weight: 600;
    line-height: 1.15;
    text-align: center;
    white-space: nowrap;
    border-radius: 10px;
    box-sizing: border-box;
    background: #fff;
    border: 1px solid #dfe1e6;
    color: #1a1a1a;
    text-decoration: none;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.board--moco100-cards .read-moco-read-footer .btnArea .btn:hover {
    border-color: #c8ccd4;
    background: #fafbfc;
}

.board--moco100-cards .read-moco-read-footer .btnArea .btn:active {
    background: #f4f5f7;
}

/* PC: 읽기 하단 버튼은 텍스트·아이콘 너비만큼만 (균등분할 불필요) */
@media (min-width: 768px) {
    .board--moco100-cards .read-moco-read-footer .btnArea {
        justify-content: flex-end;
    }

    .board--moco100-cards .read-moco-read-footer .btnArea .btn {
        flex: 0 0 auto;
        min-width: auto;
        padding: 8px 14px;
    }
}

.board--moco100-cards .read-moco-secretForm {
    max-width: 400px;
    margin: 0 auto;
}

@media (max-width: 767px) {
    .board--moco100-cards .read-moco-layout {
        grid-template-columns: 1fr;
    }

    .board--moco100-cards .read-moco-aside-col {
        height: auto;
    }
}