/* 국립전파연구원 60주년 역사박물관 모달 통합 스타일 */ /* ===== 모달 공통 웹폰트 ===== */ @font-face{font-family:Paperlogy;src:url('../fonts/Paperlogy/Paperlogy-4Regular.woff2') format('woff2');font-weight:400;font-display:swap} @font-face{font-family:Paperlogy;src:url('../fonts/Paperlogy/Paperlogy-6SemiBold.woff2') format('woff2');font-weight:600;font-display:swap} @font-face{font-family:Paperlogy;src:url('../fonts/Paperlogy/Paperlogy-7Bold.woff2') format('woff2');font-weight:700;font-display:swap} /* ===== 모든 모달 공통 스타일 ===== */ :host{font-family:Paperlogy,"Noto Sans KR",sans-serif;color:var(--gray-90,var(--krds-gray-90,#1d1d1d));line-height:1.6} .close:focus{outline:3px solid #0085ff;outline-offset:3px} @media(max-width:760px){.modal{height:100dvh!important;max-height:100dvh!important}.modal-header.single-title{align-items:center}} /* ===== 홍보동영상 모달 ===== */ :host([data-modal-type="promotional-videos"]) html.embedded,:host([data-modal-type="promotional-videos"]) html.embedded body{background:transparent!important}:host([data-modal-type="promotional-videos"]) .embedded .demo-page{display:none!important}:host([data-modal-type="promotional-videos"]) .embedded .modal-layer{background:transparent!important;backdrop-filter:none!important} :host([data-modal-type="promotional-videos"]) .modal{width:min(100%,1056px)!important;max-height:88vh!important}:host([data-modal-type="promotional-videos"]) h1{font-size:clamp(24px,2.5vw,32px)!important}:host([data-modal-type="promotional-videos"]) .close{width:44px!important;height:44px!important;padding:0!important}:host([data-modal-type="promotional-videos"]) .close::before,:host([data-modal-type="promotional-videos"]) .close::after{left:50%!important;top:50%!important;width:20px!important}:host([data-modal-type="promotional-videos"]) .close::before{transform:translate(-50%,-50%) rotate(45deg)!important}:host([data-modal-type="promotional-videos"]) .close::after{transform:translate(-50%,-50%) rotate(-45deg)!important} :host([data-modal-type="promotional-videos"]){--primary-50:#ecf2fe;--primary-500:#246beb;--primary-600:#1d56bc;--primary-700:#16408d;--gray-5:#f8f8f8;--gray-10:#f0f0f0;--gray-20:#e4e4e4;--gray-60:#717171;--gray-70:#555;--gray-80:#2d2d2d;--gray-90:#1d1d1d;--focus:#0085ff;--modal-w:1120px}:host([data-modal-type="promotional-videos"]) *{box-sizing:border-box}:host([data-modal-type="promotional-videos"]) html{font-family:Paperlogy,"Noto Sans KR",sans-serif;color:var(--gray-90);line-height:1.6}:host([data-modal-type="promotional-videos"]) body{margin:0;background:#eef1f5}:host([data-modal-type="promotional-videos"]) button{font:inherit;cursor:pointer}:host([data-modal-type="promotional-videos"]) :focus-visible{outline:3px solid var(--focus);outline-offset:3px} :host([data-modal-type="promotional-videos"]) .demo-page{min-height:100vh;display:grid;place-items:center;padding:64px 24px;background:linear-gradient(135deg,#eef3fb,#f7f7f7)}:host([data-modal-type="promotional-videos"]) .open-modal{min-height:48px;padding:0 22px;border:0;border-radius:8px;background:var(--primary-600);color:#fff;font-weight:700}:host([data-modal-type="promotional-videos"]) .open-modal:hover{background:var(--primary-700)}:host([data-modal-type="promotional-videos"]) .modal-layer{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;padding:32px;background:#111827b8;backdrop-filter:blur(3px)}:host([data-modal-type="promotional-videos"]) .modal-layer[hidden]{display:none}:host([data-modal-type="promotional-videos"]) .modal{width:min(100%,var(--modal-w));max-height:calc(100vh - 64px);display:flex;flex-direction:column;overflow:hidden;border-radius:16px;background:#fff;box-shadow:0 24px 80px #0006} :host([data-modal-type="promotional-videos"]) .modal-header{display:flex;align-items:flex-start;gap:24px;padding:32px 40px 28px;border-bottom:1px solid var(--gray-20)}:host([data-modal-type="promotional-videos"]) .heading{min-width:0;flex:1}:host([data-modal-type="promotional-videos"]) h1{margin:0;font-size:clamp(24px,3vw,36px);line-height:1.35;letter-spacing:-.025em}:host([data-modal-type="promotional-videos"]) .close{position:relative;flex:0 0 auto;width:48px;height:48px;border:1px solid transparent;border-radius:8px;background:transparent;color:var(--gray-80)}:host([data-modal-type="promotional-videos"]) .close:hover{background:var(--gray-10)}:host([data-modal-type="promotional-videos"]) .close::before,:host([data-modal-type="promotional-videos"]) .close::after{content:"";position:absolute;left:12px;top:22px;width:22px;height:2px;border-radius:2px;background:currentColor}:host([data-modal-type="promotional-videos"]) .close::before{transform:rotate(45deg)}:host([data-modal-type="promotional-videos"]) .close::after{transform:rotate(-45deg)}:host([data-modal-type="promotional-videos"]) .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} :host([data-modal-type="promotional-videos"]) .modal-body{overflow:auto;overscroll-behavior:contain;scrollbar-gutter:stable;padding:40px}:host([data-modal-type="promotional-videos"]) h2{margin:0 0 20px;font-size:24px;letter-spacing:-.02em}:host([data-modal-type="promotional-videos"]) .video-wrap{position:relative;overflow:hidden;aspect-ratio:16/9;border-radius:12px;background:#111827}:host([data-modal-type="promotional-videos"]) .video-wrap iframe{position:absolute;inset:0;width:100%;height:100%;border:0}:host([data-modal-type="promotional-videos"]) .subtitle{margin-top:32px;padding:28px;border:1px solid var(--gray-20);border-radius:12px;background:var(--gray-5)}:host([data-modal-type="promotional-videos"]) .subtitle-content{max-height:360px;overflow:auto;padding-right:16px;color:var(--gray-70);font-size:15px;line-height:1.75;white-space:pre-line} :host([data-modal-type="promotional-videos"]) .modal-footer{display:flex;justify-content:flex-end;padding:20px 40px;border-top:1px solid var(--gray-20);background:var(--gray-5)}:host([data-modal-type="promotional-videos"]) .button{min-width:92px;min-height:48px;padding:0 20px;border:1px solid var(--gray-60);border-radius:8px;background:#fff;color:var(--gray-90);font-weight:700}:host([data-modal-type="promotional-videos"]) .button:hover{background:var(--gray-10)} @media(max-width:760px){:host([data-modal-type="promotional-videos"]) .modal-layer{padding:0;place-items:stretch}:host([data-modal-type="promotional-videos"]) .modal{width:100%;height:100dvh;max-height:100dvh;border-radius:0}:host([data-modal-type="promotional-videos"]) .modal-header{padding:20px 20px 18px;gap:8px}:host([data-modal-type="promotional-videos"]) .close{width:44px;height:44px}:host([data-modal-type="promotional-videos"]) h1{font-size:24px}:host([data-modal-type="promotional-videos"]) .modal-body{padding:24px 20px}:host([data-modal-type="promotional-videos"]) h2{font-size:21px}:host([data-modal-type="promotional-videos"]) .subtitle{margin-top:24px;padding:20px}:host([data-modal-type="promotional-videos"]) .subtitle-content{max-height:none;padding-right:0;font-size:14px}:host([data-modal-type="promotional-videos"]) .modal-footer{padding:16px 20px}:host([data-modal-type="promotional-videos"]) .button{width:100%}}@media(prefers-reduced-motion:reduce){:host([data-modal-type="promotional-videos"]) *{transition:none!important}} /* ===== 협약체결 모달 ===== */ :host([data-modal-type="agreements"]) html.embedded,:host([data-modal-type="agreements"]) html.embedded body{background:transparent!important}:host([data-modal-type="agreements"]) .embedded .demo-page{display:none!important}:host([data-modal-type="agreements"]) .embedded .modal-layer{background:transparent!important;backdrop-filter:none!important} :host([data-modal-type="agreements"]) .modal{width:min(100%,1056px)!important;max-height:88vh!important}:host([data-modal-type="agreements"]) h1{font-size:clamp(24px,2.5vw,32px)!important}:host([data-modal-type="agreements"]) .close{width:44px!important;height:44px!important;padding:0!important}:host([data-modal-type="agreements"]) .close::before,:host([data-modal-type="agreements"]) .close::after{left:50%!important;top:50%!important;width:20px!important}:host([data-modal-type="agreements"]) .close::before{transform:translate(-50%,-50%) rotate(45deg)!important}:host([data-modal-type="agreements"]) .close::after{transform:translate(-50%,-50%) rotate(-45deg)!important} :host([data-modal-type="agreements"]){--primary-50:#ecf2fe;--primary-500:#246beb;--primary-600:#1d56bc;--primary-700:#16408d;--gray-5:#f8f8f8;--gray-10:#f0f0f0;--gray-20:#e4e4e4;--gray-60:#717171;--gray-70:#555;--gray-80:#2d2d2d;--gray-90:#1d1d1d;--focus:#0085ff;--modal-w:1120px}:host([data-modal-type="agreements"]) *{box-sizing:border-box}:host([data-modal-type="agreements"]) html{font-family:Paperlogy,"Noto Sans KR",sans-serif;color:var(--gray-90);line-height:1.6}:host([data-modal-type="agreements"]) body{margin:0;background:#eef1f5}:host([data-modal-type="agreements"]) button{font:inherit;cursor:pointer}:host([data-modal-type="agreements"]) :focus-visible{outline:3px solid var(--focus);outline-offset:3px} :host([data-modal-type="agreements"]) .demo-page{min-height:100vh;display:grid;place-items:center;padding:64px 24px;background:linear-gradient(135deg,#eef3fb,#f7f7f7)}:host([data-modal-type="agreements"]) .open-modal{min-height:48px;padding:0 22px;border:0;border-radius:8px;background:var(--primary-600);color:#fff;font-weight:700}:host([data-modal-type="agreements"]) .open-modal:hover{background:var(--primary-700)}:host([data-modal-type="agreements"]) .modal-layer{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;padding:32px;background:#111827b8;backdrop-filter:blur(3px)}:host([data-modal-type="agreements"]) .modal-layer[hidden]{display:none}:host([data-modal-type="agreements"]) .modal{width:min(100%,var(--modal-w));max-height:calc(100vh - 64px);display:flex;flex-direction:column;overflow:hidden;border-radius:16px;background:#fff;box-shadow:0 24px 80px #0006} :host([data-modal-type="agreements"]) .modal-header{display:flex;align-items:flex-start;gap:24px;padding:32px 40px 28px;border-bottom:1px solid var(--gray-20)}:host([data-modal-type="agreements"]) .heading{min-width:0;flex:1}:host([data-modal-type="agreements"]) .eyebrow{display:flex;align-items:center;gap:10px;margin:0 0 8px;color:var(--primary-600);font-size:15px;font-weight:700}:host([data-modal-type="agreements"]) .eyebrow::before{content:"";width:4px;height:20px;border-radius:2px;background:var(--primary-500)}:host([data-modal-type="agreements"]) h1{margin:0;font-size:clamp(24px,3vw,36px);line-height:1.35;letter-spacing:-.025em}:host([data-modal-type="agreements"]) .close{position:relative;flex:0 0 auto;width:48px;height:48px;border:1px solid transparent;border-radius:8px;background:transparent;color:var(--gray-80)}:host([data-modal-type="agreements"]) .close:hover{background:var(--gray-10)}:host([data-modal-type="agreements"]) .close::before,:host([data-modal-type="agreements"]) .close::after{content:"";position:absolute;left:12px;top:22px;width:22px;height:2px;border-radius:2px;background:currentColor}:host([data-modal-type="agreements"]) .close::before{transform:rotate(45deg)}:host([data-modal-type="agreements"]) .close::after{transform:rotate(-45deg)}:host([data-modal-type="agreements"]) .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} :host([data-modal-type="agreements"]) .modal-body{overflow:auto;overscroll-behavior:contain;scrollbar-gutter:stable;padding:40px;background:var(--gray-5)}:host([data-modal-type="agreements"]) .agreement-list{overflow:hidden;border:1px solid #c6cbd2;border-radius:12px;background:#fff}:host([data-modal-type="agreements"]) .agreement-table{width:100%;border-collapse:collapse;table-layout:fixed}:host([data-modal-type="agreements"]) .agreement-table th,:host([data-modal-type="agreements"]) .agreement-table td{padding:16px 18px;border-bottom:1px solid var(--gray-20);text-align:left;vertical-align:top;overflow-wrap:anywhere}:host([data-modal-type="agreements"]) .agreement-table th{position:sticky;top:0;z-index:1;background:var(--primary-700);color:#fff;font-size:14px}:host([data-modal-type="agreements"]) .agreement-table th:first-child{width:30%}:host([data-modal-type="agreements"]) .agreement-table th:last-child{width:140px}:host([data-modal-type="agreements"]) .agreement-table td{color:var(--gray-80);font-size:14px;line-height:1.55}:host([data-modal-type="agreements"]) .agreement-table tbody tr:last-child td{border-bottom:0}:host([data-modal-type="agreements"]) .agreement-table tbody tr:nth-child(even){background:var(--gray-5)} :host([data-modal-type="agreements"]) .modal-footer{display:flex;justify-content:flex-end;padding:20px 40px;border-top:1px solid var(--gray-20);background:var(--gray-5)}:host([data-modal-type="agreements"]) .button{min-width:92px;min-height:48px;padding:0 20px;border:1px solid var(--gray-60);border-radius:8px;background:#fff;color:var(--gray-90);font-weight:700}:host([data-modal-type="agreements"]) .button:hover{background:var(--gray-10)} @media(max-width:760px){:host([data-modal-type="agreements"]) .modal-layer{padding:0;place-items:stretch}:host([data-modal-type="agreements"]) .modal{width:100%;height:100dvh;max-height:100dvh;border-radius:0}:host([data-modal-type="agreements"]) .modal-header{padding:20px 20px 18px;gap:8px}:host([data-modal-type="agreements"]) .close{width:44px;height:44px}:host([data-modal-type="agreements"]) h1{font-size:24px}:host([data-modal-type="agreements"]) .modal-body{padding:20px 16px}:host([data-modal-type="agreements"]) .agreement-table,:host([data-modal-type="agreements"]) .agreement-table tbody,:host([data-modal-type="agreements"]) .agreement-table tr,:host([data-modal-type="agreements"]) .agreement-table td{display:block}:host([data-modal-type="agreements"]) .agreement-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}:host([data-modal-type="agreements"]) .agreement-table tr{padding:14px 16px;border-bottom:1px solid var(--gray-20)}:host([data-modal-type="agreements"]) .agreement-table tr:last-child{border-bottom:0}:host([data-modal-type="agreements"]) .agreement-table td{display:grid;grid-template-columns:72px 1fr;gap:12px;padding:5px 0;border:0}:host([data-modal-type="agreements"]) .agreement-table td::before{content:attr(data-label);color:var(--primary-700);font-size:13px;font-weight:700}:host([data-modal-type="agreements"]) .modal-footer{padding:16px 20px}:host([data-modal-type="agreements"]) .button{width:100%}}@media(prefers-reduced-motion:reduce){:host([data-modal-type="agreements"]) *{transition:none!important}} /* ===== 2014년 이후 역사 모달 ===== */ :host([data-modal-type="history-2014-present"]) html.embedded,:host([data-modal-type="history-2014-present"]) html.embedded body{background:transparent!important}:host([data-modal-type="history-2014-present"]) .embedded .demo-page{display:none!important}:host([data-modal-type="history-2014-present"]) .embedded .modal-layer{background:transparent!important;backdrop-filter:none!important} :host([data-modal-type="history-2014-present"]) .modal{width:min(100%,1056px)!important;max-height:88vh!important}:host([data-modal-type="history-2014-present"]) h1{font-size:clamp(24px,2.5vw,32px)!important}:host([data-modal-type="history-2014-present"]) .close{width:44px!important;height:44px!important;padding:0!important}:host([data-modal-type="history-2014-present"]) .close::before,:host([data-modal-type="history-2014-present"]) .close::after{left:50%!important;top:50%!important;width:20px!important}:host([data-modal-type="history-2014-present"]) .close::before{transform:translate(-50%,-50%) rotate(45deg)!important}:host([data-modal-type="history-2014-present"]) .close::after{transform:translate(-50%,-50%) rotate(-45deg)!important} :host([data-modal-type="history-2014-present"]){--primary-50:#ecf2fe;--primary-500:#246beb;--primary-600:#1d56bc;--primary-700:#16408d;--gray-5:#f8f8f8;--gray-10:#f0f0f0;--gray-20:#e4e4e4;--gray-60:#717171;--gray-70:#555;--gray-80:#2d2d2d;--gray-90:#1d1d1d;--focus:#0085ff;--modal-w:1120px} :host([data-modal-type="history-2014-present"]) *{box-sizing:border-box}:host([data-modal-type="history-2014-present"]) html{font-family:Paperlogy,"Noto Sans KR",sans-serif;color:var(--gray-90);line-height:1.6}:host([data-modal-type="history-2014-present"]) body{margin:0;background:#eef1f5}:host([data-modal-type="history-2014-present"]) button{font:inherit;cursor:pointer}:host([data-modal-type="history-2014-present"]) :focus-visible{outline:3px solid var(--focus);outline-offset:3px} :host([data-modal-type="history-2014-present"]) .demo-page{min-height:100vh;display:grid;place-items:center;padding:64px 24px;background:linear-gradient(135deg,#eef3fb,#f7f7f7)} :host([data-modal-type="history-2014-present"]) .open-modal{min-height:48px;padding:0 22px;border:0;border-radius:8px;background:var(--primary-600);color:#fff;font-weight:700;box-shadow:0 4px 12px #16408d33}:host([data-modal-type="history-2014-present"]) .open-modal:hover{background:var(--primary-700)} :host([data-modal-type="history-2014-present"]) .modal-layer{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;padding:32px;background:#111827b8;backdrop-filter:blur(3px)}:host([data-modal-type="history-2014-present"]) .modal-layer[hidden]{display:none} :host([data-modal-type="history-2014-present"]) .modal{width:min(100%,var(--modal-w));max-height:calc(100vh - 64px);display:flex;flex-direction:column;overflow:hidden;border-radius:16px;background:#fff;box-shadow:0 24px 80px #0006} :host([data-modal-type="history-2014-present"]) .modal-header{display:flex;align-items:flex-start;gap:24px;padding:32px 40px 28px;border-bottom:1px solid var(--gray-20)}:host([data-modal-type="history-2014-present"]) .heading{min-width:0;flex:1} :host([data-modal-type="history-2014-present"]) .eyebrow{display:flex;align-items:center;gap:10px;margin:0 0 8px;color:var(--primary-600);font-size:15px;font-weight:700}:host([data-modal-type="history-2014-present"]) .eyebrow::before{content:"";width:4px;height:20px;border-radius:2px;background:var(--primary-500)} :host([data-modal-type="history-2014-present"]) h1{margin:0;font-size:clamp(24px,3vw,36px);line-height:1.35;letter-spacing:-.025em}:host([data-modal-type="history-2014-present"]) .close{position:relative;flex:0 0 auto;width:48px;height:48px;display:grid;place-items:center;border:1px solid transparent;border-radius:8px;background:transparent;color:var(--gray-80)}:host([data-modal-type="history-2014-present"]) .close:hover{background:var(--gray-10)}:host([data-modal-type="history-2014-present"]) .close::before,:host([data-modal-type="history-2014-present"]) .close::after{content:"";position:absolute;width:22px;height:2px;border-radius:2px;background:currentColor}:host([data-modal-type="history-2014-present"]) .close::before{transform:rotate(45deg)}:host([data-modal-type="history-2014-present"]) .close::after{transform:rotate(-45deg)} :host([data-modal-type="history-2014-present"]) .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}:host([data-modal-type="history-2014-present"]) .modal-body{overflow:auto;overscroll-behavior:contain;scrollbar-gutter:stable;padding:40px} :host([data-modal-type="history-2014-present"]) .intro{display:grid;grid-template-columns:minmax(0,7fr) minmax(280px,5fr);gap:32px;align-items:start}:host([data-modal-type="history-2014-present"]) .representative{display:block;width:100%;height:auto;aspect-ratio:auto;border-radius:12px;object-fit:contain} :host([data-modal-type="history-2014-present"]) .description p{margin:0 0 20px;color:var(--gray-70);font-size:16px;line-height:1.75}:host([data-modal-type="history-2014-present"]) .description p:last-child{margin-bottom:0} :host([data-modal-type="history-2014-present"]) .records{margin-top:48px;padding-top:40px;border-top:1px solid var(--gray-20)}:host([data-modal-type="history-2014-present"]) h2{margin:0 0 20px;font-size:24px;letter-spacing:-.02em}:host([data-modal-type="history-2014-present"]) .feature-records{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-bottom:36px}:host([data-modal-type="history-2014-present"]) .feature-record{overflow:hidden;border:1px solid var(--gray-20);border-radius:14px;background:var(--gray-5)}:host([data-modal-type="history-2014-present"]) .feature-record img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover}:host([data-modal-type="history-2014-present"]) .feature-copy{padding:18px}:host([data-modal-type="history-2014-present"]) .feature-copy h3{margin:0 0 8px;color:var(--primary-700);font-size:18px;line-height:1.4}:host([data-modal-type="history-2014-present"]) .feature-copy p{margin:0;color:var(--gray-70);font-size:14px;line-height:1.65}:host([data-modal-type="history-2014-present"]) .record-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}:host([data-modal-type="history-2014-present"]) .record{margin:0}:host([data-modal-type="history-2014-present"]) .record-image{position:relative;aspect-ratio:4/3;overflow:hidden;border-radius:12px;background:#d9e1e8}:host([data-modal-type="history-2014-present"]) .record-image img{display:block;width:100%;height:100%;object-fit:cover}:host([data-modal-type="history-2014-present"]) .record figcaption{padding:10px 4px 0;text-align:center;font-size:15px;font-weight:700;color:var(--gray-80)} :host([data-modal-type="history-2014-present"]) .history-timeline{position:relative;z-index:5;flex:0 0 auto;padding:11px 26px 12px;overflow-x:auto;color:#fff;background:linear-gradient(135deg,#0b4f8a,#087bad 55%,#0b4f8a);box-shadow:0 -5px 16px #12385d1f}:host([data-modal-type="history-2014-present"]) .timeline-track{position:relative;display:grid;grid-template-columns:repeat(5,minmax(145px,1fr));min-width:760px;gap:12px}:host([data-modal-type="history-2014-present"]) .timeline-track::before{content:"";position:absolute;top:23px;right:7%;left:7%;height:2px;background:repeating-linear-gradient(90deg,#86cde8 0 8px,transparent 8px 14px)}:host([data-modal-type="history-2014-present"]) .timeline-item{position:relative;text-align:center}:host([data-modal-type="history-2014-present"]) .timeline-year{position:relative;z-index:1;width:48px;height:48px;display:grid;place-items:center;margin:0 auto 6px;border:3px solid #f5a623;border-radius:50%;background:#fff;color:#16408d;font-size:14px;font-weight:700;box-shadow:0 2px 6px #003d7140}:host([data-modal-type="history-2014-present"]) .timeline-note{display:block;font-size:10.5px;font-weight:600;line-height:1.35;word-break:keep-all} :host([data-modal-type="history-2014-present"]) .modal-footer{display:flex;justify-content:flex-end;padding:20px 40px;border-top:1px solid var(--gray-20);background:var(--gray-5)}:host([data-modal-type="history-2014-present"]) .button{min-width:92px;min-height:48px;padding:0 20px;border:1px solid var(--gray-60);border-radius:8px;background:#fff;color:var(--gray-90);font-weight:700}:host([data-modal-type="history-2014-present"]) .button:hover{background:var(--gray-10)} @media(max-width:760px){:host([data-modal-type="history-2014-present"]) .modal-layer{padding:0;place-items:stretch}:host([data-modal-type="history-2014-present"]) .modal{width:100%;height:100dvh;max-height:100dvh;border-radius:0}:host([data-modal-type="history-2014-present"]) .modal-header{padding:20px 20px 18px;gap:8px}:host([data-modal-type="history-2014-present"]) .close{width:44px;height:44px}:host([data-modal-type="history-2014-present"]) h1{font-size:24px}:host([data-modal-type="history-2014-present"]) .modal-body{padding:24px 20px}:host([data-modal-type="history-2014-present"]) .intro{grid-template-columns:1fr;gap:24px}:host([data-modal-type="history-2014-present"]) .description p{font-size:15px}:host([data-modal-type="history-2014-present"]) .records{margin-top:36px;padding-top:32px}:host([data-modal-type="history-2014-present"]) .feature-records{grid-template-columns:1fr}:host([data-modal-type="history-2014-present"]) .record-grid{grid-template-columns:1fr 1fr}:host([data-modal-type="history-2014-present"]) .history-timeline{padding:9px 18px 10px;overscroll-behavior-inline:contain}:host([data-modal-type="history-2014-present"]) .modal-footer{padding:16px 20px}:host([data-modal-type="history-2014-present"]) .button{width:100%}} @media(max-width:430px){:host([data-modal-type="history-2014-present"]) .record-grid{grid-template-columns:1fr}} @media(prefers-reduced-motion:reduce){:host([data-modal-type="history-2014-present"]) *{scroll-behavior:auto!important;transition:none!important}} /* ===== 1999년~2014년 역사 모달 ===== */ :host([data-modal-type="history-1999-2014"]) html.embedded,:host([data-modal-type="history-1999-2014"]) html.embedded body{background:transparent!important}:host([data-modal-type="history-1999-2014"]) .embedded .demo-page{display:none!important}:host([data-modal-type="history-1999-2014"]) .embedded .modal-layer{background:transparent!important;backdrop-filter:none!important} :host([data-modal-type="history-1999-2014"]) .modal{width:min(100%,1056px)!important;max-height:88vh!important}:host([data-modal-type="history-1999-2014"]) h1{font-size:clamp(24px,2.5vw,32px)!important}:host([data-modal-type="history-1999-2014"]) .close{position:relative!important;width:44px!important;height:44px!important;padding:0!important}:host([data-modal-type="history-1999-2014"]) .close::before,:host([data-modal-type="history-1999-2014"]) .close::after{left:50%!important;top:50%!important;width:20px!important}:host([data-modal-type="history-1999-2014"]) .close::before{transform:translate(-50%,-50%) rotate(45deg)!important}:host([data-modal-type="history-1999-2014"]) .close::after{transform:translate(-50%,-50%) rotate(-45deg)!important} :host([data-modal-type="history-1999-2014"]){ --krds-primary-50:#ecf2fe; --krds-primary-100:#d8e5fd; --krds-primary-500:#246beb; --krds-primary-600:#1d56bc; --krds-primary-700:#16408d; --krds-primary-800:#0e2b5e; --krds-gray-0:#fff; --krds-gray-5:#f8f8f8; --krds-gray-10:#f0f0f0; --krds-gray-20:#e4e4e4; --krds-gray-30:#d8d8d8; --krds-gray-60:#717171; --krds-gray-70:#555; --krds-gray-80:#2d2d2d; --krds-gray-90:#1d1d1d; --krds-focus:#0085ff; --modal-w:1120px; } :host([data-modal-type="history-1999-2014"]) *{box-sizing:border-box} :host([data-modal-type="history-1999-2014"]) html{font-family:Paperlogy,"Noto Sans KR",sans-serif;color:var(--krds-gray-90);line-height:1.6} :host([data-modal-type="history-1999-2014"]) body{margin:0;background:#eef1f5} :host([data-modal-type="history-1999-2014"]) button,:host([data-modal-type="history-1999-2014"]) a{font:inherit} :host([data-modal-type="history-1999-2014"]) button{cursor:pointer} :host([data-modal-type="history-1999-2014"]) :focus-visible{outline:3px solid var(--krds-focus);outline-offset:3px} :host([data-modal-type="history-1999-2014"]) .demo-page{min-height:100vh;display:grid;place-items:center;padding:64px 24px;background:linear-gradient(135deg,#eef3fb,#f7f7f7)} :host([data-modal-type="history-1999-2014"]) .open-modal{min-height:48px;padding:0 22px;border:0;border-radius:8px;background:var(--krds-primary-600);color:#fff;font-weight:700;box-shadow:0 4px 12px #16408d33} :host([data-modal-type="history-1999-2014"]) .open-modal:hover{background:var(--krds-primary-700)} :host([data-modal-type="history-1999-2014"]) .modal-layer{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;padding:32px;background:#111827b8;backdrop-filter:blur(3px)} :host([data-modal-type="history-1999-2014"]) .modal-layer[hidden]{display:none} :host([data-modal-type="history-1999-2014"]) .modal{width:min(100%,var(--modal-w));max-height:calc(100vh - 64px);display:flex;flex-direction:column;background:#fff;border-radius:16px;box-shadow:0 24px 80px #0006;overflow:hidden} :host([data-modal-type="history-1999-2014"]) .modal-header{display:flex;align-items:flex-start;gap:24px;padding:32px 40px 28px;border-bottom:1px solid var(--krds-gray-20);background:#fff} :host([data-modal-type="history-1999-2014"]) .heading{min-width:0;flex:1} :host([data-modal-type="history-1999-2014"]) .eyebrow{display:flex;align-items:center;gap:10px;margin:0 0 8px;color:var(--krds-primary-600);font-size:15px;font-weight:700} :host([data-modal-type="history-1999-2014"]) .eyebrow::before{content:"";width:4px;height:20px;border-radius:2px;background:var(--krds-primary-500)} :host([data-modal-type="history-1999-2014"]) h1{margin:0;font-size:clamp(24px,3vw,36px);line-height:1.35;letter-spacing:-.025em} :host([data-modal-type="history-1999-2014"]) .close{flex:0 0 auto;width:48px;height:48px;display:grid;place-items:center;border:1px solid transparent;border-radius:8px;background:transparent;color:var(--krds-gray-80)} :host([data-modal-type="history-1999-2014"]) .close:hover{background:var(--krds-gray-10)} :host([data-modal-type="history-1999-2014"]) .close::before,:host([data-modal-type="history-1999-2014"]) .close::after{content:"";position:absolute;width:22px;height:2px;border-radius:2px;background:currentColor} :host([data-modal-type="history-1999-2014"]) .close::before{transform:rotate(45deg)}:host([data-modal-type="history-1999-2014"]) .close::after{transform:rotate(-45deg)} :host([data-modal-type="history-1999-2014"]) .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} :host([data-modal-type="history-1999-2014"]) .modal-body{overflow:auto;overscroll-behavior:contain;scrollbar-gutter:stable;padding:40px}:host([data-modal-type="history-1999-2014"]) .representative{display:block;width:100%;height:auto;aspect-ratio:8/3;margin-bottom:32px;border-radius:12px;object-fit:cover} :host([data-modal-type="history-1999-2014"]) .hero::after{content:"";position:absolute;inset:auto 0 0;height:34%;background:linear-gradient(transparent,#0008)} :host([data-modal-type="history-1999-2014"]) .content{margin:0} :host([data-modal-type="history-1999-2014"]) .content p{margin:0 0 16px;color:var(--krds-gray-70);font-size:16px} :host([data-modal-type="history-1999-2014"]) .section{margin-top:48px;padding-top:40px;border-top:1px solid var(--krds-gray-20)} :host([data-modal-type="history-1999-2014"]) .section-head{display:flex;align-items:end;justify-content:space-between;gap:16px;margin-bottom:20px} :host([data-modal-type="history-1999-2014"]) h2{margin:0;font-size:24px;letter-spacing:-.02em}:host([data-modal-type="history-1999-2014"]) .count{color:var(--krds-gray-60);font-size:14px} :host([data-modal-type="history-1999-2014"]) .card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} :host([data-modal-type="history-1999-2014"]) .card{overflow:hidden;border:1px solid var(--krds-gray-20);border-radius:12px;background:#fff} :host([data-modal-type="history-1999-2014"]) .thumb{position:relative;aspect-ratio:4/3;overflow:hidden;background:#d9e1e8} :host([data-modal-type="history-1999-2014"]) .thumb img{display:block;width:100%;height:100%;object-fit:cover} :host([data-modal-type="history-1999-2014"]) .card-body{padding:18px}:host([data-modal-type="history-1999-2014"]) .card h3{margin:0 0 8px;font-size:17px;line-height:1.45;color:var(--krds-primary-700)} :host([data-modal-type="history-1999-2014"]) .card p{margin:0;color:var(--krds-gray-70);font-size:14px;line-height:1.55} :host([data-modal-type="history-1999-2014"]) .archive-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:32px;padding-top:32px;border-top:1px solid var(--krds-gray-20)} :host([data-modal-type="history-1999-2014"]) .archive-item{margin:0}:host([data-modal-type="history-1999-2014"]) .archive-thumb{position:relative;aspect-ratio:4/3;overflow:hidden;border-radius:12px;background:#d9e1e8} :host([data-modal-type="history-1999-2014"]) .archive-thumb img{display:block;width:100%;height:100%;object-fit:cover} :host([data-modal-type="history-1999-2014"]) .archive-item figcaption{padding:10px 4px 0;text-align:center;font-size:14px;font-weight:700;color:var(--krds-gray-80)} :host([data-modal-type="history-1999-2014"]) .history-timeline{position:relative;z-index:5;flex:0 0 auto;padding:11px 26px 12px;overflow-x:auto;color:#fff;background:linear-gradient(135deg,#0b4f8a,#087bad 55%,#0b4f8a);box-shadow:0 -5px 16px #12385d1f}:host([data-modal-type="history-1999-2014"]) .timeline-track{position:relative;display:grid;grid-template-columns:repeat(5,minmax(145px,1fr));min-width:760px;gap:12px}:host([data-modal-type="history-1999-2014"]) .timeline-track::before{content:"";position:absolute;top:23px;right:7%;left:7%;height:2px;background:repeating-linear-gradient(90deg,#86cde8 0 8px,transparent 8px 14px)}:host([data-modal-type="history-1999-2014"]) .timeline-item{position:relative;text-align:center}:host([data-modal-type="history-1999-2014"]) .timeline-year{position:relative;z-index:1;width:48px;height:48px;display:grid;place-items:center;margin:0 auto 6px;border:3px solid #f5a623;border-radius:50%;background:#fff;color:var(--krds-primary-700);font-size:14px;font-weight:700;box-shadow:0 2px 6px #003d7140}:host([data-modal-type="history-1999-2014"]) .timeline-note{display:block;font-size:10.5px;font-weight:600;line-height:1.35;word-break:keep-all} :host([data-modal-type="history-1999-2014"]) .modal-footer{display:flex;justify-content:flex-end;gap:10px;padding:20px 40px;border-top:1px solid var(--krds-gray-20);background:var(--krds-gray-5)} :host([data-modal-type="history-1999-2014"]) .button{min-width:92px;min-height:48px;padding:0 20px;border-radius:8px;font-weight:700} :host([data-modal-type="history-1999-2014"]) .button-secondary{border:1px solid var(--krds-gray-60);background:#fff;color:var(--krds-gray-90)} :host([data-modal-type="history-1999-2014"]) .button-secondary:hover{background:var(--krds-gray-10)} :host([data-modal-type="history-1999-2014"]) .button-primary{border:1px solid var(--krds-primary-600);background:var(--krds-primary-600);color:#fff} :host([data-modal-type="history-1999-2014"]) .button-primary:hover{background:var(--krds-primary-700)} @media(max-width:760px){ :host([data-modal-type="history-1999-2014"]) .modal-layer{padding:0;place-items:stretch}:host([data-modal-type="history-1999-2014"]) .modal{width:100%;max-height:100dvh;height:100dvh;border-radius:0} :host([data-modal-type="history-1999-2014"]) .modal-header{padding:20px 20px 18px;gap:8px}:host([data-modal-type="history-1999-2014"]) .close{width:44px;height:44px}:host([data-modal-type="history-1999-2014"]) h1{font-size:24px} :host([data-modal-type="history-1999-2014"]) .modal-body{padding:24px 20px} :host([data-modal-type="history-1999-2014"]) .content{margin-top:0}:host([data-modal-type="history-1999-2014"]) .section{margin-top:36px;padding-top:32px} :host([data-modal-type="history-1999-2014"]) .card-grid,:host([data-modal-type="history-1999-2014"]) .archive-grid{grid-template-columns:1fr}:host([data-modal-type="history-1999-2014"]) .history-timeline{padding:9px 18px 10px;overscroll-behavior-inline:contain}:host([data-modal-type="history-1999-2014"]) .modal-footer{padding:16px 20px}:host([data-modal-type="history-1999-2014"]) .button{flex:1} } @media(prefers-reduced-motion:reduce){:host([data-modal-type="history-1999-2014"]) *{scroll-behavior:auto!important;transition:none!important}} /* ===== 1966년~1999년 역사 모달 ===== */ :host([data-modal-type="history-1966-1999"]) html.embedded,:host([data-modal-type="history-1966-1999"]) html.embedded body{background:transparent!important}:host([data-modal-type="history-1966-1999"]) .embedded .demo-page{display:none!important}:host([data-modal-type="history-1966-1999"]) .embedded .modal-layer{background:transparent!important;backdrop-filter:none!important} :host([data-modal-type="history-1966-1999"]) .modal{width:min(100%,1056px)!important;max-height:88vh!important}:host([data-modal-type="history-1966-1999"]) h1{font-size:clamp(24px,2.5vw,32px)!important}:host([data-modal-type="history-1966-1999"]) .close{width:44px!important;height:44px!important;padding:0!important}:host([data-modal-type="history-1966-1999"]) .close::before,:host([data-modal-type="history-1966-1999"]) .close::after{left:50%!important;top:50%!important;width:20px!important}:host([data-modal-type="history-1966-1999"]) .close::before{transform:translate(-50%,-50%) rotate(45deg)!important}:host([data-modal-type="history-1966-1999"]) .close::after{transform:translate(-50%,-50%) rotate(-45deg)!important} :host([data-modal-type="history-1966-1999"]){--primary-500:#246beb;--primary-600:#1d56bc;--primary-700:#16408d;--gray-5:#f8f8f8;--gray-10:#f0f0f0;--gray-20:#e4e4e4;--gray-60:#717171;--gray-70:#555;--gray-80:#2d2d2d;--gray-90:#1d1d1d;--focus:#0085ff;--modal-w:1120px} :host([data-modal-type="history-1966-1999"]) *{box-sizing:border-box}:host([data-modal-type="history-1966-1999"]) html{font-family:Paperlogy,"Noto Sans KR",sans-serif;color:var(--gray-90);line-height:1.6}:host([data-modal-type="history-1966-1999"]) body{margin:0;background:#eef1f5}:host([data-modal-type="history-1966-1999"]) button{font:inherit;cursor:pointer}:host([data-modal-type="history-1966-1999"]) :focus-visible{outline:3px solid var(--focus);outline-offset:3px} :host([data-modal-type="history-1966-1999"]) .demo-page{min-height:100vh;display:grid;place-items:center;padding:64px 24px;background:linear-gradient(135deg,#eef3fb,#f7f7f7)}:host([data-modal-type="history-1966-1999"]) .open-modal{min-height:48px;padding:0 22px;border:0;border-radius:8px;background:var(--primary-600);color:#fff;font-weight:700}:host([data-modal-type="history-1966-1999"]) .open-modal:hover{background:var(--primary-700)} :host([data-modal-type="history-1966-1999"]) .modal-layer{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;padding:32px;background:#111827b8;backdrop-filter:blur(3px)}:host([data-modal-type="history-1966-1999"]) .modal-layer[hidden]{display:none}:host([data-modal-type="history-1966-1999"]) .modal{width:min(100%,var(--modal-w));max-height:calc(100vh - 64px);display:flex;flex-direction:column;overflow:hidden;border-radius:16px;background:#fff;box-shadow:0 24px 80px #0006} :host([data-modal-type="history-1966-1999"]) .modal-header{display:flex;align-items:flex-start;gap:24px;padding:32px 40px 28px;border-bottom:1px solid var(--gray-20)}:host([data-modal-type="history-1966-1999"]) .heading{min-width:0;flex:1}:host([data-modal-type="history-1966-1999"]) .eyebrow{display:flex;align-items:center;gap:10px;margin:0 0 8px;color:var(--primary-600);font-size:15px;font-weight:700}:host([data-modal-type="history-1966-1999"]) .eyebrow::before{content:"";width:4px;height:20px;border-radius:2px;background:var(--primary-500)}:host([data-modal-type="history-1966-1999"]) h1{margin:0;font-size:clamp(24px,3vw,36px);line-height:1.35;letter-spacing:-.025em} :host([data-modal-type="history-1966-1999"]) .close{position:relative;flex:0 0 auto;width:48px;height:48px;border:1px solid transparent;border-radius:8px;background:transparent;color:var(--gray-80)}:host([data-modal-type="history-1966-1999"]) .close:hover{background:var(--gray-10)}:host([data-modal-type="history-1966-1999"]) .close::before,:host([data-modal-type="history-1966-1999"]) .close::after{content:"";position:absolute;left:12px;top:22px;width:22px;height:2px;border-radius:2px;background:currentColor}:host([data-modal-type="history-1966-1999"]) .close::before{transform:rotate(45deg)}:host([data-modal-type="history-1966-1999"]) .close::after{transform:rotate(-45deg)}:host([data-modal-type="history-1966-1999"]) .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} :host([data-modal-type="history-1966-1999"]) .modal-body{overflow:auto;overscroll-behavior:contain;scrollbar-gutter:stable;padding:40px}:host([data-modal-type="history-1966-1999"]) .representative{display:block;width:100%;height:auto;aspect-ratio:8/3;margin-bottom:32px;border-radius:12px;object-fit:cover}:host([data-modal-type="history-1966-1999"]) .description p{margin:0 0 16px;color:var(--gray-70);font-size:16px}:host([data-modal-type="history-1966-1999"]) .section{margin-top:48px;padding-top:40px;border-top:1px solid var(--gray-20)}:host([data-modal-type="history-1966-1999"]) h2{margin:0 0 20px;font-size:24px;letter-spacing:-.02em} :host([data-modal-type="history-1966-1999"]) .feature-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}:host([data-modal-type="history-1966-1999"]) .feature{display:grid;grid-template-columns:180px 1fr;overflow:hidden;border:1px solid var(--gray-20);border-radius:12px;background:#fff}:host([data-modal-type="history-1966-1999"]) .feature-image{background:#d9e1e8}:host([data-modal-type="history-1966-1999"]) .feature-image img{display:block;width:100%;height:100%;object-fit:cover;aspect-ratio:4/3}:host([data-modal-type="history-1966-1999"]) .feature-body{padding:18px}:host([data-modal-type="history-1966-1999"]) .feature h3{margin:0 0 8px;color:var(--primary-700);font-size:17px;line-height:1.45}:host([data-modal-type="history-1966-1999"]) .feature p{margin:0;color:var(--gray-70);font-size:14px;line-height:1.55} :host([data-modal-type="history-1966-1999"]) .archive-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px 20px;margin-top:32px;padding-top:32px;border-top:1px solid var(--gray-20)}:host([data-modal-type="history-1966-1999"]) .archive{margin:0}:host([data-modal-type="history-1966-1999"]) .archive img{display:block;width:100%;height:auto;aspect-ratio:4/3;border-radius:12px;object-fit:cover}:host([data-modal-type="history-1966-1999"]) .archive figcaption{padding:10px 4px 0;text-align:center;color:var(--gray-80);font-size:14px;font-weight:700} :host([data-modal-type="history-1966-1999"]) .history-timeline{position:relative;z-index:5;flex:0 0 auto;padding:11px 26px 12px;overflow-x:auto;color:#fff;background:linear-gradient(135deg,#0b4f8a,#087bad 55%,#0b4f8a);box-shadow:0 -5px 16px #12385d1f}:host([data-modal-type="history-1966-1999"]) .timeline-track{position:relative;display:grid;grid-template-columns:repeat(5,minmax(145px,1fr));min-width:760px;gap:12px}:host([data-modal-type="history-1966-1999"]) .timeline-track::before{content:"";position:absolute;top:23px;right:7%;left:7%;height:2px;background:repeating-linear-gradient(90deg,#86cde8 0 8px,transparent 8px 14px)}:host([data-modal-type="history-1966-1999"]) .timeline-item{position:relative;text-align:center}:host([data-modal-type="history-1966-1999"]) .timeline-year{position:relative;z-index:1;width:48px;height:48px;display:grid;place-items:center;margin:0 auto 6px;border:3px solid #f5a623;border-radius:50%;background:#fff;color:var(--primary-700);font-size:14px;font-weight:700;box-shadow:0 2px 6px #003d7140}:host([data-modal-type="history-1966-1999"]) .timeline-note{display:block;font-size:10.5px;font-weight:600;line-height:1.35;word-break:keep-all} :host([data-modal-type="history-1966-1999"]) .modal-footer{display:flex;justify-content:flex-end;padding:20px 40px;border-top:1px solid var(--gray-20);background:var(--gray-5)}:host([data-modal-type="history-1966-1999"]) .button{min-width:92px;min-height:48px;padding:0 20px;border:1px solid var(--gray-60);border-radius:8px;background:#fff;color:var(--gray-90);font-weight:700}:host([data-modal-type="history-1966-1999"]) .button:hover{background:var(--gray-10)} @media(max-width:900px){:host([data-modal-type="history-1966-1999"]) .feature-grid{grid-template-columns:1fr}} @media(max-width:760px){:host([data-modal-type="history-1966-1999"]) .modal-layer{padding:0;place-items:stretch}:host([data-modal-type="history-1966-1999"]) .modal{width:100%;height:100dvh;max-height:100dvh;border-radius:0}:host([data-modal-type="history-1966-1999"]) .modal-header{padding:20px 20px 18px;gap:8px}:host([data-modal-type="history-1966-1999"]) .close{width:44px;height:44px}:host([data-modal-type="history-1966-1999"]) h1{font-size:24px}:host([data-modal-type="history-1966-1999"]) .modal-body{padding:24px 20px}:host([data-modal-type="history-1966-1999"]) .section{margin-top:36px;padding-top:32px}:host([data-modal-type="history-1966-1999"]) .feature{grid-template-columns:1fr}:host([data-modal-type="history-1966-1999"]) .feature-image img{height:auto}:host([data-modal-type="history-1966-1999"]) .archive-grid{grid-template-columns:1fr 1fr}:host([data-modal-type="history-1966-1999"]) .history-timeline{padding:9px 18px 10px;overscroll-behavior-inline:contain}:host([data-modal-type="history-1966-1999"]) .modal-footer{padding:16px 20px}:host([data-modal-type="history-1966-1999"]) .button{width:100%}} @media(max-width:430px){:host([data-modal-type="history-1966-1999"]) .archive-grid{grid-template-columns:1fr}} @media(prefers-reduced-motion:reduce){:host([data-modal-type="history-1966-1999"]) *{scroll-behavior:auto!important;transition:none!important}} /* ===== 사진으로 보는 연구원 모달 ===== */ :host([data-modal-type="photo-gallery"]) html.embedded,:host([data-modal-type="photo-gallery"]) html.embedded body{background:transparent!important}:host([data-modal-type="photo-gallery"]) .embedded .demo-page{display:none!important}:host([data-modal-type="photo-gallery"]) .embedded .modal-layer{background:transparent!important;backdrop-filter:none!important} :host([data-modal-type="photo-gallery"]) .modal{width:min(100%,1056px)!important;max-height:88vh!important}:host([data-modal-type="photo-gallery"]) h1{font-size:clamp(24px,2.5vw,32px)!important}:host([data-modal-type="photo-gallery"]) .close{width:44px!important;height:44px!important;padding:0!important}:host([data-modal-type="photo-gallery"]) .close::before,:host([data-modal-type="photo-gallery"]) .close::after{left:50%!important;top:50%!important;width:20px!important}:host([data-modal-type="photo-gallery"]) .close::before{transform:translate(-50%,-50%) rotate(45deg)!important}:host([data-modal-type="photo-gallery"]) .close::after{transform:translate(-50%,-50%) rotate(-45deg)!important} :host([data-modal-type="photo-gallery"]){--primary-500:#246beb;--primary-600:#1d56bc;--primary-700:#16408d;--gray-5:#f8f8f8;--gray-10:#f0f0f0;--gray-20:#e4e4e4;--gray-60:#717171;--gray-70:#555;--gray-80:#2d2d2d;--gray-90:#1d1d1d;--focus:#0085ff;--modal-w:1120px} :host([data-modal-type="photo-gallery"]) *{box-sizing:border-box}:host([data-modal-type="photo-gallery"]) html{font-family:Paperlogy,"Noto Sans KR",sans-serif;color:var(--gray-90);line-height:1.6}:host([data-modal-type="photo-gallery"]) body{margin:0;background:#eef1f5}:host([data-modal-type="photo-gallery"]) button{font:inherit;cursor:pointer}:host([data-modal-type="photo-gallery"]) :focus-visible{outline:3px solid var(--focus);outline-offset:3px} :host([data-modal-type="photo-gallery"]) .demo-page{min-height:100vh;display:grid;place-items:center;padding:64px 24px;background:linear-gradient(135deg,#eef3fb,#f7f7f7)}:host([data-modal-type="photo-gallery"]) .open-modal{min-height:48px;padding:0 22px;border:0;border-radius:8px;background:var(--primary-600);color:#fff;font-weight:700}:host([data-modal-type="photo-gallery"]) .open-modal:hover{background:var(--primary-700)} :host([data-modal-type="photo-gallery"]) .modal-layer{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;padding:32px;background:#111827b8;backdrop-filter:blur(3px)}:host([data-modal-type="photo-gallery"]) .modal-layer[hidden]{display:none}:host([data-modal-type="photo-gallery"]) .modal{width:min(100%,var(--modal-w));max-height:calc(100vh - 64px);display:flex;flex-direction:column;overflow:hidden;border-radius:16px;background:#fff;box-shadow:0 24px 80px #0006} :host([data-modal-type="photo-gallery"]) .modal-header{display:flex;align-items:flex-start;gap:24px;padding:32px 40px 28px;border-bottom:1px solid var(--gray-20)}:host([data-modal-type="photo-gallery"]) .heading{min-width:0;flex:1}:host([data-modal-type="photo-gallery"]) .eyebrow{display:flex;align-items:center;gap:10px;margin:0 0 8px;color:var(--primary-600);font-size:15px;font-weight:700}:host([data-modal-type="photo-gallery"]) .eyebrow::before{content:"";width:4px;height:20px;border-radius:2px;background:var(--primary-500)}:host([data-modal-type="photo-gallery"]) h1{margin:0;font-size:clamp(24px,3vw,36px);line-height:1.35;letter-spacing:-.025em} :host([data-modal-type="photo-gallery"]) .close{position:relative;flex:0 0 auto;width:48px;height:48px;border:1px solid transparent;border-radius:8px;background:transparent;color:var(--gray-80)}:host([data-modal-type="photo-gallery"]) .close:hover{background:var(--gray-10)}:host([data-modal-type="photo-gallery"]) .close::before,:host([data-modal-type="photo-gallery"]) .close::after{content:"";position:absolute;left:12px;top:22px;width:22px;height:2px;border-radius:2px;background:currentColor}:host([data-modal-type="photo-gallery"]) .close::before{transform:rotate(45deg)}:host([data-modal-type="photo-gallery"]) .close::after{transform:rotate(-45deg)}:host([data-modal-type="photo-gallery"]) .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} :host([data-modal-type="photo-gallery"]) .modal-body{overflow:auto;overscroll-behavior:contain;scrollbar-gutter:stable;padding:40px}:host([data-modal-type="photo-gallery"]) .representative{display:block;width:100%;height:auto;aspect-ratio:8/3;margin-bottom:32px;border-radius:12px;object-fit:cover}:host([data-modal-type="photo-gallery"]) .description p{margin:0 0 16px;color:var(--gray-70);font-size:16px}:host([data-modal-type="photo-gallery"]) .section{margin-top:48px;padding-top:40px;border-top:1px solid var(--gray-20)}:host([data-modal-type="photo-gallery"]) h2{margin:0 0 20px;font-size:24px;letter-spacing:-.02em}:host([data-modal-type="photo-gallery"]) .count{color:var(--gray-60);font-size:14px;font-weight:500} :host([data-modal-type="photo-gallery"]) .photo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px 20px}:host([data-modal-type="photo-gallery"]) .photo-card{display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--gray-20);border-radius:12px;background:#fff}:host([data-modal-type="photo-gallery"]) .photo-card img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}:host([data-modal-type="photo-gallery"]) .photo-body{display:flex;flex:1;flex-direction:column;padding:16px}:host([data-modal-type="photo-gallery"]) .date{order:4;display:block;margin-top:auto;padding-top:12px;color:var(--primary-600);font-size:13px;font-weight:700}:host([data-modal-type="photo-gallery"]) .photo-card h3{order:1;margin:0;color:var(--gray-90);font-size:16px;line-height:1.5}:host([data-modal-type="photo-gallery"]) .photo-card p{order:2;display:-webkit-box;margin:8px 0 0;overflow:hidden;color:var(--gray-70);font-size:13px;line-height:1.55;-webkit-box-orient:vertical;-webkit-line-clamp:2}:host([data-modal-type="photo-gallery"]) .photo-card p.expanded{display:block;overflow:visible;-webkit-line-clamp:unset}:host([data-modal-type="photo-gallery"]) .more-button{order:3;align-self:flex-start;margin-top:10px;padding:4px 0;border:0;background:transparent;color:var(--primary-600);font-size:13px;font-weight:700;text-decoration:underline;text-underline-offset:3px}:host([data-modal-type="photo-gallery"]) .more-button:hover{color:var(--primary-700)} :host([data-modal-type="photo-gallery"]) .modal-footer{display:flex;justify-content:flex-end;padding:20px 40px;border-top:1px solid var(--gray-20);background:var(--gray-5)}:host([data-modal-type="photo-gallery"]) .button{min-width:92px;min-height:48px;padding:0 20px;border:1px solid var(--gray-60);border-radius:8px;background:#fff;color:var(--gray-90);font-weight:700}:host([data-modal-type="photo-gallery"]) .button:hover{background:var(--gray-10)} @media(max-width:800px){:host([data-modal-type="photo-gallery"]) .photo-grid{grid-template-columns:1fr 1fr}}@media(max-width:760px){:host([data-modal-type="photo-gallery"]) .modal-layer{padding:0;place-items:stretch}:host([data-modal-type="photo-gallery"]) .modal{width:100%;height:100dvh;max-height:100dvh;border-radius:0}:host([data-modal-type="photo-gallery"]) .modal-header{padding:20px 20px 18px;gap:8px}:host([data-modal-type="photo-gallery"]) .close{width:44px;height:44px}:host([data-modal-type="photo-gallery"]) h1{font-size:24px}:host([data-modal-type="photo-gallery"]) .modal-body{padding:24px 20px}:host([data-modal-type="photo-gallery"]) .description p{font-size:15px}:host([data-modal-type="photo-gallery"]) .section{margin-top:36px;padding-top:32px}:host([data-modal-type="photo-gallery"]) .modal-footer{padding:16px 20px}:host([data-modal-type="photo-gallery"]) .button{width:100%}}@media(max-width:480px){:host([data-modal-type="photo-gallery"]) .photo-grid{grid-template-columns:1fr}}@media(prefers-reduced-motion:reduce){:host([data-modal-type="photo-gallery"]) *{transition:none!important}} /* ===== 연구장비 아카이브 모달 ===== */ :host([data-modal-type="research-equipment"]) html.embedded,:host([data-modal-type="research-equipment"]) html.embedded body{background:transparent!important}:host([data-modal-type="research-equipment"]) .embedded .demo-page{display:none!important}:host([data-modal-type="research-equipment"]) .embedded .modal-layer{background:transparent!important;backdrop-filter:none!important} :host([data-modal-type="research-equipment"]) .modal{width:min(100%,1056px)!important;max-height:88vh!important}:host([data-modal-type="research-equipment"]) h1{font-size:clamp(24px,2.5vw,32px)!important}:host([data-modal-type="research-equipment"]) .close{width:44px!important;height:44px!important;padding:0!important}:host([data-modal-type="research-equipment"]) .close::before,:host([data-modal-type="research-equipment"]) .close::after{left:50%!important;top:50%!important;width:20px!important}:host([data-modal-type="research-equipment"]) .close::before{transform:translate(-50%,-50%) rotate(45deg)!important}:host([data-modal-type="research-equipment"]) .close::after{transform:translate(-50%,-50%) rotate(-45deg)!important} :host([data-modal-type="research-equipment"]){--primary-500:#246beb;--primary-600:#1d56bc;--primary-700:#16408d;--gray-5:#f8f8f8;--gray-10:#f0f0f0;--gray-20:#e4e4e4;--gray-60:#717171;--gray-80:#2d2d2d;--gray-90:#1d1d1d;--focus:#0085ff;--modal-w:1120px}:host([data-modal-type="research-equipment"]) *{box-sizing:border-box}:host([data-modal-type="research-equipment"]) html{font-family:Paperlogy,"Noto Sans KR",sans-serif;color:var(--gray-90);line-height:1.6}:host([data-modal-type="research-equipment"]) body{margin:0;background:#eef1f5}:host([data-modal-type="research-equipment"]) button{font:inherit;cursor:pointer}:host([data-modal-type="research-equipment"]) :focus-visible{outline:3px solid var(--focus);outline-offset:3px} :host([data-modal-type="research-equipment"]) .demo-page{min-height:100vh;display:grid;place-items:center;padding:64px 24px;background:linear-gradient(135deg,#eef3fb,#f7f7f7)}:host([data-modal-type="research-equipment"]) .open-modal{min-height:48px;padding:0 22px;border:0;border-radius:8px;background:var(--primary-600);color:#fff;font-weight:700}:host([data-modal-type="research-equipment"]) .open-modal:hover{background:var(--primary-700)}:host([data-modal-type="research-equipment"]) .modal-layer{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;padding:32px;background:#111827b8;backdrop-filter:blur(3px)}:host([data-modal-type="research-equipment"]) .modal-layer[hidden]{display:none}:host([data-modal-type="research-equipment"]) .modal{width:min(100%,var(--modal-w));max-height:calc(100vh - 64px);display:flex;flex-direction:column;overflow:hidden;border-radius:16px;background:#fff;box-shadow:0 24px 80px #0006} :host([data-modal-type="research-equipment"]) .modal-header{display:flex;align-items:flex-start;gap:24px;padding:32px 40px 28px;border-bottom:1px solid var(--gray-20)}:host([data-modal-type="research-equipment"]) .heading{min-width:0;flex:1}:host([data-modal-type="research-equipment"]) h1{margin:0;font-size:clamp(24px,3vw,36px);line-height:1.35;letter-spacing:-.025em}:host([data-modal-type="research-equipment"]) .close{position:relative;flex:0 0 auto;width:48px;height:48px;border:1px solid transparent;border-radius:8px;background:transparent;color:var(--gray-80)}:host([data-modal-type="research-equipment"]) .close:hover{background:var(--gray-10)}:host([data-modal-type="research-equipment"]) .close::before,:host([data-modal-type="research-equipment"]) .close::after{content:"";position:absolute;left:12px;top:22px;width:22px;height:2px;border-radius:2px;background:currentColor}:host([data-modal-type="research-equipment"]) .close::before{transform:rotate(45deg)}:host([data-modal-type="research-equipment"]) .close::after{transform:rotate(-45deg)}:host([data-modal-type="research-equipment"]) .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} :host([data-modal-type="research-equipment"]) .modal-body{overflow:auto;overscroll-behavior:contain;scrollbar-gutter:stable;padding:40px;background:var(--gray-5)} /* 연구장비 현황 표 */ :host([data-modal-type="research-equipment"]) .equipment-table-section{margin-bottom:32px}:host([data-modal-type="research-equipment"]) .equipment-table-section h2{margin:0 0 16px;color:var(--primary-700);font-size:22px;line-height:1.4;letter-spacing:-.02em}:host([data-modal-type="research-equipment"]) .equipment-table-wrap{overflow-x:auto;border:1px solid #b8d3f5;border-radius:12px;background:#f4f8ff}:host([data-modal-type="research-equipment"]) .equipment-table{width:100%;min-width:680px;border-collapse:collapse;table-layout:fixed}:host([data-modal-type="research-equipment"]) .equipment-table td{height:58px;padding:13px 16px;border-right:1px solid #c9dcf4;border-bottom:1px solid #c9dcf4;background:#eaf3ff;color:#16408d;font-size:15px;font-weight:700;text-align:center;vertical-align:middle}:host([data-modal-type="research-equipment"]) .equipment-table td:last-child{border-right:0}:host([data-modal-type="research-equipment"]) .equipment-table tbody tr:last-child td{border-bottom:0} /* 영역5부터 영역12까지는 흰색 배경 적용 */ :host([data-modal-type="research-equipment"]) .equipment-table tbody tr:nth-child(n+2) td{background:#fff} /* 연구장비 사진 목록 */ :host([data-modal-type="research-equipment"]) .equipment-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}:host([data-modal-type="research-equipment"]) .equipment{margin:0;overflow:hidden;border:1px solid #cfd3d8;border-radius:12px;background:#fff}:host([data-modal-type="research-equipment"]) .equipment img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover} /* ===== 연도별 모달 공통 하단 연혁: 신규 아트월 디자인 ===== */ .history-timeline{position:relative!important;padding:12px 26px 16px!important;background:#0878b8!important;box-shadow:0 -4px 14px #12385d26!important} .history-timeline::before{display:none!important} .history-timeline .timeline-track{position:relative;z-index:1;align-items:stretch;gap:12px!important} .history-timeline .timeline-track::before{top:auto!important;right:0!important;bottom:18px!important;left:0!important;height:0!important;border-top:2px dashed #e8f7ff;background:none!important} .history-timeline .timeline-item{min-width:0;min-height:90px;display:grid;grid-template-rows:minmax(64px,1fr) auto;align-items:end;justify-items:center;padding:0 10px;text-align:left!important} .history-timeline .timeline-note{order:1;box-sizing:border-box;width:100%;min-width:0;height:auto;min-height:64px;display:flex!important;align-items:flex-end;justify-content:flex-start;margin:0;padding:0;color:#fff;font-size:11.5px!important;font-weight:600!important;line-height:1.4!important;word-break:keep-all;overflow-wrap:anywhere;overflow:visible;text-align:left} .history-timeline .timeline-note-text{display:block;width:100%;max-width:100%;min-width:0;text-align:left;overflow-wrap:anywhere} .history-timeline .timeline-note-line{display:block;padding-left:.8em;text-indent:-.8em} .history-timeline .timeline-year{order:2;z-index:2;width:auto!important;min-width:70px;height:42px!important;margin:8px auto 0!important;padding:0 10px;border:3px solid #183a73!important;border-radius:8px!important;background:#fff!important;color:#12366d!important;font-size:18px!important;font-weight:700;box-shadow:0 2px 7px #002e6466!important} @media(max-width:760px){.history-timeline{padding:10px 18px 12px!important}.history-timeline .timeline-track{min-width:760px}.history-timeline .timeline-item{min-height:90px}.history-timeline .timeline-note{font-size:11px!important}} :host([data-modal-type="research-equipment"]) .modal-footer{display:flex;justify-content:flex-end;padding:20px 40px;border-top:1px solid var(--gray-20);background:#fff}:host([data-modal-type="research-equipment"]) .button{min-width:92px;min-height:48px;padding:0 20px;border:1px solid var(--gray-60);border-radius:8px;background:#fff;color:var(--gray-90);font-weight:700}:host([data-modal-type="research-equipment"]) .button:hover{background:var(--gray-10)} @media(max-width:900px){:host([data-modal-type="research-equipment"]) .equipment-grid{grid-template-columns:repeat(3,1fr)}}@media(max-width:760px){:host([data-modal-type="research-equipment"]) .modal-layer{padding:0;place-items:stretch}:host([data-modal-type="research-equipment"]) .modal{width:100%;height:100dvh;max-height:100dvh;border-radius:0}:host([data-modal-type="research-equipment"]) .modal-header{padding:20px 20px 18px;gap:8px}:host([data-modal-type="research-equipment"]) .close{width:44px;height:44px}:host([data-modal-type="research-equipment"]) h1{font-size:24px}:host([data-modal-type="research-equipment"]) .modal-body{padding:24px 20px}:host([data-modal-type="research-equipment"]) .equipment-table-section{margin-bottom:24px}:host([data-modal-type="research-equipment"]) .equipment-table-section h2{font-size:20px}:host([data-modal-type="research-equipment"]) .equipment-grid{grid-template-columns:repeat(2,1fr);gap:14px}:host([data-modal-type="research-equipment"]) .modal-footer{padding:16px 20px}:host([data-modal-type="research-equipment"]) .button{width:100%}}@media(max-width:430px){:host([data-modal-type="research-equipment"]) .equipment-grid{grid-template-columns:1fr}}@media(prefers-reduced-motion:reduce){:host([data-modal-type="research-equipment"]) *{transition:none!important}} /* ===== 모바일 모달 공통 높이 보정 ===== 데스크톱용 max-height:88vh보다 우선 적용하여 화면 아래 여백을 제거한다. */ @media(max-width:760px){ :host([data-modal-type]) .modal-layer{ height:100vh!important; height:100dvh!important; min-height:100vh!important; min-height:100dvh!important; padding:0!important; place-items:stretch!important; } :host([data-modal-type]) .modal{ width:100%!important; height:100vh!important; height:100dvh!important; max-height:100vh!important; max-height:100dvh!important; border-radius:0!important; } }