@charset "utf-8";

/* 검색·상단·카드·글쓰기 규칙을 그대로 가져온다.
   kaiia_news 가 kaiia_board 를 다시 불러오므로 이 한 줄이면 둘 다 딸려 온다. */
@import url("../kaiia_news/style.css");

/* KAIIA 행사등록접수 — 시안(Figma 405:10020)
 *
 * 목록은 알림마당 카드와 같은 규격(436 × 380)이라 위에서 가져온 것을 그대로 쓴다.
 * 여기서는 '행사 상세'만 새로 짠다 — 접었다 펴는 다섯 덩어리로 되어 있다.
 *
 * 길이는 var(--u)(시안 1920 기준 1px). 1024 이하에서는 --u 가 1px 이 되어
 * 아래 좁은 화면 규칙의 숫자가 그대로 픽셀이 된다.
 */

/* ---------- 상세 위쪽 — 목록으로 · 사전등록 · 접수조회 ---------- */
.ev-top{display:flex;align-items:center;gap:calc(20 * var(--u));
    margin-bottom:calc(70 * var(--u))}
/* '목록으로'만 왼쪽에 두고 나머지(신청 버튼 · 관리자 버튼)는 오른쪽으로 몰아 둔다 */
.ev-top .nd-back{margin-right:auto}
/* 시안의 두 버튼은 흰 바탕에 얇은 검정 테두리다. 사전등록에만 ↗ 를 붙인다 */
.ev-apply{display:flex;gap:calc(14 * var(--u))}
.ev-apply a{display:inline-flex;align-items:center;gap:calc(10 * var(--u));
    height:calc(47 * var(--u));padding:0 calc(24 * var(--u));
    background:#fff;border:1px solid #222;border-radius:calc(24 * var(--u));
    font-size:calc(17 * var(--u));font-weight:500;color:#222;white-space:nowrap}
.ev-apply a:hover{border-color:#0069b4;color:#0069b4}
/* ↗ — 선 세 개로 그린다 (가로·세로 막대와 대각선) */
.ev-apply .is-main::after{content:'';position:relative;flex:none;
    width:calc(14 * var(--u));height:calc(14 * var(--u));
    background:
        linear-gradient(to bottom right, transparent calc(50% - 0.9px),
            currentColor calc(50% - 0.9px), currentColor calc(50% + 0.9px),
            transparent calc(50% + 0.9px)) no-repeat,
        linear-gradient(currentColor, currentColor) no-repeat,
        linear-gradient(currentColor, currentColor) no-repeat;
    background-size:100% 100%, 100% 1.8px, 1.8px 100%;
    background-position:0 0, right top, right top}

/* ---------- 접었다 펴는 덩어리 ---------- */
.ev-sec{border-top:1px solid rgba(36,36,36,.13)}
.ev-sec:last-of-type{border-bottom:1px solid rgba(36,36,36,.13)}
/* 첫 덩어리(행사개요)는 위 선을 두지 않는다 — 칩 아래 여백과 겹쳐 보인다 */
.ev-sec:first-of-type{border-top:0}

/* 제목 줄 전체가 누르는 자리다 */
.ev-sec-head{display:flex;align-items:center;justify-content:space-between;
    width:100%;padding:calc(24 * var(--u)) 0;
    background:none;border:0;text-align:left;cursor:pointer}
.ev-sec-title{font-size:calc(32 * var(--u));font-weight:700;line-height:1.4;color:#111}
/* + 와 − 는 선 두 개로 그린다 (글꼴에 따라 모양이 달라지지 않게) */
.ev-sec-mark{position:relative;flex:none;width:calc(28 * var(--u));height:calc(28 * var(--u))}
.ev-sec-mark::before,
.ev-sec-mark::after{content:'';position:absolute;left:50%;top:50%;
    width:calc(24 * var(--u));height:1.5px;margin:-0.75px 0 0 calc(-12 * var(--u));
    background:#555;transition:transform .25s ease}
.ev-sec-mark::after{transform:rotate(90deg)}
/* 펴진 덩어리는 세로 막대를 지워 − 로 만든다 */
.ev-sec.is-open .ev-sec-mark::after{transform:rotate(90deg) scaleX(0)}

.ev-sec-body{padding:0 0 calc(60 * var(--u))}
.ev-sec:not(.is-open) .ev-sec-body{display:none}

/* ---------- 행사개요 ---------- */
.ev-banner{margin:0 0 calc(60 * var(--u))}
.ev-banner img{display:block;width:100%;height:auto;border-radius:calc(10 * var(--u))}

/* 행사명 · 주최 · 후원 … 항목 */
.ev-facts{display:block}
.ev-fact + .ev-fact{margin-top:calc(50 * var(--u))}
.ev-fact-key{position:relative;padding-left:calc(14 * var(--u));
    font-size:calc(24 * var(--u));font-weight:700;line-height:1.4;color:#111}
/* 시안의 'l' 은 글자가 아니라 제목 앞에 세운 짧은 막대다 (글자와 같은 검정) */
.ev-fact-key::before{content:'';position:absolute;left:0;top:calc(5 * var(--u));
    width:calc(2 * var(--u));height:calc(22 * var(--u));background:#111}
.ev-fact-val{margin-top:calc(16 * var(--u));
    font-size:calc(18 * var(--u));line-height:calc(30 * var(--u));color:#555;
    word-break:keep-all;white-space:pre-line}

/* ---------- 덩어리 안의 자유 내용 (참석신청 · 프로그램 · 오시는 길) ---------- */
/* 글 모양(작은 제목 · 인용 · 목록…)은 다른 게시판의 본문 규칙(.nv-body)을 그대로 쓰되,
   글 게시판용으로 잡아 둔 최소 높이와 위아래 여백은 지운다 —
   덩어리 안에서는 짧은 글 아래로 빈 자리가 크게 남는다 */
.ev-rich.nv-body{min-height:0;padding:0}
.ev-rich{font-size:calc(18 * var(--u));line-height:calc(32 * var(--u));color:#333;
    word-break:keep-all}
.ev-rich img{max-width:100%;height:auto}
.ev-rich table{width:100%;border-collapse:collapse}
.ev-rich th,
.ev-rich td{padding:calc(12 * var(--u));border:1px solid rgba(36,36,36,.13)}

/* ---------- 발표연사 ---------- */
/* 사진과 이름·약력이 좌우로 놓인다 */
.ev-speaker{display:flex;gap:calc(47 * var(--u))}
.ev-speaker-photo{flex:none;width:calc(316 * var(--u))}
.ev-speaker-photo img{display:block;width:100%;height:auto}
.ev-speaker-info{flex:1;min-width:0}
/* 이름을 크게 앞에 두고 직함은 그 뒤에 작게 붙인다 */
.ev-speaker-name{display:flex;align-items:baseline;gap:calc(14 * var(--u));flex-wrap:wrap}
.ev-speaker-role{font-size:calc(18 * var(--u));color:#555}
.ev-speaker-who{font-size:calc(48 * var(--u));font-weight:700;line-height:1.2;color:#111}
.ev-speaker-career{margin-top:calc(24 * var(--u));
    font-size:calc(17 * var(--u));line-height:calc(28 * var(--u));color:#555;
    white-space:pre-line}
.ev-speaker-word{margin-top:calc(60 * var(--u))}

/* ---------- 오시는 길 ---------- */
/* 지도는 행사개요의 '장소'를 그대로 찾는다 (협회 오시는 길 페이지와 같은 방식) */
.ev-map{position:relative;height:calc(460 * var(--u));
    border:1px solid rgba(36,36,36,.13);border-radius:calc(10 * var(--u));overflow:hidden}
.ev-map iframe{width:100%;height:100%;border:0;display:block}
.ev-map-foot{display:flex;align-items:center;justify-content:space-between;gap:calc(20 * var(--u));
    margin-top:calc(20 * var(--u))}
.ev-map-place{font-size:calc(18 * var(--u));line-height:1.5;color:#333;word-break:keep-all}
.ev-map-go{flex:none;display:inline-flex;align-items:center;
    height:calc(47 * var(--u));padding:0 calc(24 * var(--u));
    background:#fff;border:1px solid #222;border-radius:calc(24 * var(--u));
    font-size:calc(17 * var(--u));color:#222}
.ev-map-go:hover{border-color:#0069b4;color:#0069b4}
/* 지도 아래 덧붙이는 안내(주차 · 대중교통) */
.ev-map-note{margin-top:calc(30 * var(--u))}

/* ---------- 좁은 화면 ---------- */
@media (max-width:1024px){
    /* 좁은 화면 — '목록으로'가 한 줄, 그 아래 단추들이 한 줄에 나란히 선다.
       접수하기를 가로로 꽉 채우면 곁들이는 관리자 단추와 견주어 너무 크다. */
    /* 알림마당 상세(.nd-top)와 같이 '목록으로'와 단추들이 한 줄에 선다.
       단추가 많아 한 줄에 못 담기면 그때만 다음 줄로 내려간다. */
    .ev-top{flex-wrap:wrap;gap:10px;margin-bottom:24px}
    .ev-apply{gap:8px}
    .ev-apply a{height:38px;padding:0 18px;gap:7px;font-size:14px;border-radius:19px}
    .ev-apply .is-main::after{width:12px;height:12px}
    /* 관리자 단추는 다음 줄 오른쪽에 붙인다.
       넷을 한 줄에 넣으면 자리가 모자라 글자가 눌린다(필요 357px / 자리 330px).
       관리자가 아닌 분에게는 '목록으로 ··· 접수하기' 한 줄만 보여, 알림마당 상세와 같다. */
    .ev-top .nd-admin{width:100%;justify-content:flex-end;gap:6px}
    .ev-top .nd-admin a{height:34px;padding:0 12px;font-size:13px;border-radius:17px}
    .ev-admin-long{display:none}

    .ev-sec-head{padding:16px 0}
    .ev-sec-title{font-size:18px}
    .ev-sec-mark{width:22px;height:22px}
    .ev-sec-mark::before,
    .ev-sec-mark::after{width:18px;margin-left:-9px;height:2px;margin-top:-1px}
    .ev-sec-body{padding:0 0 28px}

    .ev-banner{margin-bottom:24px}
    .ev-banner img{border-radius:8px}

    .ev-fact + .ev-fact{margin-top:24px}
    .ev-fact-key{padding-left:10px;font-size:16px}
    .ev-fact-key::before{top:4px;width:2px;height:14px}
    .ev-fact-val{margin-top:8px;font-size:15px;line-height:1.7}

    .ev-rich{font-size:15px;line-height:1.8}

    .ev-map{height:260px;border-radius:8px}
    .ev-map-foot{display:block;margin-top:14px}
    .ev-map-place{display:block;font-size:14px}
    .ev-map-go{justify-content:center;width:100%;height:44px;margin-top:10px;
        font-size:14px;border-radius:22px}
    .ev-map-note{margin-top:20px}

    /* 좁은 화면에서는 사진을 위로 올리고 글을 아래로 내린다 */
    .ev-speaker{display:block}
    .ev-speaker-photo{width:60%;max-width:220px;margin-bottom:16px}
    .ev-speaker-role{font-size:14px}
    .ev-speaker-who{font-size:26px}
    .ev-speaker-career{margin-top:14px;font-size:14px;line-height:1.7}
    .ev-speaker-word{margin-top:28px}
}

/* ---------- 목록 카드 ---------- */
/* 소식 카드와 규격은 같지만 담기는 내용이 다르다.
   위에는 행사명이 크게, 아래에는 장소와 일시가 놓인다. */
.ev .nw-thumb-text{width:calc(340 * var(--u));font-size:calc(21 * var(--u))}
/* 아래 한 줄(장소)은 제목이 아니라 곁들이는 정보라 굵기를 낮춘다 */
.ev .nw-subject{font-size:calc(17 * var(--u));font-weight:500;color:#555}
@media (max-width:1024px){
    .ev .nw-thumb-text{width:calc(100% - 28px);font-size:13px}
    .ev .nw-subject{font-size:12px}
}

/* 확인해야 할 신청 건수 — '신청자 명단' 단추에 붙는 작은 표시 */
.nb-admin-dot{display:inline-flex;align-items:center;justify-content:center;
    min-width:calc(20 * var(--u));height:calc(20 * var(--u));
    margin-left:calc(6 * var(--u));padding:0 calc(6 * var(--u));
    background:#e02020;border-radius:calc(10 * var(--u));
    font-size:calc(12 * var(--u));font-weight:700;color:#fff}
@media (max-width:1024px){
    .nb-admin-dot{min-width:16px;height:16px;margin-left:4px;padding:0 5px;
        font-size:10px;border-radius:8px}
}