@charset "utf-8";
/******************************************************************
    특허 출원 소개 페이지 (patent.php)
    - 공통 서브페이지 스타일(bcm-sub.css) 위에 얹는 전용 스타일
    - 컬러 토큰은 theme/busanbcm/css/brand.css 에 정의되어 있다.
******************************************************************/

/* ---------- Hero 안의 출원번호/출원일 배지 ---------- */

.bcm-pat-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 32px;
    padding: 0;
    list-style: none;
}
.bcm-pat-badges > li {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 12px 20px;
    border: 1px solid rgba(255, 255, 255, .25);
    background: rgba(255, 255, 255, .06);
}
.bcm-pat-badge-label {
    color: var(--brand-orange);
    font-size: 14px;
    font-weight: 700;
}
.bcm-pat-badges strong {
    color: #fff;
    font-family: "Outfit", "Noto Sans KR", sans-serif;
    font-weight: 700;
    font-size: 17px;
    letter-spacing: .01em;
}

/* ---------- 대표 도면 + 발명 개요 ---------- */

.bcm-pat-intro {
    display: flex;
    align-items: center;
    gap: 56px;
}
.bcm-pat-intro-fig {
    flex: 0 0 40%;
    padding: 32px 28px 20px;
    border: 1px solid #e8e8e8;
    background: #fff;
    text-align: center;
}
.bcm-pat-intro-fig > img {
    display: block;
    width: 100%;
    max-width: 380px;
    height: auto;
    margin: 0 auto;
}
.bcm-pat-fig-cap {
    display: block;
    margin-top: 16px;
    color: #999;
    font-size: 13px;
}
.bcm-pat-intro-text { flex: 1 1 auto; }
.bcm-pat-intro-text h3 { margin-bottom: 10px; }
.bcm-pat-intro-text .bcm-pat-name-en {
    margin-bottom: 24px;
    color: #aaa;
    font-family: "Outfit", "Noto Sans KR", sans-serif;
    font-size: 15px;
    line-height: 1.5;
}
.bcm-pat-intro-text strong { color: var(--navy); font-weight: 700; }

/* ---------- 핵심 구조 (도면 카드) ---------- */

.bcm-pat-figs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 32px;
    padding: 0;
    list-style: none;
}
.bcm-pat-fig {
    display: flex;
    flex-direction: column;
    border: 1px solid #e8e8e8;
    background: #fff;
    transition: border-color .3s, box-shadow .3s, transform .3s;
}
.bcm-pat-fig:hover {
    border-color: #ddd;
    box-shadow: 0 14px 34px rgba(46, 49, 99, .1);
    transform: translateY(-4px);
}
.bcm-pat-fig-img {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 200px;
    padding: 24px;
    border-bottom: 1px solid #f0f0f0;
    background: #fbfbfc;
}
.bcm-pat-fig-img > img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}
.bcm-pat-fig-body { padding: 26px 28px 30px; }
.bcm-pat-fig-body h4 {
    margin-bottom: 10px;
    color: var(--brand-orange);
    font-size: 19px;
}
.bcm-pat-fig-body p {
    color: #666;
    font-size: 15px;
    line-height: 1.7;
}
/* 프레임부 — 도면 없이 전체 폭을 쓰는 마무리 카드 */
.bcm-pat-fig.is-noimg {
    grid-column: 1 / -1;
    justify-content: center;
    background: var(--navy);
    border-color: var(--navy);
}
.bcm-pat-fig.is-noimg:hover {
    border-color: var(--navy);
    box-shadow: none;
    transform: none;
}
.bcm-pat-fig.is-noimg h4 { color: var(--brand-orange); }
.bcm-pat-fig.is-noimg p { color: rgba(255, 255, 255, .82); }

/* ---------- 기대 효과 카드 ---------- */

.bcm-pat-effects { margin-top: 32px; }
.bcm-pat-effect-num {
    display: block;
    margin-bottom: 14px;
    color: var(--cta-orange);
    font-family: "Josefin Sans", sans-serif;
    font-weight: 700;
    font-size: 20px;
}

/* ---------- 출원 정보 표 ---------- */

