/* =============================================================================
   추가된 요소만 여기에 둔다.
   원본 CSS (common.css / global.css / respond.css / newstyle.css) 는 건드리지 않는다.
   그래야 "무엇이 새로 생긴 것인지" 한눈에 구분되고, 원본을 되돌리기도 쉽다.
   ============================================================================= */

/* ---- 게시판 검색 (레거시에는 화면에 검색창이 없었다) ---- */
.__board-search {
    display: flex;
    gap: 6px;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    margin: 18px 0 4px;
}

.__board-search select,
.__board-search input[type="search"] {
    height: 38px;
    padding: 0 10px;
    border: 1px solid #d5d5d5;
    background: #fff;
    font-size: 14px;
    color: #333;
    border-radius: 2px;
    box-sizing: border-box;
}

.__board-search input[type="search"] {
    width: 240px;
    max-width: 60vw;
}

.__board-search select:focus,
.__board-search input[type="search"]:focus,
.__board-search button:focus,
.__board-search a:focus {
    outline: 2px solid #1f6fb2;
    outline-offset: 1px;
}

.__board-search button {
    height: 38px;
    padding: 0 20px;
    border: 0;
    background: #37549b;
    color: #fff;
    font-size: 14px;
    cursor: pointer;
    border-radius: 2px;
}

.__board-search button:hover {
    background: #2b4280;
}

.__board-search .reset {
    height: 38px;
    line-height: 36px;
    padding: 0 14px;
    border: 1px solid #d5d5d5;
    color: #555;
    font-size: 14px;
    border-radius: 2px;
}

/* ---- 목록이 비었을 때 ---- */
.__tbl-list td.empty,
.__webzine-list .empty {
    padding: 50px 0;
    text-align: center;
    color: #888;
}

/* ---- 첨부 파일 크기 ---- */
.__board-view .info .size {
    color: #888;
    font-size: 12px;
}

/* ---- 사진 목록 썸네일이 로딩 중 레이아웃을 흔들지 않게 ---- */
.__webzine-list .box .img img {
    max-width: 100%;
    height: auto;
}

/* ---- 화면에는 보이지 않고 스크린리더만 읽는 라벨 ---- */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ---- 이전글/다음글 버튼.
        원본 HTML 에도 있었지만 style="display:none;" 으로 숨겨져 있었다.
        CSS 클래스(__btn1 prev / next)는 원본에 이미 정의돼 있어 모양은 그대로다. ---- */
.__board-view + .__botarea .rig {
    display: block;
}

@media (max-width: 640px) {
    .__board-search input[type="search"] {
        width: 100%;
    }
    .__board-search {
        gap: 4px;
    }
}

/* =============================================================================
   재정보고 도넛 차트 레이아웃.
   원본 finance.jsp 안의 인라인 <style> 을 그대로 옮겼다. 값은 바꾸지 않았다.
   인라인 스타일을 없애면 앞으로 CSP(콘텐츠 보안 정책)를 적용할 수 있다.
   ============================================================================= */
.donut-wrap {
    margin: 0 auto;
    text-align: center;
}

.donut-wrap svg {
    max-width: 100%;
}

.__jaejung.fin .wrap .area {
    display: flex;
    align-items: center;
}

.__jaejung.fin .wrap .area > div {
    box-sizing: border-box;
}

.__jaejung.fin .wrap .area .img {
    float: none;
    width: 60%;
    padding-right: 0;
    flex-shrink: 0;
}

.__jaejung.fin .wrap .area .info {
    width: 40%;
}

@media (max-width: 768px) {
    .__jaejung.fin .wrap .area {
        flex-direction: column;
    }
    .__jaejung.fin .wrap .area .img,
    .__jaejung.fin .wrap .area .info {
        width: 100%;
    }
}

/* =============================================================================
   폰트 - 외부 CDN 의존 제거

   문제: common.css 가 사이트 전체 기본 글꼴을 이렇게 정하고 있었다.

       body { font-family: 'paybooc-Medium'; }

       @font-face {
           font-family: 'paybooc-Medium';
           src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/.../paybooc-Medium.woff');
       }

   즉 사이트 전체 글꼴이 외부 CDN 한 곳에 달려 있고, 대체 글꼴 지정이 없었다.
   그 CDN 이 막히거나 느리면 (사내망·학교망에서 흔하다) 사이트 전체가
   브라우저 기본 글꼴로 떨어진다.

   해결: 같은 이름의 @font-face 를 나중에 다시 선언해 로컬 파일을 먼저 쓰게 한다.
   (added.css 가 common.css 뒤에 로드되므로 이쪽이 이긴다)
   paybooc OTF 원본이 백업의 www/font 에 있어서 자체 호스팅이 가능했다.
   CDN 은 두 번째 후보로 남겨 두어, 로컬 파일에 문제가 생겨도 동작하게 한다.
   ============================================================================= */
