/* =============================================================================
   사업소개 카드

   이 규칙들은 원래 added.css 에 있었다. 두 화면이 같이 쓰게 되어 떼어 냈다.

       공개  templates/business/program.html   방문자가 보는 카드
       관리  templates/admin/business-form.html 그 카드를 그대로 놓고 고치는 화면

   관리자 화면을 공개 화면과 똑같이 보이게 하는 것이 이 파일의 존재 이유다.
   베껴 쓰지 않고 같은 파일을 부른다. 베껴 두면 한쪽만 고쳤을 때
   "관리자에서 본 모습" 과 "실제 화면" 이 어긋나는데, 그게 없애려던 문제다.

   added.css 를 관리자 화면에 통째로 부르지 못하는 이유는
   그 안에 body, body * { font-family: … } 가 있어서
   그 화면만 글꼴이 달라지기 때문이다.

   공개 화면은 added.css 다음에 이 파일을 부른다 (겹침 차례가 유지된다).
   ============================================================================= */



/* ============================================================
   메인 - 사진이 기기마다 다르게 잘리던 문제

   원본은 사진을 배경(background-image)으로 넣고 cover 로 채웠다.
   cover 는 상자를 꽉 채우는 대신 넘치는 부분을 잘라낸다.
   그런데 상자 비율이 화면 폭에 따라 이만큼 달라졌다.

     사업소개 박스   1440px 0.61  →  390px 1.16
     활동소식 카드   1440px 1.11  →  320px 0.76

   원본 사진은 전부 가로가 긴 것들이다(1.78 / 1.50 / 1.40 / 1.33).
   그걸 세로로 긴 상자에 cover 하면 좌우가 크게 잘리고,
   폭이 바뀔 때마다 잘리는 부분이 달라진다.
   재단에 "누구 폰에서는 이렇게 보이고 누구 폰에서는 다르게 보인다" 는
   항의가 들어온 것이 이 때문이다.

   고치는 방법 두 가지를 함께 쓴다.
     1) 상자 비율을 고정한다  -> 어느 기기에서든 같은 모습
     2) 사진을 잘라내지 않는다 -> contain (전체가 다 보인다)
   ============================================================ */

/* ------------------------------------------------------------
   방식: 잘라내지도 않고, 흰 여백도 남기지 않는다

   처음에는 상자 비율을 고정하고 contain 만 걸었다. 잘림은 없어졌지만
   이번에는 사진과 상자의 비율이 다른 만큼 빈 자리가 흰색으로 남았다.
   특히 사업소개는 사진 4장의 비율이 전부 달라서
   (1.78 / 1.50 / 1.40 / 1.33) 상자 비율을 무엇으로 잡아도
   반드시 어느 한 장은 잘리거나 여백이 생긴다.

   그래서 남는 자리를 같은 사진의 "흐리게 확대한 복사본" 으로 채운다.

       +---------------------+
       |  흐린 확대본 (채움) |
       +---------------------+
       |  원본 사진 (선명)   |   <- 잘리지 않은 전체
       +---------------------+
       |  흐린 확대본 (채움) |
       +---------------------+

   이러면 세 가지가 동시에 성립한다.
     - 사진이 잘리지 않는다      (contain)
     - 빈 흰 여백이 없다         (흐린 채움)
     - 기기가 달라도 같아 보인다 (사진 전체가 늘 보이므로)

   확대(scale)를 함께 거는 이유: 흐리게 하면 가장자리가 투명해져
   테두리에 얇은 띠가 생긴다. 조금 키워서 그 부분을 화면 밖으로 밀어낸다.
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   공용: 사진 상자  .__photo

   사진을 넣는 자리에는 어디든 이걸 쓴다. 안에 <img> 두 장을 넣는다.

       <div class="__photo">
         <img class="img-fill" src="사진주소" alt="" aria-hidden="true">
         <img class="img-main" src="사진주소" alt="설명">
       </div>

   주소가 같으므로 브라우저는 사진을 한 번만 내려받는다.

   CSS 배경(background-image)을 쓰지 않는 이유
     - 배경은 지연 로딩(loading="lazy")이 안 된다
     - 화면 크기별로 다른 파일을 주는 srcset 을 못 쓴다
     - 크기(width/height)를 미리 알려줄 수 없어 글이 밀린다
     - 발주자가 사진을 바꾸려면 CSS 를 열어야 한다 (HTML 만 고치면 되게)
   ------------------------------------------------------------ */
