@charset "UTF-8";
/* ==========================================================================
WCE 2026 - Sub Page Styles
========================================================================== */
.sub-body{
padding-top: var(--header-h);
}
/* ==========================================================================
SUB VISUAL
========================================================================== */
.sub-visual{
position:relative;
padding:100px 0 80px;
background:var(--c-navy-800);
color:#fff;
overflow:hidden;
}
.sub-visual-bg{
position:absolute;
inset:0;
z-index:0;
}
.sub-bg-gradient{
position:absolute;
inset:0;
background:
radial-gradient(circle at 80% 30%, rgba(0,180,216,0.25) 0%, transparent 50%),
radial-gradient(circle at 20% 80%, rgba(27,196,125,0.20) 0%, transparent 50%);
}
.sub-bg-grid{
position:absolute;
inset:0;
background-image:
linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
background-size:50px 50px;
mask-image:linear-gradient(180deg, black 0%, transparent 100%);
-webkit-mask-image:linear-gradient(180deg, black 0%, transparent 100%);
}
.sub-visual .inner{position:relative;z-index:2;}
.sub-visual-inner{
text-align:center;
}
.sub-eyebrow{
display:inline-block;
font-family:var(--font-en);
font-size:14.3px;
font-weight:700;
letter-spacing:4px;
color:var(--c-green-400);
margin-bottom:16px;
padding:6px 16px;
background:rgba(255,255,255,0.08);
border:1px solid rgba(255,255,255,0.15);
border-radius:50px;
}
.sub-title{
font-size:61.6px;
font-weight:800;
letter-spacing:-0.03em;
color:#fff;
margin-bottom:16px;
}
.sub-lead{
font-size:18.7px;
color:rgba(255,255,255,0.7);
letter-spacing:-0.01em;
}
/* ==========================================================================
BREADCRUMB
========================================================================== */
.breadcrumb{
background:#fff;
border-bottom:1px solid var(--c-border);
}
.breadcrumb ol{
display:flex;
align-items:center;
height:54px;
gap:8px;
}
.breadcrumb li{
position:relative;
font-size:14.3px;
}
.breadcrumb li + li::before{
content:'/';
color:var(--c-gray-300);
margin-right:8px;
font-family:var(--font-en);
}
.breadcrumb li a{
color:var(--c-gray-500);
}
.breadcrumb li.current a{
color:var(--c-navy-800);
font-weight:600;
}
.ico-home{
display:inline-block;
width:14px;height:14px;
background:currentColor;
-webkit-mask:url("data:image/svg+xml;utf8,") center/contain no-repeat;
mask:url("data:image/svg+xml;utf8,") center/contain no-repeat;
vertical-align:middle;
}
/* ==========================================================================
SUB LAYOUT
========================================================================== */
.sub-contents{
padding:80px 0 120px;
background:var(--c-gray-50);
min-height:600px;
}
.sub-layout{
display:grid;
grid-template-columns:260px 1fr;
gap:60px;
align-items:start;
}
/* ==========================================================================
LNB
========================================================================== */
.lnb{
position:sticky;
top:calc(var(--header-h) + 20px);
background:#fff;
border-radius:20px;
padding:32px;
box-shadow:var(--shadow-sm);
}
.lnb-title{
padding-bottom:24px;
margin-bottom:20px;
border-bottom:2px solid var(--c-navy-800);
}
.lnb-eyebrow{
display:block;
font-family:var(--font-en);
font-size:12.1px;
font-weight:700;
letter-spacing:2px;
color:var(--c-cyan-500);
margin-bottom:6px;
}
.lnb-title h3{
font-size:24.2px;
font-weight:800;
letter-spacing:-0.02em;
color:var(--c-navy-800);
}
.lnb-menu li{
border-bottom:1px solid var(--c-border);
}
.lnb-menu li:last-child{ border-bottom:none; }
.lnb-menu li a{
display:flex;
justify-content:space-between;
align-items:center;
padding:14px 4px;
font-size:15.4px;
font-weight:500;
color:var(--c-gray-600);
transition:all .2s var(--ease);
}
.lnb-menu li a .arrow{
opacity:0;
color:var(--c-cyan-500);
transition:all .2s var(--ease);
}
.lnb-menu li a:hover{ color:var(--c-cyan-500); padding-left:8px; }
.lnb-menu li a:hover .arrow{ opacity:1; }
.lnb-menu li.active a{
color:var(--c-navy-800);
font-weight:700;
}
.lnb-menu li.active a .arrow{ opacity:1; }
/* LNB Banner */
.lnb-banner{
display:block;
position:relative;
margin-top:24px;
padding:24px;
background:var(--grad-deep);
color:#fff;
border-radius:16px;
overflow:hidden;
transition:all .3s var(--ease);
}
.lnb-banner:hover{
transform:translateY(-2px);
box-shadow:0 12px 24px rgba(10,37,64,0.2);
}
.banner-tag{
display:inline-block;
font-family:var(--font-en);
font-size:11px;
font-weight:700;
letter-spacing:1.5px;
color:var(--c-green-400);
margin-bottom:8px;
}
.lnb-banner h4{
font-size:17.6px;
font-weight:700;
line-height:1.4;
letter-spacing:-0.02em;
}
.banner-arrow{
position:absolute;
bottom:20px;right:24px;
width:32px;height:32px;
background:rgba(255,255,255,0.15);
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
font-size:15.4px;
transition:all .3s var(--ease);
}
.lnb-banner:hover .banner-arrow{
background:#fff;
color:var(--c-navy-800);
transform:translateX(3px);
}
/* ==========================================================================
CONTENTS
========================================================================== */
.contents{
background:#fff;
border-radius:20px;
padding:48px;
box-shadow:var(--shadow-sm);
}
.contents-head{
display:flex;
justify-content:space-between;
align-items:flex-start;
margin-bottom:40px;
padding-bottom:24px;
border-bottom:1px solid var(--c-border);
}
.contents-title{
font-size:39.6px;
font-weight:800;
letter-spacing:-0.03em;
color:var(--c-navy-800);
}
.contents-tools{
display:flex;
gap:8px;
}
.tool-btn{
width:40px;height:40px;
background:var(--c-gray-50);
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
transition:all .2s var(--ease);
}
.tool-btn:hover{ background:var(--c-navy-800); color:#fff; }
.ico-share, .ico-print{
display:inline-block;
width:16px;height:16px;
background:currentColor;
color:var(--c-gray-500);
}
.tool-btn:hover .ico-share, .tool-btn:hover .ico-print{ color:#fff; }
.ico-share{
-webkit-mask:url("data:image/svg+xml;utf8,") center/contain no-repeat;
mask:url("data:image/svg+xml;utf8,") center/contain no-repeat;
}
.ico-print{
-webkit-mask:url("data:image/svg+xml;utf8,") center/contain no-repeat;
mask:url("data:image/svg+xml;utf8,") center/contain no-repeat;
}
/* Overview Card */
.overview-card{
position:relative;
border-radius:16px;
overflow:hidden;
margin-bottom:48px;
min-height:240px;
}
.oc-bg{
position:absolute;
inset:0;
}
.oc-bg svg{
width:100%;height:100%;
}
.oc-content{
position:relative;
z-index:2;
padding:48px;
color:#fff;
}
.oc-tag{
display:inline-block;
padding:6px 14px;
background:rgba(255,255,255,0.15);
border:1px solid rgba(255,255,255,0.25);
border-radius:50px;
font-family:var(--font-en);
font-size:12.1px;
font-weight:700;
letter-spacing:1.5px;
margin-bottom:20px;
backdrop-filter:blur(10px);
}
.oc-title{
font-size:39.6px;
font-weight:800;
line-height:1.2;
letter-spacing:-0.03em;
margin-bottom:8px;
}
.oc-subtitle{
font-size:17.6px;
font-weight:500;
color:rgba(255,255,255,0.7);
}
/* Block Title */
.block-title{
position:relative;
font-size:26.4px;
font-weight:700;
color:var(--c-navy-800);
letter-spacing:-0.02em;
margin:48px 0 24px;
padding-left:18px;
}
.block-title::before{
content:'';
position:absolute;
left:0;top:8px;
width:5px;height:22px;
background:var(--grad-brand);
border-radius:3px;
}
/* Info Table */
.info-table{
width:100%;
border-collapse:collapse;
border-top:2px solid var(--c-navy-800);
border-bottom:1px solid var(--c-border);
margin-bottom:48px;
}
.info-table th,
.info-table td{
padding:18px 24px;
text-align:left;
font-size:16.5px;
border-bottom:1px solid var(--c-border);
vertical-align:middle;
}
.info-table th{
background:var(--c-gray-50);
font-weight:600;
color:var(--c-navy-800);
width:200px;
letter-spacing:-0.02em;
}
.info-table td{
color:var(--c-gray-700);
line-height:1.65;
}
.info-table td em{
font-style:normal;
display:inline-block;
padding:2px 8px;
background:var(--c-gray-100);
border-radius:4px;
font-size:14.3px;
margin-left:6px;
color:var(--c-gray-600);
}
.info-table td strong{
color:var(--c-navy-800);
font-weight:700;
}
/* Feature Grid */
.feature-grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:20px;
margin-bottom:48px;
}
.feature-item{
position:relative;
padding:32px;
background:var(--c-gray-50);
border-radius:16px;
border:1px solid var(--c-border);
transition:all .3s var(--ease);
}
.feature-item:hover{
background:#fff;
border-color:var(--c-cyan-500);
transform:translateY(-4px);
box-shadow:var(--shadow-md);
}
.fi-num{
display:inline-block;
font-family:var(--font-en);
font-size:15.4px;
font-weight:700;
color:var(--c-cyan-500);
letter-spacing:2px;
margin-bottom:12px;
}
.feature-item h4{
font-size:22px;
font-weight:700;
color:var(--c-navy-800);
margin-bottom:8px;
letter-spacing:-0.02em;
}
.feature-item p{
font-size:15.4px;
line-height:1.65;
color:var(--c-gray-600);
}
/* Page CTA */
.page-cta{
margin-top:60px;
padding:40px;
background:var(--grad-deep);
border-radius:20px;
display:flex;
justify-content:space-between;
align-items:center;
flex-wrap:wrap;
gap:24px;
color:#fff;
}
.cta-text h4{
font-size:26.4px;
font-weight:700;
margin-bottom:6px;
letter-spacing:-0.02em;
}
.cta-text p{
font-size:16.5px;
color:rgba(255,255,255,0.7);
}
.cta-buttons{
display:flex;
gap:12px;
}
.btn-outline{
background:transparent;
border:1px solid rgba(255,255,255,0.4);
color:#fff;
}
.btn-outline:hover{
background:#fff;
color:var(--c-navy-800);
border-color:#fff;
}
/* ==========================================================================
RESPONSIVE
========================================================================== */
@media (max-width:1024px){
.sub-visual{padding:60px 0 50px;}
.sub-title{font-size:41.8px;}
.sub-contents{padding:40px 0 80px;}
.sub-layout{grid-template-columns:1fr;gap:24px;}
.lnb{
position:static;
padding:20px 24px;
}
.lnb-banner{display:none;}
.lnb-menu{
display:flex;
flex-wrap:wrap;
gap:8px;
}
.lnb-menu li{
border:none;
flex:1 1 auto;
}
.lnb-menu li a{
padding:10px 16px;
background:var(--c-gray-50);
border-radius:50px;
justify-content:center;
}
.lnb-menu li a .arrow{display:none;}
.lnb-menu li.active a{
background:var(--c-navy-800);
color:#fff;
}
.contents{padding:32px 24px;}
.contents-title{font-size:28.6px;}
.oc-content{padding:32px;}
.oc-title{font-size:28.6px;}
.feature-grid{grid-template-columns:1fr;}
}
@media (max-width:768px){
.sub-title{font-size:33px;}
.sub-lead{font-size:15.4px;}
.info-table th{width:100px;padding:14px 12px;font-size:14.3px;}
.info-table td{padding:14px 12px;font-size:14.3px;}
.page-cta{padding:28px;text-align:center;}
.cta-buttons{width:100%;flex-direction:column;}
.cta-buttons .btn{justify-content:center;}
}
/* ==========================================================================
SIMPLE SUB PAGE (Conference / Program list - GXWEEK style)
========================================================================== */
.sub-body-simple{
background:#fff;
padding-top:var(--header-h);
}
/* ===== Page Head ===== */
/* sub 페이지 공통: 짧고 컴팩트 (body.is-sub 가 fixed 헤더 회피 패딩 담당) */
.page-head{
padding:20px 0;
background:#fff;
}
.bread{
display:flex;
align-items:center;
gap:10px;
margin-bottom:10px;
font-size:14.3px;
color:var(--c-gray-400);
}
.bc-home{
display:inline-flex;
align-items:center;
justify-content:center;
width:28px;height:28px;
background:var(--c-gray-50);
border-radius:50%;
color:var(--c-gray-500);
transition:all .2s var(--ease);
}
.bc-home:hover{
background:var(--c-navy-800);
color:#fff;
}
.bc-home svg{ width:14px; height:14px; }
.bc-sep{
color:var(--c-gray-300);
font-family:var(--font-en);
}
.bread a{
color:var(--c-gray-500);
}
.bread a.current{
color:var(--c-navy-800);
font-weight:600;
}
.ph-title{
font-size:35.2px;
font-weight:800;
letter-spacing:-0.03em;
color:var(--c-navy-800);
margin-bottom:6px;
}
.ph-desc{
display:none; /* 전 페이지 상단 설명문 숨김 (요청) */
}
/* ===== Program Section ===== */
.program-section{
padding:24px 0 120px;
background:#fff;
}
/* ===== Date Tabs ===== */
.date-tabs{
display:flex;
gap:10px;
flex-wrap:wrap;
margin-bottom:32px;
padding-bottom:32px;
border-bottom:1px solid var(--c-border);
}
.date-tab{
display:inline-flex;
align-items:center;
gap:10px;
padding:14px 32px;
background:#fff;
border:1.5px solid var(--c-gray-200);
border-radius:60px;
font-family:var(--font-kr);
color:var(--c-gray-500);
cursor:pointer;
transition:all .25s var(--ease);
letter-spacing:-0.01em;
}
.date-tab:hover{
border-color:var(--c-green-500);
color:var(--c-navy-800);
}
.date-tab.active{
background:var(--c-green-500);
border-color:var(--c-green-500);
color:#fff;
box-shadow:0 6px 16px rgba(27,196,125,0.25);
}
.date-tab .dt-num{
font-family:var(--font-en);
font-size:19.8px;
font-weight:700;
}
.date-tab .dt-day{
font-size:15.4px;
font-weight:500;
opacity:0.85;
}
/* ===== Category Legend ===== */
.cat-legend{
display:flex;
gap:24px;
flex-wrap:wrap;
margin-bottom:40px;
}
.legend-item{
display:inline-flex;
align-items:center;
gap:8px;
font-size:15.4px;
font-weight:500;
color:var(--c-gray-600);
letter-spacing:-0.01em;
}
.dot{
display:inline-block;
width:12px;height:12px;
border-radius:3px;
}
.dot-leadership{ background:var(--c-cyan-500); }
.dot-energy{ background:var(--c-green-500); }
.dot-climate{ background:#ff8a5b; }
/* ===== Day Panels ===== */
.day-panel{
animation:fadeUp .4s var(--ease-out);
}
.day-panel[hidden]{
display:none;
}
@keyframes fadeUp{
from{opacity:0;transform:translateY(10px);}
to{opacity:1;transform:translateY(0);}
}
/* ===== Program Grid ===== */
.prog-grid{
display:grid;
grid-template-columns:repeat(2, 1fr);
gap:20px;
}
/* ===== Program Card ===== */
.prog-card{
position:relative;
padding:28px 28px 24px;
background:#fff;
border:1px solid var(--c-border);
border-radius:18px;
transition:all .3s var(--ease);
overflow:hidden;
}
.prog-card::before{ display:none !important; } /* 좌측 라인 완전 제거 */
.prog-card:hover{
border-color:transparent;
transform:translateY(-4px);
box-shadow:0 14px 32px rgba(10,37,64,0.10);
}
.prog-card:hover::before{ display:none !important; }
/* 카테고리별 컬러 (좌측 라인 제거 — ::before 비활성화) */
.prog-card.cat-leadership{ background:linear-gradient(135deg, #f0fbff 0%, #ffffff 60%); }
.prog-card.cat-leadership .prog-time{ background:rgba(0,180,216,0.10); color:#0e6ba8; }
.prog-card.cat-leadership .prog-cat{ color:var(--c-cyan-500); }
.prog-card.cat-energy{ background:linear-gradient(135deg, #f0fdf6 0%, #ffffff 60%); }
.prog-card.cat-energy .prog-time{ background:rgba(27,196,125,0.10); color:#00874f; }
.prog-card.cat-energy .prog-cat{ color:var(--c-green-600); }
.prog-card.cat-climate{ background:linear-gradient(135deg, #fff6f1 0%, #ffffff 60%); }
.prog-card.cat-climate .prog-time{ background:rgba(255,138,91,0.12); color:#d65a2a; }
.prog-card.cat-climate .prog-cat{ color:#d65a2a; }
/* Featured (LIVE) */
.prog-card.card-featured{
border:1.5px solid var(--c-cyan-500);
box-shadow:0 8px 20px rgba(0,180,216,0.15);
}
/* Card Top */
.card-top{
display:flex;
align-items:center;
gap:10px;
margin-bottom:14px;
flex-wrap:wrap;
}
.prog-time{
display:inline-block;
padding:5px 12px;
border-radius:50px;
font-family:var(--font-en);
font-size:14.3px;
font-weight:700;
letter-spacing:0.02em;
background:var(--c-gray-100);
color:var(--c-gray-600);
}
.prog-cat{
font-size:13.2px;
font-weight:700;
color:var(--c-gray-500);
letter-spacing:-0.01em;
}
.prog-flag{
display:inline-flex;
align-items:center;
gap:5px;
margin-left:auto;
padding:4px 10px;
background:#ff4757;
color:#fff;
border-radius:4px;
font-family:var(--font-en);
font-size:11px;
font-weight:800;
letter-spacing:1px;
position:relative;
}
.prog-flag::before{
content:'';
display:inline-block;
width:6px;height:6px;
background:#fff;
border-radius:50%;
animation:pulse 1.5s infinite;
}
.prog-title{
font-size:20.9px;
font-weight:700;
color:var(--c-navy-800);
letter-spacing:-0.02em;
margin-bottom:8px;
line-height:1.4;
}
.prog-sub{
font-size:15.4px;
color:var(--c-gray-500);
margin-bottom:20px;
line-height:1.55;
letter-spacing:-0.01em;
}
/* Meta (location, host) */
.prog-meta{
padding-top:16px;
margin-bottom:18px;
border-top:1px dashed var(--c-border);
display:flex;
flex-direction:column;
gap:8px;
}
.prog-meta li{
display:flex;
align-items:center;
gap:8px;
font-size:14.3px;
color:var(--c-gray-600);
letter-spacing:-0.01em;
}
.ico-pin, .ico-host{
display:inline-block;
width:14px;height:14px;
flex-shrink:0;
background:currentColor;
color:var(--c-gray-400);
}
.ico-pin{
-webkit-mask:url("data:image/svg+xml;utf8,") center/contain no-repeat;
mask:url("data:image/svg+xml;utf8,") center/contain no-repeat;
}
.ico-host{
-webkit-mask:url("data:image/svg+xml;utf8,") center/contain no-repeat;
mask:url("data:image/svg+xml;utf8,") center/contain no-repeat;
}
.prog-link{
display:inline-flex;
align-items:center;
gap:6px;
font-size:14.3px;
font-weight:600;
color:var(--c-navy-800);
padding:8px 0;
transition:gap .25s var(--ease);
}
.prog-link .arr{
display:inline-block;
transition:transform .25s var(--ease);
}
.prog-link:hover{ color:var(--c-cyan-500); gap:10px; }
.prog-link:hover .arr{ transform:translateX(3px); }
/* Empty State */
.prog-empty{
padding:100px 20px;
text-align:center;
color:var(--c-gray-400);
background:var(--c-gray-50);
border-radius:20px;
}
.prog-empty svg{
width:60px;height:60px;
margin:0 auto 16px;
color:var(--c-gray-300);
}
.prog-empty p{
font-size:16.5px;
letter-spacing:-0.01em;
}
/* Responsive */
@media (max-width:1024px){
.page-head{padding:22px 0 22px;}
.ph-title{font-size:33px;}
.program-section{padding:20px 0 80px;}
.prog-grid{grid-template-columns:1fr;}
}
@media (max-width:768px){
.ph-title{font-size:26.4px;}
.ph-desc{font-size:15.4px;}
.date-tab{padding:12px 22px;}
.date-tab .dt-num{font-size:17.6px;}
.date-tab .dt-day{font-size:14.3px;}
.cat-legend{gap:14px;}
.legend-item{font-size:14.3px;}
.prog-card{padding:22px 22px 20px;}
.prog-title{font-size:18.7px;}
.card-top{gap:8px;}
.prog-flag{margin-left:0;}
}
/* ==========================================================================
COMMON SUB COMPONENTS (registration / hotel / location)
========================================================================== */
/* ===== Section Block ===== */
.sec-block{
margin-bottom:80px;
}
.sec-block:last-child{margin-bottom:0;}
.sec-head{
margin-bottom:32px;
}
.sec-eyebrow{
display:inline-block;
font-family:var(--font-en);
font-size:13.2px;
font-weight:700;
letter-spacing:2px;
color:var(--c-green-600);
margin-bottom:10px;
}
.sec-h{
font-size:35.2px;
font-weight:700;
color:var(--c-navy-800);
letter-spacing:-0.03em;
margin-bottom:12px;
}
.sec-desc{
font-size:16.5px;
color:var(--c-gray-500);
line-height:1.7;
letter-spacing:-0.01em;
max-width:780px;
}
/* ===== Info Box (안내 박스) ===== */
.info-box{
display:flex;
gap:20px;
padding:24px 28px;
background:#f7fdfa;
border:1px solid #d9f2e6;
border-left:3px solid var(--c-green-500);
border-radius:10px;
margin-bottom:32px;
}
.info-box .info-ico{
width:24px;height:24px;
flex-shrink:0;
color:var(--c-green-600);
}
.info-box .info-ico svg{ width:100%; height:100%; }
.info-box p{
font-size:15.4px;
line-height:1.7;
color:var(--c-gray-700);
letter-spacing:-0.01em;
}
.info-box p strong{
color:var(--c-navy-800);
font-weight:700;
}
/* ===== Process Steps (등록 절차) ===== */
.process-steps{
display:grid;
grid-template-columns:repeat(4, 1fr);
gap:16px;
position:relative;
}
.process-step{
position:relative;
padding:28px 24px;
background:#fff;
border:1px solid var(--c-border);
border-radius:14px;
transition:all .3s var(--ease);
}
.process-step:hover{
border-color:var(--c-green-500);
transform:translateY(-3px);
}
.ps-num{
display:inline-flex;
align-items:center;
justify-content:center;
width:36px;height:36px;
background:var(--c-green-500);
color:#fff;
border-radius:50%;
font-family:var(--font-en);
font-size:15.4px;
font-weight:700;
margin-bottom:18px;
}
.ps-title{
font-size:17.6px;
font-weight:700;
color:var(--c-navy-800);
letter-spacing:-0.02em;
margin-bottom:8px;
}
.ps-desc{
font-size:14.3px;
color:var(--c-gray-500);
line-height:1.6;
letter-spacing:-0.01em;
}
/* ===== Price Table ===== */
.price-table{
width:100%;
border-collapse:separate;
border-spacing:0;
border-top:2px solid var(--c-navy-800);
}
.price-table th,
.price-table td{
padding:18px 20px;
font-size:15.4px;
border-bottom:1px solid var(--c-border);
text-align:center;
letter-spacing:-0.01em;
}
.price-table th{
background:var(--c-gray-50);
font-weight:700;
color:var(--c-navy-800);
font-size:14.3px;
letter-spacing:0.02em;
}
.price-table td{
color:var(--c-gray-700);
}
.price-table tr td:first-child,
.price-table tr th:first-child{
text-align:left;
font-weight:600;
color:var(--c-navy-800);
}
.price-table .price-amt{
font-family:var(--font-en);
font-weight:700;
color:var(--c-navy-800);
font-size:16.5px;
}
.price-table .price-early{
color:var(--c-green-600);
}
.price-table tr.price-row:hover td{
background:#fafcfe;
}
.price-table .badge-early{
display:inline-block;
padding:3px 8px;
background:rgba(27,196,125,0.12);
color:var(--c-green-600);
border-radius:4px;
font-family:var(--font-en);
font-size:12.1px;
font-weight:700;
margin-left:6px;
}
/* ===== CTA Box ===== */
.cta-box{
margin-top:48px;
padding:36px 40px;
background:var(--c-navy-900);
color:#fff;
border-radius:16px;
display:flex;
justify-content:space-between;
align-items:center;
flex-wrap:wrap;
gap:20px;
}
.cta-box h3{
font-size:24.2px;
font-weight:700;
letter-spacing:-0.02em;
margin-bottom:6px;
}
.cta-box p{
font-size:15.4px;
color:rgba(255,255,255,0.65);
}
.cta-box .btn-primary{
flex-shrink:0;
}
/* ===== Hotel Cards ===== */
.hotel-grid{
display:grid;
grid-template-columns:repeat(2, 1fr);
gap:20px;
}
.hotel-card{
display:grid;
grid-template-columns:140px 1fr;
gap:24px;
padding:24px;
background:#fff;
border:1px solid var(--c-border);
border-radius:14px;
transition:all .3s var(--ease);
}
.hotel-card:hover{
border-color:var(--c-green-500);
box-shadow:0 12px 28px rgba(10,37,64,0.08);
transform:translateY(-3px);
}
.hotel-thumb{
aspect-ratio:1;
border-radius:10px;
overflow:hidden;
background:linear-gradient(135deg, #e8f5ff 0%, #d9f2e6 100%);
display:flex;
align-items:center;
justify-content:center;
}
.hotel-thumb svg{ width:60%; height:60%; opacity:0.6; color:var(--c-navy-800); }
.hotel-body{
display:flex;
flex-direction:column;
}
.hotel-stars{
font-family:var(--font-en);
font-size:12.1px;
font-weight:700;
color:#f5a623;
letter-spacing:2px;
margin-bottom:6px;
}
.hotel-name{
font-size:19.8px;
font-weight:700;
color:var(--c-navy-800);
letter-spacing:-0.02em;
margin-bottom:8px;
}
.hotel-meta{
display:flex;
flex-direction:column;
gap:5px;
font-size:14.3px;
color:var(--c-gray-500);
margin-bottom:16px;
letter-spacing:-0.01em;
}
.hotel-meta li{
display:flex;
align-items:center;
gap:6px;
}
.hotel-meta li i{
display:inline-block;
width:13px;height:13px;
background:currentColor;
color:var(--c-gray-400);
flex-shrink:0;
}
.hotel-meta .i-pin{
-webkit-mask:url("data:image/svg+xml;utf8,") center/contain no-repeat;
mask:url("data:image/svg+xml;utf8,") center/contain no-repeat;
}
.hotel-meta .i-dist{
-webkit-mask:url("data:image/svg+xml;utf8,") center/contain no-repeat;
mask:url("data:image/svg+xml;utf8,") center/contain no-repeat;
}
.hotel-price{
margin-top:auto;
padding-top:14px;
border-top:1px dashed var(--c-border);
display:flex;
justify-content:space-between;
align-items:flex-end;
}
.hotel-price-num{
font-family:var(--font-en);
font-size:22px;
font-weight:800;
color:var(--c-navy-800);
letter-spacing:-0.01em;
}
.hotel-price-num small{
font-size:13.2px;
color:var(--c-gray-400);
font-weight:500;
margin-left:2px;
}
.hotel-link{
font-size:13.2px;
font-weight:600;
color:var(--c-green-600);
padding:6px 14px;
border:1px solid var(--c-green-500);
border-radius:50px;
transition:all .2s var(--ease);
}
.hotel-link:hover{
background:var(--c-green-500);
color:#fff;
}
/* ===== Map Section ===== */
.map-wrap{
position:relative;
aspect-ratio:21/9;
border-radius:16px;
overflow:hidden;
background:var(--c-gray-100);
margin-bottom:48px;
}
.map-placeholder{
position:absolute;
inset:0;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:12px;
color:var(--c-gray-400);
background:
linear-gradient(135deg, #f0f6fc 0%, #e6f4ec 100%);
}
.map-placeholder svg{
width:48px;height:48px;
color:var(--c-green-500);
}
.map-placeholder p{
font-size:15.4px;
color:var(--c-gray-500);
letter-spacing:-0.01em;
}
.map-placeholder strong{
color:var(--c-navy-800);
font-weight:700;
font-size:17.6px;
}
/* ===== Venue Info Card ===== */
.venue-card{
display:grid;
grid-template-columns:repeat(3, 1fr);
gap:0;
background:#fff;
border:1px solid var(--c-border);
border-radius:14px;
overflow:hidden;
margin-bottom:60px;
}
.venue-cell{
padding:24px 28px;
border-right:1px solid var(--c-border);
}
.venue-cell:last-child{border-right:none;}
.vc-label{
display:flex;
align-items:center;
gap:8px;
font-size:12.1px;
font-weight:700;
letter-spacing:2px;
color:var(--c-green-600);
margin-bottom:10px;
}
.vc-label .ico{
width:14px;height:14px;
display:inline-block;
color:currentColor;
background:currentColor;
}
.vc-label .ic-venue{
-webkit-mask:url("data:image/svg+xml;utf8,") center/contain no-repeat;
mask:url("data:image/svg+xml;utf8,") center/contain no-repeat;
}
.vc-label .ic-addr{
-webkit-mask:url("data:image/svg+xml;utf8,") center/contain no-repeat;
mask:url("data:image/svg+xml;utf8,") center/contain no-repeat;
}
.vc-label .ic-tel{
-webkit-mask:url("data:image/svg+xml;utf8,") center/contain no-repeat;
mask:url("data:image/svg+xml;utf8,") center/contain no-repeat;
}
.vc-value{
font-size:17.6px;
font-weight:600;
color:var(--c-navy-800);
letter-spacing:-0.02em;
line-height:1.5;
}
/* ===== Transport Cards ===== */
.transport-grid{
display:grid;
grid-template-columns:repeat(2, 1fr);
gap:20px;
}
.trans-card{
padding:32px;
background:#fff;
border:1px solid var(--c-border);
border-radius:14px;
transition:all .3s var(--ease);
}
.trans-card:hover{
border-color:var(--c-green-500);
box-shadow:0 8px 20px rgba(10,37,64,0.06);
}
.trans-head{
display:flex;
align-items:center;
gap:14px;
margin-bottom:20px;
padding-bottom:20px;
border-bottom:1px solid var(--c-border);
}
.trans-icon{
width:48px;height:48px;
display:flex;
align-items:center;
justify-content:center;
background:#f7fdfa;
border-radius:12px;
color:var(--c-green-600);
}
.trans-icon svg{ width:26px; height:26px; }
.trans-name{
font-size:19.8px;
font-weight:700;
color:var(--c-navy-800);
letter-spacing:-0.02em;
}
.trans-body{
font-size:15.4px;
color:var(--c-gray-600);
line-height:1.7;
letter-spacing:-0.01em;
}
.trans-body strong{
display:block;
color:var(--c-navy-800);
font-weight:700;
margin-bottom:4px;
}
.trans-body + .trans-body{
margin-top:14px;
padding-top:14px;
border-top:1px dashed var(--c-border);
}
/* ===== Responsive ===== */
@media (max-width:1024px){
.process-steps{grid-template-columns:repeat(2, 1fr);}
.hotel-grid{grid-template-columns:1fr;}
.venue-card{grid-template-columns:1fr;}
.venue-cell{border-right:none;border-bottom:1px solid var(--c-border);}
.venue-cell:last-child{border-bottom:none;}
.transport-grid{grid-template-columns:1fr;}
.cta-box{padding:28px;flex-direction:column;align-items:flex-start;}
}
@media (max-width:768px){
.sec-block{margin-bottom:60px;}
.sec-h{font-size:26.4px;}
.process-steps{grid-template-columns:1fr;}
.price-table th, .price-table td{padding:14px 10px;font-size:13.2px;}
.price-table .price-amt{font-size:14.3px;}
.hotel-card{grid-template-columns:80px 1fr;gap:14px;padding:18px;}
.hotel-name{font-size:17.6px;}
.info-box{padding:18px 20px;gap:14px;}
.cta-box{padding:24px;}
.cta-box h3{font-size:19.8px;}
}
/* ==========================================================================
EXHIBITION & SIDE-EVENT COMPONENTS
========================================================================== */
/* ===== Stat Row (행사 규모) ===== */
.stat-row{
display:grid;
grid-template-columns:repeat(4, 1fr);
gap:0;
background:#fff;
border:1px solid var(--c-border);
border-radius:14px;
overflow:hidden;
margin-bottom:60px;
}
.stat-cell{
padding:28px 24px;
border-right:1px solid var(--c-border);
text-align:center;
}
.stat-cell:last-child{border-right:none;}
.stat-cell .num{
display:block;
font-family:var(--font-en);
font-size:41.8px;
font-weight:800;
color:var(--c-navy-800);
letter-spacing:-0.02em;
line-height:1.1;
margin-bottom:6px;
}
.stat-cell .num em{
font-style:normal;
color:var(--c-green-500);
font-size:26.4px;
}
.stat-cell .lbl{
font-size:14.3px;
font-weight:600;
color:var(--c-gray-500);
letter-spacing:-0.01em;
}
/* ===== Category Grid (전시 분야) ===== */
.cat-grid{
display:grid;
grid-template-columns:repeat(5, 1fr);
gap:14px;
}
.cat-item{
position:relative;
padding:32px 20px 28px;
background:#fff;
border:1px solid var(--c-border);
border-radius:14px;
text-align:center;
transition:all .3s var(--ease);
cursor:pointer;
}
.cat-item:hover{
border-color:var(--c-green-500);
background:#f7fdfa;
transform:translateY(-4px);
box-shadow:0 12px 24px rgba(27,196,125,0.10);
}
.cat-item .cat-ico{
display:flex;
align-items:center;
justify-content:center;
width:56px;height:56px;
margin:0 auto 16px;
background:#f0fdf6;
border-radius:14px;
color:var(--c-green-600);
transition:all .3s var(--ease);
}
.cat-item:hover .cat-ico{
background:var(--c-green-500);
color:#fff;
}
.cat-item .cat-ico svg{ width:28px; height:28px; }
.cat-item .cat-num{
font-family:var(--font-en);
font-size:12.1px;
font-weight:700;
color:var(--c-gray-400);
letter-spacing:2px;
margin-bottom:6px;
}
.cat-item h3{
font-size:17.6px;
font-weight:700;
color:var(--c-navy-800);
letter-spacing:-0.02em;
margin-bottom:6px;
}
.cat-item p{
font-size:13.2px;
color:var(--c-gray-500);
line-height:1.5;
letter-spacing:-0.01em;
}
/* ===== Floor Plan Placeholder ===== */
.floorplan{
position:relative;
aspect-ratio:21/9;
border-radius:16px;
overflow:hidden;
background:#fff;
border:1px solid var(--c-border);
margin-bottom:24px;
}
.floorplan svg{ width:100%; height:100%; }
.floorplan-legend{
display:flex;
gap:24px;
flex-wrap:wrap;
padding:16px 8px 0;
}
.fp-legend-item{
display:inline-flex;
align-items:center;
gap:8px;
font-size:14.3px;
color:var(--c-gray-600);
}
.fp-legend-item .fp-dot{
display:inline-block;
width:14px;height:14px;
border-radius:4px;
}
/* ===== Event Cards (부대행사) ===== */
.event-grid{
display:grid;
grid-template-columns:repeat(2, 1fr);
gap:20px;
}
.event-card{
position:relative;
display:grid;
grid-template-columns:120px 1fr;
background:#fff;
border:1px solid var(--c-border);
border-radius:16px;
overflow:hidden;
transition:all .3s var(--ease);
}
.event-card:hover{
border-color:var(--c-green-500);
transform:translateY(-3px);
box-shadow:0 12px 28px rgba(10,37,64,0.08);
}
.event-thumb{
display:flex;
align-items:center;
justify-content:center;
background:linear-gradient(135deg, #0a2540 0%, #0e6ba8 100%);
color:#fff;
position:relative;
}
.event-thumb.tone-green{ background:linear-gradient(135deg, #00874f 0%, #1bc47d 100%); }
.event-thumb.tone-cyan{ background:linear-gradient(135deg, #0e6ba8 0%, #4cc9e6 100%); }
.event-thumb.tone-coral{ background:linear-gradient(135deg, #d65a2a 0%, #ff8a5b 100%); }
.event-thumb.tone-purple{ background:linear-gradient(135deg, #5b3e96 0%, #8b6dd6 100%); }
.event-thumb svg{ width:48px; height:48px; opacity:0.95; }
.event-body{
padding:24px 28px;
display:flex;
flex-direction:column;
}
.event-tag{
display:inline-block;
padding:3px 10px;
background:var(--c-gray-100);
color:var(--c-gray-600);
border-radius:4px;
font-family:var(--font-en);
font-size:12.1px;
font-weight:700;
letter-spacing:1px;
margin-bottom:10px;
width:fit-content;
}
.event-name{
font-size:19.8px;
font-weight:700;
color:var(--c-navy-800);
letter-spacing:-0.02em;
margin-bottom:8px;
}
.event-desc{
font-size:15.4px;
color:var(--c-gray-500);
line-height:1.6;
letter-spacing:-0.01em;
margin-bottom:14px;
}
.event-meta{
margin-top:auto;
padding-top:12px;
border-top:1px dashed var(--c-border);
display:flex;
flex-wrap:wrap;
gap:6px 16px;
font-size:13.2px;
color:var(--c-gray-500);
}
.event-meta span{
display:inline-flex;
align-items:center;
gap:5px;
}
.event-meta span strong{
color:var(--c-navy-800);
font-weight:600;
}
@media (max-width:1024px){
.stat-row{grid-template-columns:repeat(2, 1fr);}
.stat-cell{border-right:1px solid var(--c-border);border-bottom:1px solid var(--c-border);}
.stat-cell:nth-child(2n){border-right:none;}
.stat-cell:nth-last-child(-n+2){border-bottom:none;}
.cat-grid{grid-template-columns:repeat(2, 1fr);}
.event-grid{grid-template-columns:1fr;}
}
@media (max-width:768px){
.stat-cell .num{font-size:30.8px;}
.cat-grid{grid-template-columns:1fr;}
.event-card{grid-template-columns:80px 1fr;}
.event-thumb svg{width:32px;height:32px;}
.event-body{padding:18px 20px;}
.event-name{font-size:17.6px;}
}
/* ==========================================================================
ABOUT PAGE EXTRA
========================================================================== */
/* 본문 단락 블록 */
.about-text-block{
background:#fff;
border:1px solid var(--c-border);
border-radius:14px;
padding:36px 40px;
}
.about-text-block p{
font-size:17.6px;
line-height:1.85;
color:var(--c-gray-700);
letter-spacing:-0.01em;
margin-bottom:20px;
}
.about-text-block p:last-child{ margin-bottom:0; }
.about-text-block p strong{
color:var(--c-navy-800);
font-weight:700;
}
/* 행사 개요 표의 작은 인포 태그 */
.info-tag{
display:inline-block;
padding:2px 10px;
background:var(--c-gray-100);
border-radius:4px;
font-style:normal;
font-size:13.2px;
font-weight:600;
color:var(--c-gray-600);
margin-left:8px;
vertical-align:1px;
}
/* 행사 개요 표 (좌측 정렬 강조) */
.info-table-style tr td:first-child{
text-align:left;
background:var(--c-gray-50);
font-weight:700;
color:var(--c-navy-800);
}
.info-table-style tr td:nth-child(2){
text-align:left;
}
/* 6분할 카테고리 그리드 */
.cat-grid-6{
grid-template-columns:repeat(6, 1fr);
}
@media (max-width:1280px){
.cat-grid-6{ grid-template-columns:repeat(3, 1fr); }
}
@media (max-width:768px){
.cat-grid-6{ grid-template-columns:repeat(2, 1fr); }
.about-text-block{padding:24px 22px;}
.about-text-block p{font-size:15.4px;}
}
/* ==========================================================================
ABOUT PAGE - Who We Are (Visual Block) / Overview Cards / Program Row
========================================================================== */
/* Who We Are 비주얼 박스 */
.who-block{
position:relative;
padding:56px 60px 48px;
background:
linear-gradient(135deg, #f7fdfa 0%, #f0f6fc 60%, #ffffff 100%);
border:1px solid var(--c-border);
border-radius:24px;
overflow:hidden;
}
/* 좌상단 컬러 바 */
.who-bar{
position:absolute;
top:0;
left:60px;
width:80px;
height:4px;
background:linear-gradient(90deg, #1bc47d 0%, #00b4d8 100%);
border-radius:0 0 4px 4px;
}
/* 우상단 패턴 데코 */
.who-pattern{
position:absolute;
top:-40px;
right:-40px;
width:280px;
height:280px;
pointer-events:none;
z-index:0;
}
.who-pattern svg{ width:100%; height:100%; }
.who-content{
position:relative;
z-index:1;
max-width:none;
}
.who-content p{
font-size:17.6px;
line-height:1.9;
color:var(--c-gray-700);
letter-spacing:-0.01em;
margin-bottom:22px;
}
.who-content p:last-of-type{ margin-bottom:0; }
.who-lead{
font-size:18.7px !important;
font-weight:500;
}
.who-content p strong{
color:var(--c-navy-800);
font-weight:700;
}
/* 키워드 하이라이트 */
.who-content mark{
background:linear-gradient(180deg, transparent 60%, rgba(27,196,125,0.30) 60%);
color:var(--c-navy-800);
font-weight:600;
padding:0 2px;
}
/* 마지막 클로징 단락 */
.who-closing{
font-size:16.5px !important;
font-weight:600 !important;
color:var(--c-navy-800) !important;
padding-top:20px;
margin-top:8px;
border-top:1px dashed var(--c-gray-200);
}
/* 키 포인트 3개 */
.who-keypoints{
position:relative;
z-index:1;
display:grid;
grid-template-columns:repeat(3, 1fr);
gap:16px;
margin-top:36px;
padding-top:36px;
border-top:1px solid var(--c-border);
}
.kp-item{
display:flex;
flex-direction:column;
gap:8px;
padding:20px;
background:rgba(255,255,255,0.7);
border:1px solid var(--c-border);
border-radius:12px;
backdrop-filter:blur(4px);
transition:all .25s var(--ease);
}
.kp-item:hover{
background:#fff;
border-color:var(--c-green-500);
transform:translateY(-2px);
}
.kp-ico{
width:36px;
height:36px;
color:var(--c-green-600);
margin-bottom:4px;
}
.kp-ico svg{ width:100%; height:100%; }
.kp-num{
font-family:var(--font-en);
font-size:30.8px;
font-weight:800;
color:var(--c-navy-800);
letter-spacing:-0.02em;
line-height:1;
}
.kp-num em{
font-style:normal;
font-family:var(--font-kr);
font-size:15.4px;
font-weight:600;
color:var(--c-gray-500);
margin-left:6px;
letter-spacing:-0.02em;
}
.kp-desc{
font-size:14.3px;
color:var(--c-gray-500);
line-height:1.5;
letter-spacing:-0.01em;
}
@media (max-width:1024px){
.who-block{ padding:40px 32px 36px; }
.who-pattern{ width:200px; height:200px; top:-30px; right:-30px; }
.who-keypoints{ grid-template-columns:1fr; gap:12px; margin-top:28px; padding-top:28px; }
}
@media (max-width:640px){
.who-block{ padding:32px 22px 28px; border-radius:16px; }
.who-content p, .who-lead{ font-size:15.4px !important; line-height:1.8; }
.who-closing{ font-size:14.3px !important; }
.who-bar{ left:22px; width:60px; }
}
/* 행사 개요 4분할 카드 */
.overview-cards{
display:grid;
grid-template-columns:repeat(4, 1fr);
gap:16px;
margin-bottom:16px;
}
.ov-card{
position:relative;
padding:32px 24px 28px;
background:#fff;
border:1px solid var(--c-border);
border-radius:14px;
text-align:center;
transition:all .25s var(--ease);
}
.ov-card:hover{
border-color:var(--c-gray-300);
box-shadow:0 8px 20px rgba(10,37,64,0.05);
transform:translateY(-2px);
}
.ov-ico{
width:56px;
height:56px;
margin:0 auto 18px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
background:rgba(0,180,216,0.10);
color:var(--c-cyan-500);
}
.ov-ico svg{ width:24px; height:24px; }
.ov-ico-blue{ background:rgba(0,180,216,0.10); color:#0e6ba8; }
.ov-ico-indigo{ background:rgba(91,109,214,0.10); color:#5b6dd6; }
.ov-ico-green{ background:rgba(27,196,125,0.10); color:var(--c-green-600); }
.ov-ico-orange{ background:rgba(255,138,91,0.12); color:#d65a2a; }
.ov-label{
display:block;
font-size:14.3px;
font-weight:500;
color:var(--c-gray-400);
letter-spacing:-0.01em;
margin-bottom:10px;
}
.ov-value{
font-size:16.5px;
font-weight:700;
color:var(--c-navy-800);
letter-spacing:-0.02em;
line-height:1.4;
margin-bottom:4px;
word-break:keep-all;
}
.ov-sub{
font-size:14.3px;
color:var(--c-gray-400);
letter-spacing:-0.01em;
}
/* 주요 프로그램 행 */
.program-row{
display:flex;
align-items:center;
gap:24px;
padding:24px 28px;
background:#fff;
border:1px solid var(--c-border);
border-radius:14px;
}
.pr-ico{
flex-shrink:0;
width:56px;
height:56px;
border-radius:50%;
background:rgba(139,109,214,0.10);
color:#5b3e96;
display:flex;
align-items:center;
justify-content:center;
}
.pr-ico svg{ width:24px; height:24px; }
.pr-body{
flex:1;
display:flex;
align-items:center;
gap:24px;
flex-wrap:wrap;
}
.pr-label{
font-size:14.3px;
font-weight:500;
color:var(--c-gray-400);
letter-spacing:-0.01em;
flex-shrink:0;
}
.pr-tags{
display:flex;
flex-wrap:wrap;
gap:8px;
}
.pr-tag{
display:inline-block;
padding:7px 16px;
background:var(--c-gray-50);
border:1px solid var(--c-border);
border-radius:50px;
font-size:14.3px;
font-weight:600;
color:var(--c-navy-800);
letter-spacing:-0.01em;
}
@media (max-width:1024px){
.overview-cards{ grid-template-columns:repeat(2, 1fr); }
.program-row{ flex-direction:column; align-items:flex-start; gap:16px; }
}
@media (max-width:640px){
.overview-cards{ grid-template-columns:1fr; gap:12px; }
.ov-card{ padding:24px 20px 22px; }
.who-text p{ font-size:15.4px; line-height:1.8; }
}
/* ==========================================================================
CONTACT PAGE
========================================================================== */
/* 1. 메인 사무국 카드 */
.main-contact{
position:relative;
display:grid;
grid-template-columns:1.1fr 1fr;
gap:48px;
align-items:center;
padding:48px 56px;
background:linear-gradient(135deg, #061e3c 0%, #0a2540 50%, #0e3358 100%);
border-radius:24px;
color:#fff;
overflow:hidden;
}
.mc-deco{
position:absolute;
top:-50px;
right:-50px;
width:340px;
height:340px;
pointer-events:none;
opacity:0.9;
}
.mc-deco svg{ width:100%; height:100%; }
.mc-left{
position:relative;
z-index:1;
}
.mc-eyebrow{
display:inline-block;
padding:5px 12px;
background:rgba(27,196,125,0.15);
border:1px solid rgba(27,196,125,0.30);
border-radius:50px;
font-family:var(--font-en);
font-size:12.1px;
font-weight:700;
letter-spacing:1.5px;
color:var(--c-green-400);
margin-bottom:18px;
}
.mc-title{
font-size:37.4px;
font-weight:800;
line-height:1.2;
letter-spacing:-0.03em;
color:#fff;
margin-bottom:14px;
}
.mc-desc{
font-size:16.5px;
line-height:1.7;
color:rgba(255,255,255,0.7);
letter-spacing:-0.01em;
}
.mc-right{
position:relative;
z-index:1;
display:flex;
flex-direction:column;
gap:12px;
}
.mc-info-card{
display:flex;
align-items:center;
gap:16px;
padding:18px 22px;
background:rgba(255,255,255,0.08);
border:1px solid rgba(255,255,255,0.15);
border-radius:14px;
backdrop-filter:blur(10px);
transition:all .25s var(--ease);
color:#fff;
}
.mc-info-card:hover{
background:rgba(255,255,255,0.14);
border-color:rgba(27,196,125,0.50);
transform:translateX(4px);
}
.mc-info-ico{
width:44px;
height:44px;
flex-shrink:0;
background:rgba(27,196,125,0.18);
border-radius:12px;
color:var(--c-green-400);
display:flex;
align-items:center;
justify-content:center;
}
.mc-info-ico svg{ width:22px; height:22px; }
.mc-info-label{
display:block;
font-size:12.1px;
font-weight:600;
color:rgba(255,255,255,0.55);
letter-spacing:1px;
margin-bottom:3px;
}
.mc-info-val{
display:block;
font-family:var(--font-en);
font-size:19.8px;
font-weight:700;
letter-spacing:-0.01em;
color:#fff;
}
/* 2. 분야별 문의처 3카드 */
.cat-contact-grid{
display:grid;
grid-template-columns:repeat(3, 1fr);
gap:20px;
}
.cc-card{
background:#fff;
border:1px solid var(--c-border);
border-radius:16px;
padding:28px;
transition:all .25s var(--ease);
}
.cc-card:hover{
border-color:var(--c-gray-300);
box-shadow:0 12px 28px rgba(10,37,64,0.08);
transform:translateY(-3px);
}
.cc-head{
display:flex;
align-items:center;
gap:14px;
margin-bottom:20px;
padding-bottom:20px;
border-bottom:1px dashed var(--c-border);
}
.cc-ico{
width:48px;
height:48px;
flex-shrink:0;
border-radius:12px;
display:flex;
align-items:center;
justify-content:center;
}
.cc-ico svg{ width:26px; height:26px; }
.cc-ico-blue{ background:rgba(0,180,216,0.10); color:#0e6ba8; }
.cc-ico-green{ background:rgba(27,196,125,0.10); color:var(--c-green-600); }
.cc-ico-orange{ background:rgba(255,138,91,0.12); color:#d65a2a; }
.cc-head h3{
font-size:19.8px;
font-weight:700;
color:var(--c-navy-800);
letter-spacing:-0.02em;
margin-bottom:2px;
}
.cc-head p{
font-family:var(--font-en);
font-size:12.1px;
font-weight:600;
color:var(--c-gray-400);
letter-spacing:1px;
}
.cc-info{
display:flex;
flex-direction:column;
gap:10px;
}
.cc-info li{
display:flex;
align-items:center;
gap:10px;
flex-wrap:wrap;
}
.ico-label{
display:inline-block;
font-family:var(--font-en);
font-size:11px;
font-weight:700;
color:var(--c-gray-400);
letter-spacing:1.5px;
min-width:44px;
}
.cc-info a{
font-size:15.4px;
font-weight:600;
color:var(--c-navy-800);
letter-spacing:-0.01em;
word-break:break-all;
}
.cc-info a:hover{ color:var(--c-green-600); }
.cc-info-tag{
display:inline-block;
padding:3px 10px;
background:rgba(255,138,91,0.12);
color:#d65a2a;
border-radius:4px;
font-size:12.1px;
font-weight:700;
letter-spacing:-0.01em;
}
.cc-info-mail{
font-family:var(--font-en);
font-size:14.3px !important;
}
.cc-note{
font-size:14.3px;
line-height:1.7;
color:var(--c-gray-600);
letter-spacing:-0.01em;
}
.cc-anchor{
color:var(--c-green-600);
font-weight:600;
border-bottom:1px solid currentColor;
}
/* 3. 전시관 별 문의처 4카드 */
.venue-contact-grid{
display:grid;
grid-template-columns:repeat(2, 1fr);
gap:18px;
}
.vc-card{
position:relative;
padding:28px 28px 24px;
background:#fff;
border:1px solid var(--c-border);
border-radius:16px;
transition:all .3s var(--ease);
}
.vc-card:hover{
border-color:var(--c-green-500);
box-shadow:0 12px 28px rgba(10,37,64,0.08);
transform:translateY(-3px);
}
.vc-badge{
position:absolute;
top:24px;
right:24px;
display:inline-flex;
align-items:center;
justify-content:center;
width:40px;
height:40px;
border-radius:50%;
font-family:var(--font-en);
font-size:14.3px;
font-weight:800;
color:#fff;
letter-spacing:0.5px;
}
.vc-badge-1{ background:linear-gradient(135deg, #00b4d8 0%, #0e6ba8 100%); }
.vc-badge-2{ background:linear-gradient(135deg, #1bc47d 0%, #00874f 100%); }
.vc-badge-3{ background:linear-gradient(135deg, #ff8a5b 0%, #d65a2a 100%); }
.vc-badge-4{ background:linear-gradient(135deg, #8b6dd6 0%, #5b3e96 100%); }
.vc-name{
font-size:20.9px;
font-weight:700;
color:var(--c-navy-800);
letter-spacing:-0.02em;
margin-bottom:6px;
padding-right:50px;
line-height:1.4;
}
.vc-name span{
color:var(--c-gray-300);
margin:0 4px;
font-weight:400;
}
.vc-org{
display:inline-block;
padding:4px 10px;
background:var(--c-gray-100);
border-radius:6px;
font-size:13.2px;
font-weight:600;
color:var(--c-gray-600);
margin-bottom:18px;
letter-spacing:-0.01em;
}
.vc-info{
display:flex;
flex-direction:column;
gap:8px;
padding-bottom:16px;
margin-bottom:14px;
border-bottom:1px dashed var(--c-border);
}
.vc-info li{
display:flex;
align-items:center;
gap:10px;
}
.vc-ico{
width:18px;
height:18px;
flex-shrink:0;
color:var(--c-gray-400);
}
.vc-ico svg{ width:100%; height:100%; }
.vc-info a{
font-family:var(--font-en);
font-size:15.4px;
font-weight:600;
color:var(--c-gray-700);
letter-spacing:-0.01em;
word-break:break-all;
}
.vc-info a:hover{ color:var(--c-green-600); }
.vc-link{
display:inline-flex;
align-items:center;
gap:6px;
font-size:14.3px;
font-weight:600;
color:var(--c-navy-800);
transition:gap .2s var(--ease);
}
.vc-link:hover{ color:var(--c-green-600); gap:10px; }
.vc-link .arrow{
transition:transform .2s var(--ease);
}
.vc-link:hover .arrow{ transform:translateX(3px); }
/* 4. 사무국 정보 (3분할) */
.office-info{
display:grid;
grid-template-columns:repeat(3, 1fr);
gap:18px;
}
.oi-item{
display:flex;
gap:16px;
align-items:flex-start;
padding:24px;
background:#fff;
border:1px solid var(--c-border);
border-radius:14px;
}
.oi-ico{
width:48px;
height:48px;
flex-shrink:0;
border-radius:12px;
display:flex;
align-items:center;
justify-content:center;
}
.oi-ico svg{ width:22px; height:22px; }
.oi-ico-blue{ background:rgba(0,180,216,0.10); color:#0e6ba8; }
.oi-ico-green{ background:rgba(27,196,125,0.10); color:var(--c-green-600); }
.oi-ico-orange{ background:rgba(255,138,91,0.12); color:#d65a2a; }
.oi-label{
display:block;
font-family:var(--font-en);
font-size:11px;
font-weight:700;
color:var(--c-gray-400);
letter-spacing:1.5px;
margin-bottom:5px;
}
.oi-val{
display:block;
font-size:16.5px;
font-weight:700;
color:var(--c-navy-800);
letter-spacing:-0.02em;
margin-bottom:3px;
}
.oi-sub{
display:block;
font-size:13.2px;
color:var(--c-gray-500);
letter-spacing:-0.01em;
}
.oi-link{
display:inline-block;
margin-top:4px;
font-size:13.2px;
font-weight:600;
color:var(--c-green-600);
}
.oi-link:hover{ text-decoration:underline; }
/* Responsive */
@media (max-width:1024px){
.main-contact{
grid-template-columns:1fr;
gap:32px;
padding:40px 32px;
}
.mc-deco{ width:260px; height:260px; }
.mc-title{ font-size:30.8px; }
.cat-contact-grid{ grid-template-columns:1fr; }
.venue-contact-grid{ grid-template-columns:1fr; }
.office-info{ grid-template-columns:1fr; }
}
@media (max-width:640px){
.main-contact{ padding:32px 22px; border-radius:16px; }
.mc-title{ font-size:26.4px; }
.mc-info-card{ padding:14px 16px; }
.mc-info-val{ font-size:17.6px; }
.cc-card{ padding:22px; }
.vc-card{ padding:22px; }
.vc-name{ font-size:18.7px; padding-right:44px; }
.vc-badge{ width:34px; height:34px; top:20px; right:20px; }
}
/* ==========================================================================
PROGRAM PAGE (전체 일정표)
========================================================================== */
/* 카테고리 컬러 토큰 */
.cat-navy { --c: #061e3c; --c-bg: rgba(6,30,60,0.06); --c-soft: #061e3c1a; }
.cat-blue { --c: #0e6ba8; --c-bg: rgba(0,180,216,0.10); --c-soft: #00b4d81a; }
.cat-green { --c: var(--c-green-600); --c-bg: rgba(27,196,125,0.10); --c-soft: #1bc47d1a; }
.cat-orange { --c: #d65a2a; --c-bg: rgba(255,138,91,0.12); --c-soft: #ff8a5b1a; }
.cat-purple { --c: #5b3e96; --c-bg: rgba(139,109,214,0.12);--c-soft: #8b6dd61a; }
/* 1. 데이 요약 카드 (3분할) */
.day-summary{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:14px;
margin-bottom:36px;
}
.ds-card{
position:relative;
display:flex;
flex-direction:column;
gap:10px;
padding:24px 28px;
background:#fff;
border:1px solid var(--c-border);
border-radius:14px;
transition:all .25s var(--ease);
}
.ds-card::before{
content:'';
position:absolute;
top:0; left:0;
width:4px; height:100%;
background:linear-gradient(180deg, #00b4d8 0%, #1bc47d 100%);
border-radius:14px 0 0 14px;
}
.ds-card:hover{
border-color:transparent;
box-shadow:0 12px 28px rgba(10,37,64,0.10);
transform:translateY(-3px);
}
.ds-day{
font-size:13.2px;
font-weight:700;
color:var(--c-green-600);
letter-spacing:0.5px;
}
.ds-date{
display:flex;
align-items:baseline;
gap:8px;
}
.ds-date strong{
font-family:var(--font-en);
font-size:39.6px;
font-weight:800;
color:var(--c-navy-800);
letter-spacing:-0.02em;
line-height:1;
}
.ds-date em{
font-style:normal;
font-size:16.5px;
font-weight:600;
color:var(--c-gray-500);
}
.ds-count{
font-size:13.2px;
color:var(--c-gray-400);
letter-spacing:-0.01em;
}
/* 2. 툴바 */
.prog-toolbar{
display:flex;
justify-content:space-between;
align-items:center;
flex-wrap:wrap;
gap:16px;
padding:18px 22px;
background:var(--c-gray-50);
border:1px solid var(--c-border);
border-radius:12px;
margin-bottom:32px;
}
.prog-legend{
display:flex;
flex-wrap:wrap;
gap:18px;
}
.prog-legend .legend-item{
display:inline-flex;
align-items:center;
gap:7px;
font-size:14.3px;
font-weight:500;
color:var(--c-gray-600);
letter-spacing:-0.01em;
}
.ldot{
display:inline-block;
width:10px; height:10px;
border-radius:3px;
}
.ld-navy{ background:#061e3c; }
.ld-blue{ background:#0e6ba8; }
.ld-green{ background:var(--c-green-500); }
.ld-orange{ background:#ff8a5b; }
.ld-purple{ background:#8b6dd6; }
/* 뷰 전환 */
.view-switch{
display:inline-flex;
background:#fff;
border:1px solid var(--c-border);
border-radius:10px;
padding:4px;
gap:4px;
}
.vs-btn{
display:inline-flex;
align-items:center;
gap:6px;
padding:7px 14px;
background:transparent;
border:none;
border-radius:7px;
font-size:14.3px;
font-weight:600;
color:var(--c-gray-500);
cursor:pointer;
transition:all .2s var(--ease);
}
.vs-btn svg{ width:14px; height:14px; }
.vs-btn:hover{ color:var(--c-navy-800); }
.vs-btn.active{
background:var(--c-navy-800);
color:#fff;
}
/* 뷰 컨테이너 */
.prog-view{ display:none; }
.prog-view.is-active{ display:block; }
/* ========== 3-A. TIMELINE VIEW ========== */
.tl-day{
margin-bottom:56px;
}
.tl-day:last-child{ margin-bottom:0; }
.tl-day-head{
display:flex;
align-items:center;
gap:16px;
margin-bottom:24px;
}
.tl-day-badge{
display:flex;
align-items:center;
gap:14px;
padding:14px 22px;
background:linear-gradient(135deg, #061e3c 0%, #0e3358 100%);
color:#fff;
border-radius:50px;
flex-shrink:0;
}
.tl-day-label{
font-family:var(--font-en);
font-size:12.1px;
font-weight:700;
letter-spacing:2px;
color:var(--c-green-400);
text-transform:uppercase;
}
.tl-day-date{
display:flex;
align-items:baseline;
gap:6px;
}
.tl-day-date strong{
font-family:var(--font-en);
font-size:22px;
font-weight:800;
}
.tl-day-date em{
font-style:normal;
font-size:14.3px;
color:rgba(255,255,255,0.7);
}
.tl-day-line{
flex:1;
height:1px;
background:linear-gradient(90deg, var(--c-navy-800) 0%, transparent 100%);
opacity:0.15;
}
/* 타임라인 행 */
.timeline{
position:relative;
padding-left:140px;
}
.timeline::before{
content:'';
position:absolute;
top:8px; bottom:8px;
left:118px;
width:2px;
background:var(--c-gray-200);
}
.tl-row{
position:relative;
display:flex;
align-items:flex-start;
margin-bottom:12px;
}
.tl-row:last-child{ margin-bottom:0; }
.tl-time{
position:absolute;
left:-140px;
top:18px;
width:104px;
text-align:right;
font-family:var(--font-en);
letter-spacing:-0.01em;
}
.tl-time-start{
display:block;
font-size:19.8px;
font-weight:800;
color:var(--c-navy-800);
line-height:1.2;
}
.tl-time-end{
display:block;
font-size:12.1px;
font-weight:500;
color:var(--c-gray-400);
margin-top:2px;
}
.tl-dot{
position:absolute;
left:-30px;
top:22px;
width:14px;
height:14px;
border-radius:50%;
background:#fff;
border:3px solid var(--c, var(--c-gray-300));
box-shadow:0 0 0 4px #fff;
z-index:2;
}
/* 타임라인 카드 */
.tl-card{
flex:1;
position:relative;
padding:20px 24px;
background:#fff;
border:1px solid var(--c-border);
border-left:3px solid var(--c, var(--c-gray-300));
border-radius:12px;
transition:all .25s var(--ease);
}
.tl-card:hover{
border-color:var(--c, var(--c-gray-300));
box-shadow:0 8px 20px rgba(10,37,64,0.06);
transform:translateX(3px);
}
.tl-row.is-featured .tl-card{
background:linear-gradient(135deg, #fff 0%, var(--c-soft, transparent) 100%);
border-color:var(--c);
border-width:1px;
border-left-width:4px;
box-shadow:0 8px 24px rgba(0,0,0,0.06);
}
.tl-card-top{
display:flex;
align-items:center;
gap:10px;
margin-bottom:8px;
flex-wrap:wrap;
}
.tl-tag{
display:inline-block;
padding:3px 10px;
background:var(--c-bg, var(--c-gray-100));
color:var(--c, var(--c-gray-600));
border-radius:4px;
font-size:12.1px;
font-weight:700;
letter-spacing:-0.01em;
}
.tl-featured{
display:inline-flex;
align-items:center;
gap:4px;
padding:3px 8px;
background:linear-gradient(135deg, #ffd84a 0%, #ff9c2c 100%);
color:#fff;
border-radius:4px;
font-family:var(--font-en);
font-size:11px;
font-weight:800;
letter-spacing:0.5px;
}
.tl-featured svg{ width:10px; height:10px; }
.tl-title{
font-size:18.7px;
font-weight:700;
color:var(--c-navy-800);
letter-spacing:-0.02em;
margin-bottom:6px;
line-height:1.4;
}
.tl-sub{
font-size:14.3px;
color:var(--c-gray-500);
margin-bottom:14px;
line-height:1.55;
letter-spacing:-0.01em;
}
.tl-meta{
display:flex;
flex-wrap:wrap;
gap:8px 18px;
padding-top:12px;
border-top:1px dashed var(--c-border);
font-size:13.2px;
color:var(--c-gray-600);
}
.tl-meta span{
display:inline-flex;
align-items:center;
gap:6px;
letter-spacing:-0.01em;
}
.m-ico{
display:inline-block;
width:13px; height:13px;
background:currentColor;
color:var(--c-gray-400);
flex-shrink:0;
}
.m-ico-pin{
-webkit-mask:url("data:image/svg+xml;utf8,") center/contain no-repeat;
mask:url("data:image/svg+xml;utf8,") center/contain no-repeat;
}
.m-ico-host{
-webkit-mask:url("data:image/svg+xml;utf8,") center/contain no-repeat;
mask:url("data:image/svg+xml;utf8,") center/contain no-repeat;
}
/* ========== 3-B. GRID VIEW ========== */
.gv-day{ margin-bottom:48px; }
.gv-day:last-child{ margin-bottom:0; }
.gv-day-head{
display:flex;
align-items:baseline;
gap:14px;
padding-bottom:14px;
margin-bottom:18px;
border-bottom:2px solid var(--c-navy-800);
}
.gv-day-head strong{
font-family:var(--font-en);
font-size:26.4px;
font-weight:800;
color:var(--c-navy-800);
letter-spacing:-0.02em;
}
.gv-day-head strong em{
font-style:normal;
font-size:16.5px;
font-weight:600;
color:var(--c-gray-500);
margin-left:4px;
}
.gv-day-head span{
font-size:14.3px;
color:var(--c-gray-500);
}
.gv-grid{
display:grid;
grid-template-columns:repeat(2, 1fr);
gap:14px;
}
.gv-card{
position:relative;
padding:20px 22px 18px;
background:#fff;
border:1px solid var(--c-border);
border-radius:12px;
transition:all .25s var(--ease);
}
.gv-card::before{
content:'';
position:absolute;
top:0; left:0;
width:4px; height:100%;
background:var(--c, var(--c-gray-300));
border-radius:12px 0 0 12px;
}
.gv-card:hover{
border-color:var(--c, var(--c-gray-300));
box-shadow:0 8px 20px rgba(10,37,64,0.06);
transform:translateY(-2px);
}
.gv-card.is-featured{
border-color:var(--c);
background:linear-gradient(135deg, #fff 0%, var(--c-soft) 100%);
}
.gv-top{
display:flex;
align-items:center;
gap:10px;
margin-bottom:10px;
flex-wrap:wrap;
}
.gv-time{
font-family:var(--font-en);
font-size:14.3px;
font-weight:700;
color:var(--c-navy-800);
letter-spacing:-0.01em;
}
.gv-tag{
display:inline-block;
padding:2px 9px;
background:var(--c-bg, var(--c-gray-100));
color:var(--c, var(--c-gray-600));
border-radius:4px;
font-size:12.1px;
font-weight:700;
}
.gv-title{
font-size:17.6px;
font-weight:700;
color:var(--c-navy-800);
letter-spacing:-0.02em;
margin-bottom:6px;
line-height:1.4;
}
.gv-sub{
font-size:14.3px;
color:var(--c-gray-500);
margin-bottom:10px;
line-height:1.5;
letter-spacing:-0.01em;
}
.gv-meta{
display:flex;
flex-wrap:wrap;
gap:5px;
font-size:13.2px;
color:var(--c-gray-500);
letter-spacing:-0.01em;
}
.gv-meta .dot-sep{ color:var(--c-gray-300); }
/* Responsive */
@media (max-width:1024px){
.day-summary{ grid-template-columns:1fr; }
.prog-toolbar{ flex-direction:column; align-items:flex-start; }
.timeline{ padding-left:88px; }
.timeline::before{ left:66px; }
.tl-time{ left:-88px; width:60px; }
.tl-time-start{ font-size:16.5px; }
.tl-dot{ left:-28px; }
.gv-grid{ grid-template-columns:1fr; }
}
@media (max-width:640px){
.tl-day-badge{ padding:10px 16px; gap:10px; }
.tl-day-date strong{ font-size:17.6px; }
.timeline{ padding-left:70px; }
.timeline::before{ left:54px; }
.tl-time{ left:-70px; width:50px; }
.tl-time-start{ font-size:14.3px; }
.tl-time-end{ font-size:11px; }
.tl-dot{ left:-22px; width:10px; height:10px; }
.tl-card{ padding:16px 18px; }
.tl-title{ font-size:16.5px; }
.tl-meta{ gap:6px 12px; font-size:12.1px; }
}
/* ==========================================================================
EXHIBITION - 5대 분야 포토 카드 (실사 이미지 + 은은한 오버레이)
========================================================================== */
.cat-grid-photo{
display:grid;
grid-template-columns:repeat(5, 1fr);
gap:14px;
}
.cat-photo-card{
position:relative;
display:flex;
flex-direction:column;
justify-content:flex-end;
min-height:260px;
padding:24px 22px;
border-radius:16px;
overflow:hidden;
background-size:cover;
background-position:center;
background-repeat:no-repeat;
transition:transform .35s var(--ease), box-shadow .35s var(--ease);
cursor:default;
}
/* 은은한 오버레이 (이미지 위 그라데이션) */
.cpc-overlay{
position:absolute;
inset:0;
background:
linear-gradient(180deg,
rgba(10,37,64,0.20) 0%,
rgba(10,37,64,0.55) 55%,
rgba(10,37,64,0.85) 100%);
transition:background .35s var(--ease);
z-index:1;
}
.cat-photo-card:hover{
transform:translateY(-4px);
box-shadow:0 16px 36px rgba(10,37,64,0.18);
}
.cat-photo-card:hover .cpc-overlay{
background:
linear-gradient(180deg,
rgba(10,37,64,0.10) 0%,
rgba(27,196,125,0.40) 55%,
rgba(10,37,64,0.85) 100%);
}
.cpc-inner{
position:relative;
z-index:2;
color:#fff;
}
.cpc-num{
display:inline-block;
font-family:var(--font-en);
font-size:12.1px;
font-weight:700;
letter-spacing:1.5px;
color:rgba(255,255,255,0.75);
margin-bottom:6px;
}
.cpc-name{
font-size:22px;
font-weight:800;
color:#fff;
letter-spacing:-0.02em;
line-height:1.3;
margin-bottom:6px;
}
.cpc-sub{
font-size:14.3px;
color:rgba(255,255,255,0.80);
letter-spacing:-0.01em;
line-height:1.5;
}
/* 반응형 */
@media (max-width:1280px){
.cat-grid-photo{ grid-template-columns:repeat(3, 1fr); }
}
@media (max-width:768px){
.cat-grid-photo{ grid-template-columns:repeat(2, 1fr); gap:10px; }
.cat-photo-card{ min-height:200px; padding:20px 18px; }
.cpc-name{ font-size:18.7px; }
.cpc-sub{ font-size:13.2px; }
}
@media (max-width:480px){
.cat-grid-photo{ grid-template-columns:1fr; }
.cat-photo-card{ min-height:180px; }
}
/* ==========================================================================
REGISTRATION PAGE
========================================================================== */
/* 1. Hero (FREE 강조 박스) */
.reg-hero{
position:relative;
display:grid;
grid-template-columns:1.3fr 1fr;
gap:40px;
align-items:center;
padding:48px 56px;
background:linear-gradient(135deg, #061e3c 0%, #0a2540 50%, #0e3358 100%);
border-radius:24px;
color:#fff;
overflow:hidden;
}
.reg-hero-deco{
position:absolute;
top:-50px;
right:-50px;
width:340px;
height:340px;
pointer-events:none;
opacity:0.95;
}
.reg-hero-deco svg{ width:100%; height:100%; }
.reg-hero-left{ position:relative; z-index:1; }
.reg-tag-free{
display:inline-block;
padding:5px 14px;
background:rgba(27,196,125,0.20);
border:1px solid rgba(27,196,125,0.40);
border-radius:50px;
font-family:var(--font-en);
font-size:12.1px;
font-weight:800;
letter-spacing:2px;
color:var(--c-green-400);
margin-bottom:18px;
}
.reg-hero-title{
font-size:30.8px;
font-weight:500;
line-height:1.35;
letter-spacing:-0.02em;
color:rgba(255,255,255,0.85);
margin-bottom:18px;
}
.reg-hero-title strong{
display:block;
color:#fff;
font-weight:800;
margin-top:4px;
}
.reg-hero-desc{
font-size:16.5px;
line-height:1.75;
color:rgba(255,255,255,0.75);
letter-spacing:-0.01em;
}
.reg-hero-desc mark{
background:linear-gradient(180deg, transparent 60%, rgba(27,196,125,0.40) 60%);
color:#fff;
font-weight:600;
padding:0 2px;
}
/* CTA 버튼 */
.reg-hero-right{
position:relative;
z-index:1;
display:flex;
flex-direction:column;
gap:12px;
}
.reg-cta-btn{
display:flex;
align-items:center;
gap:16px;
padding:18px 22px;
border-radius:14px;
transition:all .25s var(--ease);
text-decoration:none;
}
.reg-cta-primary{
background:linear-gradient(135deg, #1bc47d 0%, #00874f 100%);
color:#fff;
box-shadow:0 8px 24px rgba(27,196,125,0.30);
}
.reg-cta-primary:hover{
transform:translateY(-2px);
box-shadow:0 12px 32px rgba(27,196,125,0.40);
}
.reg-cta-secondary{
background:rgba(255,255,255,0.08);
border:1px solid rgba(255,255,255,0.20);
color:#fff;
backdrop-filter:blur(10px);
}
.reg-cta-secondary:hover{
background:rgba(255,255,255,0.14);
border-color:rgba(255,255,255,0.40);
transform:translateX(4px);
}
.ct-ico{
flex-shrink:0;
width:44px; height:44px;
border-radius:12px;
background:rgba(255,255,255,0.18);
display:flex; align-items:center; justify-content:center;
color:#fff;
}
.ct-ico svg{ width:22px; height:22px; }
.reg-cta-btn span:not(.ct-ico){
display:flex;
flex-direction:column;
gap:2px;
text-align:left;
}
.reg-cta-btn em{
font-style:normal;
font-size:12.1px;
font-weight:600;
letter-spacing:1px;
opacity:0.75;
text-transform:uppercase;
}
.reg-cta-btn strong{
font-size:17.6px;
font-weight:700;
letter-spacing:-0.01em;
}
/* 2. 안내사항 3카드 */
.notice-grid{
display:grid;
grid-template-columns:repeat(3, 1fr);
gap:18px;
}
.notice-card{
position:relative;
padding:28px 28px 24px;
background:#fff;
border:1px solid var(--c-border);
border-radius:14px;
border-top:3px solid var(--n-color, var(--c-gray-300));
transition:all .25s var(--ease);
}
.notice-card:hover{
transform:translateY(-3px);
box-shadow:0 12px 28px rgba(10,37,64,0.08);
}
.notice-green{ --n-color:var(--c-green-500); }
.notice-blue{ --n-color:#00b4d8; }
.notice-orange{ --n-color:#ff8a5b; }
.nc-ico{
width:48px; height:48px;
border-radius:12px;
background:color-mix(in srgb, var(--n-color) 12%, transparent);
color:var(--n-color);
display:flex; align-items:center; justify-content:center;
margin-bottom:14px;
}
.nc-ico svg{ width:24px; height:24px; }
/* color-mix 미지원 브라우저 폴백 */
.notice-green .nc-ico{ background:rgba(27,196,125,0.10); }
.notice-blue .nc-ico{ background:rgba(0,180,216,0.10); }
.notice-orange .nc-ico{ background:rgba(255,138,91,0.12); }
.notice-card h3{
font-size:18.7px;
font-weight:700;
color:var(--c-navy-800);
letter-spacing:-0.02em;
margin-bottom:8px;
}
.notice-card p{
font-size:15.4px;
color:var(--c-gray-600);
line-height:1.6;
letter-spacing:-0.01em;
}
/* 3. 등록 일정 (타임라인 2개) */
.reg-schedule{
display:grid;
grid-template-columns:1fr 1fr;
gap:18px;
}
.rs-item{
position:relative;
background:#fff;
border:1px solid var(--c-border);
border-radius:16px;
padding:28px 32px;
overflow:hidden;
}
.rs-item::before{
content:'';
position:absolute;
top:0; left:0;
width:6px; height:100%;
background:linear-gradient(180deg, var(--rs-c, var(--c-gray-300)), transparent);
}
.rs-pre { --rs-c:var(--c-green-500); }
.rs-onsite{ --rs-c:#ff8a5b; }
.rs-badge{
display:flex;
align-items:baseline;
gap:10px;
margin-bottom:14px;
}
.rs-step{
display:inline-block;
padding:3px 10px;
background:var(--c-gray-100);
border-radius:4px;
font-family:var(--font-en);
font-size:12.1px;
font-weight:700;
letter-spacing:1.5px;
color:var(--c-gray-600);
}
.rs-badge strong{
font-size:19.8px;
font-weight:700;
color:var(--c-navy-800);
letter-spacing:-0.02em;
}
.rs-period{
font-family:var(--font-en);
font-size:24.2px;
font-weight:800;
color:var(--c-navy-800);
letter-spacing:-0.02em;
margin-bottom:10px;
}
.rs-note{
font-size:15.4px;
color:var(--c-gray-500);
line-height:1.6;
letter-spacing:-0.01em;
}
/* 4. 등록 절차 (4단계 + 화살표) */
.reg-process{
display:flex;
align-items:stretch;
justify-content:space-between;
gap:10px;
list-style:none;
padding:0;
}
.rp-step{
flex:1;
position:relative;
padding:32px 22px 24px;
background:#fff;
border:1px solid var(--c-border);
border-radius:14px;
text-align:center;
transition:all .25s var(--ease);
}
.rp-step:hover{
border-color:var(--c-green-500);
transform:translateY(-3px);
box-shadow:0 12px 24px rgba(27,196,125,0.10);
}
.rp-num{
position:absolute;
top:14px;
right:18px;
font-family:var(--font-en);
font-size:35.2px;
font-weight:800;
color:var(--c-gray-100);
letter-spacing:-0.02em;
line-height:1;
}
.rp-ico{
width:64px; height:64px;
margin:0 auto 16px;
background:rgba(27,196,125,0.10);
border-radius:16px;
color:var(--c-green-600);
display:flex; align-items:center; justify-content:center;
}
.rp-ico svg{ width:32px; height:32px; }
.rp-step h3{
font-size:17.6px;
font-weight:700;
color:var(--c-navy-800);
letter-spacing:-0.02em;
margin-bottom:8px;
}
.rp-step p{
font-size:14.3px;
color:var(--c-gray-500);
line-height:1.55;
letter-spacing:-0.01em;
}
.rp-arrow{
display:flex;
align-items:center;
font-size:24.2px;
color:var(--c-gray-300);
font-weight:300;
flex-shrink:0;
}
/* 5. 체크리스트 */
.check-list{
list-style:none;
padding:0;
display:flex;
flex-direction:column;
gap:12px;
margin-bottom:20px;
}
.check-list li{
display:flex;
gap:14px;
align-items:flex-start;
padding:16px 20px;
background:#f7fdfa;
border:1px solid rgba(27,196,125,0.20);
border-radius:10px;
}
.cl-ico{
flex-shrink:0;
width:24px; height:24px;
background:var(--c-green-500);
color:#fff;
border-radius:50%;
display:flex; align-items:center; justify-content:center;
margin-top:2px;
}
.cl-ico svg{ width:14px; height:14px; }
.check-list p{
font-size:15.4px;
color:var(--c-gray-700);
line-height:1.7;
letter-spacing:-0.01em;
}
.check-list p strong{ color:var(--c-navy-800); font-weight:700; }
/* SNS 친구추가 버튼 */
.sns-follow{
display:flex;
gap:10px;
flex-wrap:wrap;
}
.sns-btn{
display:inline-flex;
align-items:center;
gap:8px;
padding:11px 20px;
border-radius:50px;
font-size:14.3px;
font-weight:600;
letter-spacing:-0.01em;
transition:all .2s var(--ease);
}
.sns-btn span{ font-size:17.6px; }
.sns-ig{ background:linear-gradient(135deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); color:#fff; }
.sns-kk{ background:#fee500; color:#3c1e1e; }
.sns-yt{ background:#ff0000; color:#fff; }
.sns-btn:hover{ transform:translateY(-2px); box-shadow:0 6px 14px rgba(0,0,0,0.15); }
/* 6. 경고 박스 (info-box variant) */
.info-box-warning{
background:#fffbe6;
border:1px solid #f5dd6c;
}
.info-box-warning .info-ico{
color:#b87b07;
background:rgba(245,166,35,0.15);
}
/* 7. 등록 문의 카드 */
.reg-contact{
display:grid;
grid-template-columns:1fr 1fr;
gap:16px;
}
.rc-card{
display:flex;
align-items:center;
gap:18px;
padding:24px 28px;
background:#fff;
border:1px solid var(--c-border);
border-radius:14px;
transition:all .25s var(--ease);
text-decoration:none;
}
.rc-card:hover{
border-color:var(--c-green-500);
transform:translateX(4px);
box-shadow:0 8px 20px rgba(27,196,125,0.10);
}
.rc-ico{
flex-shrink:0;
width:48px; height:48px;
border-radius:12px;
background:rgba(27,196,125,0.10);
color:var(--c-green-600);
display:flex; align-items:center; justify-content:center;
}
.rc-ico svg{ width:24px; height:24px; }
.rc-label{
display:block;
font-size:13.2px;
font-weight:600;
color:var(--c-gray-400);
letter-spacing:-0.01em;
margin-bottom:3px;
}
.rc-val{
font-family:var(--font-en);
font-size:19.8px;
font-weight:700;
color:var(--c-navy-800);
letter-spacing:-0.01em;
}
/* Responsive */
@media (max-width:1024px){
.reg-hero{ grid-template-columns:1fr; gap:28px; padding:36px 28px; }
.reg-hero-deco{ width:240px; height:240px; opacity:0.6; }
.reg-hero-title{ font-size:26.4px; }
.notice-grid{ grid-template-columns:1fr; }
.reg-schedule{ grid-template-columns:1fr; }
.reg-process{ flex-wrap:wrap; }
.rp-step{ flex:0 0 calc(50% - 5px); }
.rp-arrow{ display:none; }
.reg-contact{ grid-template-columns:1fr; }
}
@media (max-width:640px){
.reg-hero{ padding:28px 22px; border-radius:16px; }
.reg-hero-title{ font-size:22px; }
.reg-cta-btn{ padding:14px 16px; }
.reg-cta-btn strong{ font-size:15.4px; }
.rs-period{ font-size:19.8px; }
.rp-step{ flex:0 0 100%; }
.sns-follow{ justify-content:center; }
}
/* ==========================================================================
MEMBER & REGISTER FORM
========================================================================== */
.member-form-wrap{
max-width:720px;
margin:0 auto;
background:#fff;
border:1px solid var(--c-border);
border-radius:14px;
padding:36px 40px;
}
.member-form .mf-row{ margin-bottom:18px; }
.member-form .mf-row label{
display:block;
font-size:14.3px;
font-weight:700;
color:var(--c-navy-800);
letter-spacing:-0.01em;
margin-bottom:6px;
}
.member-form .mf-row label em{
color:#e8557e; font-style:normal; margin-left:2px;
}
.member-form input[type="text"],
.member-form input[type="email"],
.member-form input[type="password"],
.member-form input[type="tel"],
.member-form select{
width:100%;
padding:10px 14px;
border:1px solid var(--c-border);
border-radius:8px;
background:#fff;
font-size:15.4px;
transition:border-color .18s ease;
}
.member-form input:focus, .member-form select:focus{
outline:none;
border-color:var(--c-green-500);
box-shadow:0 0 0 3px rgba(27,196,125,0.10);
}
.member-form input[disabled]{
background:var(--c-gray-50);
color:var(--c-gray-500);
}
.member-form .mf-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:14px;
}
.member-form .mf-agree{
margin-top:8px;
padding:16px;
background:var(--c-gray-50);
border-radius:8px;
}
.member-form .mf-agree label{
display:block;
font-size:14.3px;
font-weight:500;
color:var(--c-gray-700);
margin-bottom:8px;
cursor:pointer;
line-height:1.6;
}
.member-form .mf-agree label:last-child{ margin-bottom:0; }
.member-form .mf-agree input[type="checkbox"]{
margin-right:8px;
vertical-align:-2px;
}
.member-form .mf-agree strong{
color:var(--c-navy-800);
font-weight:700;
}
.member-form .mf-btns{
display:flex;
gap:10px;
margin-top:24px;
flex-wrap:wrap;
}
.member-form .mf-btns .btn{
padding:12px 22px;
font-size:15.4px;
}
/* 폼 알림 */
.form-alert{
padding:14px 18px;
border-radius:10px;
font-size:15.4px;
font-weight:500;
margin-bottom:18px;
}
.form-alert-err{
background:#fde8e8;
color:#a8243d;
border:1px solid #f5b5bd;
}
.form-alert-ok{
background:#e6f7ed;
color:#0a8c4a;
border:1px solid #b6e5c8;
}
/* 등록 완료 화면 */
.reg-done{
max-width:560px;
margin:0 auto;
text-align:center;
padding:48px 40px;
background:#fff;
border:1px solid var(--c-border);
border-radius:18px;
}
.rd-icon{
width:80px; height:80px;
margin:0 auto 18px;
color:var(--c-green-500);
}
.rd-icon svg{ width:100%; height:100%; }
.reg-done h2{
font-size:26.4px;
font-weight:800;
color:var(--c-navy-800);
letter-spacing:-0.02em;
margin-bottom:10px;
}
.reg-done > p{
font-size:16.5px;
color:var(--c-gray-500);
margin-bottom:24px;
}
.rd-no{
padding:20px;
background:linear-gradient(135deg, #061e3c 0%, #0e3358 100%);
border-radius:12px;
color:#fff;
margin-bottom:18px;
}
.rd-no span{
display:block;
font-family:var(--font-en);
font-size:12.1px;
font-weight:700;
letter-spacing:2px;
color:rgba(255,255,255,0.55);
margin-bottom:6px;
}
.rd-no strong{
font-family:var(--font-en);
font-size:30.8px;
font-weight:800;
letter-spacing:-0.02em;
}
.rd-notice{
font-size:14.3px;
color:var(--c-gray-600);
line-height:1.6;
}
.rd-notice a{ color:var(--c-green-600); font-weight:600; }
/* 조회 결과 카드 */
.reg-found-card{
background:#fff;
border:1px solid var(--c-border);
border-radius:14px;
padding:28px 32px;
margin-bottom:16px;
}
.rfc-top{
display:flex;
justify-content:space-between;
align-items:center;
padding-bottom:16px;
margin-bottom:18px;
border-bottom:1px dashed var(--c-border);
}
.rfc-no-label{
display:block;
font-family:var(--font-en);
font-size:11px;
font-weight:700;
letter-spacing:1.5px;
color:var(--c-gray-400);
margin-bottom:4px;
}
.rfc-no{
font-family:var(--font-en);
font-size:24.2px;
font-weight:800;
color:var(--c-navy-800);
letter-spacing:-0.02em;
}
.rfc-status{
display:inline-block;
padding:6px 14px;
border-radius:50px;
font-size:14.3px;
font-weight:700;
letter-spacing:-0.01em;
}
.rfc-st-ok{ background:#e6f7ed; color:#0a8c4a; }
.rfc-st-wait{ background:#fff3e0; color:#b85f00; }
.rfc-st-done{ background:#f0e8ff; color:#5b3e96; }
.rfc-st-cancel{ background:#fde8e8; color:#a8243d; }
.rfc-table{
width:100%;
border-collapse:collapse;
}
.rfc-table th, .rfc-table td{
padding:9px 0;
text-align:left;
font-size:15.4px;
border-bottom:1px solid var(--c-gray-100);
}
.rfc-table th{
width:30%;
font-weight:600;
color:var(--c-gray-500);
}
.rfc-table tr:last-child th, .rfc-table tr:last-child td{ border-bottom:none; }
.rfc-qr-area{
margin-top:20px;
padding:20px;
background:var(--c-gray-50);
border-radius:10px;
text-align:center;
}
.rfc-qr-area p{
font-size:14.3px;
color:var(--c-gray-700);
margin-bottom:12px;
font-weight:600;
}
.rfc-qr-area img{
display:block;
margin:0 auto 8px;
border:8px solid #fff;
border-radius:8px;
}
.rfc-qr-area small{
display:block;
font-size:13.2px;
color:var(--c-gray-500);
}
@media (max-width:640px){
.member-form-wrap{ padding:24px 22px; border-radius:12px; }
.member-form .mf-grid{ grid-template-columns:1fr; gap:18px; }
.rfc-top{ flex-direction:column; align-items:flex-start; gap:12px; }
.rfc-no{ font-size:19.8px; }
}
/* ==========================================================================
SNS QUICK LOGIN/REGISTER
========================================================================== */
.sns-quick{ margin-bottom:20px; }
.sns-quick-title{
font-size:14.3px;
font-weight:700;
color:var(--c-gray-700);
letter-spacing:-0.01em;
margin-bottom:10px;
text-align:center;
}
.sns-btns{
display:grid;
grid-template-columns:repeat(3, 1fr);
gap:8px;
}
.sns-quick-btn{
display:flex;
align-items:center;
justify-content:center;
gap:8px;
padding:11px 12px;
border-radius:8px;
font-size:14.3px;
font-weight:700;
letter-spacing:-0.01em;
text-decoration:none;
transition:all .18s var(--ease);
}
.sns-quick-btn span{
display:inline-flex;
align-items:center;
justify-content:center;
width:22px; height:22px;
border-radius:50%;
font-size:13.2px;
font-weight:900;
background:rgba(255,255,255,0.25);
}
.sns-quick-btn:hover{ transform:translateY(-2px); box-shadow:0 6px 14px rgba(0,0,0,0.12); }
.sns-naver{ background:#03c75a; color:#fff; }
.sns-kakao{ background:#fee500; color:#3c1e1e; }
.sns-kakao span{ background:rgba(60,30,30,0.15); }
.sns-google{ background:#fff; color:#3d4b5c; border:1px solid var(--c-border); }
.sns-google span{ background:#f4f6fa; color:#4285f4; }
.sns-divider{
position:relative;
text-align:center;
margin:20px 0 18px;
}
.sns-divider::before{
content:'';
position:absolute;
left:0; right:0; top:50%;
height:1px;
background:var(--c-border);
}
.sns-divider span{
position:relative;
background:#fff;
padding:0 14px;
font-size:13.2px;
color:var(--c-gray-400);
font-weight:600;
letter-spacing:-0.01em;
}
/* 모바일 */
@media (max-width:640px){
.sns-btns{ grid-template-columns:1fr; }
.sns-quick-btn{ justify-content:flex-start; padding:12px 18px; }
}
/* ==========================================================================
REGISTER MYPAGE — 참관객 카드
========================================================================== */
.visitor-list{
display:grid;
grid-template-columns:repeat(auto-fill, minmax(320px, 1fr));
gap:14px;
margin-bottom:20px;
}
.visitor-card{
position:relative;
display:flex;
align-items:center;
gap:14px;
padding:18px 20px;
background:#fff;
border:1px solid var(--c-border);
border-radius:12px;
transition:all .2s var(--ease);
}
.visitor-card:hover{
border-color:var(--c-green-500);
box-shadow:0 8px 16px rgba(27,196,125,0.08);
}
.vc-head{
position:absolute;
top:12px;
right:14px;
display:flex;
align-items:center;
gap:8px;
}
.vc-no{
font-family:var(--font-en);
font-size:11px;
font-weight:700;
letter-spacing:1px;
color:var(--c-gray-400);
}
.vc-body{
flex:1;
min-width:0;
display:flex;
flex-direction:column;
gap:4px;
padding-right:32px;
}
.vc-name{
font-size:17.6px;
font-weight:700;
color:var(--c-navy-800);
letter-spacing:-0.02em;
}
.vc-meta{
font-size:13.2px;
color:var(--c-gray-600);
}
.vc-contact{
font-size:12.1px;
color:var(--c-gray-500);
margin-top:2px;
}
.vc-qr{
flex-shrink:0;
border:4px solid #fff;
border-radius:4px;
background:#fff;
}
/* 추가 폼 */
.visitor-add{
border:1px dashed var(--c-border);
border-radius:12px;
padding:16px 20px;
transition:border-color .2s ease;
}
.visitor-add[open]{
border-style:solid;
border-color:var(--c-green-500);
background:#fafffd;
}
.visitor-add summary{
cursor:pointer;
font-size:15.4px;
font-weight:600;
color:var(--c-green-600);
list-style:none;
display:flex;
align-items:center;
gap:6px;
}
.visitor-add summary::-webkit-details-marker{ display:none; }
.visitor-add[open] summary{
margin-bottom:8px;
color:var(--c-navy-800);
}
@media (max-width:640px){
.visitor-list{ grid-template-columns:1fr; }
.visitor-card{ flex-direction:column; align-items:flex-start; }
.vc-body{ padding-right:0; width:100%; }
.vc-qr{ align-self:center; }
}
/* ==========================================================================
OVERVIEW (서브페이지 행사 개요) — Who We Are 패턴과 통일
========================================================================== */
/* 페이지 상단 page-head와 구분되는 흰 카드 박스 */
.overview-wrap{
padding:40px 44px;
background:#fff;
border:1px solid var(--c-border);
border-radius:20px;
box-shadow:0 12px 32px rgba(10,37,64,0.06);
position:relative;
/* page-head와 살짝 겹쳐서 떠있는 느낌 (간격 좁힘) */
margin-top:-20px;
z-index:2;
}
/* 그리드: 좌 포스터 / 우 정보 */
.ov-grid{
display:grid;
grid-template-columns:0.85fr 1.15fr;
gap:40px;
align-items:start;
}
/* 좌측: 키비주얼 포스터 */
.ov-poster{
position:relative;
aspect-ratio:3/4;
border-radius:14px;
overflow:hidden;
background:#231f20; /* 포스터 배경색과 동일하게 — 여백 이음새 제거 */
display:flex;
align-items:center;
justify-content:center;
}
.ov-poster img{
position:absolute;
inset:0;
width:100%;
height:100%;
object-fit:contain;
padding:30px;
}
.ov-poster-caption{
position:absolute;
bottom:24px;
left:24px;
right:24px;
color:#fff;
display:flex;
flex-direction:column;
gap:4px;
z-index:2;
}
.ovpc-en{
font-family:var(--font-en);
font-size:14.3px;
font-weight:700;
letter-spacing:1px;
color:var(--c-green-500);
line-height:1.3;
}
.ovpc-kr{
font-size:22px;
font-weight:800;
letter-spacing:-0.02em;
color:#fff;
text-shadow:0 2px 12px rgba(0,0,0,0.40);
}
/* 우측: 정보 테이블 */
.ov-info{
display:flex;
flex-direction:column;
margin:0;
}
.ov-row{
display:grid;
grid-template-columns:104px 1fr;
align-items:center;
gap:16px;
padding:16px 0;
border-bottom:1px solid var(--c-border);
}
.ov-row:first-child{ padding-top:0; }
.ov-row:last-child{ border-bottom:none; padding-bottom:0; }
.ov-row dt{
font-size:14.3px;
font-weight:700;
color:#fff;
background:var(--c-navy-800);
padding:8px 14px;
border-radius:50px;
text-align:center;
letter-spacing:-0.01em;
width:100%; /* 그리드 컬럼 전체 채워 라벨 폭 통일 */
white-space:normal; /* 긴 영문 라벨(Official Languages 등) 줄바꿈 허용 */
line-height:1.25;
word-break:keep-all;
}
.ov-row dd{
font-size:16.5px;
font-weight:600;
color:var(--c-navy-800);
letter-spacing:-0.02em;
line-height:1.55;
margin:0;
}
.ov-row dd small{
display:block;
font-size:14.3px;
font-weight:400;
color:var(--c-gray-500);
margin-top:3px;
letter-spacing:-0.01em;
}
.ov-hosts a{
color:var(--c-green-600, #00a86b);
text-decoration:none;
border-bottom:1px solid transparent;
transition:border-color .15s ease;
}
.ov-hosts a:hover{
border-bottom-color:currentColor;
}
/* 주최·주관 로고 버전 */
.ov-logos{
display:flex;
flex-wrap:nowrap; /* 1줄 고정 */
align-items:center;
gap:10px 12px;
min-width:0;
}
.ov-logos .ov-logo{
border-bottom:none;
display:inline-flex;
align-items:center;
min-width:0;
flex:0 1 auto; /* 폭 부족 시 축소 허용 */
}
.ov-logos .ov-logo img{
max-height:28px; /* 주최 4개가 한 줄에 축소 없이 들어가는 높이 → 주관 KEA와 동일 크기 */
height:auto;
width:auto;
max-width:100%;
object-fit:contain;
display:block;
transition:transform .15s ease;
}
.ov-logos .ov-logo:hover img{ transform:translateY(-2px); }
.ov-logos .ov-logo-sep{
color:#b3bcc8;
font-size:18px;
font-weight:300;
}
.ov-logos small{
flex-basis:100%;
margin-top:4px;
}
@media (max-width:640px){
.ov-logos{ gap:8px 8px; }
.ov-logos .ov-logo img{ max-height:24px; }
}
.ov-badge-free{
display:inline-block;
padding:4px 12px;
background:rgba(27,196,125,0.15);
color:var(--c-green-600);
font-size:14.3px;
font-weight:800;
letter-spacing:-0.01em;
border-radius:50px;
margin-right:8px;
}
/* 반응형 */
@media (max-width:1024px){
.overview-wrap{ padding:32px 28px; margin-top:-16px; }
.ov-grid{ grid-template-columns:1fr; gap:28px; }
/* 스택 시: aspect-ratio+absolute 의존 제거 → 이미지 자연배치로 항상 노출(높이 0 붕괴 방지) */
.ov-poster{ aspect-ratio:auto; max-width:460px; margin:0 auto; }
.ov-poster img{ position:static; width:100%; height:auto; padding:0; }
}
@media (max-width:640px){
.overview-wrap{ padding:22px 18px; margin-top:-10px; border-radius:14px; }
.ov-row{ grid-template-columns:78px 1fr; gap:11px; padding:14px 0; }
.ov-row dt{ font-size:12.5px; padding:6px 6px; letter-spacing:-0.03em; }
.ov-row dd{ font-size:15.4px; }
.ov-row dd small{ font-size:13.2px; }
.ov-poster{ max-width:none; } /* 폰: 포스터 풀폭으로 크게 노출 */
.ovpc-kr{ font-size:18.7px; }
}
/* ==========================================================================
FLOORPLAN (행사 배치도)
========================================================================== */
.fp-wrap{
background:#fff;
border:1px solid var(--c-border);
border-radius:20px;
box-shadow:0 12px 32px rgba(10,37,64,0.06);
padding:0;
overflow:hidden;
margin-top:-20px;
position:relative;
z-index:2;
}
/* 탭 헤더 */
.fp-tabs{
display:flex;
gap:0;
border-bottom:1px solid var(--c-border);
background:#fafbfc;
}
.fp-tab{
flex:1;
padding:20px 28px;
text-align:center;
font-size:17.6px;
font-weight:600;
color:var(--c-gray-500);
letter-spacing:-0.02em;
position:relative;
transition:color .2s var(--ease), background .2s var(--ease);
}
.fp-tab:hover{
color:var(--c-navy-800);
background:#fff;
}
.fp-tab.is-active{
color:var(--c-green-600);
font-weight:800;
background:#fff;
}
.fp-tab.is-active::after{
content:'';
position:absolute;
left:0;
right:0;
bottom:-1px;
height:3px;
background:var(--c-green-500);
}
/* 패널 */
.fp-panel{
padding:48px 52px;
display:flex;
flex-direction:column;
gap:48px;
}
/* 섹션 */
.fp-section{
display:flex;
flex-direction:column;
}
.fp-sec-head{
display:flex;
align-items:center;
gap:14px;
margin-bottom:18px;
flex-wrap:wrap;
}
.fp-sec-num{
display:inline-flex;
align-items:center;
justify-content:center;
min-width:36px;
height:36px;
padding:0 12px;
background:var(--c-navy-800);
color:#fff;
font-family:var(--font-en);
font-size:14.3px;
font-weight:800;
letter-spacing:1px;
border-radius:50px;
}
.fp-sec-title{
font-size:26.4px;
font-weight:800;
color:var(--c-navy-800);
letter-spacing:-0.02em;
margin:0;
flex:1;
min-width:0;
}
.fp-sec-title em{
font-style:normal;
color:var(--c-green-600);
font-family:var(--font-en);
margin-left:4px;
}
.fp-sec-desc{
width:100%;
font-size:14.9px;
color:var(--c-gray-500);
letter-spacing:-0.01em;
margin:4px 0 0;
}
/* 이미지 영역 */
.fp-image{
position:relative;
background:#fafbfc;
border:1px solid var(--c-border);
border-radius:14px;
overflow:hidden;
min-height:340px;
}
.fp-image img{
display:block;
width:100%;
height:auto;
max-height:600px;
object-fit:contain;
background:#fff;
cursor:zoom-in;
}
/* 도면 확대 — 돋보기 버튼 (이미지 위, 클릭 유도) */
.fp-zoom-btn{
position:absolute; right:14px; bottom:14px; z-index:3;
display:inline-flex; align-items:center; gap:7px;
height:42px; padding:0 16px 0 13px;
border:0; border-radius:999px;
background:rgba(10,37,64,.82); color:#fff;
font-size:14px; font-weight:700; cursor:pointer;
box-shadow:0 6px 18px rgba(10,37,64,.28);
-webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
transition:background .18s, transform .18s;
animation:fpZoomPulse 2.6s ease-in-out infinite;
}
.fp-zoom-btn svg{ width:19px; height:19px; }
.fp-zoom-btn:hover{ background:#1e6bcc; transform:translateY(-2px); }
@keyframes fpZoomPulse{
0% { box-shadow:0 6px 18px rgba(10,37,64,.28), 0 0 0 0 rgba(30,107,204,.45); }
70% { box-shadow:0 6px 18px rgba(10,37,64,.28), 0 0 0 12px rgba(30,107,204,0); }
100% { box-shadow:0 6px 18px rgba(10,37,64,.28), 0 0 0 0 rgba(30,107,204,0); }
}
@media (prefers-reduced-motion:reduce){ .fp-zoom-btn{ animation:none; } }
/* 도면 확대 라이트박스 (핀치줌·드래그) */
.fp-lightbox{ position:fixed; inset:0; z-index:9999; display:none; flex-direction:column; background:rgba(8,14,24,.95); }
.fp-lightbox.is-open{ display:flex; }
.fp-lb-bar{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 16px; }
.fp-lb-title{ font-size:15px; font-weight:700; color:#e8eef6; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fp-lb-tools{ display:flex; align-items:center; gap:8px; flex-shrink:0; }
.fp-lb-zoom,.fp-lb-close{ width:42px; height:42px; border:1px solid rgba(255,255,255,.25); border-radius:10px; background:rgba(255,255,255,.08); color:#fff; font-size:20px; font-weight:700; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .15s; }
.fp-lb-zoom:hover,.fp-lb-close:hover{ background:rgba(255,255,255,.2); }
.fp-lb-close{ font-size:24px; }
.fp-lb-stage{ flex:1; min-height:0; overflow:hidden; display:flex; align-items:center; justify-content:center; touch-action:none; cursor:grab; }
.fp-lb-stage.is-grabbing{ cursor:grabbing; }
.fp-lb-img{ max-width:100%; max-height:100%; object-fit:contain; transform-origin:center center; transition:transform .16s ease; -webkit-user-select:none; user-select:none; -webkit-user-drag:none; will-change:transform; }
.fp-lb-stage.gesturing .fp-lb-img{ transition:none; } /* 제스처 중엔 즉각 반응 */
.fp-lb-hint{ text-align:center; color:rgba(255,255,255,.72); font-size:13px; padding:10px 16px calc(12px + env(safe-area-inset-bottom)); }
/* 이미지 미준비 시 플레이스홀더 */
.fp-image-placeholder{
display:none; /* 기본 숨김, JS onerror 시 표시 */
align-items:center;
justify-content:center;
min-height:360px;
padding:40px 24px;
background:
repeating-linear-gradient(
135deg,
transparent 0,
transparent 12px,
rgba(10,37,64,0.025) 12px,
rgba(10,37,64,0.025) 24px
);
}
.fp-ph-inner{
text-align:center;
color:var(--c-gray-500);
max-width:380px;
}
.fp-ph-inner svg{
width:120px;
height:120px;
color:var(--c-gray-400);
margin-bottom:14px;
}
.fp-ph-inner p{
font-size:17.6px;
font-weight:700;
color:var(--c-gray-600);
margin-bottom:6px;
letter-spacing:-0.02em;
}
.fp-ph-inner small{
display:block;
font-size:13.2px;
color:var(--c-gray-400);
font-family:monospace;
}
/* 하단 안내 박스 */
.fp-notice{
display:flex;
align-items:flex-start;
gap:16px;
padding:22px 28px;
background:rgba(27,196,125,0.06);
border:1px solid rgba(27,196,125,0.25);
border-radius:14px;
margin-top:24px;
}
.fpn-ico{
flex-shrink:0;
width:40px;
height:40px;
border-radius:50%;
background:rgba(27,196,125,0.15);
color:var(--c-green-600);
display:flex;
align-items:center;
justify-content:center;
}
.fpn-ico svg{ width:22px; height:22px; }
.fpn-content{
flex:1;
min-width:0;
}
.fpn-content strong{
display:block;
font-size:16.5px;
font-weight:700;
color:var(--c-navy-800);
letter-spacing:-0.02em;
margin-bottom:4px;
}
.fpn-content p{
font-size:14.9px;
color:var(--c-gray-600);
letter-spacing:-0.01em;
line-height:1.65;
margin:0;
}
.fpn-content a{
color:var(--c-green-600);
font-weight:600;
text-decoration:underline;
}
.fpn-content a:hover{ color:var(--c-navy-800); }
/* 반응형 */
@media (max-width:1024px){
.fp-wrap{ margin-top:-16px; }
.fp-panel{ padding:32px 28px; gap:36px; }
.fp-sec-title{ font-size:22px; }
.fp-image{ min-height:280px; }
}
@media (max-width:640px){
.fp-wrap{ margin-top:-10px; border-radius:14px; }
.fp-tab{ padding:16px 12px; font-size:15.4px; }
.fp-panel{ padding:22px 18px; gap:28px; }
.fp-sec-head{ gap:10px; margin-bottom:14px; }
.fp-sec-num{ font-size:12.1px; min-width:32px; height:30px; padding:0 10px; }
.fp-sec-title{ font-size:18.7px; }
.fp-image{ min-height:220px; }
.fp-notice{ padding:18px 20px; gap:12px; }
.fpn-content p{ font-size:14.3px; }
}
/* ==========================================================================
PROGRAM (전체 프로그램)
========================================================================== */
.prog-wrap{
margin-top:-20px;
position:relative;
z-index:2;
}
/* ===== 날짜 탭 ===== */
.prog-date-tabs{
display:flex;
gap:12px;
flex-wrap:wrap;
margin-bottom:24px;
}
.pdt{
display:inline-flex;
align-items:center;
padding:14px 32px;
background:#fff;
border:1.5px solid var(--c-border);
border-radius:50px;
font-size:16.5px;
font-weight:600;
color:var(--c-gray-600);
letter-spacing:-0.02em;
white-space:nowrap; /* 날짜 글자 줄바꿈 방지 */
transition:all .2s var(--ease);
}
.pdt:hover{
border-color:var(--c-green-500);
color:var(--c-green-600);
}
.pdt.is-active{
background:var(--c-green-500);
border-color:var(--c-green-500);
color:#fff;
box-shadow:0 6px 18px rgba(27,196,125,0.30);
}
/* ===== 카테고리 범례 ===== */
.prog-legend{
display:flex;
gap:24px;
flex-wrap:wrap;
padding:18px 24px;
background:#fff;
border:1px solid var(--c-border);
border-radius:12px;
margin-bottom:24px;
}
.leg-item{
display:inline-flex;
align-items:center;
gap:10px;
font-size:15.4px;
font-weight:600;
color:var(--c-navy-800);
letter-spacing:-0.01em;
}
.leg-dot{
display:inline-block;
width:18px;
height:14px;
border-radius:3px;
flex-shrink:0;
}
/* ===== PaG (Program at a Glance) 테이블 — 시간(행) × 룸(열), 솔리드 박스 ===== */
.pag-toolbar{
display:flex; align-items:center; justify-content:flex-end;
margin-bottom:12px;
}
.pag-toolbar--withnote{ justify-content:space-between; gap:14px; }
.pag-count{
font-size:14px; font-weight:700; color:var(--c-gray-500); letter-spacing:-0.01em;
white-space:nowrap;
}
/* 프로그램 표 상단 안내 — 유동 변경 가능 고지 */
.pag-notice{
display:inline-flex; align-items:center; gap:8px;
margin:0;
padding:9px 14px;
background:#eef4fb;
border:1px solid #d4e3f3;
border-radius:9px;
font-size:13.5px; font-weight:600; line-height:1.4;
letter-spacing:-0.01em;
color:#1c4f86;
}
.pag-notice-ic{ width:16px; height:16px; flex:none; color:#2f7fc4; }
@media (max-width:768px){
.pag-toolbar--withnote{ flex-direction:column; align-items:flex-start; gap:8px; }
.pag-notice{ font-size:12.5px; padding:8px 12px; }
}
.pag-scroll{
overflow-x:auto;
border-radius:14px;
background:#e6eaf0; /* 박스 사이 간격 색 */
padding:4px;
}
.pag{
border-collapse:separate;
border-spacing:4px; /* 셀을 분리된 박스로 */
width:100%;
min-width:820px; /* 룸이 많으면 가로 스크롤 */
table-layout:fixed;
background:#e6eaf0;
}
/* 헤더 행 — 진한 네이비 박스 + 흰 글자 */
.pag thead th{
background:var(--c-navy-800);
color:#fff;
font-size:13px;
font-weight:800;
letter-spacing:-0.01em;
text-align:center;
padding:13px 10px;
border-radius:7px;
vertical-align:middle;
}
.pag-h-time{ width:88px; }
/* 시간 열(좌측) — 흰 박스 */
.pag-time{
width:88px;
background:#fff;
color:var(--c-gray-600);
font-family:var(--font-en);
font-size:12.5px;
font-weight:700;
text-align:center;
white-space:nowrap;
padding:10px 6px;
border-radius:7px;
vertical-align:middle;
}
.pag-time-sep{ display:block; color:var(--c-gray-300); font-weight:500; line-height:1.1; }
.pag-time-allday{ color:var(--c-green-600); }
/* 빈 시간대 — 옅은 박스 */
.pag-empty{
background:#f3f5f8;
border-radius:7px;
}
/* 세션 박스 — 배경(카테고리색)·글자색은 인라인 style 로 주입(대비 자동) */
.pag-cell{
background:var(--c-green-500);
color:#fff;
padding:13px 13px;
border-radius:7px;
vertical-align:middle; /* 박스 내용 상하 중앙 정렬 */
text-align:center; /* 박스 내용 좌우 중앙 정렬 */
cursor:pointer;
transition:transform .12s var(--ease), box-shadow .12s var(--ease), filter .12s var(--ease);
}
.pag-cell:hover{
filter:brightness(1.07) saturate(1.05);
box-shadow:0 6px 16px rgba(10,37,64,0.28);
transform:translateY(-1px);
}
/* PaG 확정 전: 세션 클릭 비활성 — 클릭 가능 표시(커서/호버 효과) 제거 */
.pag-cell--locked{ cursor:default; }
.pag-cell--locked:hover{ filter:none; box-shadow:none; transform:none; }
.pag-cat{ /* 카테고리 분류 칩 — 박스 글자색 기반 반투명 배경으로 구분 */
display:inline-block;
font-family:var(--font-kr);
font-size:10.5px;
font-weight:800;
letter-spacing:-0.01em;
margin-bottom:8px;
padding:3px 9px;
line-height:1.35;
border-radius:6px;
background:rgba(255,255,255,0.20); /* 폴백: 어두운 박스용 */
background:color-mix(in srgb, currentColor 22%, transparent); /* 박스색 자동 대비 */
}
.pag-title{ /* 제목 — 셀 글자색 상속, 가장 강조 */
display:block;
font-size:16px;
font-weight:800;
line-height:1.32;
letter-spacing:-0.02em;
color:inherit;
}
.pag-sub{ /* 부제 — 셀 글자색 상속, 흐리게 */
display:block;
margin-top:5px;
font-size:11.5px;
font-weight:500;
line-height:1.4;
opacity:0.85;
}
.pag-live{ /* LIVE — 어느 색 박스 위에서도 보이게 흰 알약+빨강 글자 */
display:inline-block;
margin-top:8px;
padding:1px 8px;
background:rgba(255,255,255,0.94);
color:#d11f1f;
font-family:var(--font-en);
font-size:9.5px;
font-weight:800;
letter-spacing:0.06em;
border-radius:4px;
}
.pag-hint{
margin-top:14px;
font-size:13.5px;
color:var(--c-gray-500);
text-align:right;
}
@media (max-width:768px){
.pag-title{ font-size:13px; }
.pag-sub{ font-size:11px; }
.pag thead th{ font-size:12px; padding:11px 8px; }
.pag-hint{ text-align:left; }
}
/* ===== 2단 그리드 ===== */
.prog-grid{
display:grid;
grid-template-columns:1.4fr 1fr;
gap:24px;
align-items:start;
}
.prog-grid.prog-grid-single{
grid-template-columns:1fr; /* 종일 없을 때 풀너비 */
}
.prog-col{
background:#fff;
border:1px solid var(--c-border);
border-radius:16px;
overflow:hidden;
}
.prog-col-head{
display:flex;
align-items:center;
justify-content:space-between;
padding:18px 22px;
background:#fafbfc;
border-bottom:1px solid var(--c-border);
}
.pch-badge{
display:inline-flex;
align-items:center;
padding:6px 14px;
border-radius:50px;
font-size:14.3px;
font-weight:700;
letter-spacing:-0.01em;
}
.pch-badge-green{ background:rgba(27,196,125,0.12); color:var(--c-green-600); border:1px solid rgba(27,196,125,0.30); }
.pch-badge-blue{ background:rgba(30,107,204,0.10); color:#1e6bcc; border:1px solid rgba(30,107,204,0.30); }
.pch-count{
font-size:13.8px;
font-weight:600;
color:var(--c-gray-500);
}
/* ===== 세션 카드 리스트 ===== */
.prog-list{
list-style:none;
padding:14px;
margin:0;
display:flex;
flex-direction:column;
gap:12px;
}
/* ===== 카드 — 카테고리 배경/보더 (좌측 라인 X) ===== */
.prog-card{
position:relative;
padding:18px 22px;
background:var(--card-bg, #fafbfc);
border:1.5px solid var(--card-border, var(--c-border));
border-radius:12px;
cursor:pointer;
transition:all .25s var(--ease);
}
.prog-card:hover{
transform:translateY(-2px);
box-shadow:0 10px 24px rgba(10,37,64,0.10);
border-color:var(--card-color);
}
/* 상단: 카테고리 칩 + 시간 + LIVE 한 줄 정렬 */
.pc-top{
display:flex;
align-items:center;
gap:8px;
margin-bottom:12px;
flex-wrap:wrap;
padding-right:36px;
}
.pc-cat-chip{
display:inline-flex;
align-items:center;
padding:4px 10px;
color:#fff;
font-size:12.1px;
font-weight:700;
letter-spacing:-0.01em;
border-radius:50px;
white-space:nowrap;
}
.pc-time{
display:inline-flex;
align-items:center;
padding:4px 10px;
background:#fff;
border:1px solid var(--card-border);
color:var(--c-navy-800);
font-family:var(--font-en);
font-size:14.3px;
font-weight:700;
letter-spacing:-0.01em;
border-radius:6px;
}
.pc-time-allday{
background:var(--card-color);
color:#fff;
border-color:var(--card-color);
}
/* 타이틀 — 큰 굵게, 가독성 우선 */
.pc-title{
font-size:18.7px;
font-weight:700;
color:var(--c-navy-800);
letter-spacing:-0.025em;
line-height:1.4;
margin:0 0 6px;
padding-right:36px;
}
/* 부제 — 별도 줄, 회색 */
.pc-sub{
font-size:14.9px;
font-weight:500;
color:var(--c-gray-600);
margin:0 0 10px;
letter-spacing:-0.01em;
line-height:1.5;
}
.pc-venue{
display:inline-flex;
align-items:center;
gap:6px;
font-size:14.3px;
color:var(--c-gray-600);
margin:0;
padding:6px 12px;
background:rgba(255,255,255,0.65);
border-radius:6px;
letter-spacing:-0.01em;
}
.pc-venue svg{ width:13px; height:13px; color:var(--card-color); flex-shrink:0; }
.pc-live{
display:inline-flex;
align-items:center;
gap:4px;
padding:3px 9px;
background:#ff4d4d;
color:#fff;
font-family:var(--font-en);
font-size:11px;
font-weight:800;
letter-spacing:1px;
border-radius:4px;
animation:livePulse 2s ease-in-out infinite;
}
.pc-live svg{ width:11px; height:11px; }
@keyframes livePulse{
0%, 100%{ box-shadow:0 0 0 0 rgba(255,77,77,0.55); }
50%{ box-shadow:0 0 0 6px rgba(255,77,77,0); }
}
.pc-more{
position:absolute;
top:14px;
right:14px;
width:30px;
height:30px;
display:flex;
align-items:center;
justify-content:center;
background:rgba(255,255,255,0.60);
border:none;
border-radius:50%;
color:var(--c-gray-500);
cursor:pointer;
transition:all .15s var(--ease);
}
.pc-more svg{ width:14px; height:14px; }
.prog-card:hover .pc-more{
background:var(--card-color);
color:#fff;
}
.prog-empty{
padding:48px 24px;
text-align:center;
color:var(--c-gray-400);
font-size:15.4px;
}
/* ==========================================================================
PROGRAM MODAL (상세 팝업)
========================================================================== */
.prog-modal{
position:fixed;
inset:0;
z-index:9999;
display:none;
align-items:center;
justify-content:center;
padding:20px;
}
.prog-modal.is-open{ display:flex; }
.pm-backdrop{
position:absolute;
inset:0;
background:rgba(10,25,41,0.65);
backdrop-filter:blur(4px);
animation:pmFadeIn .2s ease;
}
.pm-dialog{
position:relative;
width:100%;
max-width:860px;
max-height:90vh;
background:#fff;
border-radius:18px;
overflow:hidden;
display:flex;
flex-direction:column;
box-shadow:0 20px 60px rgba(0,0,0,0.30);
animation:pmSlideUp .25s var(--ease);
}
@keyframes pmFadeIn{ from{opacity:0;} to{opacity:1;} }
@keyframes pmSlideUp{ from{opacity:0; transform:translateY(20px);} to{opacity:1; transform:translateY(0);} }
.pm-close{
position:absolute;
top:14px;
right:14px;
z-index:10;
width:40px;
height:40px;
display:flex;
align-items:center;
justify-content:center;
background:#0a1929;
border:2px solid #fff;
border-radius:50%;
color:#fff;
cursor:pointer;
box-shadow:0 2px 10px rgba(0,0,0,0.30);
transition:background .2s var(--ease), transform .2s var(--ease);
}
.pm-close:hover{ background:#1d4ed8; transform:rotate(90deg); }
.pm-close svg{ width:20px; height:20px; }
/* 연사 모달은 프로그램 모달 위에 스택 */
.spk-modal{ z-index:10001; }
.pm-body{
overflow-y:auto;
flex:1;
}
/* 헤더 (카테고리 색상) */
.pm-head{
position:relative;
padding:24px 32px;
color:#fff;
display:flex;
align-items:center;
gap:12px;
}
.pm-cat{
display:inline-flex;
align-items:center;
padding:6px 14px;
background:rgba(255,255,255,0.20);
border:1px solid rgba(255,255,255,0.40);
border-radius:50px;
font-size:14.3px;
font-weight:700;
backdrop-filter:blur(8px);
}
.pm-live-badge{
display:inline-flex;
align-items:center;
gap:6px;
padding:6px 12px;
background:#ff4d4d;
border-radius:50px;
font-family:var(--font-en);
font-size:12.1px;
font-weight:800;
letter-spacing:1px;
}
.pm-live-badge svg{ width:12px; height:12px; }
/* 본문 */
.pm-content{ padding:24px 32px 32px; }
.pm-meta{
display:flex;
flex-direction:column;
gap:8px;
padding:14px 16px;
background:#fafbfc;
border-radius:10px;
margin-bottom:18px;
}
.pmm-row{
display:flex;
align-items:center;
gap:10px;
font-size:15.4px;
color:var(--c-gray-600);
letter-spacing:-0.01em;
}
.pmm-icon{ font-size:16.5px; }
.pmm-row strong{ color:var(--c-navy-800); font-weight:700; }
.pm-title{
font-size:24.2px;
font-weight:800;
color:var(--c-navy-800);
letter-spacing:-0.03em;
margin:0 0 6px;
line-height:1.35;
}
.pm-subtitle{
font-size:16px;
color:var(--c-gray-600);
letter-spacing:-0.01em;
line-height:1.55;
margin:0 0 14px;
}
.pm-desc{
font-size:15.4px;
line-height:1.7;
color:var(--c-gray-700, #555);
letter-spacing:-0.01em;
margin-bottom:18px;
padding:14px 16px;
background:rgba(27,196,125,0.04);
border-left:3px solid var(--c-green-500);
border-radius:0 8px 8px 0;
}
.pm-tags{
display:flex;
flex-wrap:wrap;
gap:6px;
margin-bottom:20px;
}
.pm-tag{
font-size:13.2px;
color:var(--c-green-600);
padding:4px 10px;
background:rgba(27,196,125,0.10);
border-radius:50px;
letter-spacing:-0.01em;
}
/* 섹션 (세부 + 연사) */
.pm-section{ margin-top:24px; padding-top:20px; border-top:1px solid var(--c-border); }
.pm-sec-h{
font-size:16.5px;
font-weight:700;
color:var(--c-navy-800);
letter-spacing:-0.02em;
margin:0 0 14px;
display:flex;
align-items:center;
justify-content:space-between;
gap:8px;
flex-wrap:wrap;
}
.pm-warn{
font-size:12.7px;
font-weight:500;
color:#ff4d4d;
letter-spacing:-0.01em;
}
/* 세부 타임라인 */
.pm-timeline{
list-style:none;
padding:0;
margin:0;
display:flex;
flex-direction:column;
gap:8px;
}
.pmtl-item{
padding:12px 14px;
background:rgba(27,196,125,0.04);
border-radius:8px;
}
.pmtl-head{
display:flex;
flex-wrap:wrap;
gap:6px;
align-items:baseline;
font-size:14.9px;
}
.pmtl-type{ color:var(--c-green-600); font-weight:700; }
.pmtl-time{ color:var(--c-gray-500); font-family:var(--font-en); font-size:13.8px; }
.pmtl-title{ color:var(--c-navy-800); font-weight:600; }
.pmtl-desc{
font-size:14.3px;
color:var(--c-gray-600);
margin:6px 0 0;
line-height:1.55;
}
.pmtl-speaker{
display:flex;
align-items:center;
gap:10px;
margin-top:10px;
padding-top:10px;
border-top:1px dashed var(--c-border);
}
.pmtl-photo{
width:44px; height:44px;
border-radius:50%;
object-fit:cover;
background:#f0f2f5;
display:flex; align-items:center; justify-content:center;
font-size:22px;
color:var(--c-gray-400);
flex-shrink:0;
}
.pmtl-photo-empty{ background:#f0f2f5; }
.pmtl-sp-info{ min-width:0; }
.pmtl-sp-info strong{
display:block;
font-size:14.9px;
font-weight:700;
color:var(--c-navy-800);
}
.pmtl-sp-info small{
display:block;
font-size:13.2px;
color:var(--c-gray-500);
margin-top:2px;
}
/* 연사 카드 */
.pm-speakers{
display:grid;
grid-template-columns:repeat(2, 1fr);
gap:12px;
}
.pmsp-card{
display:flex;
gap:12px;
padding:14px;
background:#fafbfc;
border:1px solid var(--c-border);
border-radius:10px;
}
.pmsp-photo{
width:56px; height:56px;
border-radius:50%;
object-fit:cover;
flex-shrink:0;
background:#f0f2f5;
}
.pmsp-photo-empty{
display:flex; align-items:center; justify-content:center;
font-size:26.4px;
color:var(--c-gray-400);
}
.pmsp-info{ min-width:0; flex:1; }
.pmsp-role{
display:inline-block;
padding:2px 8px;
background:var(--c-green-500);
color:#fff;
font-size:11.6px;
font-weight:700;
border-radius:4px;
margin-bottom:4px;
}
.pmsp-name{
display:block;
font-size:15.4px;
font-weight:700;
color:var(--c-navy-800);
letter-spacing:-0.02em;
}
.pmsp-name small{
font-size:12.7px;
font-weight:500;
color:var(--c-gray-500);
}
.pmsp-org{
font-size:13.2px;
color:var(--c-gray-600);
margin:3px 0 0;
letter-spacing:-0.01em;
line-height:1.4;
}
/* 액션 버튼 */
.pm-actions{
display:flex;
gap:10px;
margin-top:24px;
flex-wrap:wrap;
}
.pm-btn{
display:inline-flex;
align-items:center;
gap:6px;
padding:12px 22px;
border-radius:8px;
font-size:14.9px;
font-weight:700;
letter-spacing:-0.01em;
transition:all .2s var(--ease);
}
.pm-btn-live{ background:#ff4d4d; color:#fff; }
.pm-btn-live:hover{ background:#e63939; }
.pm-btn-file{ background:var(--c-navy-800); color:#fff; }
.pm-btn-file:hover{ background:#143458; }
.pm-loading,
.pm-empty{
padding:60px 30px;
text-align:center;
color:var(--c-gray-500);
font-size:15.4px;
line-height:1.6;
}
/* 반응형 */
@media (max-width:1024px){
.prog-wrap{ margin-top:-16px; }
.prog-grid{ grid-template-columns:1fr; }
.pdt{ padding:12px 20px; font-size:15.4px; }
.pm-speakers{ grid-template-columns:1fr; }
}
@media (max-width:640px){
.prog-wrap{ margin-top:-10px; }
.prog-date-tabs{ gap:8px; }
.pdt{ padding:10px 5px; font-size:12.5px; flex:1; justify-content:center; }
.prog-legend{ padding:12px 14px; gap:12px; }
.leg-item{ font-size:13.2px; }
.pc-title{ font-size:16.5px; }
.pm-head{ padding:20px 20px 20px; }
.pm-content{ padding:18px 20px 24px; }
.pm-title{ font-size:19.8px; }
}
/* ==========================================================================
EXHIBITION (전시 개요) — 4개 유관 전시회 카드 (행사 개요와 통일된 디자인)
========================================================================== */
.exh-wrap{
margin-top:-20px;
position:relative;
z-index:2;
display:grid;
grid-template-columns:repeat(2, 1fr); /* 전시 개요 박스 2열 배치 */
gap:16px;
align-items:stretch;
}
/* 카드 — 흰 박스 wrapper — 콤팩트 */
.exh-card{
padding:20px 24px;
background:#fff;
border:1px solid var(--c-border);
border-radius:16px;
box-shadow:0 8px 24px rgba(10,37,64,0.05);
display:grid;
grid-template-columns:200px 1fr; /* 2열 배치 — 로고 가로 확대 */
gap:20px;
align-items:center;
transition:transform .25s var(--ease), box-shadow .25s var(--ease);
}
.exh-card:hover{
transform:translateY(-2px);
box-shadow:0 12px 28px rgba(10,37,64,0.08);
}
/* ===== 좌측: 로고만 (배경 없음) ===== */
.exh-logo{
position:relative;
display:flex;
align-items:center;
justify-content:center;
padding:8px;
min-height:96px;
}
.exh-logo img{
display:block;
max-width:100%;
max-height:88px; /* 로고 가로 확대 (높이 상한 완화) */
width:auto;
height:auto;
object-fit:contain;
margin:0 auto;
}
/* 로고 클릭 시 공식 사이트로 이동 */
.exh-logo a{
display:inline-flex;
align-items:center;
justify-content:center;
max-width:100%;
}
.exh-logo a img{ transition:transform .25s var(--ease); }
.exh-logo a:hover img{ transform:scale(1.04); }
/* 이미지 폴백 — 완전 숨김, 이미지 로드 실패 시에만 표시 */
.exh-logo-fallback{
display:none !important;
flex-direction:column;
align-items:center;
justify-content:center;
gap:6px;
text-align:center;
position:absolute;
inset:0;
padding:12px;
}
.exh-logo img[style*="display: none"] + .exh-logo-fallback,
.exh-logo img[style*="display:none"] + .exh-logo-fallback{
display:flex !important;
}
.exh-logo-fallback strong{
font-family:var(--font-en);
font-size:19.8px;
font-weight:800;
letter-spacing:0.5px;
color:var(--exh-color, #0078d4);
line-height:1.2;
}
.exh-logo-fallback span{
font-size:14.3px;
font-weight:600;
color:var(--c-navy-800);
letter-spacing:-0.02em;
}
/* ===== 우측: 정보 테이블 (행사 개요 ov-info와 동일) ===== */
.exh-info{
display:flex;
flex-direction:column;
margin:0;
}
.ei-row{
display:grid;
grid-template-columns:88px 1fr;
align-items:center;
gap:12px;
padding:7px 0;
border-bottom:1px solid var(--c-border);
}
.ei-row:first-child{ padding-top:0; }
.ei-row:last-child{ border-bottom:none; padding-bottom:0; }
.ei-row dt{
font-size:13.2px;
font-weight:700;
color:#fff;
background:var(--c-navy-800);
padding:5px 10px;
border-radius:50px;
text-align:center;
letter-spacing:-0.01em;
width:100%; /* 그리드 컬럼 전체 채워 라벨 폭 통일 */
white-space:nowrap;
}
.ei-row dd{
font-size:14.9px;
font-weight:600;
color:var(--c-navy-800);
letter-spacing:-0.02em;
line-height:1.45;
margin:0;
}
.ei-row dd small{
display:block;
font-size:13.2px;
font-weight:400;
color:var(--c-gray-500);
margin-top:1px;
letter-spacing:-0.01em;
}
.ei-row dd a{
color:var(--c-green-600);
font-weight:600;
}
.ei-row dd a small{
display:inline;
color:var(--c-green-600);
font-size:14.3px;
margin:0;
}
.ei-row dd a:hover{ text-decoration:underline; }
/* ===== 하단 안내 ===== */
.exh-notice{
display:flex;
align-items:flex-start;
gap:16px;
padding:22px 28px;
background:rgba(27,196,125,0.06);
border:1px solid rgba(27,196,125,0.25);
border-radius:14px;
margin-top:24px;
}
.exhn-ico{
flex-shrink:0;
width:40px;
height:40px;
border-radius:50%;
background:rgba(27,196,125,0.15);
color:var(--c-green-600);
display:flex;
align-items:center;
justify-content:center;
}
.exhn-ico svg{ width:22px; height:22px; }
.exhn-content strong{
display:block;
font-size:16.5px;
font-weight:700;
color:var(--c-navy-800);
letter-spacing:-0.02em;
margin-bottom:4px;
}
.exhn-content p{
font-size:14.9px;
color:var(--c-gray-600);
letter-spacing:-0.01em;
line-height:1.65;
margin:0;
}
/* ===== 반응형 ===== */
@media (max-width:1024px){
.exh-wrap{ margin-top:-16px; gap:14px; grid-template-columns:1fr; } /* 태블릿 이하: 1열 복귀 */
.exh-card{ padding:18px 22px; grid-template-columns:1fr; gap:14px; }
.exh-logo{ min-height:60px; padding:6px; }
.exh-logo img{ max-height:60px; }
}
@media (max-width:640px){
.exh-card{ padding:16px 18px; }
.exh-logo{ min-height:54px; }
.exh-logo img{ max-height:54px; }
.exh-logo-fallback strong{ font-size:17.6px; }
.ei-row{ grid-template-columns:72px 1fr; gap:10px; padding:6px 0; }
.ei-row dt{ font-size:12.1px; padding:4px 7px; }
.ei-row dd{ font-size:14.3px; }
}
/* ==========================================================================
REGISTRATION / HOTEL (참가 등록 · 숙박 예약) — 좌측 정렬 기반
========================================================================== */
/* ===== 1. 인트로 — 비주얼 강화 (좌측 정렬) ===== */
.reg-intro{
position:relative;
margin-top:-10px;
padding:48px 48px 44px;
text-align:left;
background:
radial-gradient(ellipse at 88% 15%, rgba(27,196,125,0.10) 0%, transparent 45%),
radial-gradient(ellipse at 95% 90%, rgba(30,107,204,0.08) 0%, transparent 40%),
linear-gradient(135deg, #f4f8fd 0%, #eef4fb 100%);
border:1px solid rgba(30,107,204,0.12);
border-radius:24px;
overflow:hidden;
}
/* 우측 대형 워터마크 아이콘 */
.reg-intro::after{
content:'';
position:absolute;
top:50%;
right:-40px;
transform:translateY(-50%);
width:280px;
height:280px;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231e6bcc' stroke-width='0.8' opacity='0.07'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M2 12h20M12 2a15 15 0 010 20M12 2a15 15 0 000 20'/%3E%3C/svg%3E");
background-size:contain;
background-repeat:no-repeat;
pointer-events:none;
}
.ri-pill{
position:relative;
z-index:2;
display:inline-flex;
align-items:center;
gap:7px;
padding:7px 18px;
background:#fff;
color:#1e6bcc;
border:1px solid rgba(30,107,204,0.20);
border-radius:50px;
font-family:var(--font-en);
font-size:12.7px;
font-weight:800;
letter-spacing:2px;
margin-bottom:20px;
box-shadow:0 4px 12px rgba(30,107,204,0.10);
}
.ri-pill::before{
content:'';
width:7px;
height:7px;
border-radius:50%;
background:#1bc47d;
box-shadow:0 0 0 3px rgba(27,196,125,0.20);
}
.ri-title{
position:relative;
z-index:2;
font-size:35.2px;
font-weight:800;
color:var(--c-navy-800);
letter-spacing:-0.035em;
line-height:1.3;
margin:0 0 16px;
}
.ri-title-en{
font-family:inherit; /* 국문과 동일 폰트 */
font-size:26.4px;
font-weight:600;
color:#1e6bcc;
margin-left:6px;
}
.ri-lead{
position:relative;
z-index:2;
font-size:17.6px;
color:var(--c-gray-600);
letter-spacing:-0.015em;
line-height:1.7;
margin:0 0 28px;
max-width:680px;
}
.ri-lead strong{
color:var(--c-green-600);
font-weight:800;
}
/* 기간 — 비주얼 카드 */
.ri-period{
position:relative;
z-index:2;
display:inline-flex;
align-items:center;
gap:16px;
padding:16px 26px 16px 18px;
background:#fff;
border:1px solid rgba(30,107,204,0.15);
border-radius:14px;
box-shadow:0 6px 18px rgba(30,107,204,0.10);
}
.ri-period svg{
width:24px;
height:24px;
color:#fff;
flex-shrink:0;
padding:10px;
box-sizing:content-box;
background:linear-gradient(135deg, #1e6bcc, #0a4d99);
border-radius:10px;
}
.rip-label{
display:block;
font-size:13.2px;
font-weight:700;
letter-spacing:-0.01em;
color:var(--c-gray-500);
margin-bottom:3px;
}
.rip-date{
display:block;
font-family:var(--font-en);
font-size:18.7px;
font-weight:800;
color:var(--c-navy-800);
letter-spacing:0;
}
/* 배너 안내 문구 (미성년자·기자·청년 앰배서더) */
.ri-note{
position:relative;
z-index:2;
margin:22px 0 0;
max-width:820px;
padding:15px 20px;
background:rgba(255,255,255,0.68);
border:1px solid rgba(30,107,204,0.15);
border-radius:12px;
font-size:14.7px;
line-height:1.85;
color:var(--c-gray-600);
letter-spacing:-0.01em;
word-break:keep-all;
overflow-wrap:break-word;
}
.ri-note a{
color:var(--c-green-600);
font-weight:800;
text-decoration:none;
}
.ri-note a:hover{ text-decoration:underline; }
.ri-note-c{ white-space:nowrap; } /* (전화 / 이메일) 묶음 유지 */
/* 인트로/플로우 사이 */
.reg-flow{
position:relative;
margin-top:8px;
padding:40px 0 8px;
}
.reg-flow::before{
content:'STEP BY STEP';
position:absolute;
top:18px;
left:0;
font-family:var(--font-en);
font-size:12.1px;
font-weight:800;
letter-spacing:2px;
color:var(--c-gray-400);
}
/* ===== 2. 3단계 — 카드 내부 좌측 정렬 ===== */
.reg-flow-line{ display:none; } /* 점선 라인 제거 */
.reg-steps{
list-style:none;
padding:0;
margin:28px 0 0;
display:grid;
grid-template-columns:1fr 44px 1fr 44px 1fr;
gap:0;
align-items:stretch;
counter-reset:step;
}
/* 카드 사이 화살표 커넥터 */
.rs-conn{
display:flex;
align-items:center;
justify-content:center;
}
.rs-conn svg{
width:26px;
height:26px;
color:#1e6bcc;
opacity:0.55;
}
.reg-step{
position:relative;
text-align:left;
padding:28px 26px;
background:#fff;
border:1px solid var(--c-border);
border-radius:16px;
transition:all .25s var(--ease);
overflow:hidden;
}
.reg-step::after{
content:'';
position:absolute;
top:0;
left:0;
width:0;
height:3px;
background:#1e6bcc;
transition:width .3s var(--ease);
}
.reg-step:hover{
border-color:rgba(30,107,204,0.40);
transform:translateY(-3px);
box-shadow:0 12px 28px rgba(30,107,204,0.10);
}
.reg-step:hover::after{ width:100%; }
/* 아이콘 + 번호 — 좌측 상단 가로 배치 */
.rs-icon-wrap{
display:flex;
align-items:center;
gap:14px;
margin-bottom:18px;
}
.rs-icon{
width:56px;
height:56px;
display:flex;
align-items:center;
justify-content:center;
background:rgba(30,107,204,0.08);
border:none;
color:#1e6bcc;
border-radius:14px;
flex-shrink:0;
transition:all .25s var(--ease);
}
.rs-icon svg{ width:28px; height:28px; }
.reg-step:hover .rs-icon{
background:#1e6bcc;
color:#fff;
}
.rs-num{
font-family:var(--font-en);
font-size:44px;
font-weight:800;
line-height:1;
color:rgba(30,107,204,0.15);
letter-spacing:-0.02em;
}
.rs-title{
font-size:18.7px;
font-weight:800;
color:var(--c-navy-800);
letter-spacing:-0.025em;
margin:0 0 9px;
line-height:1.4;
}
.rs-desc{
font-size:15.4px;
font-weight:500;
color:var(--c-gray-600);
line-height:1.65;
letter-spacing:-0.01em;
margin:0;
word-break:keep-all; /* 한글 단어 중간 끊김 방지 (접속합니다 등) */
}
.rs-desc strong{
color:#1e6bcc;
font-weight:700;
}
/* STEP 03 설명문 — 다른 카드와 같은 크기 유지 + 넓은 화면에서 한 줄 고정 */
.rs-desc--1line{
letter-spacing:-0.02em;
white-space:nowrap;
}
/* 카드 폭이 좁아지는 구간에서는 잘림 방지 위해 줄바꿈 허용 */
@media (max-width:1280px){
.rs-desc--1line{ white-space:normal; }
}
/* ===== 3. CTA 버튼 — 중앙 정렬 ===== */
.reg-cta{
text-align:center;
padding:32px 0 8px;
}
.reg-cta-btn{
display:inline-flex;
align-items:center;
gap:14px;
padding:18px 40px;
background:linear-gradient(135deg, #1bc47d 0%, #15a868 100%);
color:#fff;
font-size:17.6px;
font-weight:800;
letter-spacing:-0.02em;
border-radius:12px;
box-shadow:0 8px 22px rgba(27,196,125,0.30);
transition:all .25s var(--ease);
}
.reg-cta-btn:hover{
transform:translateY(-3px);
box-shadow:0 14px 32px rgba(27,196,125,0.45);
}
.reg-cta-btn svg{
width:20px;
height:20px;
transition:transform .25s var(--ease);
}
.reg-cta-btn:hover svg{ transform:translateX(5px); }
/* CTA 블루 변형 (숙박 예약) */
.reg-cta-btn-blue{
background:linear-gradient(135deg, #1e6bcc 0%, #0a4d99 100%);
box-shadow:0 8px 22px rgba(30,107,204,0.30);
}
.reg-cta-btn-blue:hover{
box-shadow:0 14px 32px rgba(30,107,204,0.45);
}
/* ===== 4. 문의 — 좌측 정렬 가로 나열 ===== */
.reg-info{
margin-top:32px;
padding:28px 0 8px;
border-top:1px solid var(--c-border);
position:relative;
}
.reg-info-divider{
margin-bottom:22px;
}
.reg-info-divider span{
font-size:16.5px;
font-weight:800;
letter-spacing:-0.02em;
color:var(--c-navy-800);
}
.reg-contact-row{
display:flex;
align-items:stretch;
gap:16px;
flex-wrap:wrap;
}
.rc-item{
display:flex;
align-items:center;
gap:14px;
padding:16px 22px;
background:#fafbfc;
border:1px solid var(--c-border);
border-radius:12px;
transition:all .2s var(--ease);
flex:1;
min-width:240px;
}
.rc-item:not(.rc-item-group):hover{
border-color:rgba(30,107,204,0.40);
background:#fff;
}
.rc-item:not(.rc-item-group):hover .rc-ico{
background:#1e6bcc;
color:#fff;
}
.rc-ico{
width:46px;
height:46px;
padding:11px;
background:rgba(30,107,204,0.08);
color:#1e6bcc;
border-radius:12px;
flex-shrink:0;
transition:all .2s var(--ease);
}
.rc-info{ min-width:0; }
.rc-label{
display:block;
font-size:12.1px;
font-weight:700;
color:var(--c-gray-500);
letter-spacing:0.5px;
margin-bottom:3px;
text-transform:uppercase;
}
.rc-info strong{
display:block;
font-family:var(--font-en);
font-size:17.6px;
font-weight:700;
color:var(--c-navy-800);
letter-spacing:-0.01em;
}
.rc-item-group .rc-info strong{
font-family:inherit;
font-size:16px;
}
.rc-sep{ display:none; } /* 세로 구분선 제거 (카드 방식) */
/* ===== 반응형 ===== */
@media (max-width:1024px){
.reg-intro{ padding:38px 32px 36px; }
.reg-steps{ grid-template-columns:1fr; gap:0; }
.rs-conn{ padding:10px 0; }
.rs-conn svg{ transform:rotate(90deg); }
.reg-contact-row{ flex-direction:column; }
.rc-item{ width:100%; min-width:0; }
}
@media (max-width:640px){
.reg-intro{ padding:32px 24px 30px; border-radius:18px; }
.reg-intro::after{ display:none; }
.ri-title{ font-size:25.3px; }
.ri-title-en{ font-size:19.8px; }
.ri-lead{ font-size:16px; }
.ri-period{ padding:14px 18px 14px 14px; gap:12px; width:100%; }
.rip-date{ font-size:16.5px; }
.ri-note{ max-width:100%; padding:14px 16px; font-size:14px; }
.ri-note-c{ white-space:normal; }
.reg-flow{ margin-top:32px; padding:32px 0 8px; }
.reg-step{ padding:24px 20px; }
.rs-icon{ width:50px; height:50px; }
.rs-icon svg{ width:24px; height:24px; }
.rs-num{ font-size:37.4px; }
.rs-title{ font-size:17.6px; }
.rs-desc{ font-size:14.9px; }
.reg-cta-btn{ padding:16px 32px; font-size:16.5px; width:100%; justify-content:center; }
.rc-item{ padding:14px 18px; gap:12px; }
.rc-info strong{ font-size:16px; }
}
/* ==========================================================================
LOCATION (오시는 길) — 탭 + 노선도 + 구글맵
========================================================================== */
.loc-wrap{
margin-top:-20px;
position:relative;
z-index:2;
}
/* ===== 장소 + 내비게이션 카드 ===== */
.loc-venue{
margin-top:44px;
display:grid; grid-template-columns:1.3fr 1fr;
background:#fff; border:1px solid var(--c-border); border-radius:18px; overflow:hidden;
box-shadow:0 10px 30px rgba(10,37,64,.07);
position:relative; z-index:2;
}
.lv-info{ padding:32px 34px; }
.lv-eyebrow{ display:inline-block; font-family:var(--font-en); font-size:12.5px; font-weight:800; letter-spacing:2px; color:#1e6bcc; margin-bottom:10px; }
.lv-name{ font-size:28px; font-weight:800; color:var(--c-navy-800,#0a2540); letter-spacing:-0.02em; }
.lv-name span{ color:#1e6bcc; }
.lv-addr{ display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-top:14px; font-size:15.5px; color:#33425a; }
.lv-addr svg{ width:18px; height:18px; color:#1e6bcc; flex-shrink:0; }
.lv-copy{ border:1px solid var(--c-border); background:#f4f7fb; color:#1e6bcc; font-size:12.5px; font-weight:700; padding:5px 12px; border-radius:999px; cursor:pointer; transition:background .15s, color .15s, border-color .15s; }
.lv-copy:hover{ background:#1e6bcc; color:#fff; border-color:#1e6bcc; }
.lv-copy.is-copied{ background:#1bc47d; color:#fff; border-color:#1bc47d; }
.lv-facts{ list-style:none; margin:20px 0 0; padding:18px 0 0; border-top:1px dashed var(--c-border); display:flex; flex-wrap:wrap; gap:10px 22px; }
.lv-facts li{ font-size:14px; color:#56657c; }
.lv-facts b{ color:var(--c-navy-800,#0a2540); font-weight:700; margin-right:4px; }
.lv-nav{ padding:32px 34px; background:linear-gradient(160deg,#0e3358 0%, #0a2540 100%); color:#fff; display:flex; flex-direction:column; justify-content:center; }
.lv-nav-label{ font-size:14px; font-weight:700; color:rgba(255,255,255,.78); margin-bottom:16px; letter-spacing:-0.01em; }
.loc-nav{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.loc-nav-btn{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; padding:16px 8px; border-radius:14px; background:#fff; color:var(--c-navy-800,#0a2540); font-size:14px; font-weight:800; transition:transform .15s, box-shadow .15s; }
.loc-nav-btn:hover{ transform:translateY(-3px); box-shadow:0 10px 24px rgba(0,0,0,.28); }
.lnb-ico{ width:34px; height:34px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-weight:900; font-size:17px; }
.lnb-ico svg{ width:21px; height:21px; }
.nav-tmap .lnb-ico{ background:#e7f0ff; color:#1b3fb8; }
.nav-kakao .lnb-ico{ background:#FEE500; color:#3a1d1d; }
.nav-google .lnb-ico{ background:#eaf1ff; color:#1a73e8; }
.lv-nav-hint{ margin-top:14px; font-size:12.5px; color:rgba(255,255,255,.6); text-align:center; }
/* ===== 실시간 교통정보 ===== */
.loc-rt{ margin-top:44px; }
.loc-sec-head{ text-align:center; margin-bottom:26px; }
.loc-sec-eyebrow{ display:inline-block; font-family:var(--font-en); font-size:12.5px; font-weight:800; letter-spacing:2px; color:#0c9b63; margin-bottom:8px; }
.loc-sec-title{ font-size:26px; font-weight:800; color:var(--c-navy-800,#0a2540); letter-spacing:-0.02em; }
.loc-sec-desc{ margin-top:8px; font-size:15px; color:#56657c; }
.loc-rt-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.loc-rt-card{ display:flex; flex-direction:column; padding:26px 24px; background:#fff; border:1px solid var(--c-border); border-radius:16px; transition:box-shadow .2s, transform .2s; }
.loc-rt-card:hover{ box-shadow:0 14px 32px rgba(10,37,64,.10); transform:translateY(-3px); }
.lrt-ico{ width:50px; height:50px; border-radius:13px; display:flex; align-items:center; justify-content:center; margin-bottom:16px; }
.lrt-ico svg{ width:26px; height:26px; }
.lrt-ico-bus{ background:rgba(30,107,204,.12); color:#1e6bcc; }
.lrt-ico-road{ background:rgba(240,104,42,.12); color:#f0682a; }
.lrt-ico-park{ background:rgba(27,196,125,.12); color:#0c9b63; }
.lrt-title{ font-size:18px; font-weight:800; color:var(--c-navy-800,#0a2540); }
.lrt-desc{ margin-top:7px; font-size:14px; line-height:1.6; color:#56657c; }
.lrt-desc strong{ color:var(--c-navy-800,#0a2540); font-weight:700; }
.loc-routes{ display:flex; flex-wrap:wrap; gap:6px; margin:16px 0 4px; }
.route-chip{ font-family:var(--font-en); font-size:13px; font-weight:800; color:#1e6bcc; background:#eef4fd; border:1px solid #dbe7fb; border-radius:7px; padding:4px 9px; }
.route-chip.exp{ color:#fff; background:#e23a3a; border-color:#e23a3a; }
.route-chip.more{ color:#7a8aa0; background:#f4f7fb; border-color:var(--c-border); font-weight:700; }
.lrt-list{ list-style:none; margin:16px 0 4px; padding:0; display:flex; flex-direction:column; gap:9px; }
.lrt-list li{ font-size:13.3px; line-height:1.55; color:#56657c; }
.lrt-list li span{ display:inline-block; font-size:11.5px; font-weight:800; color:#0c9b63; background:rgba(27,196,125,.12); border-radius:5px; padding:2px 7px; margin-right:6px; }
.lrt-btns{ display:flex; flex-direction:column; gap:8px; margin-top:auto; padding-top:18px; }
.lrt-btn{ display:inline-flex; align-items:center; justify-content:space-between; gap:8px; padding:11px 16px; border:1px solid var(--c-border); border-radius:10px; font-size:14px; font-weight:700; color:var(--c-navy-800,#0a2540); transition:background .15s, border-color .15s; }
.lrt-btn em{ font-style:normal; color:#9aa6b6; }
.lrt-btn:hover{ background:#f7faff; border-color:#bcd2ee; }
.lrt-btn.primary{ background:#1e6bcc; border-color:#1e6bcc; color:#fff; }
.lrt-btn.primary em{ color:rgba(255,255,255,.8); }
.lrt-btn.primary:hover{ background:#1659ad; }
@media (max-width:900px){
.loc-venue{ grid-template-columns:1fr; }
.loc-rt-grid{ grid-template-columns:1fr; }
}
@media (max-width:560px){
.lv-info, .lv-nav{ padding:24px 20px; }
.lv-name{ font-size:23px; }
.loc-nav-btn{ padding:13px 6px; font-size:13px; }
.loc-rt-card{ padding:22px 20px; }
}
/* 출발지 탭 */
.loc-tabs{
display:flex;
gap:12px;
margin-bottom:28px;
}
.loc-tab{
display:inline-flex;
align-items:center;
gap:9px;
padding:15px 32px;
background:#fff;
border:1.5px solid var(--c-border);
border-radius:50px;
font-size:17.1px;
font-weight:700;
color:var(--c-gray-600);
letter-spacing:-0.02em;
cursor:pointer;
transition:all .2s var(--ease);
}
.loc-tab svg{ width:20px; height:20px; }
.loc-tab:hover{
border-color:#1e6bcc;
color:#1e6bcc;
}
.loc-tab.is-active{
background:#1e6bcc;
border-color:#1e6bcc;
color:#fff;
box-shadow:0 6px 18px rgba(30,107,204,0.28);
}
/* 패널 */
.loc-panel{ display:none; }
.loc-panel.is-active{ display:block; animation:locFade .35s var(--ease); }
@keyframes locFade{ from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:translateY(0);} }
/* 경로 헤더 (부산역 → BEXCO) */
.loc-route-head{
display:flex;
align-items:center;
gap:14px;
margin-bottom:24px;
padding:18px 26px;
background:linear-gradient(135deg, #1e6bcc 0%, #0a4d99 100%);
border-radius:14px;
color:#fff;
}
.lrh-from, .lrh-to{
font-size:19.8px;
font-weight:800;
letter-spacing:-0.02em;
}
.loc-route-head svg{ width:22px; height:22px; opacity:0.85; }
/* 교통수단 블록 */
.loc-method{
margin-bottom:20px;
padding:24px 28px;
background:#fff;
border:1px solid var(--c-border);
border-radius:14px;
}
.lm-head{
display:flex;
align-items:center;
justify-content:space-between;
margin-bottom:24px;
}
.lm-badge{
display:inline-flex;
align-items:center;
gap:8px;
padding:7px 16px;
border-radius:50px;
font-size:15.4px;
font-weight:700;
letter-spacing:-0.01em;
}
.lm-badge svg{ width:18px; height:18px; }
.lm-badge-subway{ background:rgba(30,107,204,0.10); color:#1e6bcc; }
.lm-badge-bus{ background:rgba(27,196,125,0.10); color:var(--c-green-600); }
.lm-total{
font-size:14.9px;
font-weight:700;
color:var(--c-gray-500);
}
/* 노선도 라인 */
.lm-line{
display:flex;
align-items:flex-start;
margin:0 0 22px;
padding:0 8px;
min-height:48px;
}
.lml-stop{
display:flex;
flex-direction:column;
align-items:center;
gap:10px;
flex-shrink:0;
position:relative;
z-index:2;
width:64px;
}
/* 중간 환승역 dot은 아이콘(48px) 중앙 높이에 맞춤 */
.lml-stop .lml-dot{
margin-top:14px; /* (48-20)/2 = 14px */
}
.lml-dot{
width:20px;
height:20px;
border-radius:50%;
background:#fff;
border:4px solid #1e6bcc;
box-shadow:0 2px 6px rgba(30,107,204,0.25);
}
.lml-dot-end{ border-color:var(--c-green-500); background:var(--c-green-500); }
.lml-dot-bus{ border-color:#e8443a; }
/* 출발/도착 아이콘 원 (가독성 강화) */
.lml-icon{
width:48px;
height:48px;
display:flex;
align-items:center;
justify-content:center;
border-radius:50%;
background:#fff;
border:3px solid #1e6bcc;
color:#1e6bcc;
box-shadow:0 4px 12px rgba(30,107,204,0.18);
}
.lml-icon svg{ width:26px; height:26px; }
.lml-icon-bus{ border-color:#e8443a; color:#e8443a; box-shadow:0 4px 12px rgba(232,68,58,0.18); }
.lml-icon-air{ border-color:#1e6bcc; color:#fff; background:#1e6bcc; box-shadow:0 4px 12px rgba(30,107,204,0.30); }
.lml-icon-end{ border-color:var(--c-green-500); color:#fff; background:var(--c-green-500); box-shadow:0 4px 12px rgba(27,196,125,0.30); }
.lml-name{
font-size:14.9px;
font-weight:700;
color:var(--c-navy-800);
text-align:center;
letter-spacing:-0.02em;
line-height:1.35;
}
/* 구간 (선 + 정보) */
.lml-seg{
flex:1;
display:flex;
flex-direction:column;
align-items:center;
position:relative;
padding-top:21px; /* 아이콘 중앙 24px - 선 두께 절반 3px */
}
.lml-seg::before{
content:'';
position:absolute;
top:21px;
left:-12px;
right:-12px;
height:6px;
background:#dbe7f5;
border-radius:3px;
z-index:0;
}
/* 노선별 컬러 라인 */
.seg-line1::before{ background:#f5a623; } /* 1호선 주황 */
.seg-line2::before{ background:#1bc47d; } /* 2호선 초록 */
.seg-lrt::before{ background:#9b59b6; } /* 경전철 보라 */
.seg-bus::before{ background:#e8443a; } /* 버스 빨강 (1001번) */
.seg-limo::before{ background:#65A6D2; } /* 공항리무진1 블루 */
.seg-line1 .lml-info b{ background:#f5a623; }
.seg-line2 .lml-info b{ background:#1bc47d; }
.seg-lrt .lml-info b{ background:#9b59b6; }
.seg-bus .lml-info b{ background:#e8443a; }
.seg-limo .lml-info b{ background:#65A6D2; }
.lml-info{
position:relative;
z-index:1;
display:inline-flex;
align-items:center;
gap:6px;
margin-top:24px;
font-size:13.8px;
font-weight:600;
color:var(--c-gray-600);
letter-spacing:-0.01em;
}
.lml-info b{
padding:3px 9px;
background:var(--c-navy-800);
color:#fff;
border-radius:50px;
font-size:12.1px;
font-weight:700;
}
.lm-desc{
margin:0;
padding:14px 18px;
background:#fafbfc;
border-radius:10px;
font-size:15.4px;
font-weight:500;
color:var(--c-gray-700, #555);
letter-spacing:-0.01em;
line-height:1.6;
}
.lm-desc strong{ color:var(--c-green-600); font-weight:800; }
/* 구글맵 */
.loc-map{
position:relative;
margin-top:24px;
border-radius:14px;
overflow:hidden;
border:1px solid var(--c-border);
}
.loc-map iframe{
display:block;
width:100%;
height:380px;
border:0;
}
.loc-map-link{
display:flex;
align-items:center;
justify-content:center;
gap:7px;
padding:14px;
text-align:center;
background:#fff;
border-top:1px solid var(--c-border);
font-size:14.9px;
font-weight:700;
color:#1e6bcc;
letter-spacing:-0.01em;
transition:background .2s var(--ease);
}
.loc-map-link svg{ width:16px; height:16px; }
.loc-map-link:hover{ background:#fafbfc; }
/* 반응형 */
@media (max-width:1024px){
.loc-wrap{ margin-top:-16px; }
}
@media (max-width:640px){
.loc-tabs{ gap:8px; }
.loc-tab{ flex:1; justify-content:center; padding:13px 16px; font-size:15.4px; }
.loc-route-head{ padding:14px 18px; }
.lrh-from, .lrh-to{ font-size:17.6px; }
.loc-method{ padding:18px 16px; }
.lm-head{ flex-direction:column; align-items:flex-start; gap:8px; margin-bottom:18px; }
/* 약도 최적화: 정거장 폭 축소 + 구간정보(노선뱃지/시간) 세로 스택 → 좁은 화면 cramped 해소 */
.lm-line{ padding:0 2px; }
.lml-stop{ width:54px; gap:7px; }
.lml-name{ font-size:12.3px; word-break:keep-all; }
.lml-info{ flex-direction:column; gap:3px; font-size:11.8px; margin-top:13px; }
.lml-info b{ font-size:10.6px; padding:2px 7px; }
.lm-desc{ font-size:14.3px; }
.loc-map iframe{ height:280px; }
}
/* ==========================================================================
ARCHIVE (지난 WCE) — 레퍼런스 리스트 스타일
========================================================================== */
.archive-list{
margin-top:-20px;
position:relative;
z-index:2;
list-style:none;
padding:0;
display:flex;
flex-direction:column;
gap:0;
}
.archive-item{
display:grid;
grid-template-columns:300px 1fr;
gap:44px;
align-items:start;
padding:40px 8px;
border-bottom:1px solid var(--c-border);
}
.archive-item:first-child{ padding-top:8px; }
.archive-item:last-child{ border-bottom:none; }
/* 좌: 포스터 */
.ai-poster{
position:relative;
aspect-ratio:3/4;
border-radius:12px;
overflow:hidden;
background:#0a2540;
box-shadow:0 10px 28px rgba(10,37,64,0.15);
}
.ai-poster img{
width:100%;
height:100%;
object-fit:cover;
display:block;
}
.ai-poster-fallback{
position:absolute;
inset:0;
display:none;
flex-direction:column;
align-items:center;
justify-content:center;
gap:8px;
background:linear-gradient(135deg, #1e6bcc 0%, #0a2540 100%);
color:#fff;
text-align:center;
}
.ai-poster-empty .ai-poster-fallback{ display:flex; }
.ai-poster-fallback strong{
font-family:var(--font-en);
font-size:46.2px;
font-weight:800;
letter-spacing:-0.02em;
line-height:1;
}
.ai-poster-fallback span{
font-family:var(--font-en);
font-size:16.5px;
font-weight:700;
letter-spacing:2px;
opacity:0.85;
line-height:1.3;
}
/* 우: 정보 */
.ai-body{ min-width:0; }
.ai-title{
font-size:24.2px;
font-weight:800;
color:var(--c-navy-800);
letter-spacing:-0.03em;
line-height:1.35;
margin:0;
}
.ai-year{ color:#1e6bcc; }
.ai-title small{
display:block;
font-family:var(--font-en);
font-size:16.5px;
font-weight:600;
color:var(--c-gray-500);
letter-spacing:0;
margin-top:4px;
}
.ai-divider{
width:48px;
height:3px;
background:#1e6bcc;
border-radius:2px;
margin:16px 0;
}
.ai-theme{
font-size:18.7px;
font-weight:700;
color:var(--c-navy-800);
letter-spacing:-0.02em;
margin:0 0 10px;
}
.ai-period{
display:flex;
align-items:center;
gap:8px;
font-size:15.4px;
font-weight:500;
color:var(--c-gray-600);
letter-spacing:-0.01em;
margin:0 0 22px;
}
.ai-period svg{ width:18px; height:18px; color:#1e6bcc; flex-shrink:0; }
/* 개요 메타 (기간·장소·주최) */
.ai-meta{
list-style:none;
margin:0 0 16px;
padding:0;
display:flex;
flex-direction:column;
gap:8px;
}
.ai-meta li{
display:flex;
align-items:flex-start;
gap:8px;
font-size:15.4px;
font-weight:500;
color:var(--c-gray-700, #374151);
letter-spacing:-0.01em;
line-height:1.5;
}
.ai-meta svg{ width:18px; height:18px; color:#1e6bcc; flex-shrink:0; margin-top:2px; }
.ai-meta-k{
flex-shrink:0;
min-width:42px;
font-weight:700;
color:var(--c-navy-800);
}
/* 장소·주최 텍스트 링크 (로고 대신) */
.ai-meta-link{
color:var(--c-blue-500);
font-weight:600;
transition:color .2s var(--ease);
}
.ai-meta-link:hover{ color:var(--c-cyan-500); text-decoration:underline; }
/* 장소·주최 — 기관명 텍스트 링크(하이퍼링크 유지) */
.ai-host-names{ min-width:0; line-height:1.5; }
.ai-host-names a{
color:var(--c-blue-500);
font-weight:600;
transition:color .2s var(--ease);
}
.ai-host-names a:hover{ color:var(--c-cyan-500); text-decoration:underline; }
/* 주최 로고 (텍스트 대신) */
.ai-meta-hosts{ align-items:center; }
.ai-host-logos{
display:flex;
flex-wrap:wrap;
align-items:center;
gap:7px 14px;
min-width:0;
}
.ai-host-logo{ display:inline-flex; align-items:center; }
.ai-host-logo img{
height:24px;
width:auto;
max-width:120px;
object-fit:contain;
display:block;
transition:transform .15s ease;
}
.ai-host-logo:hover img{ transform:translateY(-1px); }
@media (max-width:600px){
.ai-host-logo img{ height:20px; max-width:96px; }
}
/* 주요 프로그램 태그 */
.ai-tags{
display:flex;
flex-wrap:wrap;
align-items:center;
gap:8px;
margin:0 0 22px;
}
.ai-tags-label{
font-size:13px;
font-weight:700;
color:var(--c-gray-500);
margin-right:2px;
}
.ai-tag{
display:inline-block;
padding:6px 13px;
background:#eef4fc;
color:#1e6bcc;
font-size:13.5px;
font-weight:600;
letter-spacing:-0.01em;
border-radius:999px;
border:1px solid #d6e4f7;
}
.ai-actions{ display:flex; gap:10px; flex-wrap:wrap; }
.ai-btn{
display:inline-flex;
align-items:center;
gap:8px;
padding:13px 28px;
background:#1e6bcc;
color:#fff;
font-size:16px;
font-weight:700;
letter-spacing:-0.01em;
border-radius:8px;
transition:all .2s var(--ease);
}
.ai-btn svg{ width:18px; height:18px; transition:transform .2s var(--ease); }
.ai-btn:hover{
background:#0a4d99;
transform:translateY(-2px);
box-shadow:0 8px 20px rgba(30,107,204,0.30);
}
.ai-btn:hover svg{ transform:translateX(4px); }
/* 반응형 */
@media (max-width:768px){
.archive-list{ margin-top:-16px; }
.archive-item{
grid-template-columns:200px 1fr;
gap:26px;
padding:30px 4px;
}
.ai-title{ font-size:19.8px; }
.ai-title small{ font-size:14.3px; }
.ai-theme{ font-size:16.5px; }
.ai-period{ font-size:14.3px; margin-bottom:18px; }
.ai-meta li{ font-size:14.3px; }
.ai-poster-fallback strong{ font-size:35.2px; }
.ai-poster-fallback span{ font-size:13.2px; }
}
@media (max-width:520px){
.archive-item{ grid-template-columns:1fr; gap:18px; }
.ai-poster{ max-width:280px; }
.ai-btn{ width:100%; justify-content:center; }
}
/* =================================================================
지난 WCE 상세 (archive_detail.php)
================================================================= */
.ad-hero{
display:grid;
grid-template-columns:260px 1fr;
gap:40px;
align-items:center;
margin:8px 0 40px;
}
.ad-hero-poster{
position:relative;
aspect-ratio:3/4;
border-radius:14px;
overflow:hidden;
background:#0a2540;
box-shadow:0 12px 32px rgba(10,37,64,0.18);
}
.ad-hero-poster img{ width:100%; height:100%; object-fit:cover; display:block; }
.ad-hero-year{
display:inline-block;
font-family:var(--font-en);
font-size:18px;
font-weight:800;
color:#1e6bcc;
letter-spacing:0.04em;
}
.ad-hero-theme{
font-size:24px;
font-weight:800;
color:var(--c-navy-800);
letter-spacing:-0.03em;
line-height:1.4;
margin:8px 0 22px;
}
.ad-hero-meta{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.ad-hero-meta li{
display:flex; gap:12px;
font-size:15.5px; color:var(--c-gray-700,#374151); line-height:1.5;
}
.ad-hero-meta li span{
flex-shrink:0; min-width:44px;
font-weight:700; color:#1e6bcc;
}
/* 하위 탭 */
.ad-tabs{
display:flex;
flex-wrap:wrap;
gap:6px;
border-bottom:2px solid var(--c-border);
margin-bottom:30px;
}
.ad-tab{
appearance:none;
background:none;
border:none;
padding:14px 22px;
font-size:16px;
font-weight:700;
letter-spacing:-0.02em;
color:var(--c-gray-500,#6b7280);
cursor:pointer;
position:relative;
border-radius:8px 8px 0 0;
transition:color .2s var(--ease), background .2s var(--ease);
}
.ad-tab:hover{ color:#1e6bcc; background:#f3f7fd; }
.ad-tab.is-active{ color:#1e6bcc; }
.ad-tab.is-active::after{
content:'';
position:absolute;
left:0; right:0; bottom:-2px;
height:3px;
background:#1e6bcc;
border-radius:2px;
}
/* 패널 */
.ad-panel{ display:none; animation:pmFadeIn .25s ease; }
.ad-panel.is-active{ display:block; }
.ad-h2{
font-size:22px; font-weight:800; color:var(--c-navy-800);
letter-spacing:-0.03em; margin:0 0 22px;
}
/* 섹션 제목 — ad-h3 / ad-blk-h4 동일 스타일로 통일 (파란 좌측 바) */
.ad-h3{
font-size:17px; font-weight:800; color:var(--c-navy-800);
letter-spacing:-0.02em; line-height:1.35;
margin:30px 0 14px; padding-left:12px; border-left:4px solid #1e6bcc;
}
/* 행사개요 테이블 (공용 표 룩과 통일) */
.ad-table{ width:100%; border-collapse:collapse; border-top:2px solid var(--c-navy-800); }
.ad-table th, .ad-table td{
padding:12px 15px; text-align:left; font-size:14.5px; line-height:1.65;
border:1px solid var(--c-border); vertical-align:top;
}
.ad-table th{
width:130px; background:#f8fafc; font-weight:700; color:var(--c-navy-800);
white-space:nowrap;
}
.ad-table td{ color:var(--c-gray-700,#374151); }
/* 통계 */
.ad-stats{
list-style:none; margin:0; padding:0;
display:grid; grid-template-columns:repeat(4,1fr); gap:16px;
}
.ad-stats li{
background:linear-gradient(135deg,#eef4fc 0%,#f7faff 100%);
border:1px solid #dde9f8; border-radius:14px;
padding:24px 16px; text-align:center;
}
.ad-stats strong{
display:block; font-family:var(--font-en);
font-size:34px; font-weight:800; color:#1e6bcc; line-height:1; letter-spacing:-0.02em;
}
.ad-stats strong em{ font-style:normal; font-size:18px; margin-left:2px; }
.ad-stats span{ display:block; margin-top:10px; font-size:14.5px; font-weight:600; color:var(--c-gray-600); }
.ad-stats-lg strong{ font-size:42px; }
.ad-stats .ad-stat-ico{ display:flex; align-items:center; justify-content:center; height:40px; margin:0 0 12px; color:#1e6bcc; font-size:26px; }
@media (max-width:760px){ .ad-stats{ grid-template-columns:repeat(2,1fr); } }
/* 프로그램 일정 */
.ad-sched{
display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:24px;
}
.ad-sched-col{ }
.ad-sched-date{
display:flex; align-items:center; gap:8px;
font-size:16px; font-weight:800; color:var(--c-navy-800);
padding-bottom:12px; margin:0 0 14px; border-bottom:1px solid var(--c-border);
}
.ad-sched-date svg{ width:18px; height:18px; color:#1e6bcc; }
.ad-sched-col ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.ad-sched-col li{
position:relative; padding-left:18px;
font-size:15px; color:var(--c-gray-700,#374151); line-height:1.5;
}
.ad-sched-col li::before{
content:''; position:absolute; left:0; top:8px;
width:7px; height:7px; border-radius:50%; background:#1e6bcc;
}
/* 상세(시간·장소) 일정 */
.ad-sched-detailed{ gap:14px !important; }
.ad-sched-detailed li{
padding:0 0 14px 0; border-bottom:1px dashed var(--c-border);
display:flex; flex-direction:column; gap:3px;
}
.ad-sched-detailed li::before{ display:none; }
.ad-sched-detailed li:last-child{ border-bottom:none; padding-bottom:0; }
.ad-sched-time{
font-family:var(--font-en); font-size:13px; font-weight:700;
color:#1e6bcc; letter-spacing:0.01em;
}
.ad-sched-name{ font-size:15px; font-weight:700; color:var(--c-navy-800); line-height:1.4; }
.ad-sched-place{ font-size:13px; color:var(--c-gray-500,#6b7280); line-height:1.45; }
/* 전체 일정표 (일자·시간·프로그램·장소) */
.ad-prog-wrap{ overflow-x:auto; }
.ad-prog-table{
width:100%; border-collapse:collapse; min-width:560px;
border-top:2px solid var(--c-navy-800);
}
.ad-prog-table thead th{
background:#eef2f7; color:var(--c-navy-800);
font-size:14px; font-weight:700; padding:11px 13px; text-align:center;
border:1px solid var(--c-border); white-space:nowrap;
}
.ad-prog-table tbody th,
.ad-prog-table tbody td{
border:1px solid var(--c-border); padding:11px 13px;
font-size:14px; line-height:1.6; vertical-align:top;
}
.ad-prog-date{
background:#f8fafc; font-weight:800; color:#1e6bcc; white-space:nowrap;
text-align:center; vertical-align:middle;
}
.ad-prog-time{
font-family:var(--font-en); font-weight:700; color:#1e6bcc; white-space:nowrap;
}
.ad-prog-name{ font-weight:700; color:var(--c-navy-800); }
.ad-prog-place{ color:var(--c-gray-600,#4b5563); }
.ad-prog-table tbody tr:hover td,
.ad-prog-table tbody tr:hover th:not(.ad-prog-date){ background:#f7faff; }
@media (max-width:520px){
.ad-prog-table thead th, .ad-prog-table tbody th, .ad-prog-table tbody td{ padding:9px 10px; font-size:13px; }
}
/* 프로그램 아코디언 */
.ad-acc{ display:flex; flex-direction:column; gap:12px; }
.ad-acc-item{
border:1px solid var(--c-border); border-radius:12px; overflow:hidden;
background:#fff; transition:box-shadow .2s var(--ease), border-color .2s var(--ease);
}
.ad-acc-item.is-open{ border-color:#cfe0f6; box-shadow:0 6px 20px rgba(10,37,64,0.07); }
.ad-acc-head{
width:100%; appearance:none; border:none; cursor:pointer;
display:flex; align-items:center; justify-content:space-between; gap:12px;
padding:18px 22px; background:#eef4fc; text-align:left;
font-size:17px; font-weight:800; color:var(--c-navy-800); letter-spacing:-0.02em;
transition:background .2s var(--ease);
}
.ad-acc-head:hover{ background:#e4eefb; }
.ad-acc-item.is-open .ad-acc-head{ background:var(--c-navy-800,#0a2540); color:#fff; }
.ad-acc-toggle{
flex-shrink:0; display:flex; align-items:center; justify-content:center;
width:26px; height:26px; transition:transform .25s var(--ease);
}
.ad-acc-toggle svg{ width:20px; height:20px; }
.ad-acc-item.is-open .ad-acc-toggle{ transform:rotate(180deg); }
/* 펼침 영역 (grid-rows 트랜지션) */
.ad-acc-body{
display:grid; grid-template-rows:0fr;
transition:grid-template-rows .28s var(--ease);
}
.ad-acc-item.is-open .ad-acc-body{ grid-template-rows:1fr; }
.ad-acc-inner{ overflow:hidden; }
.ad-acc-item.is-open .ad-acc-inner{ padding:22px; }
.ad-acc-note{
font-size:15.5px; font-weight:700; color:#1e6bcc;
margin:0 0 16px; padding:12px 16px; background:#eef4fc; border-radius:10px;
}
.ad-acc-item.is-open .ad-acc-inner > .ad-acc-note:last-child{ margin-bottom:0; }
.ad-acc-groups{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:20px; }
.ad-acc-group-name{
font-size:15.5px; font-weight:800; color:var(--c-navy-800);
margin:0 0 12px; padding-bottom:8px; border-bottom:2px solid #1e6bcc; display:inline-block;
}
.ad-acc-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px; }
.ad-acc-list li{
position:relative; padding-left:18px; font-size:14.5px; line-height:1.5;
color:var(--c-gray-700,#374151);
}
.ad-acc-list li::before{
content:''; position:absolute; left:0; top:8px;
width:6px; height:6px; border-radius:50%; background:#1e6bcc;
}
.ad-acc-list-cols{
display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:10px 20px;
}
/* ===== 아카이브 부대행사 탭 ===== */
.ad-se-lead{ font-size:15px; color:var(--c-gray-500,#5a6b7d); margin:0 0 18px; line-height:1.7; }
/* 검색 툴바 */
.ad-se-toolbar{ display:flex; align-items:center; gap:14px; margin:0 0 24px; flex-wrap:wrap; }
.ad-se-search{ position:relative; flex:1; min-width:240px; max-width:480px; }
.ad-se-search svg{ position:absolute; left:13px; top:50%; transform:translateY(-50%); width:18px; height:18px; color:#9aa6b6; pointer-events:none; }
.ad-se-search input{
width:100%; height:44px; padding:0 14px 0 40px;
border:1px solid var(--c-border,#e3e8ef); border-radius:10px;
font-size:14.5px; color:#0a2540; background:#fff; font-family:inherit;
transition:border-color .15s, box-shadow .15s;
}
.ad-se-search input:focus{ outline:none; border-color:#1e6bcc; box-shadow:0 0 0 3px rgba(30,107,204,.10); }
.ad-se-count{ font-size:13.5px; color:#7a8aa0; white-space:nowrap; }
.ad-se-count strong{ color:#1e6bcc; font-weight:800; }
/* 날짜 그룹 */
.ad-se-group{ margin:0 0 26px; }
.ad-se-grp-title{
display:flex; align-items:center; gap:9px; margin:0 0 13px;
font-size:17px; font-weight:800; letter-spacing:-.01em; color:var(--c-navy-800,#0a2540);
padding-bottom:11px; border-bottom:2px solid #eef2f7;
}
.ad-se-grp-dot{ flex:none; width:9px; height:9px; border-radius:50%; background:#1e6bcc; }
.ad-se-grp-title.is-multi .ad-se-grp-dot{ background:#e07b3e; }
.ad-se-grp-text{ flex:1; }
.ad-se-grp-cnt{ flex:none; font-size:12.5px; font-weight:700; color:#7a8aa0; background:#f1f5f9; border-radius:999px; padding:2px 11px; }
.ad-se-list{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px; align-items:stretch; }
@media (max-width:768px){ .ad-se-list{ grid-template-columns:1fr; } }
.ad-se-item{
border:1px solid var(--c-border,#e3e8ef); border-radius:10px; padding:15px 18px; background:#fff;
transition:box-shadow .15s ease, transform .15s ease, border-color .15s ease;
}
.ad-se-item:hover{ box-shadow:0 8px 22px rgba(10,37,64,.07); transform:translateY(-1px); border-color:#d3deea; }
.ad-se-item-head{ display:flex; align-items:flex-start; gap:11px; }
.ad-se-chip{
flex:none; margin-top:2px; display:inline-block;
font-size:11px; font-weight:800; letter-spacing:-.01em; line-height:1.5;
color:var(--chip,#1e6bcc);
background:#eef4fb; /* 구형 브라우저 폴백 */
border:1px solid #d4e3f3; /* 구형 브라우저 폴백 */
background:color-mix(in srgb, var(--chip,#1e6bcc) 12%, #fff);
border:1px solid color-mix(in srgb, var(--chip,#1e6bcc) 28%, #fff);
border-radius:6px; padding:3px 9px; white-space:nowrap;
}
.ad-se-item-title{ margin:0; font-size:16px; font-weight:700; line-height:1.45; letter-spacing:-.01em; color:var(--c-navy-800,#0a2540); }
.ad-se-item-title a{ color:inherit; text-decoration:none; }
.ad-se-item-title a:hover{ color:#1e6bcc; text-decoration:underline; }
.ad-se-ext{ font-size:12px; color:#9aa6b6; }
.ad-se-item-desc{ margin:8px 0 0; font-size:14px; line-height:1.7; color:#33425a; }
.ad-se-item-desc img{ max-width:100%; height:auto; }
.ad-se-meta{ list-style:none; margin:11px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:6px 20px; }
.ad-se-meta li{ font-size:13.5px; color:#33425a; }
.ad-se-meta li span{ margin-right:7px; font-size:11.5px; font-weight:700; color:#8a99ad; letter-spacing:.02em; }
.ad-se-noresult{ text-align:center; padding:30px; color:#8a99ad; font-size:14.5px; }
@media (max-width:640px){
.ad-se-toolbar{ gap:8px; }
.ad-se-search{ max-width:none; }
.ad-se-item-title{ font-size:14.5px; }
.ad-se-grp-title{ font-size:15.5px; }
.ad-se-meta{ flex-direction:column; gap:5px; }
}
.ad-acc-inner .ad-table{ margin:0; }
@media (max-width:520px){
.ad-acc-head{ padding:15px 16px; font-size:15.5px; }
.ad-acc-item.is-open .ad-acc-inner{ padding:16px; }
}
/* 아코디언 내부 콘텐츠 블록 */
.ad-blk-h4{
font-size:17px; font-weight:800; color:var(--c-navy-800); letter-spacing:-0.02em; line-height:1.35;
margin:30px 0 14px; padding-left:12px; border-left:4px solid #1e6bcc;
}
.ad-acc-inner > .ad-blk-h4:first-child{ margin-top:0; }
.ad-blk-h5{
font-size:15.5px; font-weight:800; color:#1e6bcc; margin:22px 0 10px;
}
.ad-blk-info{ list-style:none; margin:0 0 16px; padding:0; display:flex; flex-direction:column; gap:8px; }
.ad-blk-info li{
position:relative; padding-left:15px; font-size:14.5px; line-height:1.65; color:var(--c-gray-700,#374151);
}
.ad-blk-info li::before{ content:'–'; position:absolute; left:0; color:#1e6bcc; font-weight:700; }
.ad-blk-note{ font-size:13px; color:var(--c-gray-500,#6b7280); margin:-8px 0 16px; padding-left:15px; }
/* 발표자/주요내용 표 (개막식 등 구조화 표) — 공용 표 룩과 통일 */
.ad-conf-table{
width:100%; border-collapse:collapse; min-width:640px;
border-top:2px solid var(--c-navy-800); margin:4px 0 8px;
}
.ad-conf-table thead th{
background:#eef2f7; color:var(--c-navy-800); font-size:14px; font-weight:700;
padding:11px 13px; text-align:center; border:1px solid var(--c-border); white-space:nowrap;
}
.ad-conf-table tbody td{
border:1px solid var(--c-border); padding:11px 13px;
font-size:14px; line-height:1.65; vertical-align:top; color:var(--c-gray-700,#374151);
}
.ad-conf-div{
font-weight:800; color:var(--c-navy-800); white-space:nowrap;
background:#f8fafc; text-align:center; vertical-align:middle; width:110px;
}
/* 발표자 열(2번째)은 가운데 정렬 */
.ad-conf-table tbody td:nth-child(2){ text-align:center; vertical-align:middle; color:var(--c-navy-800); font-weight:600; }
.ad-conf-table tbody td:last-child{ text-align:left; font-weight:400; color:var(--c-gray-700,#374151); }
.ad-conf-pts{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; }
.ad-conf-pts li{ position:relative; padding-left:14px; text-align:left; }
.ad-conf-pts li::before{
content:''; position:absolute; left:0; top:8px; width:5px; height:5px; border-radius:50%; background:#1e6bcc;
}
/* 행사개요 상단 (메인 이미지 + 정보 표) */
.ad-ov-top{
display:grid; grid-template-columns:minmax(0,440px) 1fr; gap:32px; align-items:start;
}
.ad-ov-img img{
width:100%; height:auto; display:block; border-radius:12px;
border:1px solid var(--c-border); box-shadow:0 10px 28px rgba(10,37,64,0.10);
}
.ad-ov-top .ad-table{ margin:0; }
@media (max-width:760px){
.ad-ov-top{ grid-template-columns:1fr; gap:20px; }
.ad-ov-img{ max-width:420px; }
}
/* 참여 기관 (주최·주관 로고) */
.ad-orgs{ margin:0 0 26px; }
.ad-orgs-label{
display:inline-block; font-size:15px; font-weight:800; color:#fff;
background:#1e6bcc; padding:6px 18px; border-radius:999px; margin:0 0 16px;
}
.ad-orgs-grid{
display:grid; grid-template-columns:repeat(4,1fr); gap:10px;
}
.ad-org{
display:flex; align-items:center; justify-content:center;
height:72px; padding:10px 14px;
background:#fff; border:1px solid var(--c-border); border-radius:10px;
}
.ad-org img{ max-width:100%; max-height:48px; object-fit:contain; }
@media (max-width:768px){ .ad-orgs-grid{ grid-template-columns:repeat(2,1fr); } }
/* 콘텐츠 아이템 블록 (① … + 하위 설명) */
.ad-blk-item{ margin:0 0 18px; }
.ad-blk-item-main{
font-size:14.5px; font-weight:700; color:var(--c-navy-800); line-height:1.65; margin:0;
}
.ad-blk-subs{ list-style:none; margin:7px 0 0; padding:0; display:flex; flex-direction:column; gap:5px; }
.ad-blk-subs li{
position:relative; padding-left:26px; font-size:13.5px; color:var(--c-gray-600,#4b5563); line-height:1.55;
}
.ad-blk-subs li::before{
content:'ㆍ'; position:absolute; left:13px; color:#9aa7b5;
}
/* 정적 표(rowspan/colspan 포함) — 공용 표 룩과 통일 */
.ad-htable{
width:100%; border-collapse:collapse; min-width:640px;
border-top:2px solid var(--c-navy-800); font-size:14px; margin:4px 0 8px;
}
.ad-htable th, .ad-htable td{
border:1px solid var(--c-border); padding:11px 13px; line-height:1.65;
}
.ad-htable thead th{ background:#eef2f7; color:var(--c-navy-800); font-weight:700; text-align:center; white-space:nowrap; }
.ad-htable tbody th{ background:#f8fafc; color:var(--c-navy-800); font-weight:800; text-align:center; vertical-align:middle; white-space:nowrap; }
.ad-htable tbody td{ color:var(--c-gray-700,#374151); vertical-align:top; }
.ad-htable .ad-sum td, .ad-htable .ad-total td{
background:#eef2f7; font-weight:800; color:var(--c-navy-800); text-align:center;
}
/* 전시회 표: 부스·기업 숫자 열 가운데 정렬 */
.ad-exh-tbl tbody td:nth-last-child(-n+2){ text-align:center; white-space:nowrap; }
.ad-exh-tbl thead th:nth-last-child(-n+2){ width:60px; }
/* 가운데 정렬 셀 (발표자 등) */
.ad-htable td.ad-c{ text-align:center; vertical-align:middle; }
.ad-htable .ad-hl{ background:#eef2f7; font-weight:800; color:var(--c-navy-800); }
/* 컨퍼런스 현장 사진 스트립 */
.ad-photos{
display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:12px; margin:0 0 24px;
}
.ad-photo img{
width:100%; height:100%; aspect-ratio:4/3; object-fit:cover; display:block;
border-radius:10px; border:1px solid var(--c-border);
}
/* 단일 이미지 + 캡션 (NYT 주요 연사 등) */
.ad-figure{ margin:4px 0 24px; text-align:center; }
.ad-figure img{
max-width:100%; width:100%; height:auto; display:block; margin:0 auto;
border-radius:10px; border:1px solid var(--c-border);
}
.ad-figure-cap{ margin:10px 0 0; font-size:13.5px; color:var(--c-gray-500,#6b7280); }
/* 컨퍼런스 다시보기 연사 목록 (이름 볼드, 한 줄에 3명) */
.ad-conf-label{ font-weight:700; color:var(--c-navy-800,#0a2540); margin:14px 0 9px; font-size:15px; }
.ad-spk-cols{ display:grid; grid-template-columns:repeat(3,1fr); gap:9px 20px; margin:0 0 26px; }
.ad-spk-cols > span{ font-size:14px; line-height:1.55; color:var(--c-gray-700,#374151); }
.ad-spk-cols > span > b{ font-weight:700; color:var(--c-navy-800,#0a2540); }
@media (max-width:768px){ .ad-spk-cols{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:480px){ .ad-spk-cols{ grid-template-columns:1fr; } }
/* 컨퍼런스 다시보기 세션 카드 (공식 디자인) */
.ad-sess{ margin:0 0 32px; }
.ad-sess-time{ display:flex; flex-wrap:wrap; gap:6px 28px; margin:0 0 13px; font-weight:700; color:#0a2540; font-size:14.5px; }
.ad-sess-time > span{ display:inline-flex; align-items:center; gap:7px; }
.ad-sess-time svg{ flex:0 0 auto; }
.ad-sess-card{ border:1px solid var(--c-border,#e5e7eb); border-radius:14px; padding:24px 28px; background:#fff; }
.ad-sess-title{ font-size:19px; font-weight:800; color:#0a2540; margin:0 0 18px; }
.ad-sess-row{ display:flex; gap:16px; margin:0 0 14px; align-items:flex-start; }
.ad-sess-row:last-child{ margin-bottom:0; }
.ad-sess-chip{ flex:0 0 auto; width:62px; text-align:center; padding:7px 0; background:#1d3f72; color:#fff; border-radius:8px; font-size:14px; font-weight:700; }
.ad-sess-val{ flex:1 1 auto; min-width:0; align-self:center; line-height:1.6; font-size:15px; color:#1f2937; }
.ad-sess-spk{ display:grid; grid-template-columns:repeat(3,1fr); gap:9px 20px; }
.ad-sess-spk > span{ font-size:14px; line-height:1.5; color:#374151; }
.ad-sess-spk b{ font-weight:700; color:#0a2540; }
@media (max-width:768px){ .ad-sess-spk{ grid-template-columns:repeat(2,1fr); } .ad-sess-card{ padding:20px; } }
@media (max-width:480px){ .ad-sess-spk{ grid-template-columns:1fr; } .ad-sess-row{ flex-direction:column; gap:8px; } .ad-sess-chip{ width:54px; } }
/* ===== 다시보기 하위 탭 ===== */
.ad-subtabs{
display:flex; flex-wrap:wrap; gap:8px; margin:0 0 28px;
border-bottom:1px solid var(--c-border); padding-bottom:0;
}
.ad-subtab{
appearance:none; background:#f1f4f8; border:1px solid var(--c-border); border-bottom:none;
padding:11px 20px; border-radius:8px 8px 0 0; cursor:pointer;
font-size:14.5px; font-weight:700; color:var(--c-gray-600,#4b5563);
margin-bottom:-1px; transition:all .18s var(--ease);
}
.ad-subtab:hover{ color:#1e6bcc; }
.ad-subtab.is-active{
background:#1e6bcc; border-color:#1e6bcc; color:#fff;
}
.ad-subpanel{ display:none; }
.ad-subpanel.is-active{ display:block; animation:adFade .25s var(--ease); }
@keyframes adFade{ from{ opacity:0; transform:translateY(4px); } to{ opacity:1; transform:none; } }
/* 3차 탭 (컨퍼런스 > 비즈니스/도시/리더스 서밋) — pill 형태 */
.ad-subtabs2{ display:flex; flex-wrap:wrap; gap:8px; margin:0 0 24px; }
.ad-subtab2{
appearance:none; background:#fff; border:1px solid var(--c-border);
padding:8px 18px; border-radius:999px; cursor:pointer;
font-size:13.5px; font-weight:700; color:var(--c-gray-600,#4b5563);
transition:all .18s var(--ease);
}
.ad-subtab2:hover{ border-color:#1e6bcc; color:#1e6bcc; }
.ad-subtab2.is-active{ background:#eef2f7; border-color:#1e6bcc; color:#1e6bcc; }
.ad-subpanel2{ display:none; }
.ad-subpanel2.is-active{ display:block; animation:adFade .25s var(--ease); }
/* ===== 연사 카드 그리드 ===== */
.ad-spk-grid{
display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
gap:22px; margin:8px 0 28px;
}
.ad-spk{
border:1px solid var(--c-border); border-radius:14px; overflow:hidden;
background:#fff; display:flex; flex-direction:column;
transition:box-shadow .2s var(--ease), transform .2s var(--ease);
}
.ad-spk:hover{ box-shadow:0 10px 26px rgba(15,40,80,0.12); transform:translateY(-2px); }
.ad-spk-photo{ position:relative; aspect-ratio:1/1; background:#eef2f7; }
.ad-spk-photo img{ width:100%; height:100%; object-fit:cover; object-position:center 20%; display:block; }
.ad-spk-badge{
position:absolute; left:10px; top:10px;
background:rgba(15,40,80,0.88); color:#fff; font-size:12px; font-weight:700;
padding:4px 10px; border-radius:999px;
}
.ad-spk-info{ padding:14px 16px 18px; }
.ad-spk-topic{ margin:0 0 8px; font-size:13px; font-weight:700; color:#1e6bcc; line-height:1.5; }
.ad-spk-name{ margin:0; font-size:16.5px; font-weight:800; color:var(--c-navy-800); }
.ad-spk-org{ margin:4px 0 0; font-size:13.5px; color:var(--c-gray-600,#4b5563); line-height:1.5; }
.ad-spk-desc{ margin:12px 0 0; font-size:13px; color:var(--c-gray-700,#374151); line-height:1.7; }
/* ===== 2025 컨퍼런스 서밋 그리드 + 모달 (wce.or.kr 원본 구조 재현) ===== */
.cf25{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin:6px 0 6px; align-items:start; }
.cf25-col > h4{ text-align:center; font-size:18px; font-weight:800; margin:0 0 14px; padding-bottom:10px; border-bottom:2px solid currentColor; }
.cf25-blue > h4{ color:#2f6fc0; }
.cf25-orange > h4{ color:#dd8a26; }
.cf25-green > h4{ color:#3f9a55; }
/* 세션 카드 (클릭 → 모달) */
.cf25-card{ display:block; border:1.5px solid var(--c-border,#dfe6ef); border-radius:12px; margin:0 0 14px; overflow:hidden; background:#fff; cursor:pointer; transition:box-shadow .18s, transform .18s; }
.cf25-card:hover{ box-shadow:0 8px 22px rgba(15,40,80,.12); transform:translateY(-2px); }
.cf25-ttl{ display:block; padding:11px 16px; color:#fff; font-weight:700; font-size:15px; line-height:1.4; }
.cf25-blue .cf25-ttl{ background:#2f6fc0; }
.cf25-orange .cf25-ttl{ background:#e0902f; }
.cf25-green .cf25-ttl{ background:#46a05c; }
.cf25-meta{ display:block; padding:12px 16px 4px; font-size:13px; color:#37465c; }
.cf25-m{ display:block; line-height:1.9; }
.cf25-m b{ display:inline-block; min-width:34px; color:#9aa6b6; font-weight:700; margin-right:8px; }
.cf25-more{ display:block; padding:4px 16px 12px; font-size:12px; font-weight:700; }
.cf25-blue .cf25-more{ color:#2f6fc0; }
.cf25-orange .cf25-more{ color:#dd8a26; }
.cf25-green .cf25-more{ color:#3f9a55; }
.cf25-more::after{ content:' ＋'; }
/* 모달 (순수 CSS 체크박스 토글 — JS 불필요) */
.cf25-cb{ position:absolute; width:0; height:0; opacity:0; pointer-events:none; }
.cf25-modal{ display:none; position:fixed; inset:0; z-index:9999; }
.cf25-cb:checked + .cf25-modal{ display:block; }
.cf25-modal-bg{ position:absolute; inset:0; background:rgba(8,20,45,.55); cursor:pointer; }
.cf25-modal-box{ position:relative; max-width:780px; width:calc(100% - 32px); margin:5vh auto; max-height:88vh; overflow:auto; background:#fff; border-radius:14px; padding:30px 32px 34px; box-shadow:0 24px 60px rgba(0,0,0,.32); }
.cf25-modal-x{ position:absolute; right:14px; top:14px; width:36px; height:36px; display:flex; align-items:center; justify-content:center; border-radius:50%; background:#1a1a1a; color:#fff; font-size:22px; line-height:1; cursor:pointer; }
.cf25-modal-ttl{ margin:2px 0 18px; font-size:20px; font-weight:800; padding-right:42px; }
.cf25-blue .cf25-modal-ttl{ color:#2f6fc0; }
.cf25-orange .cf25-modal-ttl{ color:#dd8a26; }
.cf25-green .cf25-modal-ttl{ color:#3f9a55; }
.cf25-modal-box table{ width:100%; border-collapse:separate; border-spacing:0 8px; font-size:14px; }
.cf25-modal-box th{ text-align:center; vertical-align:top; white-space:nowrap; color:#fff; font-weight:700; padding:7px 10px; border-radius:8px; width:1%; font-size:13px; line-height:1.35; }
.cf25-blue .cf25-modal-box th{ background:#2f6fc0; }
.cf25-orange .cf25-modal-box th{ background:#e0902f; }
.cf25-green .cf25-modal-box th{ background:#46a05c; }
.cf25-modal-box td{ padding:6px 14px; vertical-align:top; line-height:1.7; color:#33425a; }
.cf25-att{ line-height:1.95; }
.cf25-att strong{ display:inline-block; margin-top:10px; color:#0a2540; font-weight:800; }
/* 모달 내 주요 참석자 (배지 + 원형 사진 + 이름/소속) */
.cf25-spk-h{ margin:22px 0 8px; font-size:15px; font-weight:800; color:#0a2540; padding-bottom:8px; border-bottom:2px solid #e6ebf2; }
.cf25-spk-row{ display:flex; align-items:center; gap:14px; padding:9px 2px; border-bottom:1px solid #f1f4f9; }
.cf25-spk-row:last-child{ border-bottom:0; }
.cf25-spk-badge{ flex:0 0 104px; box-sizing:border-box; text-align:center; background:#141414; color:#fff; font-size:12px; font-weight:700; padding:9px 6px; border-radius:3px; line-height:1.3; }
.cf25-spk-nob{ background:transparent; }
.cf25-spk-img{ flex:0 0 50px; width:50px; height:50px; border-radius:50%; object-fit:cover; object-position:center 18%; background:#eef2f7; display:block; }
.cf25-spk-txt{ font-size:13.5px; color:#3a4759; line-height:1.45; }
.cf25-spk-txt b{ font-weight:800; color:#0a2540; margin-right:7px; font-size:14.5px; }
@media (max-width:900px){ .cf25{ grid-template-columns:1fr; gap:12px; } .cf25-modal-box{ padding:26px 18px 28px; } }
@media (max-width:560px){ .cf25-spk-badge{ flex-basis:80px; font-size:11px; padding:7px 4px; } .cf25-spk-img{ flex-basis:42px; width:42px; height:42px; } .cf25-spk-txt{ font-size:12.5px; } .cf25-spk-txt b{ font-size:13.5px; } }
/* ===== 2025 주요성과 패널 — wce.or.kr Previous_2025_3 레이아웃 그대로 재현 ===== */
.pf25{ --bm:#1a6fc4; --bd:#0d4a8f; --bdr:#ccd9ed; }
.pf25 .pf-h2{ position:relative; display:block; text-align:left; color:var(--bd); font-size:20px; font-weight:800; letter-spacing:-.5px; padding:0 0 14px 20px; margin:36px 0 20px; }
.pf25 .pf-h2::before{ content:""; position:absolute; left:0; top:0; width:7px; height:26px; background:linear-gradient(180deg,var(--bm),var(--bd)); border-radius:3px; }
.pf25 .pf-h2::after{ content:""; position:absolute; bottom:-3px; left:0; width:80px; height:3px; background:#4a9de8; }
.pf25 .ach-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-bottom:4px; }
.pf25 .ach-card{ background:#fff; border:1px solid var(--bdr); border-top:3px solid var(--bm); border-radius:6px; padding:18px 18px 16px; }
.pf25 .ach-title{ font-size:14px; font-weight:700; color:var(--bd); margin-bottom:10px; display:flex; align-items:flex-start; gap:7px; line-height:1.5; }
.pf25 .ach-title .cnum{ display:inline-flex; align-items:center; justify-content:center; min-width:28px; height:28px; background:linear-gradient(135deg,var(--bm),var(--bd)); color:#fff; border-radius:6px; font-size:13px; flex-shrink:0; margin-top:1px; }
.pf25 .ach-card ul{ margin:0; padding:0; list-style:none; }
.pf25 .ach-card ul li{ position:relative; padding-left:14px; margin-bottom:5px; font-size:13px; line-height:1.7; color:#555; }
.pf25 .ach-card ul li::before{ content:"·"; position:absolute; left:2px; top:0; color:var(--bm); font-size:16px; line-height:1.4; }
.pf25 .ri-title{ font-size:15px; font-weight:700; color:#222; margin:32px 0 12px; display:flex; align-items:center; gap:9px; padding-bottom:8px; border-bottom:1px solid #e0e8f4; }
.pf25 .ri-title .num{ display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; background:linear-gradient(135deg,var(--bm),var(--bd)); color:#fff; border-radius:50%; font-size:15px; flex-shrink:0; box-shadow:0 2px 8px rgba(13,74,143,.25); }
.pf25 .ri-box{ background:#fff; border-radius:8px; padding:4px 0; margin-bottom:4px; }
.pf25 .ri-info{ display:flex; flex-direction:column; gap:12px; }
.pf25 .ri-row{ display:flex; align-items:flex-start; gap:16px; }
.pf25 .ri-info .lbl{ display:inline-flex; align-items:center; justify-content:center; min-width:90px; padding:6px 12px; background:linear-gradient(135deg,var(--bd) 0%,var(--bm) 100%); color:#fff; font-size:14px; font-weight:700; border-radius:6px; flex-shrink:0; }
.pf25 .ri-info .val{ font-size:15px; line-height:1.75; color:#222; padding-top:5px; }
.pf25 .ri-list{ margin:0 0 8px; padding:0; list-style:none; }
.pf25 .ri-list li{ position:relative; padding-left:16px; margin-bottom:6px; font-size:14px; line-height:1.75; color:#555; }
.pf25 .ri-list.dash li::before{ content:"–"; position:absolute; left:0; color:#888; font-size:13px; top:1px; }
.pf25 .ri-sub{ font-size:14px; font-weight:700; color:var(--bd); margin:22px 0 8px; padding-left:10px; border-left:3px solid var(--bm); }
.pf25 .pf25-wtbl{ width:100%; border-collapse:collapse; table-layout:fixed; margin:0 0 6px; font-size:13.5px; }
.pf25 .pf25-wtbl th{ background:linear-gradient(180deg,#f0f5fb 0%,#e4edf8 100%); border:1px solid var(--bdr); padding:10px 13px; text-align:center; font-weight:700; color:var(--bd); }
.pf25 .pf25-wtbl td{ border:1px solid var(--bdr); padding:10px 13px; vertical-align:middle; color:#444; line-height:1.65; }
.pf25 .pf25-wtbl td.c{ text-align:center; }
.pf25 .pf25-wtbl tbody tr:nth-child(even) td{ background:#fafcff; }
.pf25 .pf25-wtbl .sub td{ background:#e8f0fa; font-weight:700; text-align:center; color:var(--bd); }
.pf25 .pf25-wtbl .tot td{ background:var(--bd); font-weight:700; text-align:center; color:#fff; }
.pf25 .pf25-wtbl .pf{ position:relative; padding-left:13px; margin-bottom:5px; line-height:1.65; font-size:13px; }
.pf25 .pf25-wtbl .pf::before{ content:"•"; position:absolute; left:0; color:var(--bm); }
.pf25 .pf25-wtbl .pf strong{ color:var(--bd); font-weight:700; }
.pf25 .stat-row{ display:flex; gap:14px; margin-top:14px; flex-wrap:wrap; }
.pf25 .stat-box{ flex:1; min-width:120px; background:linear-gradient(135deg,var(--bd) 0%,var(--bm) 100%); border-radius:8px; padding:18px 14px 16px; text-align:center; box-shadow:0 3px 12px rgba(13,74,143,.2); }
.pf25 .stat-box .sval{ font-size:24px; font-weight:700; color:#fff; letter-spacing:-.5px; }
.pf25 .stat-box .slbl{ font-size:12px; color:rgba(255,255,255,.8); margin-top:4px; }
@media (max-width:768px){ .pf25 .ach-grid{ grid-template-columns:1fr; } .pf25 .ri-row{ flex-direction:column; gap:6px; } .pf25 .pf25-wtbl{ font-size:12px; } .pf25 .pf25-wtbl th, .pf25 .pf25-wtbl td{ padding:7px 6px; } }
/* ===== 2025 컨퍼런스 다시보기 — 전체 일정표 그리드 (wce.or.kr Tap=B 재현) ===== */
.cgrid{ overflow-x:auto; margin:6px 0 12px; -webkit-overflow-scrolling:touch; }
.cgrid .sched-block{ margin-bottom:28px; min-width:700px; }
.cgrid .day-label{ display:flex; align-items:center; gap:10px; padding:11px 18px; background:#0d2340; border-radius:6px 6px 0 0; width:fit-content; }
.cgrid .day-label .d-num{ font-size:12px; font-weight:700; color:#7de4ea; letter-spacing:1px; text-transform:uppercase; }
.cgrid .day-label .d-date{ font-size:15px; font-weight:700; color:#fff; }
.cgrid .day-label .d-dow{ font-size:12px; color:rgba(255,255,255,.55); }
.cgrid table{ width:100%; border-collapse:collapse; }
.cgrid thead tr.h-venue th{ padding:9px 6px; text-align:center; font-size:12.5px; font-weight:700; color:#fff; border:1px solid rgba(255,255,255,.15); }
.cgrid th.h-conv{ background:#1a3a5c; }
.cgrid th.h-expo{ background:#1b8a8f; }
.cgrid th.h-time{ background:#0d2340; width:76px; min-width:76px; }
.cgrid thead tr.h-room th{ padding:7px 5px; text-align:center; font-size:11px; font-weight:700; color:#1a3a5c; background:#e6eef7; border:1px solid #c8d6e4; white-space:nowrap; }
.cgrid thead tr.h-room .h-time{ background:#d5e2ee; }
.cgrid td{ border:1px solid #c8d6e4; }
.cgrid td.td-time{ background:#f0f4f9; font-size:13px; font-weight:700; color:#1a3a5c; text-align:center; padding:8px 4px; border:1px solid #c8d6e4; border-right:2px solid #b4c8d9; }
.cgrid td.emp{ background:#f7fafd; border:1px solid #c8d6e4; }
.cgrid tr.dvd td{ height:3px; background:linear-gradient(90deg,#dce5ee,#aec4d5 40%,#dce5ee); border:none!important; padding:0; }
.cgrid .ev{ display:flex; flex-direction:column; align-items:center; justify-content:center; padding:10px 7px; min-height:96px; gap:5px; height:100%; }
.cgrid .ev-title{ font-size:13px; font-weight:700; line-height:1.45; text-align:center; word-break:keep-all; color:#0d2340; }
.cgrid .ev-time{ font-size:11px; color:#6a8090; }
.cgrid .ev-host{ font-size:11px; font-weight:600; color:#1b8a8f; background:rgba(27,138,143,.1); padding:2px 8px; border-radius:10px; }
.cgrid .ev-inv{ font-size:10px; font-weight:700; color:#c0392b; background:#fdecea; border:1px solid #f5c6c2; padding:1px 6px; border-radius:8px; }
.cgrid .ev-sep{ width:72%; height:1px; background:#dde4ed; margin:2px 0; }
.cgrid .c-open{ background:#fef9e0!important; border:1px solid #e0c03e!important; }
.cgrid .c-clean{ background:#e4f5f6!important; border:1px solid #8ecfd1!important; }
.cgrid .c-ai{ background:#e6f2fb!important; border:1px solid #90c6e8!important; }
.cgrid .c-forest{ background:#eaf6eb!important; border:1px solid #82c785!important; }
.cgrid .c-gray{ background:#f2f5fa!important; border:1px solid #c8d6e4!important; }
.cgrid .c-purple{ background:#f3eefb!important; border:1px solid #b39ddb!important; }
.cgrid .c-pink{ background:#f8eaf8!important; border:1px solid #d4a8d4!important; }
/* ===== 2025 전시회 다시보기 (wce.or.kr Tap=C 재현) ===== */
.exb25 .ContainerItem{ font-size:21px; font-weight:800; color:#0a2540; padding:8px 0; margin-bottom:12px; border-bottom:2px solid #e6ebf2; }
.exb25 .exhibition{ width:100%; text-align:center; margin-bottom:24px; }
.exb25 .exhibition-content img{ display:block; width:100%; height:auto; border-radius:8px; }
.exb25 .hall-grid{ display:flex; flex-wrap:wrap; gap:24px; margin-bottom:10px; }
.exb25 .hall-card{ flex:1 1 calc(50% - 12px); background:#f9f9f9; border:1px solid #ddd; border-radius:10px; overflow:hidden; box-shadow:0 2px 5px rgba(0,0,0,.06); }
.exb25 .hall-card-header{ color:#fff; padding:15px; }
.exb25 .hall-card-header h3{ margin:0; font-size:18px; }
.exb25 .hall-card-header span{ font-size:.85em; opacity:.9; font-weight:400; }
.exb25 .hall-card-content{ padding:22px; font-size:14px; line-height:1.6; color:#3a4759; }
.exb25 .hall-card-content p{ margin:0 0 6px; }
.exb25 .hall-card-content strong{ color:#0a2540; }
.exb25 .hall-card-content a{ color:#1a6fc4; text-decoration:underline; }
.exb25 .future-energy-color{ background:#f58220; }
.exb25 .clean-power-color{ background:#00a2e5; }
.exb25 .carbon-neutral-color{ background:#64a70b; }
.exb25 .climate-meteor-color{ background:#e6007e; }
.exb25 .climate-f2co-color{ background:#65009a; }
.exb25 .energy-highway-color{ background:#fdd447; color:#5a4a00; }
.exb25 .energy-highway-color span{ color:#5a4a00; opacity:.85; }
.exb25 .company-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin:8px 0; }
.exb25 .card{ background:#fff; border:1px solid #ddd; border-radius:6px; overflow:hidden; display:flex; flex-direction:column; transition:box-shadow .2s, transform .2s; }
.exb25 .card:hover{ box-shadow:0 4px 12px rgba(0,0,0,.15); transform:translateY(-4px); }
.exb25 .card-media{ flex:1; display:flex; align-items:center; justify-content:center; background:#fff; padding:18px 12px; min-height:92px; }
.exb25 .card-media img{ max-width:80%; max-height:66px; height:auto; object-fit:contain; }
.exb25 .card-title{ background:linear-gradient(135deg,#1b9bdb,#146fa0); padding:10px 8px; text-align:center; font-size:13.5px; font-weight:600; color:#fff; }
.exb25 .download-area{ text-align:center; margin:30px 0 6px; }
.exb25 .btn-download{ display:inline-block; background:linear-gradient(135deg,#1b9bdb 0%,#146fa0 100%); color:#fff; padding:14px 30px; border-radius:8px; font-size:15px; font-weight:700; text-decoration:none; transition:transform .2s, box-shadow .2s; }
.exb25 .btn-download:hover{ transform:translateY(-3px) scale(1.03); box-shadow:0 12px 24px rgba(0,0,0,.2); }
@media (max-width:768px){ .exb25 .hall-card{ flex-basis:100%; } .exb25 .company-grid{ grid-template-columns:repeat(2,1fr); gap:14px; } }
/* ===== 지난행사 주요성과 — 2025(pf25) 스타일로 통일 (2023·2024 result 패널 한정) ===== */
.ad-panel[data-panel="result"] .ad-blk-h4{
position:relative; font-size:18px; font-weight:800; color:#0d4a8f;
padding:0 0 0 18px; margin:30px 0 16px; border-bottom:none; border-left:none;
}
.ad-panel[data-panel="result"] .ad-blk-h4::before{
content:''; position:absolute; left:0; top:1px; width:6px; height:23px;
background:linear-gradient(180deg,#1a6fc4,#0d4a8f); border-radius:3px;
}
/* kvtable 제목(환영 리셉션·개막식 등)은 주요 섹션보다 한 단계 낮은 서브헤더 */
.ad-panel[data-panel="result"] .ad-kvtitle{
font-size:15px; font-weight:800; color:#0d4a8f;
padding:0 0 0 11px; margin:20px 0 9px;
border-bottom:none; border-left:3px solid #1a6fc4;
}
.ad-panel[data-panel="result"] .ad-kvtitle::before{ display:none; }
.ad-panel[data-panel="result"] .ad-blk-h5{
font-size:15px; font-weight:800; color:#0d4a8f;
padding-left:11px; border-left:3px solid #1a6fc4; margin:22px 0 10px;
}
/* 주요성과 카드 (item → ach-card 룩) */
.ad-panel[data-panel="result"] .ad-blk-item{
background:#fff; border:1px solid #ccd9ed; border-top:3px solid #1a6fc4;
border-radius:8px; padding:16px 18px; margin:0 0 14px;
}
.ad-panel[data-panel="result"] .ad-blk-item-main{
font-size:15px; font-weight:800; color:#0d4a8f; margin:0 0 8px;
}
.ad-panel[data-panel="result"] .ad-blk-subs li{
position:relative; padding-left:14px; font-size:13.5px; line-height:1.7; color:#3a4759;
}
.ad-panel[data-panel="result"] .ad-blk-subs li::before{
content:'·'; position:absolute; left:3px; top:0; color:#1a6fc4; font-size:17px; line-height:1.35;
}
/* kvtable → 네이비 pill 라벨 (ri-info 룩) */
.ad-panel[data-panel="result"] .ad-table{
border-top:none; border-collapse:separate; border-spacing:0 8px; margin:2px 0 12px;
}
.ad-panel[data-panel="result"] .ad-table th{
background:linear-gradient(135deg,#0d4a8f 0%,#1a6fc4 100%); color:#fff; border:none;
border-radius:7px; padding:8px 12px; font-size:12.5px; font-weight:700;
text-align:center; vertical-align:middle; white-space:nowrap; width:96px;
}
.ad-panel[data-panel="result"] .ad-table td{
border:none; padding:7px 14px; font-size:14px; color:#222; vertical-align:middle; line-height:1.6;
}
/* 실적 표 → pf25 블루 헤더 */
.ad-panel[data-panel="result"] .ad-htable thead th{
background:linear-gradient(180deg,#f0f5fb 0%,#e4edf8 100%); color:#0d4a8f; border:1px solid #ccd9ed;
}
.ad-panel[data-panel="result"] .ad-htable tbody th{ background:#eef4fb; color:#0d4a8f; border:1px solid #ccd9ed; }
.ad-panel[data-panel="result"] .ad-htable td{ border:1px solid #ccd9ed; }
/* ===== 캡션 사진 갤러리 (2열) ===== */
.ad-gallery{
display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); gap:14px; margin:8px 0 28px;
}
.ad-gallery-item{ margin:0; }
.ad-gallery-item img{
width:100%; aspect-ratio:4/3; object-fit:cover; display:block;
border-radius:10px; border:1px solid var(--c-border);
}
.ad-gallery-item figcaption{
margin-top:9px; font-size:13.5px; color:var(--c-gray-600,#4b5563);
text-align:center; line-height:1.5;
}
/* 빈 패널 */
.ad-empty{
padding:48px 20px; text-align:center;
font-size:15.5px; color:var(--c-gray-500,#6b7280);
background:#f7f9fc; border:1px dashed var(--c-border); border-radius:14px;
}
/* 다시보기 / 미디어 */
.ad-vod-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:18px; }
.ad-vod-card{
display:flex; align-items:center; gap:12px;
padding:18px; border:1px solid var(--c-border); border-radius:12px;
font-weight:600; color:var(--c-navy-800); transition:all .2s var(--ease);
}
.ad-vod-card:hover{ border-color:#1e6bcc; box-shadow:0 6px 18px rgba(30,107,204,0.15); }
.ad-vod-play{ color:#1e6bcc; font-size:18px; }
.ad-media-list{ list-style:none; margin:0; padding:0; }
.ad-media-list li{ padding:14px 0; border-bottom:1px solid var(--c-border); }
.ad-media-list a{ color:#1e6bcc; font-weight:600; }
/* 하단 목록 버튼 */
.ad-foot{ margin-top:44px; padding-top:28px; border-top:1px solid var(--c-border); }
.ad-back{
display:inline-flex; align-items:center; gap:8px;
padding:12px 24px; border:1px solid var(--c-border); border-radius:8px;
font-weight:700; color:var(--c-navy-800); transition:all .2s var(--ease);
}
.ad-back:hover{ border-color:#1e6bcc; color:#1e6bcc; background:#f3f7fd; }
@media (max-width:768px){
.ad-hero{ grid-template-columns:180px 1fr; gap:24px; }
.ad-hero-theme{ font-size:20px; }
.ad-tab{ padding:12px 14px; font-size:14.5px; }
.ad-h2{ font-size:19px; }
.ad-h3, .ad-blk-h4{ font-size:16px; }
.ad-table th{ width:92px; padding:10px 11px; font-size:13.5px; }
.ad-table td{ padding:10px 11px; font-size:13.5px; }
.ad-conf-table thead th, .ad-conf-table tbody td,
.ad-htable th, .ad-htable td{ padding:9px 10px; font-size:13px; line-height:1.55; }
.ad-blk-info li, .ad-blk-item-main{ font-size:14px; }
.ad-subtab{ padding:10px 14px; font-size:13.5px; }
.ad-spk-grid{ grid-template-columns:repeat(2,1fr); gap:14px; }
.ad-spk-name{ font-size:15px; }
}
@media (max-width:520px){
.ad-hero{ grid-template-columns:1fr; }
.ad-hero-poster{ max-width:240px; }
.ad-subtabs{ flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; }
.ad-subtab{ white-space:nowrap; flex:0 0 auto; }
.ad-spk-grid{ grid-template-columns:1fr 1fr; }
.ad-gallery{ gap:12px; }
.ad-gallery-item figcaption{ font-size:12.5px; }
}
/* 프로그램 카드 영문 자막 (admin 영문 입력 시 자동 노출) */
.pc-title-en{
font-family:var(--font-en);
font-size:13.2px;
font-weight:500;
color:var(--c-gray-500);
letter-spacing:-0.005em;
line-height:1.45;
margin:-2px 0 6px;
}
.pc-sub-en{
font-family:var(--font-en);
font-size:12.1px;
font-weight:400;
color:var(--c-gray-500);
letter-spacing:-0.005em;
line-height:1.45;
margin:-4px 0 8px;
opacity:0.85;
}
.pc-venue-en{
font-family:var(--font-en);
font-size:11px;
font-weight:500;
color:var(--c-gray-500);
margin-left:2px;
}
/* 프로그램 팝업 — 영문 텍스트 */
.pm-title-en{
font-family:var(--font-en);
font-size:16.5px;
font-weight:500;
color:var(--c-gray-500);
letter-spacing:-0.005em;
line-height:1.4;
margin:-4px 0 8px;
}
.pm-sub-en{
font-family:var(--font-en);
font-size:13.2px;
font-weight:400;
color:var(--c-gray-500);
margin:-4px 0 10px;
}
.pm-meta small{
font-family:var(--font-en);
font-size:12.1px;
font-weight:400;
color:var(--c-gray-500);
margin-left:3px;
}
.pm-desc-en{
font-family:var(--font-en);
font-size:13.2px;
color:var(--c-gray-500);
margin-top:10px;
padding-top:10px;
border-top:1px dashed var(--c-border);
}
.pm-tl-title-en{
display:block;
font-family:var(--font-en);
font-size:12.1px;
font-weight:500;
color:var(--c-gray-500);
letter-spacing:-0.005em;
margin-top:2px;
}
.pm-tl-sub-en, .pm-tl-desc-en{
font-family:var(--font-en);
color:var(--c-gray-500);
opacity:0.85;
}
/* ==========================================================================
PROGRAM MODAL — API 출력용 (pm-detail, pm-spk-*, pm-tl-*)
========================================================================== */
.pm-detail{
padding:28px 32px 32px;
}
/* 헤더 영역 */
.pm-detail .pm-head{
display:block;
padding:0;
background:transparent;
border:none;
margin-bottom:24px;
}
.pm-cat-chip{
display:inline-block;
padding:5px 14px;
background:#1e6bcc20;
color:#1e6bcc;
border:1px solid #1e6bcc40;
border-radius:50px;
font-size:12.5px;
font-weight:700;
letter-spacing:-0.01em;
margin-bottom:14px;
}
.pm-live{
display:inline-flex;
align-items:center;
gap:5px;
padding:4px 11px;
margin-left:8px;
background:#ff4d4d;
color:#fff;
border-radius:50px;
font-family:var(--font-en);
font-size:11.5px;
font-weight:700;
letter-spacing:0.5px;
animation:pmLivePulse 1.5s infinite;
}
@keyframes pmLivePulse{ 0%,100%{opacity:1;} 50%{opacity:0.65;} }
.pm-detail .pm-title{
display:block;
font-size:25.3px;
font-weight:800;
color:var(--c-navy-800);
letter-spacing:-0.03em;
line-height:1.35;
margin:0 0 6px;
border:none;
padding:0;
}
.pm-detail .pm-sub{
font-size:16.5px;
font-weight:500;
color:var(--c-gray-600);
line-height:1.55;
margin:0 0 18px;
letter-spacing:-0.02em;
}
/* 메타 — dl/dt/dd 형식 */
.pm-detail dl.pm-meta{
display:grid;
grid-template-columns:80px 1fr;
gap:10px 14px;
margin:0;
padding:16px 20px;
background:#f7f9fc;
border-radius:10px;
font-size:14.3px;
}
.pm-detail dl.pm-meta dt{
font-weight:700;
color:var(--c-gray-500);
letter-spacing:-0.01em;
padding:0;
background:transparent;
}
.pm-detail dl.pm-meta dd{
margin:0;
color:var(--c-navy-800);
font-weight:500;
line-height:1.55;
}
/* 섹션 */
.pm-detail .pm-section{
margin-top:28px;
padding-top:22px;
border-top:1px solid var(--c-border);
}
.pm-detail .pm-section h3{
font-size:17.6px;
font-weight:800;
color:var(--c-navy-800);
letter-spacing:-0.025em;
margin:0 0 14px;
}
.pm-detail .pm-desc{
font-size:15.4px;
color:var(--c-gray-700, #555);
line-height:1.75;
letter-spacing:-0.015em;
padding:14px 18px;
background:#f7fcf9;
border-left:3px solid #1bc47d;
border-radius:0 8px 8px 0;
}
/* ========== 세부 타임라인 ========== */
.pm-timeline{
list-style:none;
padding:0;
margin:0;
display:flex;
flex-direction:column;
gap:14px;
}
.pm-tl-item{
display:grid;
grid-template-columns:90px 1fr;
gap:16px;
padding:14px 16px;
background:#fff;
border:1px solid var(--c-border);
border-radius:10px;
transition:all .2s var(--ease);
}
.pm-tl-item:hover{
border-color:#1e6bcc40;
background:#fafbfd;
}
.pm-tl-time{
font-family:var(--font-en);
font-size:14.3px;
font-weight:700;
color:#1e6bcc;
letter-spacing:-0.01em;
padding-top:2px;
}
.pm-tl-body{ min-width:0; }
.pm-tl-type{
display:inline-block;
padding:2px 9px;
background:#1e6bcc15;
color:#1e6bcc;
border-radius:4px;
font-size:11.5px;
font-weight:700;
letter-spacing:-0.01em;
margin-bottom:6px;
}
.pm-tl-title{
display:block;
font-size:15.4px;
font-weight:700;
color:var(--c-navy-800);
letter-spacing:-0.02em;
line-height:1.4;
margin-bottom:2px;
}
.pm-tl-title-en{
display:block;
font-family:var(--font-en);
font-size:13.2px;
font-weight:500;
color:var(--c-gray-500);
letter-spacing:-0.005em;
line-height:1.4;
margin-bottom:6px;
}
.pm-tl-sub{
font-size:13.2px;
color:var(--c-gray-600);
line-height:1.5;
margin:4px 0 0;
}
.pm-tl-sub-en{
font-family:var(--font-en);
color:var(--c-gray-500);
opacity:0.85;
font-size:12.1px;
}
.pm-tl-desc{
font-size:13.2px;
color:var(--c-gray-600);
line-height:1.6;
margin:8px 0 0;
}
/* ========== 연사 카드 ========== */
.pm-speakers{
display:grid;
grid-template-columns:repeat(auto-fill, minmax(260px, 1fr));
gap:14px;
}
.pm-spk{
display:flex;
gap:14px;
padding:14px;
background:#fff;
border:1px solid var(--c-border);
border-radius:10px;
transition:all .2s var(--ease);
}
.pm-spk:hover{
border-color:#1e6bcc40;
box-shadow:0 6px 18px rgba(30,107,204,0.08);
}
.pm-spk-photo{
width:64px;
height:64px;
flex-shrink:0;
border-radius:50%;
overflow:hidden;
background:var(--c-navy-800);
display:flex;
align-items:center;
justify-content:center;
}
.pm-spk-photo img{ width:100%; height:100%; object-fit:cover; }
.pm-spk-photo span{
color:#fff;
font-family:var(--font-en);
font-size:24.2px;
font-weight:700;
opacity:0.85;
}
.pm-spk-body{ min-width:0; flex:1; }
.pm-spk-role{
display:inline-block;
padding:2px 8px;
background:#1bc47d15;
color:var(--c-green-600);
border-radius:4px;
font-size:11px;
font-weight:700;
margin-bottom:5px;
}
.pm-spk-name{
display:block;
font-size:15.4px;
font-weight:700;
color:var(--c-navy-800);
letter-spacing:-0.02em;
margin-bottom:2px;
}
.pm-spk-en{
display:block;
font-family:var(--font-en);
font-size:11.5px;
color:var(--c-gray-500);
margin-bottom:6px;
}
.pm-spk-title{
font-size:12.5px;
color:var(--c-gray-700, #555);
line-height:1.4;
margin:0 0 2px;
}
.pm-spk-org{
font-size:12.5px;
color:var(--c-gray-500);
margin:0 0 8px;
}
.pm-spk-bio{
font-size:12.1px;
color:var(--c-gray-600);
line-height:1.55;
margin:0;
}
/* ========== 액션 버튼 ========== */
.pm-detail .pm-actions{
display:flex;
gap:10px;
flex-wrap:wrap;
margin-top:24px;
padding-top:24px;
border-top:1px solid var(--c-border);
}
.pm-btn{
display:inline-flex;
align-items:center;
gap:7px;
padding:11px 22px;
border-radius:8px;
font-size:14.3px;
font-weight:700;
letter-spacing:-0.01em;
transition:all .2s var(--ease);
}
.pm-btn-doc{ background:var(--c-navy-800); color:#fff; }
.pm-btn-doc:hover{ background:#143458; }
/* 모달 본문에 영문 텍스트 들어갈 때 가독성 */
.pm-detail .pm-title-en{
font-family:var(--font-en);
font-size:17.6px;
font-weight:500;
color:var(--c-gray-500);
letter-spacing:-0.005em;
line-height:1.4;
margin:0 0 10px;
}
.pm-detail .pm-sub-en{
font-family:var(--font-en);
font-size:13.2px;
color:var(--c-gray-500);
margin:0 0 16px;
}
.pm-detail dl.pm-meta dd small{
font-family:var(--font-en);
font-size:12.1px;
color:var(--c-gray-500);
margin-left:4px;
}
/* 반응형 */
@media (max-width:640px){
.pm-detail{ padding:22px 18px 26px; }
.pm-detail .pm-title{ font-size:20px; }
.pm-detail dl.pm-meta{ grid-template-columns:64px 1fr; padding:14px 16px; font-size:13px; }
.pm-tl-item{ grid-template-columns:1fr; gap:8px; }
.pm-tl-time{ font-size:13.2px; }
.pm-speakers{ grid-template-columns:1fr; }
}
/* ==========================================================================
PROGRAM MODAL v2 — 이미지 레퍼런스 디자인
- 제목: 파란색 굵은 글씨
- 정보: 파란 알약 라벨 + 내용 (그리드)
- 연사: 검은 사각 역할 라벨 + 원형 사진 + 이름
========================================================================== */
/* 모달 본문 패딩 재정의 */
.pm-detail{
padding:32px 36px 36px;
}
/* === 제목 (이미지: 파란 굵은) === */
.pm-title-blue{
font-size:24.2px;
font-weight:800;
color:var(--pm-accent-title, #1e6bcc); /* 세션 색상(밝으면 어둡게 보정) */
letter-spacing:-0.025em;
line-height:1.3;
margin:0 0 26px;
display:flex;
align-items:baseline;
flex-wrap:wrap;
gap:4px 10px;
}
/* 타이틀 옆 영문(작은 폰트) */
.pm-title-en-inline{
font-family:var(--font-en);
font-size:15px;
font-weight:500;
color:#7a8aa0;
letter-spacing:-0.005em;
}
.pm-title-en-sub{
font-family:var(--font-en);
font-size:14.3px;
font-weight:500;
color:#7a8aa0;
letter-spacing:-0.005em;
margin:-22px 0 22px;
}
/* === 정보 블록 (파란 알약 라벨 + 내용) === */
.pm-info-block{
display:flex;
flex-direction:column;
gap:14px;
margin-bottom:32px;
}
.pm-row{
display:grid;
grid-template-columns:104px 1fr;
gap:18px;
align-items:flex-start;
}
.pm-row-lbl{
display:inline-flex;
align-items:center;
justify-content:center;
padding:8px 0;
background:var(--pm-accent, #1e6bcc); /* 세션 색상 */
color:var(--pm-accent-text, #fff); /* 배경 대비 글자색 */
border-radius:50px;
font-size:13.2px;
font-weight:700;
letter-spacing:-0.01em;
white-space:nowrap;
}
.pm-row-val{
font-size:14.85px;
color:#3d4b5c;
line-height:1.65;
letter-spacing:-0.015em;
padding-top:5px;
word-break:keep-all;
}
/* 일시 | 장소 — 한 행 2열 (라벨 폭은 단일 행과 동일하게 104px 통일) */
.pm-row-2{ grid-template-columns:1fr 1fr; }
.pm-cell{
display:grid;
grid-template-columns:104px 1fr;
gap:18px;
align-items:flex-start;
min-width:0;
}
/* === 연사 카드 (한 행에 2개: 상단 역할바 + 사진 + 정보) === */
.pm-detail .pm-spk-list{
list-style:none;
padding:24px 0 0;
margin:0;
display:grid;
grid-template-columns:1fr 1fr;
align-items:start; /* 카드가 콘텐츠 높이만큼만 — 짧은 카드 늘어나며 생기던 데드스페이스 제거 */
gap:14px;
border-top:1px solid #e6ebf2;
}
/* 세로형 카드: 상단 역할바 → 큰 원형 사진(중앙) → 이름/소속/직책(좌측정렬) */
.pm-detail .pm-spk{
display:block;
background:#eef2f6; /* 연한 카드 배경 */
border:1px solid #e4eaf1;
border-radius:14px;
overflow:hidden;
cursor:pointer;
transition:box-shadow .15s ease, border-color .15s ease;
}
.pm-detail .pm-spk:hover{
border-color:#cfd9e6;
box-shadow:0 6px 18px rgba(10,37,64,0.10);
}
.pm-detail .pm-spk-rolebar{
background:var(--pm-accent, #0a1929); /* 세션 색상으로 통일 */
color:var(--pm-accent-text, #fff); /* 배경 대비 글자색 */
text-align:center;
padding:9px 8px;
font-size:13px;
font-weight:700;
letter-spacing:-0.01em;
}
.pm-detail .pm-spk-body{
display:flex;
flex-direction:column; /* 세로 스택 */
align-items:stretch;
gap:0;
padding:22px 26px 26px;
}
.pm-detail .pm-spk-photo{
width:150px;
height:150px;
border-radius:50%;
overflow:hidden;
background:#dde4ec;
display:flex;
align-items:center;
justify-content:center;
flex-shrink:0;
align-self:center; /* 사진만 가운데 정렬 */
margin:2px 0 20px;
}
.pm-detail .pm-spk-photo img{ width:100%; height:100%; object-fit:cover; }
.pm-detail .pm-spk-photo span{
font-family:var(--font-en);
font-size:54px;
font-weight:700;
color:#7a8aa0;
}
.pm-detail .pm-spk-info{
display:flex;
flex-direction:column;
align-items:flex-start; /* 텍스트는 좌측정렬 */
gap:4px;
width:100%;
min-width:0;
}
.pm-detail .pm-spk-name{
font-size:21px;
font-weight:800;
color:#1d2b3e;
letter-spacing:-0.02em;
line-height:1.2;
}
.pm-detail .pm-spk-name-en{
font-family:var(--font-en);
font-size:14px;
color:#9aa7b5;
letter-spacing:-0.005em;
}
.pm-detail .pm-spk-org{
margin-top:12px; /* 이름 그룹과 소속 그룹 사이 간격 */
font-size:15px;
color:#54637a; /* 소속 — 약간 진하게(직책과 위계 구분) */
letter-spacing:-0.015em;
font-weight:600;
line-height:1.4;
word-break:keep-all;
}
/* 직책 — 소속 아래 별도 줄 (가로 ' | ' 결합 제거, 한 줄씩 내려쓰기) */
.pm-detail .pm-spk-title{
margin-top:2px;
font-size:14px;
color:#8a98a8;
letter-spacing:-0.015em;
font-weight:500;
line-height:1.4;
word-break:keep-all;
}
/* === 액션 버튼 === */
.pm-actions{
display:flex;
gap:10px;
flex-wrap:wrap;
margin-top:28px;
padding-top:24px;
border-top:1px solid #e6ebf2;
}
.pm-btn{
display:inline-flex;
align-items:center;
gap:7px;
padding:12px 24px;
border-radius:8px;
font-size:14.3px;
font-weight:700;
letter-spacing:-0.01em;
}
.pm-btn-live{ background:#ff4d4d; color:#fff; }
.pm-btn-live:hover{ background:#e63939; }
.pm-btn-doc{ background:#0a2540; color:#fff; }
.pm-btn-doc:hover{ background:#143458; }
/* === 돌아가기 버튼 (연사 모달에서) === */
.pm-back{
display:inline-flex;
align-items:center;
gap:6px;
padding:8px 14px;
background:#f5f8fc;
color:#1e6bcc;
border:1px solid #d6e3f3;
border-radius:6px;
font-size:13px;
font-weight:700;
cursor:pointer;
margin-bottom:20px;
transition:all .15s ease;
}
.pm-back:hover{ background:#e7f1ff; }
/* ==========================================================================
SPEAKER DETAIL MODAL (이미지 3: 좌측 큰 사진 + 우측 약력)
========================================================================== */
/* 연사 상세 모달은 콘텐츠에 맞춰 더 좁게(마진 최소화) */
.spk-modal .pm-dialog{ max-width:800px; }
.sp-detail{
display:grid;
grid-template-columns:264px 1fr;
gap:28px;
padding:24px 26px 26px;
align-items:start; /* 사진과 텍스트 상단 정렬 */
}
.sp-photo{
width:264px;
min-height:200px;
background:#e6ebf2;
border-radius:6px;
overflow:hidden;
display:flex;
align-items:center;
justify-content:center;
align-self:start;
}
/* 원본 비율 그대로 표시 (600x600 정사각 외 다양한 원본 대응 — 크롭 없음) */
.sp-photo img{ width:100%; height:auto; display:block; }
.sp-photo-ph{
font-family:var(--font-en);
font-size:88px;
font-weight:700;
color:#a8b6c8;
}
.sp-body{ min-width:0; }
.sp-role{
display:inline-block;
font-size:14.3px;
font-weight:700;
color:#1e6bcc;
letter-spacing:-0.01em;
margin-bottom:7px;
}
.sp-name{
font-size:30.8px;
font-weight:800;
color:#0a2540;
letter-spacing:-0.03em;
line-height:1.25;
margin:0 0 4px;
}
.sp-name-en{
font-family:var(--font-en);
font-size:15.4px;
font-weight:500;
color:#7a8aa0;
letter-spacing:-0.005em;
margin:0 0 10px;
}
.sp-affil{
margin:10px 0 14px;
}
/* 소속 / 직책 — 각각 한 줄씩 내려쓰기 */
.sp-affil-line{
display:block;
font-size:16px;
font-weight:700;
color:#1e6bcc;
letter-spacing:-0.018em;
line-height:1.4;
word-break:keep-all;
}
.sp-affil-title{ /* 직책 — 소속보다 약하게 */
font-size:14px;
font-weight:600;
color:#5b6b80;
margin-top:2px;
}
/* CV/약력 — 박스 제거, 일반 텍스트 */
.sp-bio{
padding:0;
background:transparent;
border:none;
border-radius:0;
font-size:15px;
color:#3d4b5c;
line-height:1.7;
letter-spacing:-0.015em;
word-break:keep-all;
}
.sp-works{
margin-top:20px;
padding:18px 22px;
background:#fafbfd;
border-radius:8px;
font-size:13.75px;
color:#3d4b5c;
line-height:1.7;
}
.sp-works h4{
margin:0 0 8px;
font-size:13.75px;
font-weight:700;
color:#0a2540;
letter-spacing:-0.01em;
}
.sp-sns{
display:flex;
gap:10px;
margin-top:18px;
flex-wrap:wrap;
}
.sp-sns a{
padding:6px 14px;
background:#1e6bcc;
color:#fff;
border-radius:50px;
font-size:12.5px;
font-weight:700;
}
/* === 반응형 === */
@media (max-width:768px){
.pm-detail{ padding:24px 20px 28px; }
.pm-title-blue{ font-size:20px; margin-bottom:22px; }
.pm-row{ grid-template-columns:80px 1fr; gap:12px; }
.pm-row-2{ grid-template-columns:1fr; gap:14px; } /* 일시·장소 세로 스택 */
.pm-cell{ grid-template-columns:80px 1fr; }
.pm-row-lbl{ font-size:12px; padding:6px 0; }
.pm-row-val{ font-size:13.5px; padding-top:3px; }
.pm-detail .pm-spk-list{ grid-template-columns:1fr; } /* 연사 카드 1열 */
.pm-detail .pm-spk-body{ padding:20px 22px 22px; }
.pm-detail .pm-spk-photo{ width:128px; height:128px; margin:2px 0 16px; }
.pm-detail .pm-spk-photo span{ font-size:46px; }
.pm-detail .pm-spk-name{ font-size:19px; }
.pm-detail .pm-spk-name-en{ font-size:13px; }
.pm-detail .pm-spk-org{ font-size:14px; }
.pm-detail .pm-spk-title{ font-size:13px; }
.sp-detail{ grid-template-columns:1fr; gap:16px; padding:20px 18px 22px; }
.sp-photo{ width:100%; max-width:220px; height:auto; margin:0 auto; }
.sp-name{ font-size:22px; }
.sp-bio{ padding:0; font-size:13.5px; line-height:1.7; }
}
/* ==========================================================================
PROGRAM MODAL — 발표자료 다운로드 리스트
========================================================================== */
.pm-files{
margin-top:28px;
padding-top:24px;
border-top:1px solid #e6ebf2;
}
.pm-files-h{
font-size:17.6px;
font-weight:800;
color:#0a2540;
letter-spacing:-0.025em;
margin:0 0 14px;
}
.pm-file-list{
list-style:none;
padding:0;
margin:0;
display:flex;
flex-direction:column;
gap:8px;
}
.pm-file{
display:grid;
grid-template-columns:54px 1fr auto;
gap:14px;
align-items:center;
padding:12px 16px;
background:#fff;
border:1px solid #e6ebf2;
border-radius:10px;
transition:all .15s ease;
}
.pm-file:hover{ border-color:#1e6bcc; box-shadow:0 4px 12px rgba(30,107,204,0.08); }
.pm-file-icon{
display:inline-flex;
align-items:center;
justify-content:center;
width:48px;
height:48px;
border-radius:6px;
font-family:var(--font-en);
font-weight:800;
font-size:11px;
color:#fff;
letter-spacing:-0.02em;
background:#7a8aa0;
}
.pm-fi-pdf{ background:#d33; }
.pm-fi-ppt{ background:#d96425; }
.pm-fi-doc{ background:#1e6bcc; }
.pm-fi-xls{ background:#1d8348; }
.pm-fi-image{ background:#7a4eb3; }
.pm-fi-video{ background:#0a2540; }
.pm-fi-zip{ background:#856404; }
.pm-fi-other{ background:#7a8aa0; }
.pm-file-meta{ min-width:0; }
.pm-file-meta strong{
display:block;
font-size:14.3px;
font-weight:700;
color:#0a2540;
letter-spacing:-0.015em;
margin-bottom:3px;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
.pm-file-meta small{
font-size:11.5px;
color:#7a8aa0;
font-family:var(--font-en);
}
.pm-file-btn{
padding:8px 16px;
background:#1e6bcc;
color:#fff;
border-radius:6px;
font-size:13px;
font-weight:700;
letter-spacing:-0.01em;
white-space:nowrap;
}
.pm-file-btn:hover{ background:#1859ad; color:#fff; }
@media (max-width:640px){
.pm-file{ grid-template-columns:42px 1fr auto; gap:10px; padding:10px 12px; }
.pm-file-icon{ width:38px; height:38px; font-size:10px; }
.pm-file-meta strong{ font-size:13px; }
.pm-file-btn{ padding:6px 12px; font-size:12px; }
}
/* ===== 게시판 / 갤러리 / 언론보도 (사용자) ===== */
.bd-empty{ text-align:center; padding:60px 0; color:#7a8aa0; font-size:15px; }
.bd-back{ display:inline-block; padding:11px 26px; border:1px solid var(--c-border); border-radius:8px; color:var(--c-navy-800,#0a2540); font-weight:600; }
.bd-back:hover{ background:#f4f7fb; }
/* 갤러리 그리드 */
.bd-gallery{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.bd-gcard a{ display:block; border:1px solid var(--c-border); border-radius:12px; overflow:hidden; background:#fff; transition:box-shadow .2s, transform .2s; }
.bd-gcard a:hover{ box-shadow:0 12px 30px rgba(10,37,64,.12); transform:translateY(-3px); }
.bd-gthumb{ position:relative; aspect-ratio:4/3; background:#eef2f7 center/cover no-repeat; display:flex; align-items:center; justify-content:center; }
.bd-gcount{ position:absolute; right:10px; bottom:10px; background:rgba(10,37,64,.78); color:#fff; font-size:12px; font-weight:600; padding:3px 9px; border-radius:999px; }
.bd-gnoimg{ color:#a9b6c6; font-size:13px; }
.bd-ginfo{ padding:14px 16px 16px; }
.bd-gtitle{ display:block; font-size:15.5px; font-weight:700; color:var(--c-navy-800,#0a2540); line-height:1.45; }
.bd-gdate{ display:block; margin-top:6px; font-size:13px; color:#7a8aa0; }
/* 언론보도 목록 */
.bd-press{ list-style:none; margin:0; padding:0; border-top:2px solid var(--c-navy-800,#0a2540); }
.bd-pitem{ border-bottom:1px solid var(--c-border); }
.bd-plink{ display:flex; align-items:center; gap:18px; padding:18px 6px; }
.bd-plink:hover{ background:#f7faff; }
.bd-pthumb{ flex:0 0 110px; width:110px; height:72px; border-radius:8px; background:#eef2f7 center/cover no-repeat; border:1px solid var(--c-border); }
.bd-pbody{ flex:1; min-width:0; }
.bd-ptitle{ display:block; font-size:16.5px; font-weight:700; color:var(--c-navy-800,#0a2540); line-height:1.5; }
.bd-pext{ font-style:normal; color:#1e6bcc; font-size:14px; }
.bd-pmeta{ display:block; margin-top:6px; font-size:13.5px; color:#7a8aa0; }
.bd-psrc{ color:#1e6bcc; font-weight:600; }
/* ===== 언론보도 개편 (드롭다운 + 검색 + 인덱스/썸네일 목록 + 페이지네이션) ===== */
.bd-mwrap{ position:relative; border-top:2px solid var(--c-navy-800,#0a2540); padding-top:22px; }
/* [1] 컨트롤 바 (연도 드롭다운 + 검색) */
.bd-mctrl{ display:flex; align-items:center; justify-content:center; gap:12px; flex-wrap:wrap; margin-bottom:18px; }
.bd-mselect{ position:relative; }
.bd-msel{ -webkit-appearance:none; appearance:none; height:46px; padding:0 42px 0 18px; border:1px solid var(--c-border); border-radius:10px; background:#fff; font-size:15px; font-weight:700; color:var(--c-navy-800,#0a2540); cursor:pointer; min-width:160px; }
.bd-msel:focus{ outline:none; border-color:#1e6bcc; box-shadow:0 0 0 3px rgba(30,107,204,.12); }
.bd-msel-ico{ position:absolute; right:16px; top:50%; transform:translateY(-50%); pointer-events:none; color:#7a8aa0; font-size:13px; }
.bd-msearch{ display:flex; align-items:stretch; gap:0; max-width:420px; flex:1 1 320px; }
.bd-msearch-input{ flex:1; min-width:0; height:46px; padding:0 16px; border:1px solid var(--c-border); border-right:0; border-radius:10px 0 0 10px; font-size:15px; color:var(--c-navy-800,#0a2540); }
.bd-msearch-input:focus{ outline:none; border-color:#1e6bcc; box-shadow:0 0 0 3px rgba(30,107,204,.12); position:relative; z-index:1; }
.bd-msearch-input::placeholder{ color:#9aa6b6; }
.bd-msearch-btn{ flex:0 0 auto; height:46px; padding:0 22px; border:0; border-radius:0 10px 10px 0; background:var(--c-navy-800,#0a2540); color:#fff; font-size:14.5px; font-weight:700; cursor:pointer; transition:background .15s; }
.bd-msearch-btn:hover{ background:#1e6bcc; }
/* [2] 목록 — 인덱스# · 썸네일 · 제목/날짜 */
.bd-mlist{ list-style:none; margin:0; padding:0; border-top:1px solid var(--c-border); }
.bd-mitem{ border-bottom:1px solid var(--c-border); }
.bd-mlink{ display:grid; grid-template-columns:58px 1fr; align-items:center; gap:22px; padding:18px 10px; transition:background .15s; }
.bd-mlink:hover{ background:#f7faff; }
.bd-mno{ text-align:center; font-family:var(--font-en,inherit); font-size:18px; font-weight:800; color:#b9c4d2; font-variant-numeric:tabular-nums; }
.bd-mbody{ min-width:0; }
.bd-mtitle{ display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; font-size:17.5px; font-weight:700; color:var(--c-navy-800,#0a2540); line-height:1.5; }
.bd-mlink:hover .bd-mtitle{ color:#1e6bcc; }
.bd-mmeta{ display:flex; align-items:center; flex-wrap:wrap; gap:7px; margin-top:9px; font-size:13.5px; color:#7a8aa0; }
.bd-msrc{ color:#1e6bcc; font-weight:600; }
.bd-mdot{ color:#c5cedb; }
.bd-mdate{ font-family:var(--font-en,inherit); }
.bd-mempty{ text-align:center; padding:54px 0; color:#7a8aa0; font-size:15px; }
/* [3] 페이지네이션 */
.bd-mpager{ display:flex; flex-wrap:wrap; justify-content:center; gap:6px; margin:34px 0 6px; }
.bd-mpg{ min-width:40px; height:40px; padding:0 12px; border:1px solid var(--c-border); background:#fff; border-radius:8px; font-size:14px; font-weight:700; color:var(--c-navy-800,#0a2540); cursor:pointer; transition:background .15s, color .15s, border-color .15s; font-variant-numeric:tabular-nums; }
.bd-mpg:hover:not(:disabled){ background:#eef4fd; border-color:#bcd2ee; }
.bd-mpg.on{ background:var(--c-navy-800,#0a2540); color:#fff; border-color:var(--c-navy-800,#0a2540); }
.bd-mpg.nav{ color:#56657c; font-weight:800; }
.bd-mpg:disabled{ opacity:.38; cursor:default; }
@media (max-width:768px){
.bd-mctrl{ justify-content:stretch; }
.bd-mselect{ flex:0 0 auto; }
.bd-msel{ width:100%; min-width:140px; }
.bd-msearch{ flex:1 1 100%; max-width:none; }
.bd-mlink{ grid-template-columns:40px 1fr; gap:14px; }
.bd-mtitle{ font-size:16px; }
}
@media (max-width:480px){
.bd-mlink{ grid-template-columns:1fr; gap:13px; padding:16px 4px; }
.bd-mno{ display:none; }
.bd-mtitle{ font-size:15.5px; }
.bd-mpg{ min-width:36px; height:36px; padding:0 9px; font-size:13px; }
}
/* 상세 보기 */
.bd-view{ border-top:2px solid var(--c-navy-800,#0a2540); padding-top:26px; }
.bd-vhead{ padding-bottom:20px; margin-bottom:24px; border-bottom:1px solid var(--c-border); }
.bd-vtitle{ font-size:26px; font-weight:800; color:var(--c-navy-800,#0a2540); line-height:1.4; letter-spacing:-0.02em; }
.bd-vmeta{ margin-top:12px; font-size:14px; color:#7a8aa0; display:flex; flex-wrap:wrap; gap:6px; }
.bd-vbody{ font-size:16px; line-height:1.85; color:#33425a; margin-bottom:28px; }
.bd-vbody img{ max-width:100% !important; height:auto !important; display:block; margin:0 auto; } /* 에디터 고정 px 무시하고 반응형 */
.bd-vbody p{ margin:0 0 14px; }
.bd-vbody table{ max-width:100%; }
.bd-vgallery{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-bottom:28px; }
.bd-vimg img{ width:100%; height:auto; display:block; border-radius:10px; border:1px solid var(--c-border); }
.bd-vlinks{ background:#f4f7fb; border:1px solid var(--c-border); border-radius:10px; padding:18px 22px; }
.bd-vlinks h3{ margin:0 0 10px; font-size:15px; font-weight:800; color:var(--c-navy-800,#0a2540); }
.bd-vlinks ul{ margin:0; padding:0 0 0 2px; list-style:none; display:flex; flex-direction:column; gap:8px; }
.bd-vlinks a{ color:#1e6bcc; font-size:14.5px; word-break:break-all; }
.bd-vlinks a:hover{ text-decoration:underline; }
/* 이전/다음 글 이동 */
.bd-vnav{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:30px; }
.bd-vnav-item{ display:flex; flex-direction:column; gap:5px; min-width:0; padding:14px 18px; border:1px solid var(--c-border); border-radius:12px; background:#fff; text-decoration:none; transition:border-color .15s, box-shadow .15s, transform .15s; }
.bd-vnav-item.next{ text-align:right; }
a.bd-vnav-item:hover{ border-color:var(--c-navy-800,#0a2540); box-shadow:0 4px 14px rgba(10,37,64,.10); transform:translateY(-1px); }
.bd-vnav-dir{ font-size:13px; font-weight:800; color:var(--c-navy-800,#0a2540); letter-spacing:.01em; }
.bd-vnav-tit{ font-size:14.5px; color:#33425a; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bd-vnav-item.is-off{ background:#f7faff; border-style:dashed; cursor:default; }
.bd-vnav-item.is-off .bd-vnav-dir{ color:#aab6c8; }
.bd-vnav-item.is-off .bd-vnav-tit{ color:#cdd6e2; }
@media (max-width:768px){
.bd-gallery{ grid-template-columns:repeat(2,1fr); gap:14px; }
.bd-vgallery{ grid-template-columns:1fr; }
.bd-pthumb{ flex-basis:84px; width:84px; height:60px; }
.bd-vtitle{ font-size:21px; }
}
@media (max-width:560px){
.bd-vnav{ grid-template-columns:1fr; }
.bd-vnav-item.next{ text-align:left; }
}
@media (max-width:480px){ .bd-gallery{ grid-template-columns:1fr 1fr; } }
/* 공지사항 목록 (테이블형) */
.bd-notice{ list-style:none; margin:0; padding:0; border-top:2px solid var(--c-navy-800,#0a2540); }
.bd-notice-head{ margin-bottom:0; }
.bd-notice-body{ border-top:0; } /* 헤더와 본문 분리 시 상단 보더 중복 제거 */
.bd-notice li{ display:grid; grid-template-columns:70px 1fr 120px 110px; align-items:center; gap:10px; padding:15px 12px; border-bottom:1px solid var(--c-border); }
.bd-nhead{ font-size:13.5px; font-weight:700; color:#7a8aa0; background:#f7faff; }
.bd-nitem:hover{ background:#f7faff; }
.bd-nno{ text-align:center; color:#9aa6b6; font-size:14px; }
.bd-ntitle{ font-size:16px; font-weight:600; color:var(--c-navy-800,#0a2540); line-height:1.5; }
a.bd-ntitle:hover{ color:#1e6bcc; }
.bd-nwriter,.bd-ndate,.bd-nhit{ text-align:center; font-size:13.5px; color:#7a8aa0; }
@media (max-width:768px){
.bd-notice li{ grid-template-columns:1fr 80px; gap:4px 10px; }
.bd-nhead, .bd-nno, .bd-nwriter, .bd-nhit{ display:none; }
.bd-ntitle{ grid-column:1; font-size:15px; }
.bd-ndate{ grid-column:2; text-align:right; }
}
/* VOD 그리드 + 임베드 */
.bd-vod{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.bd-vcard a{ display:block; }
.bd-vthumb{ position:relative; aspect-ratio:16/9; background:#1a2330 center/cover no-repeat; border-radius:10px; overflow:hidden; display:flex; align-items:center; justify-content:center; }
.bd-vplay{ width:54px; height:54px; border-radius:50%; background:rgba(0,0,0,.55); color:#fff; display:flex; align-items:center; justify-content:center; font-size:18px; padding-left:3px; transition:background .2s; }
.bd-vcard a:hover .bd-vplay{ background:#e0245e; }
.bd-vtitle2{ display:block; margin:12px 0 4px; font-size:15.5px; font-weight:700; color:var(--c-navy-800,#0a2540); line-height:1.45; }
.bd-vdate2{ display:block; font-size:13px; color:#7a8aa0; }
.bd-vvideo{ position:relative; width:100%; padding-bottom:56.25%; height:0; overflow:hidden; border-radius:12px; background:#000; margin-bottom:26px; }
.bd-vvideo iframe{ position:absolute; top:0; left:0; width:100%; height:100%; border:0; }
@media (max-width:768px){ .bd-vod{ grid-template-columns:repeat(2,1fr); gap:14px; } }
@media (max-width:480px){ .bd-vod{ grid-template-columns:1fr; } }
/* 자주묻는질문(FAQ) 아코디언 */
.faq-list{ border-top:2px solid var(--c-navy-800,#0a2540); }
.faq-item{ border-bottom:1px solid var(--c-border); }
.faq-q{ list-style:none; cursor:pointer; display:flex; align-items:center; gap:14px; padding:20px 8px; font-size:16.5px; font-weight:700; color:var(--c-navy-800,#0a2540); transition:color .15s; }
.faq-q::-webkit-details-marker{ display:none; }
.faq-q:hover{ color:#1e6bcc; }
.faq-qmark{ flex:0 0 32px; width:32px; height:32px; border-radius:50%; background:var(--c-navy-800,#0a2540); color:#fff; display:flex; align-items:center; justify-content:center; font-size:15px; font-weight:800; }
.faq-qtext{ flex:1; line-height:1.5; }
.faq-arrow{ flex:0 0 auto; font-size:22px; color:#9aa6b6; transition:transform .2s; }
.faq-item[open] .faq-arrow{ transform:rotate(180deg); }
.faq-a{ padding:4px 8px 24px 54px; font-size:15.5px; line-height:1.85; color:#33425a; }
.faq-a img{ max-width:100% !important; height:auto !important; }
.faq-a p{ margin:0 0 12px; }
@media (max-width:560px){
.faq-q{ font-size:15px; gap:10px; padding:16px 4px; }
.faq-qmark{ flex-basis:28px; width:28px; height:28px; font-size:13px; }
.faq-a{ padding-left:38px; }
}
/* ===== FAQ 미리보기(비공개 URL) 안내 배너 ===== */
.faq-preview-flag{
margin:0 0 22px;
padding:13px 18px;
background:#fff7e6;
border:1px solid #ffd98a;
border-radius:10px;
font-size:13.5px; line-height:1.6; color:#8a5a00;
}
.faq-preview-flag strong{
display:inline-block; margin-right:8px;
padding:2px 9px; border-radius:6px;
background:#f4a900; color:#fff; font-size:11.5px; font-weight:800; letter-spacing:0.03em;
}
/* ===== Coming Soon (콘텐츠 준비 중) ===== */
.coming-soon{
max-width:620px;
margin:34px auto 14px;
padding:58px 38px 52px;
text-align:center;
background:#fff;
border:1px solid #e6ebf2;
border-radius:18px;
box-shadow:0 12px 34px rgba(10,37,64,0.06);
}
.cs-badge{
display:inline-block;
padding:5px 15px; margin-bottom:24px;
background:#eaf7ef; color:#1f9d57;
font-family:var(--font-en); font-size:11.5px; font-weight:800; letter-spacing:0.16em;
border-radius:999px;
}
.cs-ic{ width:64px; height:64px; margin:0 auto 22px; color:var(--c-green-500,#34b56a); display:block; }
.cs-title{ font-size:24px; font-weight:800; letter-spacing:-0.02em; color:var(--c-navy-800,#15233b); margin:0 0 12px; }
.cs-desc{ font-size:15px; line-height:1.75; color:var(--c-gray-500,#6b7787); margin:0 auto 28px; max-width:440px; }
.cs-actions{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
.cs-btn{
display:inline-flex; align-items:center; gap:7px;
padding:11px 22px; border-radius:10px;
font-size:14px; font-weight:700; letter-spacing:-0.01em; text-decoration:none;
transition:filter .15s, background .15s, box-shadow .15s;
}
.cs-btn--primary{ background:var(--c-green-500,#34b56a); color:#fff; }
.cs-btn--primary:hover{ filter:brightness(1.05); box-shadow:0 6px 16px rgba(52,181,106,0.3); }
.cs-btn--ghost{ background:#f2f5f9; color:var(--c-navy-800,#15233b); }
.cs-btn--ghost:hover{ background:#e7ecf3; }
@media (max-width:560px){
.coming-soon{ padding:44px 22px 40px; }
.cs-title{ font-size:20px; }
.cs-desc{ font-size:14px; }
}
/* 연도 필터 탭 (단독 게시판 페이지) */
.bd-yeartabs{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:26px; padding-bottom:18px; border-bottom:1px solid var(--c-border); }
.bd-ytab{ padding:9px 20px; border:1px solid var(--c-border); background:#fff; border-radius:999px; font-size:14.5px; font-weight:700; color:#56657c; cursor:pointer; transition:all .15s; }
.bd-ytab:hover{ border-color:#bcd2ee; background:#eef4fd; color:var(--c-navy-800,#0a2540); }
.bd-ytab.is-active{ background:var(--c-navy-800,#0a2540); border-color:var(--c-navy-800,#0a2540); color:#fff; }
.bd-ytab em{ font-style:normal; font-weight:600; opacity:.75; font-size:13px; margin-left:2px; }
/* ===== 갤러리/VOD 연도 허브 (대표 영상 + 사진폴더 2x2) ===== */
.vh-year{ margin-bottom:56px; }
.vh-year:last-child{ margin-bottom:0; }
.vh-head{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:22px; padding-bottom:14px; border-bottom:2px solid var(--c-navy-800,#0a2540); }
.vh-title{ font-size:24px; font-weight:800; color:var(--c-navy-800,#0a2540); letter-spacing:-0.01em; }
.vh-title .vh-y{ color:#1e6bcc; }
.vh-viewall{ display:inline-flex; align-items:center; gap:7px; padding:9px 20px; border-radius:999px; background:var(--c-navy-800,#0a2540); color:#fff; font-size:14px; font-weight:700; white-space:nowrap; transition:background .18s, transform .18s; }
.vh-viewall svg{ width:16px; height:16px; }
.vh-viewall:hover{ background:#1e6bcc; transform:translateX(2px); }
.vh-grid{ display:grid; grid-template-columns:1.45fr 1fr; gap:22px; align-items:stretch; }
.vh-year.is-solo .vh-grid{ grid-template-columns:1fr; }
/* 대표 영상 (좌) */
.vh-feat{ display:flex; flex-direction:column; background:#fff; border:1px solid var(--c-border); border-radius:14px; overflow:hidden; transition:box-shadow .2s, transform .2s; }
.vh-feat:hover{ box-shadow:0 16px 38px rgba(10,37,64,.14); transform:translateY(-3px); }
.vh-feat-thumb{ position:relative; flex:1 1 auto; min-height:260px; background:#1a2330 center/cover no-repeat; display:flex; align-items:center; justify-content:center; }
.vh-year.is-solo .vh-feat-thumb{ aspect-ratio:16/9; min-height:0; flex:0 0 auto; }
.vh-play{ width:64px; height:64px; border-radius:50%; background:rgba(0,0,0,.55); color:#fff; display:flex; align-items:center; justify-content:center; font-size:22px; padding-left:4px; transition:background .2s; }
.vh-feat:hover .vh-play{ background:#e0245e; }
.vh-feat-info{ padding:16px 20px 18px; }
.vh-feat-title{ display:block; font-size:18px; font-weight:700; color:var(--c-navy-800,#0a2540); line-height:1.45; }
.vh-feat-date{ display:block; margin-top:7px; font-size:13.5px; color:#7a8aa0; }
/* 사진폴더 2x2 (우) */
.vh-folders{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.vh-folder{ display:flex; flex-direction:column; background:#fff; border:1px solid var(--c-border); border-radius:12px; overflow:hidden; transition:box-shadow .2s, transform .2s; }
.vh-folder:hover{ box-shadow:0 12px 28px rgba(10,37,64,.12); transform:translateY(-3px); }
.vh-folder-thumb{ position:relative; aspect-ratio:4/3; background:#eef2f7 center/cover no-repeat; display:flex; align-items:center; justify-content:center; }
.vh-folder-ico{ position:absolute; left:9px; top:8px; font-size:14px; filter:drop-shadow(0 1px 2px rgba(0,0,0,.45)); }
.vh-noimg{ color:#a9b6c6; font-size:12.5px; }
.vh-folder-title{ display:block; padding:11px 13px 13px; font-size:14px; font-weight:700; color:var(--c-navy-800,#0a2540); line-height:1.4; }
/* hover 시 영상 썸네일·사진폴더가 살짝 어두워지는 효과 */
.vh-feat-thumb::after,
.vh-folder-thumb::after{ content:''; position:absolute; inset:0; background:rgba(8,18,32,0); transition:background .22s ease; pointer-events:none; }
.vh-feat:hover .vh-feat-thumb::after,
.vh-folder:hover .vh-folder-thumb::after{ background:rgba(8,18,32,.30); }
.vh-play{ position:relative; z-index:2; } /* 어두워지는 오버레이 위로 */
.vh-folder-ico{ z-index:2; }
.vh-noimg{ position:relative; z-index:2; }
@media (max-width:880px){
.vh-grid{ grid-template-columns:1fr; }
.vh-feat-thumb{ aspect-ratio:16/9; min-height:0; flex:0 0 auto; }
}
@media (max-width:560px){
.vh-title{ font-size:20px; }
.vh-viewall{ padding:7px 15px; font-size:13px; }
.vh-folders{ gap:12px; }
.vh-feat-title{ font-size:16px; }
}
/* 게시판 페이저 (클라이언트 페이징) */
.bd-pager{ display:flex; flex-wrap:wrap; justify-content:center; gap:6px; margin:32px 0 6px; }
.bd-pager button{ min-width:40px; height:40px; padding:0 11px; border:1px solid var(--c-border); background:#fff; border-radius:8px; font-size:14px; font-weight:600; color:var(--c-navy-800,#0a2540); cursor:pointer; transition:background .15s, color .15s; }
.bd-pager button:hover:not(:disabled){ background:#eef4fd; border-color:#bcd2ee; }
.bd-pager button.on{ background:var(--c-navy-800,#0a2540); color:#fff; border-color:var(--c-navy-800,#0a2540); }
.bd-pager button:disabled{ opacity:.4; cursor:default; }