@font-face {
    font-family: 'paybooc-Bold';
    src: url('/font/payboocOTFBold.otf') format('opentype'),
         url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_20-07@1.0/paybooc-Bold.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'paybooc-Medium';
    src: url('/font/payboocOTFMedium.otf') format('opentype'),
         url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_20-07@1.0/paybooc-Medium.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'paybooc-Light';
    src: url('/font/payboocOTFLight.otf') format('opentype'),
         url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_20-07@1.0/paybooc-Light.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/*
   한글 대체 글꼴 스택.

   paybooc OTF 는 600KB 대라 한글 글리프가 완전하지 않을 수 있다.
   글꼴에 없는 글자는 브라우저가 다음 후보로 넘어가므로,
   확실히 한글이 있는 Spoqa Han Sans(로컬)와 운영체제 기본 한글 글꼴을 뒤에 둔다.
   원본에는 대체 지정이 아예 없어서, 글꼴 하나가 실패하면 그대로 무너졌다.
*/
body,
body * {
    font-family: 'paybooc-Medium', 'Spoqa Han Sans',
                 -apple-system, BlinkMacSystemFont,
                 'Apple SD Gothic Neo', 'Malgun Gothic', '맑은 고딕',
                 'Noto Sans KR', 'Nanum Gothic', sans-serif;
}

/* 아이콘 글꼴은 대체 스택을 적용하면 안 된다 (글자가 아니라 도형이다) */
[class^="axi-"], [class*=" axi-"],
[class^="xi-"], [class*=" xi-"],
.axi, .xi {
    font-family: inherit;
}

[class^="axi-"]:before, [class*=" axi-"]:before {
    font-family: 'axicon' !important;
}

/* =============================================================================
   좁은 화면 (320px 까지)

   레거시 CSS 는 768px 이하에서 목록 표를 카드형으로 바꾸고(thead 숨김,
   제목을 전체 폭으로, 번호·파일 열 숨김) 320px 에서도 잘 동작한다.
   여기서는 이번에 추가한 요소만 좁은 화면에 맞춘다.
   ============================================================================= */
@media (max-width: 420px) {
    .__board-search {
        gap: 6px;
    }
    .__board-search select {
        width: 32%;
        min-width: 0;
        padding: 0 4px;
        font-size: 13px;
    }
    .__board-search input[type="search"] {
        width: calc(68% - 6px);
        max-width: none;
        min-width: 0;
        font-size: 13px;
    }
    .__board-search button,
    .__board-search .reset {
        flex: 1 1 auto;
        padding: 0 10px;
        font-size: 13px;
        text-align: center;
    }
}

/*
   어떤 화면에서도 가로 스크롤이 생기지 않게 하는 안전장치.

   body 에 overflow-x:hidden 을 두면 안 된다.
   그러면 body 가 "스크롤되는 상자" 로 취급되는데 실제로는 스크롤되지 않아서,
   그 안의 position:sticky 가 하나도 붙지 않는다.
   연혁 사진이 따라오지 않고 위로 그냥 지나가 버린 원인이 이것이었다.
   (재어 보니 붙어야 할 자리가 30px 인데 -123px 로 지나갔다.)

   clip 은 잘라 내기만 하고 스크롤 상자로 치지 않으므로 sticky 가 살아난다.
   clip 을 모르는 옛 브라우저는 앞줄 hidden 을 쓴다.
*/
html, body {
    max-width: 100%;
    overflow-x: hidden;
    overflow-x: clip;
}

img, video, iframe, table {
    max-width: 100%;
}

/*
   게시글 본문은 워드에서 붙여넣은 HTML 이다. 실제 데이터를 세어 보면
     style="width:NNNpx"  78건   (가장 넓은 것 848px)
     width="NNN" 속성     38건
     <table>              12건
     <iframe> (유튜브)    34건
   320px 화면에서 이것들이 가로 스크롤을 만든다.

   본문 데이터는 절대 고치지 않는다. 화면에서만 눌러 준다.
   [style*="width"] 는 인라인 스타일에 width 가 들어 있는 요소를 그대로 겨냥한다.
*/
.__board-view .con img,
.__board-view .con table,
.__board-view .con [style*="width"],
.__board-view .con [width] {
    max-width: 100% !important;
}

.__board-view .con img,
.__board-view .con [width] {
    height: auto !important;
}

/*
   유튜브 iframe 은 height:auto 를 주면 높이가 0 이 되어 사라진다.
   폭을 채우고 16:9 비율을 유지시킨다.
*/
.__board-view .con iframe {
    max-width: 100% !important;
    width: 100% !important;
    aspect-ratio: 16 / 9;
    height: auto !important;
    border: 0;
}

/*
   표는 좁은 화면에서 줄바꿈만으로 감당이 안 되는 경우가 있다.
   페이지 전체가 아니라 본문 블록 안에서만 좌우로 밀리게 한다.
*/
.__board-view .con {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* 긴 URL 이나 붙여쓴 문자열이 화면을 밀어내지 않게 */
.__board-view .con,
.__tbl-list td.subject a,
.__webzine-list .box .info .sum {
    word-break: break-word;
    overflow-wrap: anywhere;
}


/* ============================================================
   메인 - 영상 위젯
   ------------------------------------------------------------
   레거시는 이 자리에 iframe 을 넣고 그 안의 별도 문서에서
   스타일을 갖고 있었다.

       <iframe src="/main/test.php" width="100%" height="364">
       ... 안쪽 문서 ...
       .ratio{position:relative;width:100%;height:364px;
              background:#000 center/cover no-repeat}

   iframe 을 없애고 메인 화면에 직접 넣었으므로 그 스타일을 여기로 옮긴다.
   높이는 364px 고정이 아니라 옆 카드(.activity .area .img = 350px)에
   맞추고, 좁은 화면에서는 16:9 로 줄어들게 한다.
   iframe 고정 높이 364px 는 320px 폭에서 영상 위아래로 검은 띠를 만들었다.
   ============================================================ */
.video-widget {
    width: 100%;
}

/*
   미리보기 그림도 잘리고 있었다. 높이가 350px 로 고정인데 폭은 화면에 따라
   달라지므로 상자 비율이 계속 변했고, object-fit:cover 가 그때마다
   다른 부분을 잘라냈다. 옆의 활동소식 카드와 같은 16:9 로 맞춘다.
   지금 올라와 있는 그림이 1920x1080(=1.78)이라 딱 들어맞는다.
*/
.video-widget-cover {
    display: block;
    position: relative;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    padding: 0;
    margin: 0;
    border: 0;
    background: #000;
    cursor: pointer;
    overflow: hidden;
}

/*
   등록된 영상이 없을 때.

   전에는 <div> 에 cursor:default 였다. 그러면 회색 네모 하나가 아무 글자 없이
   남는다. 메인 노출을 전부 끈 화면에서 옆의 활동소식 자리와 나란히 두 칸이
   말없이 비어 있었다 (발주자: "메인노출 다 뺐는데 안 나오는 게 있는데?").
   이제 영상 목록으로 가는 <a> 라 손가락 모양이 맞다.
*/
.video-widget-cover--static {
    cursor: pointer;
}

/* 흐린 채움. 그림이 16:9 가 아닐 때만 보인다. */
.video-widget-thumb-fill {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: blur(18px);
    transform: scale(1.15);
}

.video-widget-thumb {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* 재생 삼각형. 레거시는 글자 '▶' 였는데 글꼴에 따라 모양이 달라진다. */
.video-widget-play {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 72px;
    height: 72px;
    margin: -36px 0 0 -36px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.5);
    transition: background 0.2s ease-in-out;
}

.video-widget-play::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -12px 0 0 -8px;
    border-style: solid;
    border-width: 12px 0 12px 20px;
    border-color: transparent transparent transparent #fff;
}

.video-widget-cover:hover .video-widget-play,
.video-widget-cover:focus-visible .video-widget-play {
    background: rgba(0, 0, 0, 0.75);
}

/*
   제목 띠. 옆 활동소식 카드(.activity_tit)와 같은 모양으로 맞춘다.
   레거시 위젯에는 제목이 없었다 - iframe 안이라 넣을 자리가 없었다.
*/
.video-widget-label {
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 20px 15px;
    background-color: rgba(0, 0, 0, 0.6);
    color: #fff;
    font-size: 18px;
    text-align: left;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    word-break: break-all;
}

/* 재생 후 들어가는 iframe */
/*
   재생을 눌렀을 때 들어오는 요소(<video> 또는 <iframe>).

   썸네일(.video-widget-cover)과 **같은 크기**여야 한다.
   전에는 여기만 height:350px 로 고정이었다. 썸네일은 aspect-ratio:16/9 라
   상자 폭에 따라 높이가 정해지는데(1440px 화면에서 450px 남짓),
   재생 단추를 누르는 순간 350px 로 줄어들어 화면이 툭 튀었다.
   발주자가 "재생버튼을 누르면 높이가 작아지고 재생된다.
   썸네일 크기 그대로 재생돼야 한다" 고 한 것이 이것이다.

   350px 은 레거시 <video height> 에서 온 값인데, 그때는 썸네일이 없어서
   비교할 상대가 없었다. 이제는 썸네일이 기준이다.
*/
.video-widget-frame {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    border: 0;
    /* 영상 비율이 16:9 가 아니어도 잘리지 않게 (위아래에 검은 띠가 남는다) */
    background: #000;
    object-fit: contain;
}

@media all and (max-width: 640px) {

    .video-widget-label {
        font-size: 15px;
    }

    /*
       전에는 여기서만 16:9 로 되돌렸다. 넓은 화면에서는 .video-widget-frame 이
       350px 고정이라 재생하는 순간 높이가 줄었기 때문이다.
       이제 기본값 자체가 16:9 라 이 되돌림이 필요 없다.
       (규칙을 지우면 "왜 좁은 화면만 따로 없지" 를 다시 헤매게 되므로 설명만 남긴다)
    */

    .video-widget-play {
        width: 56px;
        height: 56px;
        margin: -28px 0 0 -28px;
    }

    .video-widget-play::before {
        margin: -10px 0 0 -6px;
        border-width: 10px 0 10px 16px;
    }
}

/* ============================================================
   오류 화면 (404 / 5xx)
   레거시에는 방문자용 오류 화면이 사실상 없어서
   톰캣의 영문 오류 페이지가 그대로 나갔다.
   ============================================================ */
.__error-page {
    padding: 60px 20px 80px;
    text-align: center;
}

.__error-page .code {
    font-size: 90px;
    font-weight: 700;
    line-height: 1.1;
    color: #024287;
    margin: 0 0 20px;
}

.__error-page .desc {
    font-size: 18px;
    line-height: 30px;
    color: #555;
    margin: 0 0 40px;
}

.__error-page .links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.__error-page .links a {
    display: block;
    min-width: 130px;
    height: 48px;
    line-height: 48px;
    padding: 0 18px;
    border: 1px solid #024287;
    border-radius: 8px;
    color: #024287;
    font-size: 16px;
    transition: all 0.2s ease-in-out;
}

.__error-page .links a:hover,
.__error-page .links a:focus-visible {
    background: #024287;
    color: #fff;
}

@media all and (max-width: 640px) {
    .__error-page { padding: 40px 15px 60px; }
    .__error-page .code { font-size: 60px; }
    .__error-page .desc { font-size: 15px; line-height: 26px; }
    .__error-page .links a { min-width: 110px; height: 44px; line-height: 44px; font-size: 14px; }
}

/* ---- 활동소식 카드 ---- */
/*
   사진이 곧 내용인 자리다. 16:9 로 두면 지금 올라와 있는 사진(1.78)이
   딱 맞아 흐린 채움이 아예 보이지 않는다.
   앞으로 다른 비율의 사진이 올라와도 잘리지 않는다.
*/
.activity .area .img {
    height: auto !important;
    aspect-ratio: 16 / 9;
    background-image: none !important;
}

/*
   제목 띠가 사진 아래로 떨어지던 문제.

   원본 CSS 는 제목 띠를 이렇게 두었다.
       .activity .board_list > div.area {position:relative;}
       .activity .board_list span.activity_tit {position:absolute; bottom:0;}
   즉 "칸(.area)의 맨 아래" 에 붙는다.

   세 칸은 가로로 나란히 놓이는데(flex), 기본값이 stretch 라
   가장 긴 칸(공지 다섯 줄, 359px)에 맞춰 나머지 칸도 359px 로 늘어난다.
   그러면 사진(218px)은 그대로인데 제목 띠만 141px 아래로 내려가
   사진과 따로 논다. 1440px 에서 실제로 그랬다.

   두 가지를 함께 고친다.
     1) 칸을 늘리지 않는다 (align-items:flex-start)
     2) 제목 띠의 기준을 칸이 아니라 <a>(사진+제목) 로 옮긴다
   이러면 사진 바로 아래에 붙고, 사진 칸과 영상 칸의 높이도 같아진다.
*/
.activity .board_list {
    align-items: flex-start;
}
.activity .board_list > .area > a {
    position: relative;
    display: block;
}

/* ---- 사업소개 4개 박스 ---- */
/*
   원래는 newstyle.css 가 CSS 배경으로 사진을 넣고 있었다.
       .business_box:nth-child(1) {background-image:url(/images/main_img_zone.jpg);}
   순서로 사진을 지정하는 방식이라 박스를 하나 끼워 넣으면 사진이 전부 밀렸다.
   이제 <img> 로 화면(main/index.html)에 직접 쓴다.

   상자 높이(470px)는 원래 디자인 그대로 둔다. contain 은 잘라내지 않으므로
   높이가 화면 폭에 따라 달라져도 사진은 늘 같은 모습으로 보인다.
   (비율을 고정해야 했던 건 cover 를 쓸 때뿐이었다)
*/
/*
   상자 모양 - 세로형 2 : 3.

   발주자: "메인페이지 사업소개 쪽 이미지 세로형으로 변경해 줘. 약 470px 높이 정도로?"

   ── 규칙 하나: 폭은 원본대로 두고, 비율만 정한다 ──────────────
   상자 폭은 원본이 정한다 (24% / 48% / 100%, newstyle.css).
   여기서는 **비율만** 정한다. 그러면
     · 상자가 언제나 담는 곳(inner)을 꽉 채운다
     · 같은 비율의 사진은 어느 창 폭에서도 흐린 띠 없이 꽉 찬다
   높이는 폭을 따라 정해지므로 창 폭에 따라 달라진다. 그래도 비율이 같으니
   사진은 늘 꼭 맞는다.

   ── 왜 4 : 5 인가 ──────────────────────────────────────────
   담는 곳을 재어 보면 .center 는 최대 1600px, 안쪽(list)은 1560px 이다.
   그 24% 가 374px 이므로, 높이를 470px(원본 디자인)로 맞추려면
   374 / 470 = 0.796 -> 4 : 5 (=0.8) 이다. 실제 높이는 468px 이 된다.

   창 폭별 높이 (검사기가 재는 값)
       1600px 이상   374 x 468
       1440px        336 x 420
       1301px        303 x 379
       1280px 이하   두 칸이 되어 상자가 넓어진다 (595 x 744)
        640px 이하   한 칸 (362 x 452)

   ── 지나온 값과 그때 무엇이 잘못됐나 ────────────────────────
   470px 고정    원본. 폭이 변할 때마다 상자 비율이 달라져 기기마다 다르게 보였다
   3 : 2         가로형. 그때 올라간 사진이 가로로 길어 그 비율에 맞췄다
   2 : 3         세로형으로 바꾸며 폭을 312px 로 **어림**했다. 실제는 336px 이라
                 안내(0.667)와 상자(0.715)가 어긋났다
   5 : 7 + max-height:470px
                 재서 맞췄는데 max-height 를 함께 두어 또 어긋났다.
                 max-height 는 **높이만** 자른다. 폭이 336px 을 넘으면 높이는
                 470 에서 멈추고 폭만 늘어나 상자가 가로로 퍼진다.
                 aspect-ratio 로 잡은 비율을 max-height 가 도로 깬 것이다.
                 발주자: "권장 사이즈로 잘라서 넣었는데 양옆이 살짝 블러로 나온다"
                     1920/1600  374x470 (0.797)  좌우 19px 흐림
                     1280        595x470 (1.266)  좌우 130px 흐림
   5 : 7 + max-width:336px
                 폭을 막아 비율은 지켰지만, 이번에는 상자가 담는 곳을 못 채워
                 넓은 화면에서 가운데로 몰렸다.
                 발주자: "가운데로 몰아졌는데... 현재 inner 기준에 꽉 차야지.
                          가로 비율을 늘려야 할 것 같아"
   4 : 5         지금. 막는 것을 다 걷어내고 비율만 남긴다.

   교훈: aspect-ratio 옆에 max-width / max-height 를 두면 비율이 깨진다.
        둘 중 하나만 있어야 한다.
*/
.business .business_box_list > div.business_box {
    position: relative;
    height: auto !important;
    aspect-ratio: 4 / 5;
    background-image: none !important;
    background-color: #e9edf1;
}

/*
   중간 폭에서는 세 칸으로.

   원본은 1300px 아래에서 곧바로 두 칸(48%)이 된다. 상자가 가로형이던 때는
   그래도 괜찮았는데, 세로형(4:5)이 되면서 두 칸의 높이가 744px 이 됐다
   (1280px 창에서 상자 폭 595px x 1.25). 상자 하나가 화면을 통째로 덮는다.

   폭을 막아 높이를 줄이는 방법은 쓸 수 없다. 그러면 담는 곳이 남아
   가운데로 몰린다 - 발주자가 "inner 기준에 꽉 차야지" 라고 한 그 모습이다.
   칸 수를 늘리면 상자가 좁아지고, 꽉 차면서 높이도 내려간다.

       1301px 이상   네 칸   374 x 468
       1024~1300px   세 칸   397 x 496  (두 칸이면 595 x 744 였다)
        641~1023px   두 칸   413 x 516
        640px 이하   한 칸   362 x 453

   폭(%)은 원본과 같은 셈법이다. 사이 간격 1.33% 짜리 세 칸이면 32% 다.
*/
@media all and (min-width: 1024px) and (max-width: 1300px) {
    .business .business_box_list > div.business_box { width: 32%; }
}

/*
   사진을 상자에 꽉 채우되 원래 크기보다 크게 늘리지는 않는다.
   위 계산대로면 사진이 늘 상자보다 크므로 cover 로도 확대가 일어나지 않고,
   잘리는 양도 아주 적다.
   혹시 아주 작은 사진이 올라오면 흐린 배경이 그 둘레를 채운다.
*/
.business .business_box_list > div.business_box .img-main {
    object-fit: contain;
}
/* 사진 두 장은 글자 뒤에 깔린다 */
.business .business_box_list > div.business_box > .box_img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}
/* 글자와 어두운 막이 사진보다 위에 오게 한다 */
.business .business_box_list > div.business_box > a {
    position: relative;
    z-index: 1;
}

/* ---- 비주얼 슬라이드 ---- */
/*
   슬라이드 높이를 사진에 맞춘다.

   원래는 .visual 이 calc(85vh - 87px) 로 높이가 고정이고
   사진을 object-fit:cover 로 채웠다. 그러면 창 높이에 따라
   사진의 위아래가 다르게 잘린다 (기기마다 다르게 보이던 원인).

   contain 으로 바꾸면 잘리지는 않지만 위아래에 띠가 생긴다.
   문구가 사진 안에 들어간 지금은 그 띠가 그대로 눈에 띈다.

   그래서 아예 <b>높이를 사진 비율에 맡긴다.</b>
   폭 100% 에 height:auto 면 상자 높이가 곧 사진 높이가 되므로
   잘리지도, 띠가 생기지도 않는다. 어떤 창 크기에서도 같은 모습이다.

   슬라이드마다 사진 비율이 다르면 높이가 달라지는데,
   그건 Swiper 의 autoHeight 가 부드럽게 맞춰 준다 (js/main.js).
*/
.visual {
    height: auto !important;
}
.visual .swiper,
.visual .swiper-slide {
    height: auto;
}

.visual .visual-photo {
    position: relative;
    display: block;
    width: 100%;
    overflow: hidden;
    background: #e9f0f8;   /* 사진이 오기 전 잠깐 보이는 바탕 */
}
.visual .visual-photo .img-main {
    /*
       position:static 으로 두면 안 된다.
       바로 뒤의 흐린 채움(.img-fill)이 position:absolute 라
       자리를 차지하지 않는 요소가 자리를 차지하는 요소보다 위에 그려진다.
       그러면 선명한 사진이 흐린 채움에 덮여 화면 전체가 흐려진다.
       relative + z-index 로 위에 오게 한다.
    */
    position: relative;
    z-index: 1;
    width: 100%;
    height: auto;          /* 여기서 상자 높이가 정해진다 */
    object-fit: contain;
}
/*
   흐린 채움은 남겨 둔다.
   높이를 사진에 맞췄으니 평소에는 보이지 않지만,
   화면이 아주 좁아 최소 높이에 걸리는 경우에 빈 자리를 채운다.
*/
.visual .visual-photo .img-fill {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* ============================================================
   메인 - 비주얼 슬라이드

   라이브러리(Swiper 11.2.10)는 최신이다. 여기서 손보는 것은 두 가지다.
     1) 넘어가는 가락(easing)
     2) 그동안 없던 위치 표시 점과 정지 단추의 모양
   설정 값에 대한 설명은 js/main.js 에 있다.
   ============================================================ */

