/* 현장기록 주요기록 전용. CMS 배경과 제목을 그대로 사용한다. */
.apecweb.field-major { color: #e2e8f2; background: transparent; font-family: 'KMU80';}
.field-tabs { display:flex; flex-wrap:wrap; gap:30rem; margin:0 0 10px; border-bottom:1px solid rgba(255,255,255,.1); }
.field-tabs a { display:block; padding:14px 0; color:rgba(255,255,255,.5); text-decoration:none; border-bottom:3px solid transparent; }
.field-tabs a[aria-current=page] { position: relative; color:#fff; }
.field-tabs a[aria-current=page]:after { position: absolute; left: 0; bottom:-4rem; width: 100%; height: 2rem; background:#fff; content: ''; display: block;}
.field-tabs a:hover { color:#fff; }
.field-toolbar { flex-wrap:wrap; }
.field-subtabs { flex-basis:100%; width:100%; gap:0rem 20rem; margin:-50rem 0 55rem 0;}
.field-subtabs a { font-size:16rem; padding:10px 0; }
.field-major .video-choice { position:relative; min-height:40px; }
.field-video-play { position:absolute; top:9px; left:18px; color:#fff; background:#0009; border:1px solid #fff; border-radius:50%; width:17px; height:17px; font-size:10px; line-height:17px; }
.apecweb.field-major .image-view [hidden] { display:none !important; }
.apecweb.field-major .image-view video { width:100%; background:#000; max-height:600px; }
.field-major .card.no-image h3 { position:static; min-height:60px; opacity:1; }
.field-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-bottom: 48px; font-size: 16rem; margin-top: 60rem;}
.field-toolbar form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.apecweb.field-major .field-toolbar input, .apecweb.field-major .field-toolbar select { width: auto; background: transparent; color: #e2e8f2; border: 0; border-bottom: 1px solid #8290a4; color-scheme: dark; font-family: 'KMU80'; }
.apecweb.field-major .field-toolbar select { padding: 15rem 0 14rem 0; font-size:16rem; border-bottom:1px solid #fff;}
.field-toolbar input[type=date] { max-width: 130px; }
.field-toolbar input[name=keyword] { max-width: 180px; padding: 15rem 0 16rem 0; font-size:16rem; border-bottom:1px solid #fff !important;}

.apecweb.field-major .field-toolbar button { background: #020710; color: #fff; border: 0; padding:13rem 22rem }
.field-feature { position: relative; display: grid; grid-template-columns: minmax(160px, 28%) minmax(0,1fr); grid-template-rows: minmax(0,1fr) auto; gap: 20px 32px; margin-bottom: 70px; }
.field-feature::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 1px; background: #fff; }
.field-description { padding-left: 40px; }
.field-description h2 { font-size: 28rem; margin: 0 0 16px; }
.field-description .body { font-size: 18rem; color: #aab5c7; }
.field-description .body:empty { display: none; }
.field-photo-description { color: #8896B1; font-size: 16rem; white-space: pre-line; overflow-wrap: anywhere; }
.apecweb.field-major .image-strip { grid-column: 1; grid-row: 2; align-self: end; display: flex; flex-wrap: wrap; align-content: start; gap: 4px; max-height:218px; box-sizing:border-box; overflow-y:auto; overflow-x:hidden; scrollbar-width:thin; scrollbar-color:#8290a4 #102038; margin: 0; padding: 4px 4px 4px 40px; }
.apecweb.field-major .image-strip:focus-visible { outline:2px solid #a5cce8; outline-offset:3px; }
.apecweb.field-major .image-strip::-webkit-scrollbar { width:8px; }
.apecweb.field-major .image-strip::-webkit-scrollbar-thumb { background:#8290a4; border-radius:4px; }
.apecweb.field-major .image-strip::-webkit-scrollbar-track { background:#102038; }
.apecweb.field-major .image-choice { flex: 0 0 52px; height:40px; box-sizing:border-box; padding: 0; background: transparent; border: 2px solid transparent; border-radius: 0; }
.apecweb.field-major .image-choice img { display: block; width: 52px; height: 36px; object-fit: cover; }
.apecweb.field-major .image-choice[aria-pressed=true] { border-color: #fff; }
.apecweb.field-major .image-view { grid-column: 2; grid-row: 1 / 3; margin: 0; text-align: right; }
.apecweb.field-major .image-view img { width: 100%; height: auto; max-height: 530px; object-fit: contain; }
.apecweb.field-major .image-view p { display: none; }
.apecweb.field-major .gallery { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 16px; }
.apecweb.field-major .card { position: relative; padding: 0; border: 0; min-width: 0; }
.field-major .card a { color: #fff; text-decoration: none; display: block; }
.apecweb.field-major .card img { display: block; height: auto; aspect-ratio: 1.5; object-fit: cover; }
.field-major .card h3 { position: absolute; left: 0; right: 0; bottom: 0; font-size: 14rem; margin: 0; padding: 10px; background: rgba(2,11,23,.75); overflow-wrap: anywhere; opacity: .5; transition: opacity .15s; color:#fff; font-weight: normal; }
.field-major .card.selected h3, .field-major .card:hover h3, .field-major .card:focus-within h3 { opacity: 1; }
.field-major .card.selected img { filter: brightness(.65); }
.field-pagination { display: flex; justify-content: center; flex-wrap: wrap; gap: 16px; margin-top: 36px; }
.field-pagination a { color: #aab5c7; text-decoration: none; }
.field-pagination [aria-current] { color: #fff; border-bottom: 1px solid #fff; }
.field-major a:focus-visible, .field-major button:focus-visible { outline: 2px solid #a5cce8; outline-offset: 3px; }
@media(max-width:900px) { .field-toolbar { flex-direction: column; align-items: flex-start; } }
@media(max-width:700px) { 
    .field-feature { grid-template-columns: minmax(0,1fr); grid-template-rows: auto auto auto; } 
    .apecweb.field-major .image-strip { grid-column: 1; grid-row: 2; } 
    .apecweb.field-major .image-view { grid-column: 1; grid-row: 3; padding-left: 40rem; } 
    .apecweb.field-major .gallery { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

@media(max-width:500px) {
.field-tabs { display:flex; flex-wrap:wrap; gap:1rem 18rem; margin:0 0 20px; border-bottom:1px solid rgba(255,255,255,.1); padding-bottom: 18rem; }
.field-tabs a { padding:4rem 0; font-size: 18rem; }
.field-toolbar { gap:0 18rem; margin-bottom: 40rem; margin-top: 12rem;}
.field-subtabs { margin-bottom: 40rem;}
.field-subtabs a { font-size:16rem; padding:4rem 0; }
.field-feature { padding: 20rem 0;}
.field-description { padding-left: 15px; }
.field-description h2 { font-size: 28rem; margin: 0 0 16px; }
.field-description .body { font-size: 18rem; color: #aab5c7; }
.field-description .body:empty { display: none; }
.apecweb.field-major .image-strip { grid-column: 1; grid-row: 2; align-self: end; display: flex; flex-wrap: wrap; align-content: start; gap: 2rem; max-height:218px; box-sizing:border-box; overflow-y:auto; overflow-x:hidden; scrollbar-width:thin; scrollbar-color:#8290a4 #102038; margin: 0; padding: 4px 4px 4px 18px; }
.apecweb.field-major .image-view { padding-left: 20rem; } 
}