/* 단계 상세: 콘텐츠별 사진 목록과 선택한 사진의 설명을 함께 표시한다. */
.apecweb .process-reference-date { margin:10px 0 0; color:#b7c8dc; font-size:15rem; line-height:1.6; }
.apecweb .process-detail { background: transparent; color: #fff; }
.process-detail-heading { display: flex; align-items: center; gap: 25px; padding-bottom: 24px; border-bottom: 1px solid #8290a4; }
.process-detail-heading h2 { margin: 0; font-size: 34rem; }
.process-detail-heading p { margin: 0; font-size: 24rem; border-left:1px solid rgba(255,255,255,.1); padding-left: 25rem; }
.process-detail .process-content { display: grid; grid-template-columns: 228px minmax(0, 1fr); column-gap: 80px; padding: 40rem 0; border-bottom: 1px solid #25334a;     align-items: center;}
.process-content-label { min-width: 0; }
.process-content-number { color: #9aa8bd; font-size: 16rem; display: block; }
.process-content-label h3 { margin: 12px 0 0; font-size: 23rem; font-weight: normal; overflow-wrap: anywhere; }
.process-content-label .body { color: #aab5c7; font-size: 13px; }
.process-detail .process-title-only .process-content-label { grid-column: 1 / -1; }
.process-detail .process-title-only .image-strip { display: none; }
.apecweb .process-detail .image-view [hidden] { display: none !important; }
.apecweb .process-detail .image-view video { grid-column: 2; grid-row: 1 / 3; width: 100%; max-height: 70vh; background: #000; }
.apecweb .process-detail .image-view .video-transcript { grid-column: 2; grid-row: 3; }
.process-detail .video-choice { position: relative; min-height: 100px; }
.process-detail .video-choice .media-play { position: absolute; top: 24px; left: 42px; width: 28px; height: 28px; border-radius: 50%; border: 1px solid #fff; background: #0009; color: #fff; line-height: 28px; text-align: center; }
.process-detail .video-choice .media-kind { display: block; font-size: 12px; color: #fff; }
.apecweb .process-detail .image-strip { min-width: 0; margin: 0; padding: 0 0 0; align-items: flex-start; align-content: flex-start; flex-wrap: wrap; overflow: visible; gap: 2rem; }
.apecweb .process-detail .image-choice { flex: 0 0 124px; padding: 0; border-radius: 0; background: transparent; outline: 3px solid rgba(255,255,255,0); outline-offset: -3px; transition:ease .3s}
.apecweb .process-detail .image-choice img { display: block; width: 124px; height: 84px; object-fit: cover; }
.apecweb .process-detail .image-choice[aria-pressed="true"] { outline: 3px solid rgba(255,255,255,1); outline-offset: -3px; transition:ease .3s }
.process-detail button:focus-visible, .process-detail a:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
.apecweb .process-detail .image-view { grid-column: 1 / -1; display: grid; grid-template-columns: 228rem minmax(0, 1fr); grid-template-rows: 1fr auto; gap: 30rem 80rem; margin: 24px 0 0; text-align: left; }
.apecweb .process-detail .image-view img { grid-column: 2; grid-row: 1 / 3; display: block; width: 100%; max-height: none; height: auto; object-fit: contain; min-height: 540rem;}
.apecweb .process-detail .image-view p { grid-column: 1; grid-row: 1; margin: 0; padding-top: 30rem; border-top: 1px solid #fff; white-space: pre-line; overflow-wrap: anywhere; font-size:18rem; }
.apecweb .process-detail .image-close { position: relative; grid-column: 1; grid-row: 2; justify-self: start; margin: 0; padding: 10px 0; border: 0; border-bottom: 1px solid #fff; border-radius: 0; background: transparent; color: rgba(255,255,255,.6); font-size: 17.3rem; width: 100%; text-align: left; }
.apecweb .process-detail .image-close:hover { color: #fff;}
.apecweb .process-detail .image-close:after { position: absolute; right: 0; top: 11rem; width:18rem; height: 18rem; background:url(/design2026/apec/img/common/ic-close.svg) no-repeat center / contain; display: block; content: '';}
.process-detail-footer { margin-top: 32px; text-align: center; }
.process-detail-footer a { display: inline-block; padding: 8px 26px; background: #020b17; color: #fff; text-decoration: none; }
.apecweb .process-detail .process-media-overflow[hidden],
.apecweb .process-detail .process-more-images[hidden] { display: none !important; }
.apecweb .process-detail .process-more-images { grid-column: 2; justify-self: center; margin: 20rem 0 0; padding: 10rem 24px; border: 1px solid rgba(255,255,255,.2); color:rgba(255,255,255,.6); border-radius: 4rem; background: transparent; font: inherit; font-size: 15rem; cursor: pointer; }
.apecweb .process-detail .process-more-images:hover { color:#fff;; border:1px solid rgba(255,255,255,.8);}
.apecweb .process-detail .process-content #process-media-2.image-strip button:nth-of-type(1),
.apecweb .process-detail .process-content #process-media-8.image-strip button:nth-of-type(1),
.apecweb .process-detail .process-content #process-media-26.image-strip button:nth-of-type(1),
.apecweb .process-detail .process-content #process-media-153.image-strip button:nth-of-type(1) {display: none;}
 
@media (max-width: 700px) {
    .apecweb .process-reference-date { margin:0 0 0 ; }
    .apecweb .process-detail { padding: 24px 0; }
    .process-detail-heading { flex-direction: row; gap: 12px; padding-bottom: 15rem; }
    .process-detail-heading h2 { font-size: 24rem; }
    .process-detail-heading p { font-size: 18rem; padding-left: 12rem; }


    .process-detail .process-content { grid-template-columns: minmax(0, 1fr); gap: 16px; }
    .apecweb .process-detail .process-more-images { grid-column: 1; }
    .apecweb .process-detail .image-view { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto; gap:20rem 80rem; margin: 0; }

    .apecweb .process-detail .image-view img { grid-column: 1; grid-row: 2; min-height: auto;}
    .apecweb .process-detail .image-view video { grid-column: 1; grid-row: 1; }
    .apecweb .process-detail .image-view .video-transcript { grid-column: 1; grid-row: 4; margin: 0; padding: 20rem; }
    .apecweb .process-detail .image-view p { grid-column: 1; grid-row: 1; padding-top:20rem; }
    .apecweb .process-detail .image-close { grid-column: 1; grid-row: 3; border-bottom: none; font-size: 16rem; padding:5rem 0 0 0; width: auto; }
    .apecweb .process-detail .image-close:after {top:7rem; right: -25rem;}
    .apecweb .process-detail .image-choice { flex: 0 0 106rem;}
    .apecweb .process-detail .image-choice img { width: 106rem; height: 72rem; }
    .process-detail .video-choice { min-height: auto; }
    .process-detail .video-choice .media-play { top: 50%; left: 50%; width: 28px; height: 28px; margin:-28rem 0 0 -19rem }


}