/*
   기본값은 처음부터 끝까지 같은 속도로 미는 방식(ease)이라
   멈출 때 뚝 끊기는 느낌이 든다.
   빠르게 출발해 부드럽게 멈추도록 바꾼다.
*/
.visual .mySwiper .swiper-wrapper {
    transition-timing-function: cubic-bezier(0.33, 0, 0.15, 1);
}

/*
   좌우 화살표가 찌그러지던 문제.

   원본 CSS 는 60x60 동그라미로 지정하고 있는데(newstyle.css),
   .btn_wrap 이 display:flex 라 화살표도 flex 항목이 된다.
   flex 항목은 자리가 모자라면 지정한 폭보다 줄어드는 것이 기본이라
   실제로는 31x60 짜리 납작한 타원으로 나오고 있었다.
   (여기에 점과 정지 단추를 더 넣으면서 자리가 더 좁아졌다)
   줄어들지 않게 못 박는다.
*/
.btn_wrap .swiper-button-prev,
.btn_wrap .swiper-button-next {
    flex: 0 0 60px;
    box-sizing: border-box;
}

/* ---- 위치 표시 점 ---- */
.btn_wrap .swiper-pagination {
    position: relative;
    display: flex;
    align-items: center;
    gap: 9px;
    width: auto;
    margin-right: 18px;
}
/*
   점 색깔.

   처음에는 흰색으로 두었다. 원본 슬라이드가 어두운 사진이었기 때문이다.
   그런데 지금 1번 슬라이드는 연한 하늘색 바탕이라 흰 점이 보이지 않았다.
   앞으로 어떤 사진이 올라올지 모르므로 밝은 배경에서도 어두운 배경에서도
   보이게 한다.
     - 안 고른 점: 흰색 + 얇은 어두운 테두리 (밝은 데서도 윤곽이 보인다)
     - 고른 점  : 사이트 파랑 (양쪽 모두에서 또렷하다)
*/
.btn_wrap .swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.22);
    opacity: 1;
    cursor: pointer;
    transition: width 0.25s ease, background 0.25s ease;
}
.btn_wrap .swiper-pagination-bullet-active {
    /* 지금 보고 있는 화면은 길쭉한 막대로 바뀐다. 색만으로 구분하지 않는다. */
    width: 28px;
    border-radius: 5px;
    background: #0c90e3;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.7);
}
.btn_wrap .swiper-pagination-bullet:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
}

/* ---- 정지 / 재생 단추 ---- */
.visual-toggle {
    position: relative;
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.8);
    cursor: pointer;
}
.visual-toggle:hover {
    background: #fff;
}
.visual-toggle:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
}
/* 멈춤 표시 - 세로 막대 두 개 */
.visual-toggle::before,
.visual-toggle::after {
    content: "";
    position: absolute;
    top: 11px;
    width: 3px;
    height: 12px;
    background: #333;
}
.visual-toggle::before { left: 13px; }
.visual-toggle::after  { right: 13px; }

/* 멈춰 있는 동안에는 재생 표시(삼각형)로 바뀐다 */
.visual-toggle.is-paused::before {
    left: 13px;
    top: 11px;
    width: 0;
    height: 0;
    background: none;
    border-style: solid;
    border-width: 6px 0 6px 10px;
    border-color: transparent transparent transparent #333;
}
.visual-toggle.is-paused::after {
    display: none;
}

/* 좁은 화면에서는 좌우 화살표가 숨겨진다(newstyle.css). 점과 정지 단추는 남긴다. */
@media all and (max-width: 1024px) {
    .btn_wrap .swiper-pagination { margin-right: 12px; }
}

/* =============================================================================
   연혁

   전에는 89건이 한 화면에 세로로 전부 나열됐다. 2015년을 보려면 끝까지
   내려가야 했고, 어느 해가 있는지 한눈에 알 수 없었다.
   이제 위쪽 연도 띠에서 한 해를 고르면 그 해만 보여준다.

   구조는 IBK행복나눔재단 연혁 화면을 참고했다. 색만 우리 것(#0c90e3)으로 바꿨다.
   연도별 대표 사진 자리는 두지 않았다 (지금 등록된 사진이 없다).

   ── 중요 ──────────────────────────────────────────────────────────
   js-on 이 붙기 전에는 모든 해가 그냥 세로로 이어져 나온다.
   자바스크립트가 막혀 있거나 실패해도 89건이 전부 읽히게 하기 위해서다.
   한 해씩 보여주는 규칙은 전부 .js-on 안에만 쓴다.
   ============================================================================= */

/*
   폭 구조.

   참고한 화면(IBK행복나눔재단)이 이렇게 되어 있다.
       #contents  width:100%           바깥은 화면 끝까지
       .sub_wrap  max-width:1330px     내용만 가운데로 모인다
                  padding: 0 15px
   우리 사이트는 #content 가 max-width:1200px (global.css) 이라
   연한 배경 판이 가운데 1200px 안에서만 그려진다.
   이 화면에서만 그 제한을 풀고 같은 구조로 맞춘다.

   #sub 의 좌우 여백(10px)도 같이 걷어내야 판이 화면 끝에 닿는다.
   :has() 를 쓰지 않고 화면에서 직접 클래스를 붙였다 (about/history.html).
*/
#content.full-bleed {
    max-width: none;
    margin: 0 -10px;
}

.sub_history .sub_wrap {
    max-width: 1330px;
    width: 100%;
    margin: 0 auto;
    padding: 0 15px;
    box-sizing: border-box;
    position: relative;
}

.sub_history {
    --hist-point: #0c90e3;   /* 강조색 - 사이트 파랑 */
    --hist-deep: #024287;    /* 진한 남색 */
    --hist-panel: #f4f8fb;   /* 내용 판 배경 */
    --hist-circle: #1e93ca;  /* 사진 뒤 동그라미 */
    margin-top: 10px;
}

.sub_history h3 {
    margin: 0;
    text-align: center;
    font-size: 30px;
    line-height: 1.45;
    color: var(--hist-deep);
    font-weight: 500;
    letter-spacing: -0.03em;
}

/* ---------------------------------------------------------------- 연도 띠 */
.sub_history .history_year {
    margin-top: 56px;
}
.sub_history .history_year .sub_wrap {
    max-width: 1060px;      /* 연도 12개가 한눈에 들어오는 폭 */
    padding: 0 58px;
}

.sub_history .hy-viewport {
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;              /* 파이어폭스 */
    -ms-overflow-style: none;
    scroll-behavior: smooth;
}
.sub_history .hy-viewport::-webkit-scrollbar { display: none; }

.sub_history .hy-track {
    display: flex;
    justify-content: center;
    gap: 40px;
    margin: 0;
    padding: 0 4px 26px;
    list-style: none;
    width: max-content;
    min-width: 100%;
    box-sizing: border-box;
}

.sub_history .hy-year {
    position: relative;
    display: block;
    padding: 0 2px 4px;
    border: 0;
    background: none;
    font: inherit;
    font-size: 30px;
    font-weight: 700;
    letter-spacing: -0.03em;
    color: #d0d5da;
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.18s ease;
}
.sub_history .hy-year:hover,
.sub_history .hy-year.is-current {
    color: #111;
}
/* 고른 해 아래의 표시. 색만으로 구분하지 않는다. */
.sub_history .hy-year::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -14px;
    width: 10px;
    height: 10px;
    margin-left: -5px;
    border-radius: 2px;
    background: var(--hist-point);
    transform: rotate(30deg) scale(0);
    transition: transform 0.18s ease;
}
.sub_history .hy-year.is-current::after,
.sub_history .hy-year:hover::after {
    transform: rotate(30deg) scale(1);
}
.sub_history .hy-year:focus-visible {
    outline: 2px solid var(--hist-point);
    outline-offset: 3px;
    border-radius: 3px;
}