.__photo {
    position: relative;
    overflow: hidden;
    background-color: #e9edf1;
}


/*
   자식 선택자(>)가 아니라 자손 선택자를 쓴다.
   화면 크기별로 다른 사진을 주려고 <picture> 로 감싸면
   <img> 가 .__photo 의 직접 자식이 아니게 되기 때문이다.
*/
.__photo img {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
}


.__photo .img-fill {
    object-fit: cover;
    filter: blur(18px);
    transform: scale(1.15);
}


.__photo .img-main {
    object-fit: contain;
}



/* =============================================================================
   사업소개 (올해 사업)

   참고한 화면(ccfd.or.kr)의 짜임새를 따랐다.
     왼쪽 사진 (3분의 1) + 오른쪽 내용 (3분의 2)
     제목 앞에 작은 딱지, 그 아래 항목별 내용(정의 목록)

   마우스를 올리면 카드가 살짝 떠오르고 사진이 조금 커진다.
   ============================================================================= */
.__biz-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 26px;
    padding-bottom: 14px;
    border-bottom: 2px solid #2b3b4e;
}


.__biz-head h3 {
    margin: 0;
    font-size: 26px;
    font-weight: 700;
    color: #1f2933;
    letter-spacing: -0.02em;
}


.__biz-head h3 span { color: #0c90e3; }



.__biz-past {
    flex: 0 0 auto;
    padding: 8px 16px;
    border: 1px solid #d5dbe1;
    border-radius: 999px;
    font-size: 15px;
    color: #5b6672;
    white-space: nowrap;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}


.__biz-past:hover {
    background: #0c90e3;
    border-color: #0c90e3;
    color: #fff;
}



.__biz-list {
    display: flex;
    flex-direction: column;
    gap: 26px;
}



/*
   테두리를 두껍게 해서 카드가 카드로 보이게 한다.
   1px 회색은 참고한 화면보다 흐려서 상자처럼 보이지 않았다.

   2px #e1e6eb / 모서리 14px 로 시작했는데, 발주자가 5px #f0f0f0 / 모서리 10px 로
   바꿨다. 색을 옅게 하고 대신 두껍게 한 것이라 테두리가 선이 아니라 여백처럼 읽힌다.
   마우스를 올렸을 때도 진한 파랑(#0c90e3)이 아니라 옅은 파랑(#85b5e6)이다.
*/
.__biz-item {
    display: flex;
    align-items: stretch;
    gap: 36px;
    padding: 28px;
    border: 5px solid #f0f0f0;
    border-radius: 10px;
    background: #fff;
    transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}


.__biz-item:hover {
    border-color: #85b5e6;
    box-shadow: 0 12px 30px 0 rgba(12, 144, 227, 0.18);
    transform: translateY(-4px);
}



/* 왼쪽 사진 */
/*
   33% 였다. 사진에 견주어 글 칸이 너무 넓어 보였다.
   1440px 에서 사진 374px / 글 724px 이었는데, 아래에서 항목을 세로로 쌓으면서
   글이 짧은 줄로 끊기니 724px 이 더 휑해졌다.
   45% 로 넓혀 사진 510 / 글 588 로 맞춘다. 사진 높이가 383px 이 되어
   글 덩어리 높이와 비슷해지므로 카드 높이를 사진이 혼자 끌고 가지 않는다.
   860px 아래는 사진이 width:100% 로 접히므로 이 값과 무관하다.
*/
.__biz-img {
    flex: 0 0 45%;
    align-self: flex-start;
    aspect-ratio: 4 / 3;
    border-radius: 10px;
}


/*
   마우스를 올리면 사진만 조금 커진다.
   상자에 overflow:hidden 이 있어(.__photo) 커진 부분은 상자 밖으로 나가지 않는다.
*/
.__biz-img .img-main {
    transition: transform 0.35s ease;
}


.__biz-item:hover .__biz-img .img-main {
    transform: scale(1.06);
}



/* 오른쪽 내용 */
.__biz-body {
    flex: 1 1 0;
    min-width: 0;
}


/*
   사업명.

   #1f2933(먹빛) -> #85b5e6(옅은 파랑) -> #1C335C(남색) 으로 바뀌어 왔다.
   #1C335C 는 "활동" 단추와 같은 색이라 카드 안에서 색이 둘로 늘지 않는다.
   옅은 파랑은 흰 바탕에서 대비가 낮아 제목치고 흐렸다.
*/
.__biz-body h4 {
    margin: 0 0 14px;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.4;
    color: #1C335C;
    letter-spacing: -0.02em;
}


.__biz-chip {
    display: inline-block;
    margin-bottom: 8px;
    padding: 4px 12px;
    border-radius: 999px;
    background: #eaf4fc;
    color: #0c6fb0;
    font-size: 14px;
    font-weight: 600;
    vertical-align: middle;
}


.__biz-chip + .__biz-title { display: block; }



.__biz-sum {
    margin: 0 0 18px;
    font-size: 16px;
    line-height: 1.7;
    color: #5b6672;
    word-break: keep-all;
}



/*
   항목별 내용.

   전에는 이름과 값을 두 칸으로 나란히 놓았다 (grid-template-columns: 96px 1fr).
   "기간" 과 "2월~11월" 이 좌우로 갈라져 보이는 것이 어색해서 한 칸으로 바꾼다.
   이름 아래로 값이 떨어진다.

   gap 은 좁게(4px) 두어 이름과 제 값을 붙여 놓고,
   항목 사이만 아래에서 margin 으로 벌린다.

   ── 격자(grid)에서 flex 로 바꾼 까닭 ────────────────────────
   "활동" 한 이름 아래에 단추를 여러 개 달 수 있게 되면서
   (BusinessProgram.detailGroups) 단추가 세로로 하나씩 쌓였다.

   발주자: "버튼은 지금 활동에서 2개 만들었는데 밑으로 떨어지더라고.
            이거 기존 버튼 오른쪽으로 나와야 해. 계속 추가, 그러다가
            반응형이나 길이 안 맞을 시 떨어지게 해야 해"

   한 칸짜리 격자에서는 줄마다 한 칸씩 내려간다. 나란히 놓을 방법이 없다.
   flex + wrap 으로 바꾸면
     · 이름(dt)은 제 줄을 통째로 쓰고 (flex-basis 100%)
     · 값(dd)이 단추면 제 크기만 차지해 앞 단추 오른쪽에 선다
     · 폭이 모자라면 그때 아래로 떨어진다
   가 한 번에 된다.

   column-gap 을 8px 로 둔 이유: 나란히 선 단추 사이가 4px 이면 붙어 보인다.
   세로(row-gap)는 그대로 4px 이라 이름과 값은 예전처럼 붙어 있다.
*/
.__biz-body dl {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 8px;
    margin: 0;
    padding-top: 16px;
    border-top: 1px solid #eef1f4;
}

/* 이름은 늘 제 줄을 통째로 쓴다 */
.__biz-body dt {
    flex: 0 0 100%;
}

/*
   값의 폭.

   단추가 아닌 값(기간·내용 같은 글)은 제 줄을 통째로 쓴다. 글이므로
   옆에 다른 것이 붙으면 읽기 어렵다.
   단추인 값만 제 크기만 차지해 나란히 선다.

   :has() 로 가른다. 화면(program.html)이 단추일 때만 .__biz-state 를 넣으므로
   따로 표시를 붙이지 않아도 된다.
*/
.__biz-body dd {
    flex: 0 0 100%;
    min-width: 0;
}
.__biz-body dd:has(.__biz-state) {
    flex: 0 1 auto;
}


/*
   항목과 항목 사이. 첫 이름 위에는 붙이지 않는다 -
   붙이면 위의 padding-top:16px 에 더해져 구분선과 사이가 벌어진다.
*/
.__biz-body dt:not(:first-child) {
    margin-top: 18px;
}


.__biz-body dt {
    font-size: 15px;
    font-weight: 700;
    color: #2b3b4e;
    /* 값(dd)과 같은 줄 높이. 이름과 값이 같은 리듬으로 쌓인다 */
    line-height: 1.65;
    /*
       여기 있던 두 줄(align-self:center, padding-top:2px)을 뺐다.

       둘 다 이름과 값이 같은 줄에 좌우로 놓이던 시절의 것이다.
         align-self:center  - 값이 두 줄일 때 이름을 그 덩어리 가운데에 놓기
         padding-top:2px    - 이름과 값의 글자 앉는 선을 1px 맞추기
       이제 이름 위에 값이 아래로 떨어지므로 맞출 상대가 없다.
       남겨 두면 항목 사이 간격이 18px 이 아니라 20px 이 되어 리듬만 흐트러진다.
    */
}


.__biz-body dd {
    margin: 0;
    font-size: 15px;
    line-height: 1.65;
    color: #5b6672;
    word-break: keep-all;
}


.__biz-body dd a { color: #0c90e3; text-decoration: underline; }



.__biz-more {
    display: inline-block;
    margin-top: 18px;
    padding: 9px 20px;
    border: 1px solid #0c90e3;
    border-radius: 999px;
    font-size: 15px;
    color: #0c90e3;
    transition: background 0.15s ease, color 0.15s ease;
}


.__biz-more:hover { background: #0c90e3; color: #fff; }



.__biz-list .empty {
    padding: 60px 0;
    text-align: center;
    color: #8a949f;
}


.__biz-list .empty a { color: #0c90e3; text-decoration: underline; }

@media all and (max-width: 860px) {
    
        .__biz-item {
            flex-direction: column;
            gap: 20px;
            padding: 18px;
        }
    
        .__biz-img { flex: 0 0 auto; width: 100%; aspect-ratio: 16 / 9; }
    
        .__biz-body h4 { font-size: 20px; }

        /*
           여기 grid-template-columns: 76px 1fr 이 있었다.
           위에서 한 칸으로 바꿔 놓고 이 줄을 안 지우면 태블릿에서만 도로 갈라진다.
           이제 칸 수는 건드리지 않고 항목 사이 간격만 조금 좁힌다.
        */
        .__biz-body dt:not(:first-child) { margin-top: 14px; }

        .__biz-head h3 { font-size: 21px; }
}

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

        .__biz-head { flex-direction: column; align-items: flex-start; gap: 10px; }

        /*
           전에는 좁은 화면에서만 한 칸으로 쌓았다. 이제 모든 폭에서 그러므로
           여기서는 간격만 더 좁힌다.
           옛 규칙은 .__biz-body dt { margin-top: 8px } 이었는데 첫 이름까지 밀어
           구분선과 사이가 벌어졌다. :not(:first-child) 로 바꾼다.
        */
        .__biz-body dt:not(:first-child) { margin-top: 12px; }
}

@media (prefers-reduced-motion: reduce) {
    
        .__biz-item, .__biz-img .img-main { transition: none; }
    
        .__biz-item:hover { transform: none; }
    
        .__biz-item:hover .__biz-img .img-main { transform: none; }
}



/* ---- 사업의 "활동" 단추 ---- */
/*
   원본 global.css 는 링크가 있든 없든 한 가지 모양이었다.

       .bullet_box .btn       { display:flex; align-items:center; justify-content:center;
                                padding:.5em 1em; background-color:#1C335C; color:#fff;
                                gap:10px; border-radius:4px; font-size:16px }
       .bullet_box .btn img   { max-width:17px }
       .bullet_box .btn:hover { background:#0099DA; text-decoration:underline }

   마크업도 둘 다 class="btn" 이었다.
       링크 없음  <div class="btn">예정</div>
       링크 있음  <a class="btn" href="...">기부금 전달식 <img arrow></a>

   한동안 링크 없는 쪽을 주황·파랑·초록 알약으로 그렸는데 원본에 없는 모양이었다.
   같은 자리에 두 가지 단추가 섞여 보여서 한 가지로 되돌린다.
   두 모양의 차이는 이제 둘뿐이다 - 화살표가 있는가, 누를 수 있는가.
*/
.__biz-body dd .__biz-state {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-width: 0;
    padding: 0.5em 1em;
    border-radius: 4px;
    background-color: #1C335C;
    color: #fff;
    font-size: 16px;
    font-weight: 400;
    text-align: center;
    text-decoration: none;
    /*
       가장 넓은 단추("기부금 전달식" 147px)에 맞춘 최소 가로.
       이것이 없으면 "예정" 은 60px, "기부금 전달식" 은 147px 로
       87px 이나 차이 나서 같은 자리에 있는 단추로 보이지 않았다.
       최소만 정하고 최대는 두지 않는다. 글이 더 길어지면 그만큼 늘어난다.
    */
    min-width: 148px;
}



/*
   사업명의 줄바꿈은 좁은 화면에서만.

   원본은 <br class="__p"> 였다. __p 는 모바일에서만 살아나는 줄바꿈이라
   PC 에서는 "MG청년누리 장학지원" 이 한 줄, 모바일에서는 두 줄이었다.
   <br> 를 display:none 으로 감추면 "MG청년누리장학지원" 처럼 붙어 버려서
   줄마다 <span> 으로 감싸고 사이 띄어쓰기를 CSS 로 넣는다.
*/
.__biz-title .__biz-tline {
    display: inline;
}


.__biz-title .__biz-tline + .__biz-tline::before {
    content: " ";
    white-space: pre;
}



/*
   항목에 붙는 화살표 단추 (원본 "활동" 줄의 <a class="btn">).
   상태 칩과 같은 크기·모양을 쓰되, 누를 수 있다는 것이 보이게 색을 준다.
*/
/*
   원본 global.css 의 .bullet_box .btn 을 그대로 따른다.

       .bullet_box .btn      { display:flex; align-items:center; padding:.5em 1em;
                               background-color:#1C335C; color:#fff; gap:10px;
                               border-radius:4px; }
       .bullet_box .btn img  { max-width:17px; }
       .bullet_box .btn:hover{ background:#0099DA; text-decoration:underline; }

   처음에는 사이트 파랑(#0c90e3)에 둥근 알약 모양으로 만들었는데,
   원본은 남색(#1C335C)에 모서리가 4px 인 네모 단추였다.
   같은 자리에 있던 단추가 갑자기 다른 모양이 되면 딴 사이트처럼 보인다.
   좁은 화면 값(모서리 5px, 글씨 14px, 그림 14px)도 원본과 같게 맞춘다.
*/
/*
   링크형은 위 규칙을 그대로 쓰고, 누를 수 있다는 표시만 더한다.
   모양 값(바탕·모서리·글씨·여백)을 여기 또 적지 않는다.
   두 군데에 적어 두면 한쪽만 고쳐 다시 어긋난다.
*/
.__biz-body dd .__biz-state.__biz-link {
    transition: background-color 0.15s ease;
}


.__biz-body dd .__biz-state.__biz-link:hover,
.__biz-body dd .__biz-state.__biz-link:focus-visible {
    background-color: #0099DA;
    text-decoration: underline;
}


.__biz-body dd .__biz-state.__biz-link:focus-visible {
    outline: 3px solid #7cc6f5;
    outline-offset: 2px;
}


.__biz-body dd .__biz-state.__biz-link img {
    max-width: 17px;
    width: 17px;
    height: auto;
    /* 화살표 그림이 검정이라 남색 단추 위에서 안 보인다. 흰색으로 뒤집는다. */
    filter: brightness(0) invert(1);
}

@media (max-width: 840px) {
    
        /* 글씨가 14px 로 작아지므로 최소 가로도 그만큼 줄인다 (148 x 14/16) */
        .__biz-body dd .__biz-state { border-radius: 5px; font-size: 14px; min-width: 130px; }
    
        .__biz-body dd .__biz-state.__biz-link img { max-width: 14px; width: 14px; }
}

@media (max-width: 767px) {
    
        /* 좁은 화면에서는 원본처럼 사업명이 줄로 나뉜다 */
        .__biz-title .__biz-tline { display: block; }
    
        .__biz-title .__biz-tline + .__biz-tline::before { content: none; }
}


/* =============================================================================
   지난사업 - 갈래 고르기 탭

   전에는 /business/past.jsp 가 위기이웃만 보여 주고 나머지 세 갈래는
   주소에 ?type= 을 손으로 붙여야만 볼 수 있었다.

   아래에 이미 연도 탭(.__tab2)이 있어서 모양이 겹치면 어느 것이 무엇인지
   헷갈린다. 연도 탭은 네모 칸이 붙어 있는 모양이라, 이쪽은 알약 모양으로
   다르게 둔다. 위아래로 나란히 놓여도 "갈래를 고르는 줄" 과
   "연도를 고르는 줄" 이 한눈에 구분된다.
   ============================================================================= */
.__biz-tabs {
    display: flex;
    flex-wrap: wrap;
    /*
       가운데로 모은다 (발주자 요청).

       왼쪽으로 붙여 두었더니 넷이 한 줄을 다 채우지 못할 때 오른쪽이 휑했고,
       줄이 바뀌면 아랫줄만 왼쪽에 몰려 더 어긋나 보였다.
       바로 위의 화면 제목과 아래 카드가 모두 가운데를 기준으로 놓인다.
    */
    justify-content: center;
    gap: 8px;
    margin-bottom: 26px;
}

.__biz-tabs a {
    padding: 9px 18px;
    border: 1px solid #d5dbe1;
    border-radius: 999px;
    font-size: 15px;
    color: #5b6672;
    line-height: 1.4;
    /* 사업 이름이 길다("취약지역 공동체발전 지원사업"). 낱말 가운데서 끊지 않는다 */
    word-break: keep-all;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.__biz-tabs a:hover {
    border-color: #85b5e6;
    color: #0c90e3;
}

.__biz-tabs a.is-on {
    border-color: #1C335C;
    background: #1C335C;
    color: #fff;
    font-weight: 600;
}

.__biz-tabs a:focus-visible {
    outline: 3px solid #7cc6f5;
    outline-offset: 2px;
}

@media all and (max-width: 860px) {
    .__biz-tabs { gap: 6px; margin-bottom: 18px; }
    .__biz-tabs a { padding: 7px 13px; font-size: 14px; }
}

@media all and (max-width: 480px) {
    /*
       좁은 화면에서는 네 개가 두 줄로 나뉜다. 한 줄에 두 개씩 같은 폭으로
       놓아야 들쭉날쭉하지 않다. 이름 길이가 서로 많이 다르기 때문이다.
    */
    .__biz-tabs { display: grid; grid-template-columns: 1fr 1fr; }
    .__biz-tabs a { text-align: center; padding: 9px 8px; font-size: 13px; }
}