@charset "utf-8";

/* KAIIA 알림마당 목록 — 시안(Figma 487:576)
 * 공지사항 · 협회소식 · 회원사 소식 · AI news 가 함께 쓴다.
 * 길이는 var(--u)(시안 1920 기준 1px). 1024 이하에서는 --u 가 1px 이 된다.
 */

.nb{width:var(--content);margin:0 auto;padding:var(--sub-top) 0 var(--sub-bottom)}
.nb *{box-sizing:border-box}

/* ---------- 검색 ----------
   크기는 바로 위 칩(.sub-chip — '공지사항 · 협회소식 …')을 기준으로 잡는다.
   같은 화면에 나란히 놓이는 알약이라 크기가 크게 다르면 검색칸만 커 보인다.
       칩 : 높이 44u · 글자 18u

   글자는 칩과 똑같이 두되, 높이는 한 단계 높은 54u 로 둔다.
   칩은 글자만큼 좁아서 44u 로도 알약처럼 보이지만,
   검색칸은 폭이 430u 나 되어 같은 높이면 옆으로 눌린 것처럼 납작해 보인다.

   높이(--sh)와 글자(--sf)를 여기 한 곳에 적어 두고 아래에서 가져다 쓴다.
   폭은 칩 비율까지 따라가지 않는다 — 그러면 '--검색--' 글자가 칸을 넘친다. */
.nb-search{display:flex;justify-content:flex-end;align-items:center;gap:calc(10 * var(--u));
    margin-bottom:calc(52 * var(--u));
    --sh:calc(54 * var(--u));   /* 칸 높이 */
    --sf:calc(18 * var(--u))}   /* 글자 — 칩과 같게 */
.nb-sch-sel{width:calc(125 * var(--u));height:var(--sh);
    padding:0 calc(34 * var(--u)) 0 calc(24 * var(--u));
    background:#fff no-repeat right calc(16 * var(--u)) center;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23222' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-size:calc(13 * var(--u)) auto;
    border:1px solid rgba(36,36,36,.1);border-radius:999px;
    font-size:var(--sf);color:#222;cursor:pointer;
    -webkit-appearance:none;appearance:none}