/* 좌우 화살표 */
.sub_history .hy-arrow {
    position: absolute;
    top: 2px;
    width: 46px;
    height: 46px;
    padding: 0;
    border: 1px solid #ddd;
    border-radius: 50%;
    background: #fff;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}
.sub_history .hy-arrow::before {
    content: "";
    position: absolute;
    top: 17px;
    width: 10px;
    height: 10px;
    border: 2px solid #aaa;
    border-width: 2px 2px 0 0;
    transition: border-color 0.15s ease;
}
.sub_history .hy-prev { left: 15px; }
.sub_history .hy-next { right: 15px; }
.sub_history .hy-prev::before { left: 19px; transform: rotate(-135deg); }
.sub_history .hy-next::before { right: 19px; transform: rotate(45deg); }

.sub_history .hy-arrow:hover:not(:disabled) {
    background: var(--hist-point);
    border-color: var(--hist-point);
}
.sub_history .hy-arrow:hover:not(:disabled)::before { border-color: #fff; }
.sub_history .hy-arrow:disabled { opacity: 0.3; cursor: default; }
.sub_history .hy-arrow:focus-visible {
    outline: 2px solid var(--hist-point);
    outline-offset: 2px;
}

/* ----------------------------------------------------------- 연도별 내용 */
.sub_history .history_cont_box {
    position: relative;
    margin-top: 46px;
    padding: 78px 0 96px;
    background: var(--hist-panel);
    border-radius: 0 200px 0 0;
    /*
       오른쪽 위 둥근 모서리와 "Since 2015" 글씨(오른쪽으로 46px 나가 있다)를
       상자 안으로 잘라 낸다.

       hidden 이 아니라 clip 인 이유:
       overflow:hidden 인 조상이 있으면 그 안의 sticky 가 붙지 않는다.
       브라우저가 "여기가 스크롤되는 자리" 로 여기는데 실제로는 스크롤되지 않아서,
       사진이 따라오지 않고 위로 그냥 지나가 버렸다.
       clip 은 잘라 내기만 하고 스크롤 자리로 치지 않아 sticky 가 살아난다.
       clip 을 모르는 옛 브라우저는 앞줄 hidden 을 쓴다 (사진이 안 따라올 뿐 잘리기는 한다).
    */
    overflow: hidden;
    overflow: clip;
}

/*
   오른쪽에 세로로 큰 글씨 (Since 2015). 배경 무늬 같은 역할이다.

   transform: rotate(90deg) 로 돌리면 돌린 뒤 상자가 차지하는 자리가
   글자 길이에 따라 달라져서, 오른쪽으로 얼마나 삐져나올지 예측이 안 된다.
   (실제로 1024px 에서 글자가 잘렸다)
   writing-mode 는 처음부터 세로로 흐르는 글로 취급하므로
   right 값이 그대로 오른쪽 여백이 된다.
*/
.sub_history .since {
    position: absolute;
    right: -46px;
    top: 50%;
    margin: 0;
    writing-mode: vertical-rl;
    font-size: 68px;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    letter-spacing: -0.02em;
    transform: translateY(-50%);
    pointer-events: none;
    user-select: none;
    /*
       "Since 2015" 가 두 줄로 갈라지던 것.

       writing-mode:vertical-rl 에서는 글이 위에서 아래로 흐른다. 그 세로 길이가
       상자 높이보다 길면 브라우저가 두 번째 "줄"(여기서는 왼쪽 칸)로 넘긴다.
       그래서 "Since" 와 "2015" 가 나란히 두 줄로 보였다.
       가로쓰기의 줄바꿈과 같은 일이라 nowrap 으로 막는다.
       한 줄로 이어지면 상자보다 길어질 수 있지만, 이 글자는 장식이고
       바깥이 잘리는 자리(history_cont_box 의 overflow:clip)라 문제가 없다.
    */
    white-space: nowrap;
}

.sub_history .history_box .year {
    margin: 0 0 30px;
    font-size: 58px;
    font-weight: 700;
    line-height: 1;
    color: #222;
    letter-spacing: -0.02em;
}

/* ------------------------------------------------------- 사진 자리와 무늬 */
/*
   참고한 화면은 사진 왼쪽 아래에 파란 동그라미, 오른쪽 위에 작은 무늬 그림을
   깔아 두었다. 그 무늬는 그림 파일(history-icon.png)인데 우리에겐 없다.
   그림 파일 없이 같은 느낌이 나도록 CSS 로 그린다.

     ::after   250px 파란 동그라미  (왼쪽 아래)
     ::before   90px 점 무늬        (오른쪽 위)

   z-index:-1 로 사진 뒤에 깔린다. 그래서 .history_img 자신은
   쌓임 맥락(stacking context)을 만들면 안 된다 - transform, filter, opacity 를
   여기에 걸면 -1 이 부모 배경 아래로 내려가 사라진다.
*/
/*
   사진과 글을 나란히 놓는 방법을 float 에서 flex 로 바꿨다.

   float 로 하면 옆 칸(.history_txt)에 overflow:hidden 을 줘야 자리를 제대로
   차지하는데, 그러면 왼쪽으로 5px 삐져나오게 놓은 타임라인 점(li::before)의
   절반이 잘려 나간다. 실제로 반달 모양으로 보였다.
   flex 는 그 장치가 필요 없어서 점이 온전히 나온다.

   연도(h4.year)는 위에 한 줄로 놓아야 하므로 폭을 100% 로 준다.
*/
.sub_history .history_box {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
}
.sub_history .history_box .year {
    flex: 0 0 100%;
}
.sub_history .history_img {
    position: relative;
    flex: 0 0 600px;
    margin-right: 105px;
}
.sub_history .history_img::before {
    content: "";
    position: absolute;
    top: -43px;
    right: -42px;
    width: 90px;
    height: 90px;
    z-index: -1;
    /* 점 아홉 개가 3x3 으로 찍힌 무늬 */
    background-image: radial-gradient(var(--hist-point) 22%, transparent 23%);
    background-size: 30px 30px;
    background-position: 0 0;
    opacity: 0.55;
}
.sub_history .history_img::after {
    content: "";
    position: absolute;
    bottom: -82px;
    left: -82px;
    width: 250px;
    height: 250px;
    z-index: -1;
    border-radius: 50%;
    background: var(--hist-circle);
}

.sub_history .history_img .img_box {
    width: 100%;
    height: 400px;
    border-radius: 20px;
    box-shadow: 0 8px 12px 0 rgba(0, 0, 0, 0.15);
    overflow: hidden;
    background: #fff;
}
.sub_history .history_img .img_box img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/*
   사진이 없는 해에는 .history_img 를 아예 그리지 않는다 (about/history.html).
   빈 네모를 두면 "무언가 안 나온 것" 처럼 보이기 때문이다.
   그 해에는 글이 폭을 다 쓴다.
*/

/*
   글은 남은 자리를 모두 쓴다.
   min-width:0 이 없으면 긴 낱말 하나 때문에 칸이 밀려 넘칠 수 있다
   (flex 항목의 기본 최소 폭은 "내용이 줄어들 수 있는 한계" 라서 0 이 아니다).
*/
.sub_history .history_txt {
    /*
       flex-basis 를 0 이 아니라 300px 로 둔다.

       0 이면 사진이 없는 해에 화면이 깨진다.
       .history_box 는 flex-wrap:wrap 이고 .year 가 100% 를 차지한다.
       basis 가 0 이면 "남은 자리 0 에도 들어간다" 고 판단해 줄을 바꾸지 않고
       연도 옆에 붙어 버리는데, 그 자리는 폭이 0 이라 글이 통째로 사라진다.
       실제로 2026년(사진 없는 해)이 그랬다 - 왼쪽은 텅 비고 글은 오른쪽 밖으로 밀렸다.

       300px 이면
         사진 있는 해  600(사진) + 105(여백) + 300 = 1005 < 1300 이라 같은 줄. 늘어나 595px.
         사진 없는 해  1300(연도) + 300 > 1300 이라 다음 줄로 내려가 1300px 를 다 쓴다.
    */
    flex: 1 1 300px;
    min-width: 0;
}

/* 세로 점선 - 항목들을 잇는 선 */
.sub_history .history_txt > ul {
    position: relative;
    margin: 0;
    padding: 0;
    list-style: none;
}
.sub_history .history_txt > ul::before {
    content: "";
    position: absolute;
    left: 0;
    top: 15px;
    width: 0;
    height: calc(100% - 27px);
    border-right: 1px dotted #c4ccd3;
}

.sub_history .history_txt > ul > li {
    position: relative;
    padding-left: 32px;
}
.sub_history .history_txt > ul > li + li {
    margin-top: 28px;
}
/* 항목 앞 동그라미. 가장 최근 것만 강조색. */
.sub_history .history_txt > ul > li::before {
    content: "";
    position: absolute;
    left: -5px;
    top: 11px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #d3dae0;
}
.sub_history .history_txt > ul > li:first-child::before {
    background: var(--hist-point);
}

.sub_history .history_txt dl {
    display: flex;
    margin: 0;
}
.sub_history .history_txt dt.date {
    flex: 0 0 62px;
    font-size: 20px;
    font-weight: 700;
    line-height: 32px;
    color: #222;
}
.sub_history .history_txt dd.list {
    flex: 1 1 auto;
    margin: 0;
    padding-left: 24px;
    min-width: 0;
}
.sub_history .history_txt dd.list ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
.sub_history .history_txt dd.list li {
    font-size: 18px;
    line-height: 32px;
    color: #555;
    letter-spacing: -0.02em;
    word-break: keep-all;
}

/*
   같은 달에 여러 건이 있을 때 서로 구분되게 한다.

   전에는 앞에 작은 점(::before)을 찍었다(F15). 발주자가 "그거 그냥 다 빼 줘"
   라고 해서 점은 없앴다. 대신 사이 여백만 남긴다 -
   줄이 나뉜 것은 보여야 하고, 여백만으로도 충분하다.
   한 건뿐인 달에는 아무것도 하지 않는다.
*/
.sub_history .history_txt dd.list > ul > li:not(:only-child) + li {
    margin-top: 8px;
}

/* -------------------------------------------------- 한 해씩 보여주는 규칙 */
/*
   js-on 은 history.js 가 붙인다. 즉 아래 규칙은 조작이 가능할 때만 적용된다.
   스크립트가 없으면 모든 해가 그냥 세로로 이어져 나온다.
*/
.sub_history.js-on .history_box {
    display: none;
}
.sub_history.js-on .history_box.is-active {
    /*
       flex 여야 한다. 사진과 글을 나란히 놓는 것이 .history_box 의 배치이므로
       (위쪽 "사진과 글을 나란히" 규칙 참고) 여기서 block 으로 덮으면
       사진이 글 위로 올라가 한 줄을 통째로 차지한다. 실제로 그랬다.
    */
    display: flex;
    animation: hist-in 0.4s ease both;
}
@keyframes hist-in {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
}

/* 스크립트가 없을 때는 연도 띠와 화살표가 아무 일도 못 하므로 숨긴다 */
.sub_history:not(.js-on) .history_year { display: none; }
.sub_history:not(.js-on) .history_box + .history_box { margin-top: 54px; }

/* 기기에서 "동작 줄이기" 를 켠 사람에게는 나타나는 효과를 주지 않는다 */
@media (prefers-reduced-motion: reduce) {
    .sub_history.js-on .history_box.is-active { animation: none; }
    .sub_history .hy-viewport { scroll-behavior: auto; }
    .sub_history .hy-year::after { transition: none; }
}

/* ------------------------------------------------------------- 좁은 화면 */
@media all and (max-width: 1330px) {
    /* 사진 옆 여백부터 줄인다 */
    .sub_history .history_img { flex-basis: 46%; margin-right: 56px; }
    .sub_history .since { display: none; }   /* 판 밖으로 나가 잘린다 */
}

@media all and (max-width: 1024px) {
    .sub_history h3 { font-size: 25px; }
    .sub_history .history_cont_box {
        padding: 56px 0 64px;
        border-radius: 0 110px 0 0;
    }
    .sub_history .history_box .year { font-size: 46px; }

    /* 사진과 글을 위아래로 */
    .sub_history .history_img {
        flex: 0 0 100%;
        max-width: 600px;
        margin: 0 0 46px;
    }
    .sub_history .history_img .img_box { height: 320px; }
    .sub_history .history_img .img_year { font-size: 88px; }
    /* 동그라미가 화면 밖으로 나가지 않게 */
    .sub_history .history_img::after { width: 180px; height: 180px; bottom: -46px; left: -46px; }
    .sub_history .history_img::before { width: 66px; height: 66px; top: -30px; right: -18px;
                                        background-size: 22px 22px; }
}

@media all and (max-width: 768px) {
    .sub_history h3 { font-size: 21px; }
    .sub_history .history_year { margin-top: 40px; }
    .sub_history .history_year .sub_wrap { padding: 0 48px; }
    .sub_history .hy-track {
        /* 좁은 화면에서는 가운데 정렬을 풀어야 스크롤이 정상 동작한다 */
        justify-content: flex-start;
        gap: 28px;
    }
    .sub_history .hy-year { font-size: 25px; }
    .sub_history .hy-arrow { width: 38px; height: 38px; }
    .sub_history .hy-arrow::before { top: 13px; }
    .sub_history .hy-prev::before { left: 15px; }
    .sub_history .hy-next::before { right: 15px; }

    .sub_history .history_cont_box {
        padding: 40px 0 48px;
        border-radius: 0 56px 0 0;
    }
    .sub_history .history_box .year { font-size: 36px; margin-bottom: 20px; }
    .sub_history .history_img { margin-bottom: 36px; }
    .sub_history .history_img .img_box { height: 220px; border-radius: 14px; }
    .sub_history .history_img .img_year { font-size: 62px; }
    .sub_history .history_img::after { width: 120px; height: 120px; bottom: -30px; left: -30px; }
    .sub_history .history_img::before { width: 52px; height: 52px; top: -22px; right: -10px;
                                        background-size: 17px 17px; }
    .sub_history .history_txt dt.date { flex-basis: 46px; font-size: 17px; line-height: 28px; }
    .sub_history .history_txt dd.list { padding-left: 14px; }
    .sub_history .history_txt dd.list li { font-size: 15px; line-height: 28px; }
    .sub_history .history_txt > ul > li { padding-left: 22px; }
    .sub_history .history_txt > ul > li + li { margin-top: 20px; }
}

@media all and (max-width: 420px) {
    .sub_history .history_year .sub_wrap { padding: 0 40px; }
    .sub_history .hy-prev { left: 8px; }
    .sub_history .hy-next { right: 8px; }
    .sub_history .hy-track { gap: 22px; }
    .sub_history .hy-year { font-size: 22px; }
    .sub_history .history_cont_box { padding: 32px 0 40px; border-radius: 0 40px 0 0; }
    .sub_history .sub_wrap { padding: 0 14px; }
    .sub_history .history_txt dl { flex-wrap: wrap; }
    .sub_history .history_txt dt.date { flex-basis: 100%; margin-bottom: 2px; }
    .sub_history .history_txt dd.list { padding-left: 0; }
}

/* =============================================================================
   가로 폭 잡는 방식

   원본(newstyle.css)은 이렇게 되어 있었다.

       .center { width: 83.3%; margin: 0 auto; }

   퍼센트로 잡으면 화면이 넓어질수록 내용도 끝없이 넓어진다.
     1440px 화면 -> 내용 1200px
     1920px 화면 -> 내용 1600px
     2560px 화면 -> 내용 2133px   글줄이 너무 길어 읽기 어렵다
   또 화면 폭에 따라 여백이 계속 변해서 "어느 화면에서 봐도 같은 모습" 이
   되지 않는다. 이 사이트에서 기기마다 다르게 보인다는 항의가 나온
   원인 중 하나가 이 방식이다.

   최대 폭을 정해 두고 그보다 좁을 때만 화면을 채우는 방식으로 바꾼다.
   사이트의 다른 상자들(#content, .inner, #footer .inner)은 이미
   max-width 방식이라 그쪽과도 맞는다.

   좌우 여백(padding)이 필요한 이유: 퍼센트일 때는 8.35% 가 저절로 여백이
   되었지만, width:100% 로 바꾸면 좁은 화면에서 글이 화면 끝에 닿는다.
   ============================================================================= */
.center {
    width: 100% !important;
    max-width: 1600px;
    margin: 0 auto !important;
    padding: 0 20px;
    box-sizing: border-box;
}

@media all and (max-width: 640px) {
    .center { padding: 0 14px; }
}

/* =============================================================================
   메인 - 소식 목록 줄 간격

   원본(newstyle.css)은 padding:20px 0 이었다. 네 줄로 줄이면서
   사진 카드 높이와 맞도록 17px 로 좁힌다.
   ============================================================================= */
.activity .area ul {
    display: flex;
    border-bottom: 1px solid #d4d4d4;
    padding: 17px 0;
}

/* =============================================================================
   비주얼 슬라이드 조작 단추의 자리

   두 가지가 어긋나 있었다.

   1) 화면 왼쪽 끝에 붙는다
      원본은 .btn_wrap 을 left:0 으로 두었다. 자리를 절대값으로 잡은 요소의
      left:0 은 "안쪽 여백(padding)을 뺀 자리" 가 아니라 테두리 안쪽 끝이다.
      .center 에 좌우 여백을 준 뒤에도 단추만 여백을 무시하고 끝에 붙었다.
      글은 여백만큼 들어와 있는데 단추만 튀어나와 보인다.

   2) 좁은 화면에서 슬라이드 밖으로 나간다
      원본은 1024px 이하에서 bottom:208px 였다. 그때는 슬라이드 높이가
      85vh 로 고정이라 208px 를 올려도 안에 있었다.
      지금은 높이가 사진 비율을 따르므로 390px 화면에서 슬라이드가 151px 다.
      거기서 208px 를 올리면 슬라이드 위로 빠져나간다.
      실제로 단추 아래쪽 좌표가 390px 에서 -7, 320px 에서 -34 였다(화면 밖).

   여백과 같은 값으로 들여 놓고, 아래 간격은 슬라이드 안에 남도록 줄인다.
   ============================================================================= */
.visual .btn_wrap {
    left: 20px;
}

@media all and (max-width: 1024px) {
    .visual .btn_wrap {
        bottom: 24px;
    }
}

/*
   모바일에서는 조작 단추를 아예 빼기로 했다 (발주자 결정).

   좁은 화면에서는 슬라이드가 낮아(390px 화면에서 151px) 단추가 사진을
   가리는 비중이 크고, 손가락으로 밀어서 넘기는 것이 더 자연스럽다.
   미는 동작은 그대로 되므로 넘기지 못하게 되는 것은 아니다.

   대신 자동 넘김을 함께 끈다 (js/main.js).
   멈출 방법 없이 화면이 저절로 움직이면 안 된다는 기준(WCAG 2.2.2) 때문이다.
   단추를 없앴으니 멈출 방법도 같이 사라지는데, 그러면 그 기준을 어긴다.
   자동으로 움직이지 않게 하면 멈출 필요 자체가 없어진다.

   768px 은 이 사이트가 쓰는 모바일 분기점이다
   (newstyle.css / respond.css 도 같은 값을 쓴다).
*/
@media all and (max-width: 768px) {
    .visual .btn_wrap {
        display: none;
    }
}

/*
   연혁 화면의 아래 여백.

   #sub 는 사이트 공통으로 padding:60px 10px 을 갖는다(global.css).
   보통 화면에서는 그 여백이 필요하지만, 연혁은 연한 배경 판이 화면 끝까지
   이어지는 구조라 판 아래에 흰 띠가 60px 남는다.
   이 화면에서만 아래 여백을 없앤다.

   :has() 를 못 읽는 옛 브라우저를 위해 화면 클래스(.sub15 = 재단소개>연혁)로도
   한 번 더 적는다. 못 읽어도 여백이 남을 뿐 깨지지는 않는다.
*/
#sub:has(> #content.full-bleed),
.sub15 #sub {
    padding-bottom: 0;
}

/* =============================================================================
   연혁 - 항목에 붙은 사진

   사진이 붙은 항목에는 글 끝에 사진 표시(카메라)가 붙는다.
   누르거나 화면을 내려 그 자리에 이르면 왼쪽 사진이 그것으로 바뀐다.

   참고한 화면(현대차 정몽구재단)은 여기에 그림 파일을 썼다.
       background: url(../img/fid/icon_history_01.png) no-repeat right center;
   우리에겐 그 그림이 없으므로 같은 크기(20x16)의 카메라를 CSS 도형으로 그린다.
   그림 파일이 하나 줄면 요청도 하나 줄고, 색을 바꾸기도 쉽다.
   ============================================================================= */

/* 사진이 붙은 줄은 누를 수 있다. 단추지만 글처럼 보여야 한다. */
.sub_history .history_txt .hi-photo {
    display: inline;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
}
.sub_history .history_txt .hi-photo:focus-visible {
    outline: 2px solid var(--hist-point);
    outline-offset: 2px;
    border-radius: 3px;
}

/* 카메라 표시 */
/*
   전에는 CSS 도형(테두리 + ::before 뷰파인더 + ::after 렌즈)으로 그렸다.
   발주자가 직접 만든 camera.svg 를 주면서 "이걸 쓰고 크기도 작게" 라고 했다.

   그림 파일(/images/camera.svg)로 두지 않고 mask-image 의 data URI 로 넣는 이유
     1) 운영 nginx 는 /images/ 를 jar 가 아니라 디스크(/srv/kfccf/web)에서 준다.
        jar 안에만 넣으면 로컬 200 / 운영 404 가 된다.
        실제로 video-fallback.svg 가 그렇게 404 였다. 같은 사고를 반복하지 않는다.
     2) mask 로 넣으면 색을 CSS 가 정한다. 원본 svg 는 fill:#cc6d56 (주황빛)인데
        발주자가 "기존색으로" 라고 했다. 파일을 고치지 않고 background-color 로 준다.
     3) 요청이 하나 줄고, 상태별 색 바꾸기가 그대로 된다.

   크기는 20x16 에서 15x13.6 으로 줄였다 (원본 비율 79 : 71.64 를 지킨다).
*/
.sub_history .history_txt .hi-photo .icon {
    display: inline-block;
    position: relative;
    top: 2px;
    /*
       발주자: "연혁 카메라 이모티콘 잘 안 보여. 너무 얇고, 선이랑 좀 더 굵게 해야 할 듯해"
       15 x 13.6 -> 18 x 16.3 으로 키운다 (원본 비율 79 : 71.64 를 지킨다).
       획 자체를 굵히는 것은 아래 ::before 의 그림에서 한다.
    */
    width: 18px;
    height: 16.3px;
    margin-left: 10px;
    /* 도형으로 그리던 흔적을 지운다 */
    border: 0;
    border-radius: 0;
    /*
       그림은 아래 ::before 가 그린다. 여기는 자리와 색만 정한다.
       ::before 가 currentColor 로 칠하므로 색은 여기 하나로 다스린다.
    */
    color: var(--hist-point);
    transition: color 0.18s ease, transform 0.18s ease;
}
/*
   실제로 카메라를 그리는 곳.

   ── 획을 굵히는 방법에 대해 (두 번 헛돌았다) ─────────────────────
   발주자가 "카메라가 얇다" 고 세 번 말했다. 앞의 두 번은 고쳤다고 해 놓고
   화면은 하나도 안 바뀌었다. 무엇이 잘못됐었는지 남긴다.

   1) 처음: .icon 하나에 background-color + mask + filter(drop-shadow) 를 다 걸었다.
      "그림자를 여러 방향으로 깔아 획을 부풀린다" 는 생각이었는데 **헛일이었다.**
      브라우저가 그리는 차례가 filter -> clip -> mask 로 정해져 있어서
        ① 꽉 찬 파란 네모를 그리고
        ② 거기에 그림자를 깔고 (네모가 불투명하니 그림자는 뒤에 숨는다)
        ③ 그 결과를 카메라 모양으로 오려 낸다
      그림자가 오려 내기 전에 깔리니 획은 하나도 안 굵어진다.
      칠해진 점을 세어 확인했다. filter 를 넣은 것과 뺀 것이 8359 대 8359 로
      **완전히 같았다.** 눈으로만 봤으면 또 넘어갔을 것이다.

   2) 그래서 오려 내기를 ::before 로 옮기고 그림자는 부모에 걸었다. 이번엔
      번지기는 하는데 **값을 못 다스린다.** 0.1px 이나 0.4px 이나 결과가 똑같고
      (브라우저가 반올림한다) 여덟 개를 이으면 - drop-shadow 는 앞의 결과를 다시
      받으므로 겹치는 게 아니라 이어진다 - 0.6px 짜리도 4px 넘게 부풀어
      카메라가 파란 덩어리가 됐다.

   3) 지금: 그림 자체에 테두리(stroke)를 준다.
      선을 굵히는 일이니 선 굵기로 말하는 것이 맞다. 값도 그대로 먹는다.
      stroke-width 를 0 / 1 / 2 / 3 / 4 로 재 본 결과 (칠해진 점 기준)
          0 -> 8359    1 -> 9563(+14%)   2 -> 10880(+30%)
          3 -> 12112(+45%)   4 -> 13109(+57%, 렌즈 구멍이 메워지기 시작)
      3 으로 정했다. 눈에 띄게 굵으면서 카메라 모양은 그대로다.

      테두리를 주면 그림이 viewBox 밖으로 번져 잘리므로 (특히 몸통 네모는
      0..79 를 꽉 채운다) translate + scale 로 그만큼 안으로 줄여 두었다.
*/
.sub_history .history_txt .hi-photo .icon::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: currentColor;
    /* 색이 바뀔 때 부모(.icon)의 color 전환을 따라간다 */
    transition: background-color 0.18s ease;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 79 71.64%22%3E%3Cg transform=%22translate(1.7%2C1.7) scale(0.9570%2C0.9525)%22 stroke=%22black%22 stroke-width=%223%22 stroke-linejoin=%22round%22 stroke-linecap=%22round%22%3E%3Cpath d=%22M46.59%2C3.77c2.75%2C4.27%2C5.5%2C8.54%2C8.25%2C12.81.12.19.23.38.36.56.79%2C1.12%2C1.83%2C1.26%2C3.07%2C1.26h18.22l-2.5-2.5v53.25l2.5-2.5H2.5l2.5%2C2.5V15.89l-2.5%2C2.5h17.96c1.45%2C0%2C2.58-.14%2C3.46-1.44%2C1.49-2.2%2C2.88-4.47%2C4.32-6.7s2.79-4.32%2C4.18-6.48l-2.16%2C1.24h18.5C51.97%2C5.01%2C51.97.01%2C48.75.01h-15.47c-.92%2C0-1.84-.03-2.76%2C0-1.18.03-1.99.58-2.62%2C1.54-1.48%2C2.21-2.88%2C4.47-4.32%2C6.71s-2.74%2C4.25-4.11%2C6.38l2.16-1.24H2.5c-1.35%2C0-2.5%2C1.15-2.5%2C2.5v53.25c0%2C1.35%2C1.15%2C2.5%2C2.5%2C2.5h74c1.35%2C0%2C2.5-1.15%2C2.5-2.5V15.89c0-1.35-1.15-2.5-2.5-2.5h-19.12l2.16%2C1.24c-2.88-4.46-5.75-8.92-8.62-13.38-1.74-2.7-6.07-.19-4.32%2C2.52Z%22/%3E%3Cpath d=%22M53.19%2C40.99c-.06%2C5.58-3.5%2C10.87-8.83%2C12.81s-11.64.4-15.43-4.09-4.09-10.93-1.14-15.81%2C8.76-7.48%2C14.3-6.35c6.42%2C1.31%2C11.02%2C6.9%2C11.09%2C13.45.03%2C3.22%2C5.03%2C3.22%2C5%2C0-.08-7.86-4.98-14.82-12.34-17.57s-15.79-.36-20.66%2C5.57-5.82%2C14.83-1.71%2C21.62%2C12.06%2C10.17%2C19.78%2C8.68c8.65-1.67%2C14.83-9.61%2C14.93-18.3.03-3.22-4.97-3.22-5%2C0Z%22/%3E%3Cpath d=%22M68.87%2C27.86c0%2C1.68-1.36%2C3.05-3.05%2C3.05s-3.05-1.36-3.05-3.05%2C1.36-3.05%2C3.05-3.05%2C3.05%2C1.36%2C3.05%2C3.05Z%22/%3E%3C/g%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 79 71.64%22%3E%3Cg transform=%22translate(1.7%2C1.7) scale(0.9570%2C0.9525)%22 stroke=%22black%22 stroke-width=%223%22 stroke-linejoin=%22round%22 stroke-linecap=%22round%22%3E%3Cpath d=%22M46.59%2C3.77c2.75%2C4.27%2C5.5%2C8.54%2C8.25%2C12.81.12.19.23.38.36.56.79%2C1.12%2C1.83%2C1.26%2C3.07%2C1.26h18.22l-2.5-2.5v53.25l2.5-2.5H2.5l2.5%2C2.5V15.89l-2.5%2C2.5h17.96c1.45%2C0%2C2.58-.14%2C3.46-1.44%2C1.49-2.2%2C2.88-4.47%2C4.32-6.7s2.79-4.32%2C4.18-6.48l-2.16%2C1.24h18.5C51.97%2C5.01%2C51.97.01%2C48.75.01h-15.47c-.92%2C0-1.84-.03-2.76%2C0-1.18.03-1.99.58-2.62%2C1.54-1.48%2C2.21-2.88%2C4.47-4.32%2C6.71s-2.74%2C4.25-4.11%2C6.38l2.16-1.24H2.5c-1.35%2C0-2.5%2C1.15-2.5%2C2.5v53.25c0%2C1.35%2C1.15%2C2.5%2C2.5%2C2.5h74c1.35%2C0%2C2.5-1.15%2C2.5-2.5V15.89c0-1.35-1.15-2.5-2.5-2.5h-19.12l2.16%2C1.24c-2.88-4.46-5.75-8.92-8.62-13.38-1.74-2.7-6.07-.19-4.32%2C2.52Z%22/%3E%3Cpath d=%22M53.19%2C40.99c-.06%2C5.58-3.5%2C10.87-8.83%2C12.81s-11.64.4-15.43-4.09-4.09-10.93-1.14-15.81%2C8.76-7.48%2C14.3-6.35c6.42%2C1.31%2C11.02%2C6.9%2C11.09%2C13.45.03%2C3.22%2C5.03%2C3.22%2C5%2C0-.08-7.86-4.98-14.82-12.34-17.57s-15.79-.36-20.66%2C5.57-5.82%2C14.83-1.71%2C21.62%2C12.06%2C10.17%2C19.78%2C8.68c8.65-1.67%2C14.83-9.61%2C14.93-18.3.03-3.22-4.97-3.22-5%2C0Z%22/%3E%3Cpath d=%22M68.87%2C27.86c0%2C1.68-1.36%2C3.05-3.05%2C3.05s-3.05-1.36-3.05-3.05%2C1.36-3.05%2C3.05-3.05%2C3.05%2C1.36%2C3.05%2C3.05Z%22/%3E%3C/g%3E%3C/svg%3E") no-repeat center / contain;
}
/*
   옛 도형의 부품(렌즈)을 없앤다.
   남겨 두면 그림 위에 동그라미가 겹쳐 그려진다.
   (::before 는 이제 그림 자체라서 여기서 빼면 안 된다)
*/
.sub_history .history_txt .hi-photo .icon::after {
    content: none;
}