.bcm-pat-table { margin-top: 32px; }
.bcm-pat-note {
    margin-top: 18px;
    color: #888;
    font-size: 14px;
    line-height: 1.7;
}
.bcm-pat-note strong { color: #666; font-weight: 700; }

/* ---------- 출원 정보: 왼쪽 표 + 오른쪽 통지서 ---------- */

/* 통지서는 A4 세로(1:1.414)라 그대로 두면 표보다 훨씬 길어진다.
   stretch 로 왼쪽 표와 같은 높이를 주고, 이미지는 object-fit:contain 으로
   그 안에 비율을 유지한 채 들어가게 한다(잘리거나 늘어나지 않는다). */
.bcm-pat-info {
    display: flex;
    align-items: stretch;
    gap: 44px;
    margin-top: 32px;
}
.bcm-pat-info-main { flex: 1 1 auto; min-width: 0; }
/* 2단이라 폭이 좁아진다 — 표 머리칸을 줄여 값 쪽에 자리를 준다 */
.bcm-pat-info .bcm-pat-table { margin-top: 0; }
.bcm-pat-info .bcm-pat-table th { width: 150px; }

/* ---------- 출원번호통지서 (특허청 발급 원본) ---------- */

/* 캡션까지 포함한 통지서 박스 전체를 왼쪽 표와 같은 높이로 맞춘다.

   핵심은 이미지를 absolute 로 띄우는 것. 이미지가 문서 흐름에 있으면 그 원본
   높이가 행 높이 계산에 반영돼(= 통지서가 행 높이를 정해버려) 표보다 길어졌다.
   absolute 로 빼면 통지서 박스의 자연 높이는 '캡션'뿐이라, 행 높이는 왼쪽 표가
   정하고 통지서가 거기에 맞춰진다. 이미지는 남는 칸(1fr)을 채우되
   object-fit:contain 이라 A4 비율은 그대로 유지된다. */
.bcm-pat-doc {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    flex: 0 0 30%;
    min-width: 0;
    margin: 0;
    padding: 16px;
    border: 1px solid #e2e2e2;
    background: #fff;
}
.bcm-pat-doc-view {
    position: relative;
    min-height: 0;
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    cursor: zoom-in;
}
.bcm-pat-doc-view > img {
    position: absolute;    /* 높이 계산에서 빠진다 (위 주석 참고) */
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;   /* 비율 유지 — 잘리지도 늘어나지도 않는다 */
}
/* hover 시 '크게 보기' 오버레이 */
.bcm-pat-doc-zoom {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: rgba(46, 49, 99, .55);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    opacity: 0;
    transition: opacity .25s ease;
}
.bcm-pat-doc-view:hover .bcm-pat-doc-zoom,
.bcm-pat-doc-view:focus-visible .bcm-pat-doc-zoom { opacity: 1; }

.bcm-pat-doc > figcaption {
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid #f0f0f0;
    color: var(--navy);
    font-size: 15px;
    font-weight: 700;
    text-align: center;
}
.bcm-pat-doc > figcaption > span {
    display: block;
    margin-top: 6px;
    color: #999;
    font-size: 13px;
    font-weight: 400;
}

/* ---------- 크게 보기 모달 ---------- */

.bcm-pat-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    background: rgba(0, 0, 0, .8);
}
.bcm-pat-modal[hidden] { display: none; }
.bcm-pat-modal > img {
    max-width: min(900px, 100%);
    max-height: 100%;
    width: auto;
    height: auto;         /* 비율 유지 */
    object-fit: contain;
    background: #fff;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .4);
}
.bcm-pat-modal-close {
    position: absolute;
    top: 16px;
    right: 20px;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    background: none;
    color: #fff;
    font-size: 34px;
    line-height: 1;
    cursor: pointer;
}
.bcm-pat-modal-close:hover { color: var(--brand-orange); }
/* 모달이 열려 있는 동안 뒤 배경 스크롤 방지 */
body.bcm-modal-open { overflow: hidden; }

@media screen and (max-width: 1024px) {
    /* 좁아지면 표와 통지서를 세로로 쌓는다. 이때는 높이를 맞출 대상이 없으므로
       A4 원본 비율 그대로 두되, 폭이 과하게 커지지 않게 제한한다. */
    .bcm-pat-info { flex-direction: column; align-items: center; gap: 68px; }
    .bcm-pat-info-main { flex: 0 0 auto; width: 100%; }
    .bcm-pat-doc { flex: 0 0 auto; width: 100%; max-width: 460px; grid-template-rows: auto auto; }
    /* 세로로 쌓이면 맞출 높이가 없으므로 이미지를 다시 흐름에 되돌려 A4 원본 비율로 둔다 */
    .bcm-pat-doc-view > img { position: static; height: auto; }
    .bcm-pat-info .bcm-pat-table th { width: 260px; }
}

@media screen and (max-width: 768px) {
    .bcm-pat-doc { padding: 14px; }
    .bcm-pat-info .bcm-pat-table th { width: 120px; }
    /* 터치 기기는 hover 가 없으므로 안내를 항상 살짝 보여준다 */
    .bcm-pat-doc-zoom {
        inset: auto 0 0 0;
        height: 40px;
        background: rgba(46, 49, 99, .72);
        opacity: 1;
        font-size: 14px;
    }
}

/* ---------- 반응형 ---------- */

@media screen and (max-width: 1024px) {
    .bcm-pat-figs { grid-template-columns: repeat(2, 1fr); }
}

@media screen and (max-width: 768px) {
    .bcm-pat-badges > li { width: 100%; }

    .bcm-pat-intro { flex-direction: column; align-items: stretch; gap: 28px; }
    .bcm-pat-intro-fig { flex: 0 0 auto; }

    .bcm-pat-figs { grid-template-columns: 1fr; }
    .bcm-pat-fig-img { height: 170px; padding: 18px; }
    .bcm-pat-fig-body { padding: 22px 22px 26px; }
}