.nb-sch-bar{position:relative;width:calc(430 * var(--u))}
.nb-sch-bar input{width:100%;height:var(--sh);
    padding:0 calc(44 * var(--u)) 0 calc(24 * var(--u));
    background:#fff;border:1px solid rgba(36,36,36,.1);border-radius:999px;
    font-size:var(--sf);color:#222;outline:0}
.nb-sch-bar input::placeholder{color:#b5b8bb}
.nb-sch-bar input:focus{border-color:#2eadf1}
.nb-sch-btn{position:absolute;top:0;right:calc(16 * var(--u));
    width:calc(22 * var(--u));height:var(--sh);
    border:0;cursor:pointer;font-size:0;
    background:none no-repeat 50% 50%;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23222' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='16.5' y1='16.5' x2='21' y2='21'/%3E%3C/svg%3E");
    background-size:calc(17 * var(--u)) auto}
.nb-sch-btn:hover{opacity:.6}

/* ---------- 관리자 전용 줄 ---------- */
.nb-admin{display:flex;justify-content:flex-end;gap:calc(8 * var(--u));
    margin:calc(-32 * var(--u)) 0 calc(24 * var(--u))}
.nb-admin-btn{display:inline-flex;align-items:center;height:calc(36 * var(--u));
    padding:0 calc(14 * var(--u));
    background:var(--btn-sub);border:1px solid var(--btn-line);border-radius:calc(20 * var(--u));
    font-size:calc(15 * var(--u));color:#555}
.nb-admin-btn:hover{border-color:var(--btn);color:var(--btn)}

/* ---------- 목록 표 ---------- */
.nb-table{width:100%;table-layout:fixed;border-collapse:collapse;
    border-top:2px solid #222}
.nb-table caption{position:absolute;width:0;height:0;overflow:hidden;font-size:0}
.nb-table col.c-no{width:calc(150 * var(--u))}
.nb-table col.c-name{width:calc(150 * var(--u))}
.nb-table col.c-date{width:calc(150 * var(--u))}
.nb-table col.c-hit{width:calc(150 * var(--u))}

.nb-table th{height:calc(55 * var(--u));
    border-bottom:1px solid #f2f2f2;
    font-size:calc(17 * var(--u));font-weight:700;color:#222}
.nb-table td{height:calc(55 * var(--u));padding:calc(10 * var(--u)) 0;
    border-bottom:1px solid #f2f2f2;
    font-size:calc(16 * var(--u));color:#555;text-align:center;vertical-align:middle}

/* 머리글은 모두 가운데. 본문에서 제목만 왼쪽으로 붙인다 (시안과 같다) */
.nb-table .c-subject{text-align:left;padding-left:calc(20 * var(--u));padding-right:calc(20 * var(--u))}
.nb-table .c-subject a{color:#222;
    display:inline;
    overflow-wrap:anywhere}
.nb-table .c-subject a:hover{color:#0069b4;text-decoration:underline;text-underline-offset:calc(4 * var(--u))}

.nb-table tr:hover td{background:#fbfcfd}

/* 공지글은 번호 대신 표시를 달고 제목을 진하게 */
.nb-table tr.is-notice .c-subject a{font-weight:700;color:#111}
.nb-badge-notice{display:inline-flex;align-items:center;justify-content:center;
    height:calc(26 * var(--u));padding:0 calc(10 * var(--u));
    background:#0069b4;border-radius:calc(13 * var(--u));
    font-size:calc(13 * var(--u));font-weight:500;color:#fff}

/* 새 글 · 댓글 수 · 첨부 */
.nb-badge-new{display:inline-flex;align-items:center;justify-content:center;
    height:calc(24 * var(--u));margin-left:calc(14 * var(--u));padding:0 calc(9 * var(--u));
    background:#fff;border:1px solid #d8d8d8;border-radius:calc(3 * var(--u));
    font-size:calc(12 * var(--u));font-weight:400;color:#555;vertical-align:middle;
    text-transform:lowercase}
.nb-cnt{margin-left:calc(6 * var(--u));font-size:calc(14 * var(--u));color:#0069b4}
.nb-cnt::before{content:'['}
.nb-cnt::after{content:']'}
.nb-icon-file{display:inline-block;margin-left:calc(8 * var(--u));
    font-size:calc(12 * var(--u));color:#888;vertical-align:middle}

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

/* ---------- 페이지 번호 ---------- */
.nb .pg_wrap{display:flex;justify-content:center;margin-top:calc(60 * var(--u))}
.nb .pg{display:flex;align-items:center;gap:calc(10 * var(--u))}
.nb .pg_page,
.nb .pg_current{display:inline-flex;align-items:center;justify-content:center;
    width:calc(40 * var(--u));height:calc(40 * var(--u));
    border-radius:50%;
    font-size:calc(16 * var(--u));color:#555;background:none;border:0}
.nb .pg_current{background:#2eadf1;color:#fff;font-weight:500}
.nb .pg_page:hover{color:#0069b4}

/* 처음 · 이전 · 다음 · 맨끝은 글자 대신 화살표로 (시안과 같다) */
.nb .pg_start,
.nb .pg_prev,
.nb .pg_next,
.nb .pg_end{font-size:0;color:#555}
.nb .pg_start::before{content:'\00AB'}   /* « */
.nb .pg_prev::before{content:'\2039'}    /* ‹ */
.nb .pg_next::before{content:'\203A'}    /* › */
.nb .pg_end::before{content:'\00BB'}     /* » */
.nb .pg_start::before,
.nb .pg_prev::before,
.nb .pg_next::before,
.nb .pg_end::before{font-size:calc(20 * var(--u));line-height:1}

/* ---------- 좁은 화면 ---------- */
@media (max-width:1024px){
    .nb{width:100%;padding:var(--sub-top) 20px var(--sub-bottom)}

    /* 고르는 칸과 검색창을 한 줄에 나란히 */
    .nb-search{gap:6px;margin-bottom:24px}
    .nb-sch-sel{flex:none;width:auto;min-width:96px;height:44px;
        padding:0 30px 0 14px;font-size:13px;border-radius:22px;
        background-position:right 12px center;background-size:13px auto}
    .nb-sch-bar{flex:1;min-width:0;width:auto}
    .nb-sch-bar input{height:44px;padding:0 42px 0 16px;font-size:13px;border-radius:22px}
    .nb-sch-btn{right:12px;width:22px;height:44px;background-size:16px auto}

    .nb-admin{margin:-12px 0 16px}
    .nb-admin-btn{height:32px;padding:0 12px;font-size:13px;border-radius:16px}

    /* 좁은 화면에서는 표를 옆으로 밀지 않고, 한 줄에 제목·정보를 쌓아 보여 준다.
       칸을 그대로 두면 글자가 세로로 한 자씩 떨어져 읽을 수 없다. */
    .nb-table,
    .nb-table tbody,
    .nb-table tr,
    .nb-table td{display:block;width:100%}
    .nb-table thead,
    .nb-table colgroup{display:none}
    .nb-table{border-top:1px solid #222}
    .nb-table tr{position:relative;padding:16px 0;border-bottom:1px solid #f2f2f2}
    .nb-table td{height:auto;padding:0;border:0;text-align:left}
    .nb-table .c-subject{padding:0;font-size:15px;line-height:1.5;color:#222}
    .nb-table .c-subject a{color:#222}
    /* 번호는 왼쪽 위에, 작성자·작성일·조회는 제목 아래 한 줄로 */
    .nb-table .c-no{position:absolute;top:16px;left:0;width:auto;
        font-size:13px;color:#999}
    /* 번호 자리만큼 제목과 그 아래 줄(작성자·날짜·조회)을 들여 쓴다.
       작성일·조회는 작성자 뒤에 이어 붙으므로 작성자에만 주면 된다. */
    .nb-table .c-subject,
    .nb-table .c-name{padding-left:34px}
    .nb-table .c-subject{padding-right:0}
    /* 답변글은 번호가 없으므로 그 자리도 비운다 (점만 덩그러니 남지 않게) */
    .nb-table .c-no:has(.nb-no-reply){display:none}
    .nb-table .c-name,
    .nb-table .c-date,
    .nb-table .c-hit{display:inline-block;width:auto;margin-top:8px;
        font-size:12px;color:#888}
    .nb-table .c-name::after,
    .nb-table .c-date::after{content:'·';margin:0 6px;color:#ccc}
    .nb-table .c-hit::before{content:'조회 ';}
    .nb-badge-notice{height:22px;padding:0 8px;font-size:11px;border-radius:11px}
    .nb-badge-new{height:18px;margin-left:6px;padding:0 6px;font-size:10px;border-radius:9px}
    .nb-table tr:hover td{background:none}
    .nb-empty{padding:48px 0 !important;text-align:center;font-size:14px}

    .nb .pg_wrap{margin-top:32px}
    .nb .pg{gap:4px}
    .nb .pg_page,
    .nb .pg_current{min-width:32px;height:32px;font-size:14px}
}

/* ---------- 글 보기 ---------- */
/* 목록 표는 시안대로 상단(메뉴명·칩)보다 좌우로 조금 넓게 나가지만,
   글 보기는 읽는 화면이라 상단과 왼쪽 끝을 맞춘다. --content 는 상단이 쓰는 폭이다. */
.nb-view{}
.nv-head{padding-bottom:calc(30 * var(--u));border-bottom:1px solid #f2f2f2}
.nv-title{font-size:calc(30 * var(--u));font-weight:700;line-height:1.45;color:#222;
    word-break:keep-all}
.nv-meta{display:flex;flex-wrap:wrap;gap:calc(20 * var(--u));
    margin-top:calc(16 * var(--u));list-style:none;padding:0}
.nv-meta li{position:relative;font-size:calc(15 * var(--u));color:#888}
.nv-meta li + li::before{content:'';position:absolute;left:calc(-10 * var(--u));top:50%;
    width:1px;height:calc(12 * var(--u));margin-top:calc(-6 * var(--u));background:#e2e2e2}

/* 내려받을 첨부 */
.nv-files{margin-top:calc(24 * var(--u));padding:calc(20 * var(--u)) calc(24 * var(--u));
    background:#f9fbfc;border:1px solid rgba(36,36,36,.1);border-radius:calc(12 * var(--u));
    list-style:none}
.nv-files li + li{margin-top:calc(10 * var(--u))}
.nv-files a{display:inline-flex;align-items:baseline;gap:calc(8 * var(--u));
    font-size:calc(16 * var(--u));color:#222}
.nv-files a:hover .nv-file-name{color:#0069b4;text-decoration:underline;
    text-underline-offset:calc(4 * var(--u))}
.nv-file-size{font-size:calc(14 * var(--u));color:#888}

.nv-body{min-height:calc(260 * var(--u));padding:calc(40 * var(--u)) 0;
    font-size:calc(17 * var(--u));line-height:1.8;color:#333;word-break:keep-all}
.nv-body img{max-width:100%;height:auto}

/* 이전 · 다음 글 */
.nv-nav{border-top:1px solid #f2f2f2}
.nv-nav-item{display:flex;align-items:center;gap:calc(24 * var(--u));
    padding:calc(20 * var(--u)) calc(4 * var(--u));
    border-bottom:1px solid #f2f2f2;color:#555}
.nv-nav-item:hover .nv-nav-subject{color:#0069b4}
.nv-nav-label{flex:none;width:calc(70 * var(--u));font-size:calc(15 * var(--u));color:#888}
.nv-nav-subject{font-size:calc(16 * var(--u));color:#333;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---------- 글 보기 위쪽 '목록으로 · 수정 · 삭제' ----------
   알림마당 다섯 게시판과 회원사 현황이 같은 자리에 같은 모양으로 쓴다.
   글을 고치고 지우는 일은 읽기 전에 눈에 들어와야 해서 위쪽에 둔다. */
.nd-top{display:flex;align-items:center;justify-content:space-between;
    margin-bottom:calc(70 * var(--u))}
.nd-back{position:relative;padding-left:calc(16 * var(--u));
    font-size:calc(16 * var(--u));color:#555}
.nd-back::before{content:'';position:absolute;left:0;top:50%;
    width:calc(7 * var(--u));height:calc(7 * var(--u));margin-top:calc(-4 * var(--u));
    border-left:1px solid #555;border-bottom:1px solid #555;transform:rotate(45deg)}
.nd-back:hover{color:#0069b4}
.nd-back:hover::before{border-color:#0069b4}
.nd-admin{display:flex;gap:calc(8 * var(--u))}
.nd-admin a{display:inline-flex;align-items:center;height:calc(36 * var(--u));
    padding:0 calc(14 * var(--u));
    background:#f9fbfc;border:1px solid rgba(36,36,36,.1);border-radius:calc(18 * var(--u));
    font-size:calc(14 * var(--u));color:#555}
.nd-admin a:hover{border-color:#0069b4;color:#0069b4}

.nv-btns{display:flex;justify-content:center;gap:calc(10 * var(--u));
    margin-top:calc(50 * var(--u))}
.nv-btn{display:inline-flex;align-items:center;justify-content:center;
    min-width:calc(120 * var(--u));height:calc(52 * var(--u));padding:0 calc(24 * var(--u));
    background:var(--btn-sub);border:1px solid var(--btn-line);border-radius:calc(26 * var(--u));
    font-size:calc(17 * var(--u));color:var(--btn-text)}
.nv-btn:hover{border-color:var(--btn);color:var(--btn)}
/* 글을 다 읽고 나면 목록으로 돌아가는 것이 다음 할 일이므로 주요 행동으로 둔다 */
.nv-btn.is-list{background:var(--btn);border-color:var(--btn);color:#fff}
.nv-btn.is-list:hover{background:var(--btn-on);border-color:var(--btn-on);color:#fff}

@media (max-width:1024px){
    /* 위 여백은 .nb 가 가진 40px 를 그대로 쓴다 (칩 아래 공통 간격) */
    .nv-head{padding-bottom:16px}
    .nv-title{font-size:20px}
    .nv-meta{gap:14px;margin-top:10px}
    .nv-meta li{font-size:13px}
    .nv-meta li + li::before{left:-7px;height:10px;margin-top:-5px}
    .nv-files{margin-top:16px;padding:14px 16px;border-radius:10px}
    .nv-files a{font-size:14px}
    .nv-file-size{font-size:12px}
    .nv-body{min-height:160px;padding:24px 0;font-size:15px;line-height:1.75}
    .nv-nav-item{gap:12px;padding:14px 2px}
    .nv-nav-label{width:48px;font-size:13px}
    .nv-nav-subject{font-size:14px}
    .nd-top{margin-bottom:24px}
    .nd-back{padding-left:12px;font-size:14px}
    .nd-back::before{width:6px;height:6px;margin-top:-3px}
    .nd-admin a{height:30px;padding:0 10px;font-size:12px;border-radius:15px}
    .nv-btns{margin-top:28px;gap:8px}
    .nv-btn{min-width:88px;height:44px;padding:0 16px;font-size:14px;border-radius:22px}
}

/* ---------- 글쓰기 · 수정 ---------- */
/* 마크업은 그누보드 기본을 그대로 두고 모양만 다른 페이지와 맞춘다.
   (편집기 · 파일 올리기 같은 기능이 마크업에 묶여 있어 함부로 바꾸면 깨진다) */
.nb-write{}
.nb-write form{width:100% !important}

.nb-write .write_div{margin-bottom:calc(28 * var(--u))}
.nw-label{display:block;margin-bottom:calc(10 * var(--u));
    font-size:calc(17 * var(--u));font-weight:700;color:#222}

/* 여러 칸을 한 묶음으로 받는 자리 (행사개요 · 신청 주소 · 발표연사 …).
   fieldset 을 그냥 두면 브라우저가 제 테두리와 제목을 그려 화면이 딴판이 되므로,
   다른 서브페이지의 안내 상자(#f9fbfc)와 같은 모양으로 다시 그린다. */
.nw-group{margin:0 0 calc(28 * var(--u));padding:calc(40 * var(--u));
    background:#f9fbfc;border:1px solid rgba(36,36,36,.1);border-radius:calc(20 * var(--u))}
.nw-group > legend{float:left;width:100%;margin:0 0 calc(24 * var(--u));padding:0;
    font-size:calc(20 * var(--u));font-weight:700;color:#222}
/* legend 를 띄워 놓았으므로 아래 칸들이 그 밑에서 시작하도록 흐름을 끊는다 */
.nw-group > legend + *{clear:both}
/* 주소처럼 '찾아서 넣는' 칸 — 입력칸과 버튼을 한 줄에 */
.nw-addr{display:flex;gap:calc(10 * var(--u))}
.nw-addr .frm_input{flex:1;min-width:0}
.nw-addr-btn{flex:none;height:calc(56 * var(--u));padding:0 calc(20 * var(--u));
    background:#fff;border:1px solid rgba(36,36,36,.2);border-radius:calc(10 * var(--u));
    font-size:calc(16 * var(--u));color:var(--btn-text);cursor:pointer;white-space:nowrap}
.nw-addr-btn:hover{border-color:var(--btn);color:var(--btn)}

/* 묶음 안 마지막 칸은 아래 여백을 두지 않는다 — 상자 안쪽 여백과 겹친다 */
.nw-group .write_div:last-child{margin-bottom:0}

.nb-write .frm_input,
.nb-write input[type="text"],
.nb-write input[type="password"]{width:100%;height:calc(56 * var(--u));
    padding:0 calc(16 * var(--u));
    background:#fff;border:1px solid rgba(36,36,36,.1);border-radius:calc(10 * var(--u));
    font-size:calc(16 * var(--u));color:#222;outline:0}
.nb-write .frm_input::placeholder{color:#b5b8bb}
.nb-write .frm_input:focus{border-color:#2eadf1}
.nb-write .half_input{width:calc(320 * var(--u))}

.nb-write select{height:calc(56 * var(--u));padding:0 calc(40 * var(--u)) 0 calc(16 * var(--u));
    background:#fff no-repeat right calc(16 * var(--u)) center;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23222' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-size:calc(15 * var(--u)) auto;
    border:1px solid rgba(36,36,36,.1);border-radius:calc(10 * var(--u));
    font-size:calc(16 * var(--u));color:#222;cursor:pointer;
    -webkit-appearance:none;appearance:none}

.nb-write textarea{width:100%;min-height:calc(380 * var(--u));
    padding:calc(16 * var(--u));
    background:#fff;border:1px solid rgba(36,36,36,.1);border-radius:calc(10 * var(--u));
    font-size:calc(16 * var(--u));line-height:1.7;color:#222;outline:0;resize:vertical}
.nb-write textarea:focus{border-color:#2eadf1}

/* 공지 · html 같은 선택칸 */
.nb-write .bo_v_option{display:flex;flex-wrap:wrap;gap:calc(20 * var(--u));
    list-style:none;margin:0;padding:0}
.nb-write .bo_v_option label{font-size:calc(16 * var(--u));color:#222;cursor:pointer}

/* 파일 올리기 */
.nb-write input[type="file"]{display:block;width:100%;
    padding:calc(14 * var(--u)) calc(16 * var(--u));
    background:#f9fbfc;border:1px dashed rgba(36,36,36,.2);border-radius:calc(10 * var(--u));
    font-size:calc(15 * var(--u));color:#555;cursor:pointer}
.nb-write .file_del{display:inline-block;margin-top:calc(8 * var(--u));
    font-size:calc(14 * var(--u));color:#888}

/* 아래 버튼 */
.nb-write .btn_confirm{display:flex;justify-content:center;gap:calc(10 * var(--u));
    margin-top:calc(50 * var(--u))}
.nw-btn{display:inline-flex;align-items:center;justify-content:center;
    min-width:calc(140 * var(--u));height:calc(52 * var(--u));padding:0 calc(24 * var(--u));
    background:var(--btn-sub);border:1px solid var(--btn-line);border-radius:calc(26 * var(--u));
    font-size:calc(17 * var(--u));color:var(--btn-text);cursor:pointer}
.nw-btn:hover{border-color:var(--btn);color:var(--btn)}
.nw-btn.is-save{background:var(--btn);border-color:var(--btn);color:#fff}
.nw-btn.is-save:hover{background:var(--btn-on);border-color:var(--btn-on);color:#fff}

@media (max-width:1024px){
    .nb-write{width:100%}
    .nb-write .write_div{margin-bottom:18px}
    .nw-group{margin-bottom:18px;padding:20px;border-radius:14px}
    .nw-group > legend{margin-bottom:14px;font-size:16px}
    .nw-addr{gap:6px}
    .nw-addr-btn{height:46px;padding:0 12px;font-size:13px;border-radius:8px}
    .nw-label{margin-bottom:6px;font-size:14px}
    .nb-write .frm_input,
    .nb-write input[type="text"],
    .nb-write input[type="password"],
    .nb-write select{height:46px;padding:0 14px;font-size:14px;border-radius:8px}
    .nb-write select{padding-right:34px;background-position:right 12px center}
    .nb-write .half_input{width:100%}
    .nb-write textarea{min-height:240px;padding:14px;font-size:14px;border-radius:8px}
    .nb-write input[type="file"]{padding:12px 14px;font-size:13px;border-radius:8px}
    .nb-write .btn_confirm{margin-top:28px;gap:8px}
    .nw-btn{min-width:100px;height:46px;padding:0 16px;font-size:15px;border-radius:23px}
}

/* 임시 저장 — 기본 스킨 CSS 를 안 쓰므로 여기서 모양을 잡는다.
   목록 상자는 눌렀을 때만 열려야 한다(펼치는 일은 스크립트가 한다). */
.nb-write #autosave_pop{display:none;position:absolute;z-index:10;
    width:calc(420 * var(--u));padding:calc(16 * var(--u));
    background:#fff;border:1px solid rgba(36,36,36,.15);border-radius:calc(10 * var(--u));
    box-shadow:0 calc(6 * var(--u)) calc(20 * var(--u)) rgba(0,0,0,.08)}
.nb-write #autosave_wrapper{position:relative}
.nb-write #btn_autosave{margin-top:calc(8 * var(--u));padding:calc(6 * var(--u)) calc(12 * var(--u));
    background:#fff;border:1px solid rgba(36,36,36,.1);border-radius:calc(16 * var(--u));
    font-size:calc(14 * var(--u));color:#888;cursor:pointer}
.nb-write #btn_autosave:hover{border-color:var(--btn);color:var(--btn)}

/* 공지 · html 같은 선택칸 — 네모와 글자 간격만 잡아 준다 */
.nb-write .bo_v_option li{display:flex;align-items:center;gap:calc(6 * var(--u))}
.nb-write .bo_v_option input[type="checkbox"]{width:calc(18 * var(--u));height:calc(18 * var(--u));
    accent-color:#0069b4;cursor:pointer}
.nb-write .bo_v_option label span{display:none}

@media (max-width:1024px){
    .nb-write #autosave_pop{width:100%}
    .nb-write #btn_autosave{font-size:12px}
    .nb-write .bo_v_option input[type="checkbox"]{width:16px;height:16px}
}
.nw-hint{margin-left:calc(6 * var(--u));font-size:calc(14 * var(--u));font-weight:400;color:#999}
/* 글자수 표시 — 제한(maxlength) 있는 짧은 칸에 자동으로 붙는다(js/kaiia-charcount.js) */
.nw-count{display:block;margin-top:calc(6 * var(--u));text-align:right;
    font-size:calc(13 * var(--u));color:#b5b8bb}
.nw-count.is-near{color:#e8890c}
.nw-count.is-full{color:#e02020;font-weight:600}

/* 공용 미리보기 — 텍스트 칸 옆에 '이렇게 나옵니다'(js/kaiia-livepreview.js).
   편집화면마다 제각각이던 미리보기를 한 모양으로 통일한다. */
.kv-pair{display:grid;grid-template-columns:1fr 1fr;gap:calc(16 * var(--u));align-items:stretch}
textarea.kv-input{width:100%;padding:calc(14 * var(--u));border:1px solid rgba(36,36,36,.2);
    border-radius:calc(10 * var(--u));font-family:inherit;font-size:calc(15 * var(--u));
    line-height:calc(26 * var(--u));color:#222;white-space:pre-wrap;resize:vertical;min-height:calc(110 * var(--u))}
textarea.kv-input:focus{border-color:#0069b4;outline:none}
.kv-prev{padding:calc(14 * var(--u));background:#f9fbfc;border:1px dashed rgba(36,36,36,.2);
    border-radius:calc(10 * var(--u));overflow:auto}
.kv-prev-cap{display:block;margin-bottom:calc(10 * var(--u));font-size:calc(13 * var(--u));font-weight:600;color:#999}
.kv-prev-empty{font-size:calc(15 * var(--u));color:#b5b8bb}
.kv-prev-body{font-size:calc(15 * var(--u));line-height:calc(25 * var(--u));color:#333}
.kv-prev-body p{margin:0 0 calc(10 * var(--u))}
.kv-prev-body p:last-child{margin-bottom:0}
.kv-prev-ul{margin:0;padding:0}
.kv-prev-ul li{display:block;list-style:none;position:relative;padding-left:calc(12 * var(--u));
    font-size:calc(15 * var(--u));line-height:calc(25 * var(--u));color:#333}
.kv-prev-ul li::before{content:'·';position:absolute;left:0;color:#999}
@media (max-width:1024px){ .kv-pair{grid-template-columns:1fr;gap:10px} .kv-prev{padding:12px} }
/* 라벨 옆이 아니라 한 줄로 단독으로 쓰인 안내문(<p class="nw-hint">)은
   위아래 여백·행간을 줘서 라벨·표에 딱 붙지 않게 한다(답답함 해소). */
p.nw-hint{margin:calc(8 * var(--u)) 0 calc(16 * var(--u));line-height:1.6}
@media (max-width:1024px){ .nw-hint{font-size:12px} p.nw-hint{margin:6px 0 12px} }

/* ---------- 글 편집기 (theme/kaiia/js/kaiia-editor.js) ----------
   글과 사진을 한 칸에서 쓴다. 아이콘은 선으로 그린 SVG 라 색·굵기를 여기서 정한다. */
.ke{border:1px solid rgba(36,36,36,.1);border-radius:calc(10 * var(--u));
    background:#fff;overflow:hidden}
.ke-source{display:none !important}

/* 도구 줄 */
.ke-bar{display:flex;align-items:center;flex-wrap:wrap;gap:calc(2 * var(--u));
    padding:calc(10 * var(--u)) calc(12 * var(--u));
    border-bottom:1px solid rgba(36,36,36,.08);background:#fff}
.ke-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;
    width:calc(36 * var(--u));height:calc(36 * var(--u));padding:0;
    background:none;border:0;border-radius:calc(8 * var(--u));
    color:#444;cursor:pointer;transition:background .15s, color .15s}
.ke-btn:hover{background:#f2f5f8;color:var(--btn)}
.ke-btn svg{width:calc(20 * var(--u));height:calc(20 * var(--u));display:block}
.ke-sep{width:1px;height:calc(20 * var(--u));margin:0 calc(8 * var(--u));
    background:rgba(36,36,36,.12)}

/* 글 크기 고르는 칸 */
.ke-block{height:calc(36 * var(--u));padding:0 calc(30 * var(--u)) 0 calc(12 * var(--u));
    background:#fff no-repeat right calc(10 * var(--u)) center;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-size:calc(13 * var(--u)) auto;
    border:0;border-radius:calc(8 * var(--u));
    font-size:calc(15 * var(--u));color:#444;cursor:pointer;
    -webkit-appearance:none;appearance:none}
.ke-block:hover{background-color:#f2f5f8}

/* 글자색 */
.ke-color{overflow:hidden}
.ke-color input{position:absolute;left:0;top:0;width:100%;height:100%;
    opacity:0;cursor:pointer;border:0;padding:0}
.ke-color-chip{width:calc(18 * var(--u));height:calc(18 * var(--u));
    border:1px solid rgba(36,36,36,.2);border-radius:calc(5 * var(--u));background:#222}

/* 글 쓰는 칸 */
.ke-area{min-height:calc(420 * var(--u));padding:calc(28 * var(--u)) calc(30 * var(--u));
    font-size:calc(17 * var(--u));line-height:1.8;color:#222;outline:0;overflow-wrap:anywhere}
.ke-area.is-drop{background:#f1f8ff}
.ke-area p{margin:0 0 calc(6 * var(--u))}
.ke-area h3{margin:calc(24 * var(--u)) 0 calc(10 * var(--u));
    font-size:calc(24 * var(--u));font-weight:700;line-height:1.45}
.ke-area h4{margin:calc(20 * var(--u)) 0 calc(8 * var(--u));
    font-size:calc(19 * var(--u));font-weight:700;line-height:1.5}
.ke-area img{max-width:100%;height:auto;border-radius:calc(8 * var(--u))}
.ke-area blockquote{margin:calc(16 * var(--u)) 0;padding:calc(4 * var(--u)) 0 calc(4 * var(--u)) calc(20 * var(--u));
    border-left:calc(3 * var(--u)) solid #2eadf1;color:#555}
.ke-area ul{margin:calc(10 * var(--u)) 0;padding-left:calc(22 * var(--u));list-style:disc}
.ke-area hr{margin:calc(24 * var(--u)) 0;border:0;border-top:1px solid rgba(36,36,36,.12)}
.ke-area a{color:#0069b4;text-decoration:underline;text-underline-offset:calc(3 * var(--u))}

.ke-hint{margin-top:calc(10 * var(--u));font-size:calc(14 * var(--u));color:#999}

@media (max-width:1024px){
    .ke{border-radius:8px}
    .ke-bar{gap:0;padding:6px}
    .ke-btn{width:32px;height:32px;border-radius:6px}
    .ke-btn svg{width:17px;height:17px}
    .ke-sep{height:16px;margin:0 4px}
    .ke-block{height:32px;padding:0 24px 0 8px;font-size:13px;background-size:11px auto}
    .ke-color-chip{width:15px;height:15px}
    .ke-area{min-height:260px;padding:16px;font-size:15px;line-height:1.75}
    .ke-area h3{font-size:19px}
    .ke-area h4{font-size:16px}
    .ke-hint{margin-top:8px;font-size:12px}
}

/* 글 보기에서도 편집기에서 쓴 모양 그대로 나오게 */
.nv-body h3{margin:calc(28 * var(--u)) 0 calc(10 * var(--u));font-size:calc(24 * var(--u));font-weight:700}
.nv-body h4{margin:calc(22 * var(--u)) 0 calc(8 * var(--u));font-size:calc(19 * var(--u));font-weight:700}
.nv-body blockquote{margin:calc(18 * var(--u)) 0;padding:calc(4 * var(--u)) 0 calc(4 * var(--u)) calc(20 * var(--u));
    border-left:calc(3 * var(--u)) solid #2eadf1;color:#555}
.nv-body ul{margin:calc(10 * var(--u)) 0;padding-left:calc(22 * var(--u));list-style:disc}
.nv-body hr{margin:calc(28 * var(--u)) 0;border:0;border-top:1px solid rgba(36,36,36,.12)}
.nv-body a{color:#0069b4;text-decoration:underline}
.nv-body img{border-radius:calc(8 * var(--u))}
@media (max-width:1024px){
    .nv-body h3{font-size:18px}
    .nv-body h4{font-size:16px}
}

/* 편집기 안에서 보는 사례 상자 — 실제 화면과 같은 모양으로 */
.ke-area .ke-case{margin:calc(18 * var(--u)) 0;padding:calc(24 * var(--u)) calc(26 * var(--u));
    background:#f6f7f9;border-radius:calc(14 * var(--u))}
.ke-area .ke-case > p{margin:0 0 calc(8 * var(--u))}
.ke-area .ke-case strong{display:block;font-size:calc(18 * var(--u));font-weight:700;color:#111}
@media (max-width:1024px){
    .ke-area .ke-case{padding:14px;border-radius:10px}
    .ke-area .ke-case strong{font-size:15px}
}

/* 공지로 올리기 — 하나뿐인 선택칸이라 줄로 세운다 */
.nb-write .nw-check{display:flex;align-items:center;gap:calc(8 * var(--u))}
.nb-write .nw-check input[type="checkbox"]{width:calc(18 * var(--u));height:calc(18 * var(--u));
    accent-color:#0069b4;cursor:pointer}
.nb-write .nw-check label{font-size:calc(16 * var(--u));color:#222;cursor:pointer}

/* 지금 올려 둔 그림 — 무엇이 걸려 있는지 눈으로 보이게 */
.nw-file-now{display:flex;align-items:center;gap:calc(14 * var(--u));
    margin-top:calc(12 * var(--u));padding:calc(12 * var(--u));
    background:#f9fbfc;border:1px solid rgba(36,36,36,.1);border-radius:calc(10 * var(--u))}
.nw-file-now img{width:calc(120 * var(--u));height:calc(68 * var(--u));object-fit:cover;
    border-radius:calc(6 * var(--u));background:#fff}
.nw-file-now .nw-file-name{flex:1;font-size:calc(15 * var(--u));color:#555;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nw-file-del{display:flex;align-items:center;gap:calc(6 * var(--u));flex:none}
.nw-file-del input{width:calc(16 * var(--u));height:calc(16 * var(--u));accent-color:#e02020;cursor:pointer}
.nw-file-del label{font-size:calc(14 * var(--u));color:#888;cursor:pointer}

@media (max-width:1024px){
    .nb-write .nw-check input[type="checkbox"]{width:16px;height:16px}
    .nb-write .nw-check label{font-size:14px}
    .nw-file-now{gap:10px;margin-top:8px;padding:10px;border-radius:8px}
    .nw-file-now img{width:80px;height:46px}
    .nw-file-now .nw-file-name{font-size:12px}
    .nw-file-del label{font-size:12px}
}

/* ---------- 답변글 ---------- */
/* 문의사항에서 관리자가 단 답변은 원글 아래에 들여써 붙는다 */
.nb-reply{display:inline-block;width:calc(18 * var(--u));height:calc(10 * var(--u));
    margin-right:calc(8 * var(--u));
    border-left:1px solid #ccc;border-bottom:1px solid #ccc;vertical-align:middle}
.nb-badge-reply{display:inline-flex;align-items:center;justify-content:center;
    height:calc(24 * var(--u));margin-right:calc(8 * var(--u));padding:0 calc(10 * var(--u));
    background:rgba(0,105,180,.08);border-radius:calc(12 * var(--u));
    font-size:calc(13 * var(--u));font-weight:500;color:#0069b4;vertical-align:middle}
/* 답변 단추는 곁들이는 자리가 아니라 담당자가 할 일이라 색을 준다 */
.nd-admin a.is-reply{background:#0069b4;border-color:#0069b4;color:#fff}
.nd-admin a.is-reply:hover{background:#005694;border-color:#005694;color:#fff}

@media (max-width:1024px){
    .nb-reply{width:12px;height:8px;margin-right:5px}
    .nb-badge-reply{height:20px;margin-right:5px;padding:0 7px;font-size:11px;border-radius:10px}
}

/* 답변글 자리의 번호 칸 — 번호 대신 점 하나만 옅게 */
.nb-no-reply{color:#ccc}

/* ---------- 첨부 ---------- */
/* 그누보드는 칸 하나에 파일 하나로 저장하지만, 화면에는 고르는 자리 하나만 둔다.
   나머지 칸은 감춰 두고 스크립트가 파일을 나눠 담는다(write.skin.php). */
.nw-file-slot.is-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.nw-file-slot + .nw-file-slot{margin-top:calc(12 * var(--u))}

/* 고른 파일 목록 */
.nw-file-picked{margin-top:calc(12 * var(--u));list-style:none}
.nw-file-picked:empty{margin:0}
.nw-file-picked li{display:flex;align-items:center;justify-content:space-between;gap:calc(14 * var(--u));
    padding:calc(12 * var(--u)) calc(16 * var(--u));
    background:#fff;border:1px solid rgba(36,36,36,.1);border-radius:calc(10 * var(--u))}
.nw-file-picked li + li{margin-top:calc(8 * var(--u))}
.nw-file-picked .nw-file-name{font-size:calc(16 * var(--u));color:#222;word-break:break-all}
.nw-file-x{flex:none;height:calc(30 * var(--u));padding:0 calc(12 * var(--u));
    background:#f9fbfc;border:1px solid rgba(36,36,36,.15);border-radius:calc(15 * var(--u));
    font-size:calc(14 * var(--u));color:#555;cursor:pointer}
.nw-file-x:hover{border-color:#e02020;color:#e02020}

@media (max-width:1024px){
    .nw-file-slot + .nw-file-slot{margin-top:8px}
    .nw-file-picked{margin-top:8px}
    .nw-file-picked li{padding:10px 12px;border-radius:8px}
    .nw-file-picked .nw-file-name{font-size:14px}
    .nw-file-x{height:26px;padding:0 10px;font-size:12px;border-radius:13px}
}