/*
   지금 보고 있는 사진의 줄.

   전에는 네모를 파랑으로 꽉 채우고 안쪽 부품을 흰색으로 뒤집었다.
   mask 로 바뀌면서 "안쪽을 채우는" 방법이 없어졌다.
   색만으로 알리지 않는다는 원칙은 지켜야 하므로, 색을 진하게 하면서
   크기도 함께 키운다. 색을 못 가려도 커진 것은 보인다.
*/
/*
   글자도 함께 진해진다.

   이 규칙은 F17(카메라 그림 교체) 때 실수로 함께 지워졌다.
   그래서 "스크롤을 내리면 그 자리 글자색이 바뀌던 것" 이 사라졌다.
   되살린다. 카메라만 바뀌면 어느 줄을 보고 있는지 눈에 잘 안 들어온다 -
   글자가 굵어지고 진해져야 그 줄이 읽힌다.
*/
.sub_history .history_txt li.has-photo.is-shown .hi-photo {
    color: var(--hist-deep);
    font-weight: 600;
}
.sub_history .history_txt li.has-photo.is-shown .icon {
    /*
       색은 color 하나로 정한다.
       그림은 ::before 가 currentColor 로 칠하고 획을 부풀리는 그림자도
       currentColor 를 쓰므로, 여기 하나만 바꾸면 둘 다 따라온다.
       (전에는 background-color 도 함께 적었는데 이제 그 자리에는 그림이 없다)
    */
    color: var(--hist-deep);
    transform: scale(1.15);
}

