@charset "utf-8";

/* 검색·상단·글쓰기·글보기는 알림마당 표 게시판과 같은 규칙을 그대로 쓴다 */
@import url("../kaiia_board/style.css");

/* KAIIA 협회소식 — 시안(Figma 489:822 · 카드 489:833)
   카드 436 × 380, 가로 간격 38 · 세로 간격 49 (3열) */
.nw-grid{display:grid;grid-template-columns:repeat(3, 1fr);
    gap:calc(49 * var(--u)) calc(38 * var(--u))}

/* 글 카드는 어디서나 테두리에만 색이 들어온다 (메인 .n-card · .ai-card 와 같은 규칙) */
.nw-card{border:1px solid rgba(36,36,36,.12);border-radius:calc(16 * var(--u));
    background:#fff;overflow:hidden;
    transition:border-color .25s}
.nw-card:hover{border-color:#0069b4}
/* 날짜를 카드 맨 아래에 붙인다 — 제목이 한 줄이든 두 줄이든 날짜 높이가 같아진다 */
.nw-card a{display:flex;flex-direction:column;height:100%;color:inherit}

/* 썸네일 — 제목이 그림 위에 얹힌다 */
.nw-thumb{position:relative;height:calc(238 * var(--u));overflow:hidden;
    background:#fff;border-bottom:1px solid rgba(36,36,36,.12)}
.nw-thumb img{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:cover;display:block}
/* 그림을 아직 안 올렸으면 시안에 들어 있던 기본 썸네일을 그대로 쓴다.
   (theme/kaiia/img/news-thumb-default.png — 피그마에서 내려받은 그 그림) */
.nw-thumb.is-empty{background:#fff no-repeat 50% 50%;background-size:cover;
    background-image:url("../../../img/news-thumb-default.png")}

/* 글자가 그림 위에서도 읽히도록 위쪽에 흰 기운을 옅게 깐다 */
/* 그림 위에 흰 기운을 깔아 제목이 읽히게 한다. 그림보다 위, 제목보다 아래에 온다. */
.nw-thumb::before{content:'';position:absolute;left:0;top:0;z-index:1;width:100%;
    height:calc(150 * var(--u));
    background:linear-gradient(to bottom, rgba(255,255,255,.95), rgba(255,255,255,.75) 55%, rgba(255,255,255,0))}
.nw-thumb.is-empty::before{display:none}

.nw-thumb-text{position:absolute;z-index:2;left:calc(34 * var(--u));top:calc(27 * var(--u));
    width:calc(300 * var(--u));
    font-size:calc(20 * var(--u));font-weight:700;line-height:1.4;color:#222;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
    word-break:keep-all}

.nw-body{flex:1;display:flex;flex-direction:column;
    padding:calc(30 * var(--u)) calc(34 * var(--u))}
/* 카드 아래 — 굵은 제목 */
.nw-subject{
    font-size:calc(18 * var(--u));font-weight:700;line-height:1.45;color:#222;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
    word-break:keep-all}
.nw-date{margin-top:auto;padding-top:calc(20 * var(--u));
    font-size:calc(15 * var(--u));color:#999}

.nw-empty{padding:calc(80 * var(--u)) 0;text-align:center;
    font-size:calc(17 * var(--u));color:#888}

@media (max-width:1024px){
    /* 좁은 화면은 두 장씩 */
    .nw-grid{grid-template-columns:repeat(2, 1fr);gap:20px 14px}
    .nw-card{border-radius:12px}
    .nw-thumb{height:120px}
    .nw-thumb::before{height:70px}
    .nw-thumb-text{left:14px;top:12px;width:calc(100% - 28px);font-size:13px;line-height:1.35}
    .nw-body{padding:14px}
    .nw-subject{font-size:13px;line-height:1.4}
    .nw-date{padding-top:10px;font-size:11px}
    .nw-empty{padding:48px 0;font-size:14px}
}

/* ---------- 뉴스 상세 (시안 497:1626) ---------- */
.nd{}

/* 상단 '목록으로 · 수정 · 삭제' 규칙은 kaiia_board/style.css 로 옮겼다 (모든 게시판 공용) */

/* 제목을 위에 두고, 그 아래 한 줄에 날짜(왼쪽) · 원문 보기(오른쪽 끝)
   — 오른쪽 끝은 대표 그림·수정/삭제 버튼과 같은 선에 맞춰 균형을 잡는다. */
.nd-head{margin-bottom:calc(44 * var(--u))}
.nd-title{font-size:calc(34 * var(--u));font-weight:700;line-height:1.35;color:#111;
    word-break:keep-all;margin-bottom:calc(20 * var(--u))}
.nd-meta{display:flex;align-items:center;justify-content:space-between;gap:calc(16 * var(--u))}
.nd-date{font-size:calc(16 * var(--u));color:#999}

/* 대표 그림 — 첨부한 썸네일을 크게 */
.nd-hero{margin:0 0 calc(70 * var(--u))}
.nd-hero img{display:block;width:100%;height:auto;
    border:1px solid rgba(36,36,36,.1);border-radius:calc(16 * var(--u))}
.nd-source{position:relative;margin-top:calc(16 * var(--u));padding-left:calc(24 * var(--u));
    font-size:calc(16 * var(--u));color:#555}
/* 시안의 작은 세모 표시 */
.nd-source::before{content:'';position:absolute;left:0;top:calc(8 * var(--u));
    border-left:calc(6 * var(--u)) solid transparent;
    border-right:calc(6 * var(--u)) solid transparent;
    border-top:calc(9 * var(--u)) solid #222}

.nd-body{font-size:calc(17 * var(--u));line-height:1.9;color:#333}

/* 본문 안 소제목 — 시안처럼 앞에 짧은 막대가 붙는다 */
.nd-body h3{position:relative;margin:calc(70 * var(--u)) 0 calc(28 * var(--u));
    padding-left:calc(22 * var(--u));
    font-size:calc(24 * var(--u));font-weight:700;color:#111}
.nd-body h3::before{content:'';position:absolute;left:0;top:calc(6 * var(--u));
    width:calc(4 * var(--u));height:calc(22 * var(--u));border-radius:2px;background:#222}
.nd-body h4{margin:calc(40 * var(--u)) 0 calc(16 * var(--u));
    font-size:calc(19 * var(--u));font-weight:700;color:#222}

.nd-body p{margin:0 0 calc(16 * var(--u))}
.nd-body img{max-width:100%;height:auto;border-radius:calc(10 * var(--u))}

/* 사례 상자 — 회색 라운드 안에 '제목 + 설명' (편집기에서 넣는다) */
.ke-case{margin:calc(24 * var(--u)) 0;padding:calc(34 * var(--u)) calc(36 * var(--u));
    background:#f6f7f9;border-radius:calc(16 * var(--u))}
.ke-case > p{margin:0 0 calc(12 * var(--u))}
.ke-case > p:last-child{margin-bottom:0}
.ke-case strong{display:block;margin-bottom:calc(6 * var(--u));
    font-size:calc(19 * var(--u));font-weight:700;color:#111}

@media (max-width:1024px){
    /* 위 여백은 .nb 가 가진 40px 를 그대로 쓴다 (칩 아래 공통 간격) */

    .nd-head{margin-bottom:24px}
    .nd-title{font-size:20px;line-height:1.4;margin-bottom:12px}
    .nd-meta{gap:12px}
    .nd-date{font-size:12px}

    .nd-hero{margin-bottom:28px}
    .nd-hero img{border-radius:10px}
    .nd-source{margin-top:10px;padding-left:16px;font-size:13px}
    .nd-source::before{top:5px;border-left-width:5px;border-right-width:5px;border-top-width:7px}

    .nd-body{font-size:15px;line-height:1.8}
    .nd-body h3{margin:36px 0 16px;padding-left:14px;font-size:18px}
    .nd-body h3::before{top:4px;width:3px;height:18px}
    .nd-body h4{margin:24px 0 10px;font-size:16px}
    .ke-case{margin:16px 0;padding:18px 16px;border-radius:12px}
    .ke-case strong{font-size:15px}
}

/* [KAIIA] 상세 화면 '원문 보기' — 링크(wr_2)가 있을 때만 나온다 */
.nd-source-link{display:inline-flex;align-items:center;
    height:calc(38 * var(--u));padding:0 calc(18 * var(--u));
    background:#0069b4;border-radius:calc(19 * var(--u));
    font-size:calc(15 * var(--u));font-weight:600;color:#fff}
.nd-source-link:hover{background:#00538f}
@media (max-width:1024px){
    .nd-source-link{height:36px;padding:0 16px;font-size:14px}
}