/*
   마우스를 올렸을 때.

   전에는 background 에 옅은 파랑을 깔았는데, mask 에서는 background-color 가
   곧 그림의 색이라 그렇게 하면 카메라가 연한 파랑으로 흐려져 오히려 안 보인다.
   진하게 만든다.
*/
.sub_history .history_txt .hi-photo:hover .icon {
    color: var(--hist-deep);
}

/* 사진이 바뀌는 순간을 부드럽게 */
.sub_history .history_img .img_box img {
    transition: opacity 0.25s ease;
}
.sub_history .history_img .img_box img.is-changing {
    opacity: 0.25;
}

/*
   사진 자리를 화면에 따라오게 한다.
   글이 길어(2024년은 12건) 사진이 위로 사라지면 스크롤에 따라 사진이 바뀌어도
   그 사진이 보이지 않는다. 화면에 붙여 두면 내려가면서 계속 보인다.
*/
@media all and (min-width: 1025px) {
    .sub_history .history_img {
        position: sticky;
        top: 90px;
        align-self: flex-start;
    }
}

/*
   여러 해가 한 판에 함께 나올 때(설립 초기) 해가 바뀌는 자리 표시.
*/
.sub_history .hi-year-mark {
    margin: 0 0 14px;
    font-size: 26px;
    font-weight: 700;
    color: var(--hist-deep);
    letter-spacing: -0.02em;
}
.sub_history .history_txt > ul > li + li .hi-year-mark {
    margin-top: 26px;
}

@media all and (max-width: 768px) {
    .sub_history .hi-year-mark { font-size: 21px; }
    .sub_history .history_txt .hi-photo .icon { margin-left: 8px; }
}

/* 기기에서 "동작 줄이기" 를 켠 사람에게는 색이 서서히 바뀌는 효과를 주지 않는다 */
@media (prefers-reduced-motion: reduce) {
    .sub_history .history_txt .hi-photo .icon,
    .sub_history .history_txt .hi-photo .icon::before,
    .sub_history .history_txt .hi-photo .icon::after,
    .sub_history .history_img .img_box img {
        transition: none;
    }
}

/* =============================================================================
   사진형 목록 (활동소식 · 영상)

   레거시는 두 화면이 서로 달랐다.
     활동소식  __webzine-list            왼쪽 사진 + 오른쪽 글, 세로 목록
     영상      __webzine-list video_list 격자

   둘 다 사진이 주인공인 목록이라 격자로 통일한다(발주자 결정).

   원본 newstyle.css 의 .video_list 규칙은 .imgbox / .txtbox 를 겨냥하는데
   실제 화면의 태그는 .img / .info 다. 즉 그 규칙은 처음부터 적용되지 않고
   있었고, 대신 목록형 규칙(.box .img{float:left;width:25%})이 격자 안에서
   어정쩡하게 걸려 있었다. 여기서 실제 태그에 맞춰 다시 쓴다.
   ============================================================================= */
.__webzine-list.video_list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px 20px;
    border-top: 0;
}

.__webzine-list.video_list .box {
    padding: 0;
    border-bottom: 0;
    border-radius: 6px;
    background: #fff;
    box-shadow: 0 2px 8px 0 rgba(99, 99, 99, 0.2);
    overflow: hidden;
    transition: box-shadow 0.18s ease, transform 0.18s ease;
}
.__webzine-list.video_list .box:hover {
    box-shadow: 0 6px 18px 0 rgba(99, 99, 99, 0.28);
    transform: translateY(-2px);
}

/* 사진 자리 - 목록형에서 쓰던 float 을 푼다 */
.__webzine-list.video_list .box .img {
    float: none;
    width: 100%;
    padding: 0;
    aspect-ratio: 16 / 9;
    /*
       height: auto 가 반드시 있어야 한다.

       respond.css:611 에 미디어쿼리 밖의 무조건 규칙이 있다.
           .video_list .box .img { ... height: 190px; ... }
       여기 규칙이 명시도(클래스 4개)로 이기지만, height 는 여기서 정하지 않으니
       그 190px 이 그대로 살아남는다. 가로(100%)와 세로(190px)가 둘 다 정해지면
       브라우저는 aspect-ratio 를 무시한다. 그래서 위의 16/9 가 죽어 있었고
       상자 비율이 폭에 따라 1.5(1440) ~ 1.95(390) 로 흔들렸다.
       발주자가 "영상 목록 레이아웃이 살짝 틀어진 것 같다" 고 한 것이 이것이다.

       원본 respond.css 는 건드리지 않는다 (규칙 4). 여기서 되돌린다.
    */
    height: auto;
    border: 0;
    overflow: hidden;
}

/*
   상자를 꽉 채운다.

   위에서 .box .img 에 16/9 를 주어도, 안의 <img> 가 height:auto 라
   사진 비율대로만 자라서 상자 아래가 비거나 넘쳤다.
   .__photo 짜임새(흐린 채움 + 실제 사진)를 그대로 살린다.
     img-fill  상자를 채우는 흐린 배경  -> cover (잘려도 된다, 어차피 흐리다)
     img-main  진짜 보여줄 사진        -> contain (잘리면 안 된다)
   added.css 위쪽의 "공용: 사진 상자 .__photo" 설명과 같은 방식이다.
*/
.__webzine-list.video_list .box .img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.__webzine-list.video_list .box .img img.img-main {
    object-fit: contain;
}
.__webzine-list.video_list .box .img a {
    display: block;
    width: 100%;
    height: 100%;
}

/*
   글 자리.

   처음에는 제목 바로 아래에 날짜를 붙였더니 둘이 맞닿아 어색했다.
   제목이 두 줄이면 카드 아래 끝에 날짜가 걸쳐 보이기까지 했다.
   제목과 날짜 사이에 옅은 선을 하나 두고 위아래 여백을 준다.
   선이 있으면 제목이 한 줄이든 두 줄이든 날짜 자리가 늘 같아 보인다.
*/
.__webzine-list.video_list .box .info {
    float: none;
    width: 100%;
    height: auto;
    padding: 20px 18px 6px;
    text-align: left;
}
.__webzine-list.video_list .box .info .subject {
    margin: 0;
}
.__webzine-list.video_list .box .info .subject a {
    /*
       원본 영상 목록 규칙이 글자를 가운데로 모은다.
       격자에서는 제목만 가운데, 날짜는 왼쪽이라 어긋나 보였다. 둘 다 왼쪽으로.
    */
    text-align: left;
    font-size: 16px;
    line-height: 1.55;
    color: #1f2933;
    /*
       제목을 두 줄까지 보여주고 그다음은 … 로 줄인다.
       한 줄로 자르면 "MG희망나눔 …" 처럼 앞부분만 남아 무슨 글인지 알 수 없다.
       두 줄 높이를 미리 잡아 두어야 제목 길이가 달라도 카드 높이가 같다.
    */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    white-space: normal;
    overflow: hidden;
    height: 3.1em;
}
.__webzine-list.video_list .box .info .subject a:hover {
    color: #0c90e3;
}
/*
   날짜.

   원본은 목록형(왼쪽 사진 + 오른쪽 글)이라 날짜를 글 상자 맨 아래에 붙여 두었다.
       .__webzine-list .box .info .date { position:absolute; left:0; bottom:0; }
   격자형에서는 글 상자 높이가 제목 길이에 따라 달라지므로,
   그대로 두면 날짜가 제목 위로 겹쳐 올라온다. 실제로 겹쳐 보였다.
   자리를 차지하는 보통 요소로 되돌린다.
*/
.__webzine-list.video_list .box .info .date {
    position: static;
    margin: 16px 0 0;
    padding: 12px 0 14px;
    border-top: 1px solid #eef1f4;
    font-size: 14px;
    color: #9aa3af;
}

.__webzine-list.video_list .empty {
    grid-column: 1 / -1;
}

/* 화면이 좁아지면 칸 수를 줄인다. 12건이 4/3/2/1 로 나뉘어 떨어진다. */
@media all and (max-width: 1280px) {
    .__webzine-list.video_list { grid-template-columns: repeat(3, 1fr); }
}
@media all and (max-width: 900px) {
    .__webzine-list.video_list { grid-template-columns: repeat(2, 1fr); gap: 28px 16px; }
}
@media all and (max-width: 560px) {
    .__webzine-list.video_list { grid-template-columns: 1fr; gap: 22px; }
    .__webzine-list.video_list .box .info { padding: 15px 12px 16px; }
}

/* 좁은 화면에서는 사진을 위로 */
@media all and (max-width: 860px) {
}

@media all and (max-width: 480px) {
}

/* 기기에서 "동작 줄이기" 를 켠 사람에게는 움직임을 주지 않는다 */
@media (prefers-reduced-motion: reduce) {
}

/* =============================================================================
   화면 안 서브메뉴 (#svis .snb) - 칸 수에 맞춰 자동으로 나뉘게

   원본은 칸 수를 폭에 손으로 적어 두었다.
       #svis .snb li            { width: 16.666%; }   6칸 기준
       .sub2 #svis .snb li      { width: 25%; }       4칸 기준
   그래서 사업 소개에 "지난사업" 을 하나 더하자 다섯 번째가 아래 줄로 떨어졌다.
   메뉴가 늘고 줄 때마다 CSS 를 고쳐야 하는 구조다.

   flex 로 바꾸면 칸이 몇 개든 남은 폭을 똑같이 나눠 갖는다.
   글자는 칸이 좁아지면 함께 작아지고, 그래도 넘치면 … 로 줄인다.

   ── 769px 부터만 적용하는 까닭 (중요) ─────────────────────────
   원본은 좁은 화면에서 이 서브메뉴를 감춘다.
       respond.css 410줄  @media (max-width:768px) { #svis .snb { display:none } }
   휴대폰에서는 머리말의 ☰ 로 옮겨 다니게 되어 있다.

   그런데 여기 규칙에 미디어 조건이 없었다. 특이도가 같고(#svis .snb)
   added.css 가 respond.css 뒤에 실리므로 **display:flex 가 그 감추기를 덮었다.**
   발주자: "모바일에서 #svis .snb { display:none } 이게 먹어서 안 나와야 하는데
            나오고 있어. 우선 css 가 있나 봐" - 정확한 지적이다.

   원본 CSS 는 건드리지 않는다(CLAUDE.md 4장). 이쪽에 조건을 붙인다.
   ============================================================================= */
@media all and (min-width: 769px) {
    #svis .snb {
        display: flex;
        align-items: stretch;
    }
    #svis .snb li {
        flex: 1 1 0;
        width: auto !important;
        min-width: 0;
    }
    #svis .snb li a span {
        /*
           칸이 좁아지면 글자도 작아진다.
           1200px 폭을 다섯이 나누면 한 칸이 240px 인데,
           "취약지역 공동체발전 지원사업" 은 18px 로 250px 가 넘는다.
        */
        font-size: clamp(13px, 1.2vw, 18px);
        padding: 0 10px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

/* =============================================================================
   사진 크게 보기 (photo-zoom.js)

   덮개 하나에 사진 한 장. 사진은 잘리지 않게 contain 으로 넣는다.
   여기서는 흐린 채움(.__photo 방식)을 쓰지 않는다.
   크게 보려고 연 자리에서는 사진 바깥이 어두운 편이 사진이 더 잘 보인다.
   ============================================================================= */

/* 누를 수 있다는 표시. 자바스크립트가 켜졌을 때만 붙는다. */
.zoom-on [data-zoom] {
    cursor: zoom-in;
}
.zoom-on [data-zoom]:focus-visible {
    outline: 3px solid #0c90e3;
    outline-offset: 3px;
}

.__zoom {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(10, 16, 24, 0.88);
    opacity: 0;
    transition: opacity 0.2s ease;
}
.__zoom.is-open {
    opacity: 1;
}
.__zoom[hidden] {
    display: none;
}

.__zoom-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    max-width: 100%;
    max-height: 100%;
}
.__zoom-img {
    max-width: 92vw;
    max-height: 84vh;
    object-fit: contain;
    border-radius: 6px;
    background: #000;
    transform: scale(0.96);
    transition: transform 0.2s ease;
}
.__zoom.is-open .__zoom-img {
    transform: scale(1);
}
.__zoom-cap {
    margin: 0;
    max-width: 92vw;
    color: #e8edf3;
    font-size: 16px;
    line-height: 1.5;
    text-align: center;
}
.__zoom-cap[hidden] {
    display: none;
}

.__zoom-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 48px;
    height: 48px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    font-size: 30px;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s ease;
}
.__zoom-close:hover,
.__zoom-close:focus-visible {
    background: rgba(255, 255, 255, 0.3);
}
.__zoom-close:focus-visible {
    outline: 3px solid #7cc6f5;
    outline-offset: 2px;
}

@media (max-width: 767px) {
    .__zoom { padding: 12px; }
    .__zoom-img { max-height: 74vh; }
    .__zoom-cap { font-size: 14px; }
    .__zoom-close { top: 8px; right: 8px; width: 40px; height: 40px; font-size: 26px; }
}

/* 움직임을 줄여 달라고 설정한 이용자에게는 커지는 효과를 빼고 바로 보여 준다. */
@media (prefers-reduced-motion: reduce) {
    .__zoom,
    .__zoom-img { transition: none; }
    .__zoom-img { transform: none; }
}

/*
   구역 방식(data-zoom-scope)의 사진.
   표시(data-zoom)가 붙기 전에도 누를 수 있으므로 커서는 사진 크기로 판단해 준다.
   작은 아이콘까지 손 모양이 되지 않게 실제 폭이 240px 이 넘는 것만 고른다.
*/
.zoom-on [data-zoom-scope] img {
    cursor: zoom-in;
}
.zoom-on [data-zoom-scope] img[width]:not([width="0"]),
.zoom-on [data-zoom-scope] a img,
.zoom-on [data-zoom-scope] img[src$=".svg"] {
    cursor: auto;
}

/* -----------------------------------------------------------------------------
   연혁 사진이 스크롤로 나타나게

   전에는 판을 열자마자 그 해의 첫 사진이 이미 떠 있었고, 아무리 내려도
   바뀌지 않았다 (재어 보니 열한 해 모두 0번 바뀌었다).
   이제 화면이 그 항목에 닿으면 사진이 스르르 올라오며 나타난다.

   사진 자리를 sticky 로 붙여 둔 이유:
   그 해의 내용을 읽으며 내려가는 동안 사진이 위로 사라지면
   "이 글에 붙은 사진" 이라는 관계가 끊긴다. 읽는 동안 옆에 남아 있게 한다.

   자바스크립트가 없으면 js-on 이 붙지 않아 이 규칙이 하나도 걸리지 않는다.
   그때는 예전처럼 사진이 처음부터 그냥 보인다.
   ----------------------------------------------------------------------------- */
.sub_history .history_img {
    position: sticky;
    /* 머리글이 따라다니지 않으므로 화면 위에서 조금만 띄우면 된다 */
    top: 30px;
    align-self: flex-start;
}
/*
   나타나는 효과는 사진 상자(.img_box)에만 준다.

   전에는 .history_img 통째로 opacity:0 을 걸었다. 그러면 그 안의 사진뿐 아니라
   ::before(점 무늬)와 ::after(동그라미)까지 같이 사라진다. 화면을 끝까지 내려야
   무늬가 나타나서, 처음 들어온 사람에게는 그 자리가 그냥 비어 보였다.
   발주자가 "무늬는 스크롤 안 해도 고정적으로 나와야 한다" 고 한 것이 이것이다.

   무늬는 늘 보이고, 사진만 스르르 올라온다.

   :not(.history_img--empty) 인 이유
     사진이 없는 해에는 기본 그림(thumbs_zero2.png)이 들어간다. 그 판에는
     li.has-photo 가 하나도 없어서 history.js 가 일찍 return 하고
     is-revealed 를 영영 붙이지 않는다. 여기서 걸러 두지 않으면
     기본 그림이 opacity:0 인 채로 남아 "또 빈 자리" 가 된다.
*/
.sub_history.js-on .history_img:not(.history_img--empty) .img_box {
    opacity: 0;
    /*
       올라오는 움직임도 .img_box 에만 준다.
       .history_img 에 transform 을 걸면 그 자체가 쌓임 맥락이 되어
       z-index:-1 로 뒤에 깔아 둔 동그라미·점 무늬가 제자리를 잃는다.
    */
    transform: translateY(28px);
    transition: opacity 0.45s ease, transform 0.45s ease;
}
.sub_history.js-on .history_img.is-revealed .img_box {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .sub_history.js-on .history_img,
    .sub_history.js-on .history_img .img_box {
        opacity: 1;
        transform: none;
        transition: none;
    }
}
/*
   원본의 좁은 화면 값.
   기준점이 840px 이다. 이 사이트의 다른 곳이 767px 를 쓴다고 여기까지 767px 로 잡으면
   768~840px 구간에서 원본과 다르게 보인다. 원본 global.css 를 그대로 따른다.

       @media all and (max-width:840px) {
           .bullet_box .btn     { border-radius:5px; font-size:14px }
           .bullet_box .btn img { max-width:14px }
       }
*/
@media (max-width: 840px) {
}

/* 읽어 주는 프로그램에만 들리는 글 */
.__sr {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@media (max-width: 767px) {
}

/*
   영상 게시판 상세의 유튜브 재생기.

   전에는 이 자리에 "기사 원문 https://www.youtube.com/watch?v=…" 라는 글자와
   "다운로드 logos_1200x675.png (318 KB)" 만 있었다. 영상이 재생되지 않았다.
   언론보도·일반 첨부 상세 화면을 그대로 쓰고 있었기 때문이다.

   16:9 로 자리를 미리 잡아 두어야 재생기가 늦게 떠도 아래 글이 튀지 않는다.
*/
.__video-frame {
    position: relative;
    width: 100%;
    margin: 0 0 34px;
    aspect-ratio: 16 / 9;
    border-radius: 10px;
    overflow: hidden;
    background: #000;
}
.__video-frame iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}
@media (max-width: 767px) {
    .__video-frame { margin-bottom: 22px; border-radius: 6px; }
}

/*
   사진이 없는 해의 "보이지 않는 사진 자리".

   자리만 잡고 아무것도 그리지 않는다.
   .history_img 와 같은 class 를 쓰므로 폭·여백·접히는 규칙을 그대로 물려받는다.
   그래서 연도 탭을 넘겨도 글 덩어리가 같은 자리에 머문다.

   지워야 할 것
     ::before / ::after  점 무늬와 큰 동그라미 (사진을 꾸미는 장식이라 빈칸에는 안 맞는다)
     opacity 0           js-on 일 때 사진 칸을 감추는 규칙. 빈칸은 늘 그대로 있어야
                         자리를 지킨다 (감춰도 자리는 남지만, 뜻이 헷갈리니 명시한다)
     sticky              따라다닐 사진이 없으므로 붙일 이유가 없다
*/
/*
   사진이 없는 해.

   전에는 여기에 아무것도 없는 빈 칸을 두었다. 자리만 잡고 눈에는 안 보이게
   하려고 무늬(::before/::after)까지 지웠다.

   이제는 기본 그림(thumbs_zero2.png)이 들어간다. 사진이 있는 해와 똑같이
   보여야 하므로 무늬를 지우던 규칙을 뺀다. position:static 도 뺀다 -
   무늬가 absolute 로 이 상자를 기준 삼기 때문에 static 이면 엉뚱한 곳에 붙는다.

   pointer-events 는 그대로 none 이다. 기본 그림은 눌러도 할 일이 없다.
*/
.sub_history .history_img--empty,
.sub_history.js-on .history_img--empty {
    opacity: 1;
    pointer-events: none;
}
/*
   기본 그림.

   발주자: "박스 안에 꽉 차게 나와야 하는데 여백이 너무 보인다.
           안에 배경은 약간 회색이던데 흰색으로 가능해?"

   여백  처음에는 60% 로 작게 놓았다. 상자를 꽉 채우게 바꾼다.
         thumbs_zero2.png 이 1200x801(=1.498)이고 이 상자가 600x400(=1.5)이라
         비율이 거의 같다. contain 으로 채워도 잘리지 않고 빈틈도 안 남는다.

   회색  이 그림은 배경이 투명이 아니라 #efefef 가 파일에 박혀 있다
         (모서리 픽셀을 재어 확인: 239,239,239 alpha 255).
         그래서 .img_box 를 흰색으로 해도 그림 안쪽은 회색으로 남았다.

         발주자가 준 파일이라 고치지 않는다. 이 그림은 영상·활동소식 목록의
         대체 그림으로도 쓰여서(F9), 파일을 바꾸면 그쪽까지 함께 바뀐다.
         여기서만 밝기를 올려 239 를 255 로 만든다 (255/239 = 1.067).
         로고 색도 6.7% 밝아지지만, 대체용 그림이라 눈에 띄지 않는다.
*/
.sub_history .history_img--empty .img_box {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
}
.sub_history .history_img--empty .img_box img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    /* #efefef 를 흰색으로. 위 설명 참고 */
    filter: brightness(1.067);
}


/* ══════════════════════════════════════════════════════════════════════
   팝업

   .__popup 의 생김새는 원본 global.css 525~539 줄에 그대로 있다.
   (배경 흰색 / 테두리 #ddd / 아래띠 #1f4bb4 / 좁은 화면에서 화면 폭에 맞춤)
   그 파일은 발주자가 직접 고칠 원본이라 손대지 않는다.
   여기에는 원본에 없던 것만 더한다.

   여닫는 동작은 원본 js/global.js 의 popup 객체가 그대로 한다 (367~399 줄).
   쿠키를 보고 show / [닫기] 로 fadeOut / "오늘하루" 를 켜면 쿠키 저장 /
   draggable() 로 끌어 옮기기. 그 파일은 모든 화면에서 이미 부르고 있다.

   그래서 여기서 opacity 에 transition 을 걸면 안 된다.
   jQuery 의 fadeOut 은 inline opacity 를 여러 단계로 직접 바꾸는 방식이라,
   그 위에 CSS 전환을 얹으면 단계마다 전환이 겹쳐 뭉개진다.
   (같은 일을 하는 js/popup.js 를 따로 만들었다가 지운 것도 같은 이유다.
    닫기 단추에 처리기가 둘 붙어 쿠키를 두 번 쓰고 있었다)

   원본에 없던 것이 왜 필요한가
     사진 밑 틈   원본 팝업은 .area 안에 <img> 하나를 넣는다. <img> 는 글자
                  취급이라 밑줄 자리만큼(약 4px) 흰 틈이 생긴다. 원본은
                  .area 에 padding:10px 이 있어 눈에 안 띄었는데, 사진만 넣는
                  지금은 style="padding:0" 이라 그 틈이 그대로 보인다.
     키 큰 사진   아래쪽을 볼 방법이 없던 문제 (아래 참고)
   ══════════════════════════════════════════════════════════════════════ */

/*
   사진 밑 틈 없애기.
   원본의 .__popup .area * { max-width:100%; height:auto !important; } 는 그대로 둔다.
*/
.__popup .area img { display: block; }
.__popup .area a { display: block; }

/*
   키가 큰 사진이 화면 밖으로 나가는 것을 막는다.

   원본은 좁은 화면에만 max-height:80vh 를 걸었다. PC 에서는 제한이 없는데,
   .__popup 이 position:fixed 라서 화면보다 긴 팝업은 아래쪽을 볼 방법이 없다.
   [닫기] 단추가 그 아래에 있으면 닫지도 못한다.
*/
.__popup .area { max-height: 78vh; }

/*
   끌어 옮길 수 있다는 것을 알린다 (원본 global.js 의 a.draggable()).
   사진과 단추 위에서는 본래 모양대로 둔다.
   .ui-draggable-dragging 은 jQuery UI 가 끄는 동안 붙이는 이름이다.
*/
.__popup { cursor: move; }
.__popup .bot { cursor: auto; }
.__popup .bot button,
.__popup .bot label { cursor: pointer; }
/*
   팝업 사진에 링크가 걸려 있으면 손가락 모양이어야 한다.

   전에는 .__popup a 에 cursor:auto 를 주었다. 상자 전체가 cursor:move 라
   "사진 위에서는 본래 모양으로 되돌린다" 는 뜻이었는데, <a> 의 본래 모양은
   브라우저 기본 규칙으로 pointer 다. auto 로 덮으면 그 규칙까지 지워져
   화살표가 된다. 발주자가 "링크 넣어서 주소 이동은 잘 되는데 마우스를 대면
   손가락 모양이 안 된다" 고 한 것이 이것이다.

   href 가 있는 것만 pointer 로 둔다. 주소가 없는 <a> 는 눌러도 갈 곳이 없으므로
   손가락을 보이면 안 된다 (팝업은 링크를 비워 둘 수 있다).
*/
.__popup a[href]:not([href=""]):not([href="#"]) { cursor: pointer; }
.__popup a:not([href]),
.__popup a[href=""],
.__popup a[href="#"] { cursor: move; }
.__popup.ui-draggable-dragging { user-select: none; }

/*
   닫기 단추를 손가락으로 누를 만한 크기로.
   원본은 글자 그대로 "[닫기]" 라서 누를 자리가 30px 남짓이었다.
   생김새(색·글자크기)는 원본 그대로 두고 누를 자리만 넓힌다.
*/
.__popup .bot button {
    padding: 4px 6px;
    min-height: 28px;
}

/* 키보드로 옮겨 다닐 때 어디에 있는지 보이게 */
.__popup .bot button:focus-visible,
.__popup .area a:focus-visible {
    outline: 2px solid #fff;
    outline-offset: -3px;
}
.__popup .area a:focus-visible { outline-color: #1f4bb4; }


/* =============================================================================
   문의 - 안내 문구와 접수 완료 화면

   .form-message / .form-error 는 admin.css 에만 정의돼 있었다.
   공개 사이트는 그 파일을 부르지 않으므로, 문의 화면의 안내와 오류가
   본문에서 가장 작고 흐린 글씨 한 줄로 나왔다.
   "스팸방지 문자가 맞지 않습니다" 같은 오류도 눈에 안 띄어서
   발주자에게는 "넣었는데 아무 반응이 없다" 로 보였다.
   ============================================================================= */
#content .form-message,
#content .form-error {
    margin: 0 0 24px;
    padding: 14px 18px;
    border-radius: 8px;
    font-size: 16px;
    line-height: 1.6;
    word-break: keep-all;
}
#content .form-message {
    border: 1px solid #c3e6c8;
    background: #e8f5e9;
    color: #1b5e20;
}
#content .form-error {
    border: 1px solid #f3c6c2;
    background: #fdecea;
    color: #b3261e;
}

/* ---- 접수 완료 화면 (templates/inquiry/done.html) ---- */
.__done {
    max-width: 640px;
    margin: 40px auto 80px;
    padding: 48px 32px;
    border: 1px solid #e1e6eb;
    border-radius: 16px;
    background: #fff;
    text-align: center;
}

/* 동그라미 안의 체크 표시. 그림 파일을 두지 않는다 -
   /images/ 는 운영에서 nginx 가 디스크로 직접 주므로 jar 에 넣어도 404 다. */
.__done-mark {
    width: 76px;
    height: 76px;
    margin: 0 auto 24px;
    border-radius: 50%;
    background: #e8f5e9;
    position: relative;
}
.__done-mark::after {
    content: "";
    position: absolute;
    top: 26px;
    left: 27px;
    width: 20px;
    height: 34px;
    border: solid #1b5e20;
    border-width: 0 4px 4px 0;
    transform: rotate(45deg);
    transform-origin: center;
    margin-top: -6px;
}

.__done-title {
    margin: 0 0 12px;
    font-size: 28px;
    font-weight: 700;
    color: #1f2933;
    letter-spacing: -0.02em;
}

.__done-text {
    margin: 0 0 32px;
    font-size: 17px;
    line-height: 1.7;
    color: #5b6672;
    word-break: keep-all;
}

.__done-btns {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}

.__done-btn {
    display: inline-block;
    padding: 13px 30px;
    border: 1px solid #d5dbe1;
    border-radius: 999px;
    font-size: 16px;
    color: #5b6672;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.__done-btn:hover {
    border-color: #85b5e6;
    color: #0c90e3;
}

.__done-btn--main {
    border-color: #1C335C;
    background: #1C335C;
    color: #fff;
    font-weight: 600;
}
.__done-btn--main:hover {
    background: #0099DA;
    border-color: #0099DA;
    color: #fff;
}

.__done-btn:focus-visible {
    outline: 3px solid #7cc6f5;
    outline-offset: 2px;
}

@media all and (max-width: 640px) {
    .__done { margin: 24px auto 56px; padding: 36px 20px; }
    .__done-title { font-size: 23px; }
    .__done-text { font-size: 15px; }
    .__done-btns { flex-direction: column; }
    .__done-btn { width: 100%; padding: 14px 20px; }
}

/* =============================================================================
   기본 그림 (thumbs_zero2.png) 이 들어간 자리

   메인 영상 자리와 목록 썸네일에서, 등록된 사진이 없으면 이 그림이 들어간다.
   그런데 이 파일은 배경이 투명이 아니라 #efefef 가 박혀 있다
   (모서리 픽셀 확인: 239,239,239 alpha 255).
   그대로 두면 상자 안에 회색 네모가 하나 더 있는 것처럼 보이고,
   흐린 채움(.img-fill / .video-widget-thumb-fill)까지 회색을 번지게 한다.

   연혁에서 먼저 겪고 고친 것과 같은 방식이다.
     - 흐린 채움은 끈다 (채울 것이 회색뿐이라 뿌옇기만 하다)
     - 바탕을 흰색으로
     - brightness(1.067) 로 239 를 255 로 올린다

   발주자가 준 파일이라 파일 자체는 고치지 않는다. 여기서만 다르게 그린다.
   ============================================================================= */
.__photo:has(img[src$="thumbs_zero2.png"]),
.video-widget-cover:has(img[src$="thumbs_zero2.png"]) {
    background-color: #fff;
}
img.img-fill[src$="thumbs_zero2.png"],
img.video-widget-thumb-fill[src$="thumbs_zero2.png"] {
    display: none;
}
img.img-main[src$="thumbs_zero2.png"],
img.video-widget-thumb[src$="thumbs_zero2.png"] {
    object-fit: contain;
    filter: brightness(1.067);
}

/* =============================================================================
   게시판 뷰 - 첨부파일 목록

   발주자: "각 사용자 페이지 게시판 뷰 페이지에 다운로드 하고 파일 이름만 있으니
           파일이 있는지 잘 모르겠어. 파일 이름 앞에 파일 이모티콘 같은 게 있으면 좋겠어"

   전에는 "다운로드  2026년 사업계획.hwp (1.2 MB)" 처럼 글자만 늘어놓았다.
   그것이 누를 수 있는 파일인지, 그냥 적어 둔 말인지 구별되지 않았다.

   두 가지를 고친다.
     1) 파일 이름 앞에 문서 그림을 붙인다
     2) 여러 개면 줄마다 나눈다
        원본 CSS 가 li 안의 <br> 을 감추고 있어서(global.css) 파일이 셋이면
        한 줄에 다 붙었다. 이제 공지사항·재정보고에 여러 개를 올리므로 더 그렇다.
   ============================================================================= */

/*
   "다운로드" 와 파일 목록을 **날짜 오른쪽 같은 줄**에 놓는다.

   발주자: "게시판 뷰 페이지 다운로드 이미지가 날짜 밑에 떠서 배열이 이상해 보여.
            날짜 오른쪽에 뜨게 하고, 파일 리스트도 한 줄로 해 줘. 줄바꿈 말고"

   원본 .info li 는 inline-block 으로 가로로 늘어놓는 줄이다 (global.css).
   그런데 여기에 display:flex 를 주면서 블록이 되어 제 줄을 차지했고,
   그래서 날짜 아래로 내려갔다. inline-flex 면 flex 배치를 쓰면서도
   원본의 가로 흐름에 그대로 남는다.
*/
/*
   날짜 줄 자체를 flex 로 바꾼다.

   inline-flex 만으로는 모자랐다. 원본 .info 는 li 를 inline-block 으로 늘어놓는데,
   그 흐름에서는 **묶음이 통째로** 다음 줄로 밀린다. 첨부가 다섯 개인 실제 글
   (2020년 결산서류)에서 재어 보니 파일 이름 합이 한 줄을 넘어 날짜 아래로 내려갔다.
       날짜 814 / 다운로드 835   <- 같은 줄이 아니다

   flex 로 두고 첨부 묶음에 남는 폭을 다 주면, 묶음은 날짜 오른쪽 제자리에서
   시작하고 넘치는 파일만 그 안에서 접힌다.

   첨부가 있는 글에만 건다 (:has). 다른 게시판 뷰의 배치는 건드리지 않는다.
*/
/*
   세로 가운데로 맞춘다.

   처음에 baseline 으로 두었더니 첨부가 두 줄일 때 날짜가 첫 줄 글자선에 붙어
   위로 쏠려 보였다. 발주자: "날짜 오른쪽에 잘 나오는데 위에 붙어 있게 나오고 있어.
   align-items: center 라도 해야 할 듯해"
   맞는 말이다. 한 줄짜리(날짜)와 여러 줄짜리(첨부)를 나란히 놓을 때는
   가운데가 자연스럽다.
*/
.__board-view .top .info:has(li.__files) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}
.__board-view .top .info li.__files {
    display: flex;
    align-items: center;
    gap: 5px;
    /*
       남는 폭을 다 쓴다.

       flex-basis 를 0 으로 두는 것이 핵심이다. auto 로 두면 "제 내용 폭"
       (파일 다섯 개를 한 줄로 늘어놓은 1400px 남짓)을 먼저 요구하고,
       남는 자리 1102px 보다 크므로 **묶음이 통째로 다음 줄로 밀린다.**
       실제로 그렇게 나왔다 - 날짜 814 / 다운로드 835.
       0 이면 내용 폭을 요구하지 않고 남는 자리를 받아, 날짜 오른쪽에서 시작하고
       넘치는 파일만 그 안에서 접힌다.

       min-width:0 도 함께 있어야 한다. 없으면 flex 항목이 최소 내용 폭 아래로
       줄지 않아 결국 넘친다.
    */
    flex: 1 1 0;
    min-width: 0;
}
/*
   파일들도 한 줄로 늘어놓는다.

   전에는 세로로 쌓았다. 첨부가 여러 개일 때 어디까지가 한 파일인지 보이게
   하려던 것인데, 날짜 줄과 어긋나 보인다는 지적을 받았다.
   이름 앞에 문서 그림이 있어 한 줄에 이어 놓아도 구분이 된다.

   wrap 은 남겨 둔다. "줄바꿈 말고" 는 **일부러 줄을 나누지 말라**는 뜻이지
   좁은 화면에서 화면 밖으로 밀고 나가라는 뜻이 아니다. 자리가 모자랄 때만 접힌다.
   파일 사이는 14px 로 벌린다 - 4px 이면 앞 파일의 크기와 다음 그림이 붙어 보인다.
*/
.__board-view .top .info li.__files .__files-in {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 14px;
    min-width: 0;
}

/*
   파일 한 줄.
   그림과 이름이 같은 눈높이에 오도록 inline-flex 로 묶는다.
   원본은 a + a 에 margin-left:10px 을 주어 옆으로 붙였다. 세로로 쌓으므로 푼다.
*/
.__board-view .top .info li.__files .__file {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: 0;
    color: #0c90e3;
    text-decoration: none;
}
.__board-view .top .info li.__files .__file:hover .__file-name,
.__board-view .top .info li.__files .__file:focus-visible .__file-name {
    text-decoration: underline;
}

/*
   문서 그림.

   글자(::before content)가 아니라 그림으로 그린다.
   이모티콘 글자(📄)는 기기마다 모양과 색이 달라서 - 윈도우·안드로이드·아이폰이
   전부 다른 그림을 그린다 - 화면이 기기마다 달라 보인다.
   mask 로 그리면 어디서나 같은 모양이고 색도 글자색을 따라온다.

   여기서는 filter 를 쓰지 않는다. 획을 굵히려고 mask 와 filter 를 같은 요소에
   걸면 아무 일도 일어나지 않는다 (연혁 카메라에서 겪었다 - 그리는 차례가
   filter -> clip -> mask 라 그림자가 오려 내기 전에 깔린다).
*/
.__board-view .top .info li.__files .__file .__file-name::before {
    content: "";
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-right: 6px;
    vertical-align: -2px;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath d=%22M13.2 2H6.5A2.5 2.5 0 0 0 4 4.5v15A2.5 2.5 0 0 0 6.5 22h11a2.5 2.5 0 0 0 2.5-2.5V8.8h-4.9a1.9 1.9 0 0 1-1.9-1.9V2Z%22/%3E%3Cpath d=%22M14.9 2.4v4.3c0 .5.4.9.9.9h4.3l-5.2-5.2Z%22/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath d=%22M13.2 2H6.5A2.5 2.5 0 0 0 4 4.5v15A2.5 2.5 0 0 0 6.5 22h11a2.5 2.5 0 0 0 2.5-2.5V8.8h-4.9a1.9 1.9 0 0 1-1.9-1.9V2Z%22/%3E%3Cpath d=%22M14.9 2.4v4.3c0 .5.4.9.9.9h4.3l-5.2-5.2Z%22/%3E%3C/svg%3E") no-repeat center / contain;
}

/* 파일 크기는 이름보다 조용하게 */
.__board-view .top .info li.__files .__file .size {
    color: #999;
}

@media all and (max-width: 640px) {
    /*
       좁은 화면에서는 "다운로드" 를 위로 올리고 목록을 아래로.
       가로로 두면 파일 이름 자리가 100px 도 안 남는다.
    */
    .__board-view .top .info li.__files {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }
    /* 그때는 파일도 줄마다 나눈다. 좁은 폭에 이어 놓으면 어디까지가 한 파일인지 모른다 */
    .__board-view .top .info li.__files .__files-in {
        flex-direction: column;
        gap: 4px;
    }
}