@charset "utf-8";
/********************************************************
 인천광역시의사회 메인 (index/index-ima.php) 전용 스타일
 - 색은 ima.css 의 변수(--jm-main, --jm-tb-from, --jm-tb-to)를 그대로 씀
********************************************************/
.ima-main {
	--ima-hero-h: 280px;      /* 배너 높이 (사진 원래 높이에 맞춤) */
	--ima-radius: 10px;       /* 상자 모서리 */
	--ima-gap: 16px;          /* 상자 사이 간격 (좌우·위아래 같게) */
	--ima-navy: #12395f;      /* 진한 남색 */
	--ima-bg: #f1f4f8;        /* 메인 바탕색 (흰 상자가 돋보이게 - 아주 연한 푸른 회색) */
	background: var(--ima-bg);
}

/********************************************************
■ 상단 슬라이드 : 사진만 페이드, 글자 카드는 고정
********************************************************/
.ima-hero { position: relative; background: #cfe0f3; overflow: hidden; }
.ima-hero .carousel-item {
	height: var(--ima-hero-h);
	/* 사진을 원래 비율 그대로 높이에 맞추고 가운데 고정 → 화면 크기가 바뀌어도 건물 위치가 같음 */
	background-size: auto 100%; background-position: center center; background-repeat: no-repeat;
}
.ima-hero .carousel-fade .carousel-item { transition-duration: 1.2s; }

/* 점 표시 : 오른쪽 아래 */
.ima-hero-dots { left: auto; right: 2rem; bottom: 18px; margin: 0; justify-content: flex-end; z-index: 4; }
.ima-hero-dots li { width: 10px; height: 10px; border-radius: 50%; border: 0; margin: 0 4px; opacity: .55; }
.ima-hero-dots li.active { opacity: 1; width: 26px; border-radius: 5px; }

/* 고정 글자 카드 */
.ima-hero-over { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 3; pointer-events: none; }
.ima-hero-over .nt-container { display: flex; align-items: center; }
.ima-hero-card {
	position: relative; pointer-events: auto;
	max-width: 470px; padding: 20px 28px 20px 32px;
	background: rgba(14, 45, 80, .78);
	-webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
	border-radius: 0 var(--ima-radius) var(--ima-radius) 0;
	color: #fff; box-shadow: 0 12px 30px rgba(10, 30, 55, .25);
}
.ima-hero-card::before {   /* 왼쪽 색 막대 */
	content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px;
	background: linear-gradient(to bottom, var(--jm-tb-to), var(--jm-tb-from));
}
.ima-hero-card p { margin: 0; }
.ima-hero-en    { font-size: 11px; letter-spacing: 3.5px; color: #9fd4f2; }
.ima-hero-title { margin: .25rem 0 0; font-size: 31px; font-weight: 300; letter-spacing: -1.5px; line-height: 1.25; color: #fff; }
.ima-hero-title b { font-weight: 800; }
.ima-hero-sub   { margin-top: .25rem !important; font-size: 17px; letter-spacing: -.5px; color: rgba(255,255,255,.9); }
.ima-hero-sub strong { color: #7fd0ff; font-weight: 700; }

/* 버튼 2개 */
.ima-hero-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 1rem; }
.ima-hbtn {
	display: inline-flex; align-items: center; height: 42px; padding: 0 1.15rem;
	border-radius: 21px; font-size: 15px; font-weight: 700; letter-spacing: -.5px;
	transition: transform .2s, box-shadow .2s, background .2s;
}
.ima-hbtn i { margin-right: .5rem; font-size: 16px; }
.ima-hbtn:hover { text-decoration: none; transform: translateY(-2px); box-shadow: 0 8px 18px rgba(0,0,0,.25); }
.ima-hbtn.is-main { background: linear-gradient(135deg, #3fb2e4, var(--jm-main)); color: #fff !important; }
.ima-hbtn.is-sub  { background: #fff; color: var(--ima-navy) !important; }
.ima-hbtn.is-sub i { color: var(--jm-main); }
.ima-hbtn.is-sub i.fa-youtube-play { color: #e03131; }
.ima-hero-note { margin-top: .55rem !important; font-size: 12px; color: #ffd8a8; }

/* 처음 열 때 한 번만 올라오는 효과 */
.ima-hero-card { animation: imaUp .8s ease both; }
@keyframes imaUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/********************************************************
■ 구역 공통
********************************************************/
.ima-sec { padding: 2rem 0 0; }

/* 메인 전용 칸 간격 : 부트스트랩 기본(30px) 대신 --ima-gap 으로 (다른 페이지는 그대로) */
.ima-row { margin-left: calc(var(--ima-gap) / -2); margin-right: calc(var(--ima-gap) / -2); }
.ima-row > [class*="col-"] { padding-left: calc(var(--ima-gap) / 2); padding-right: calc(var(--ima-gap) / 2); }

.ima-box {
	margin-bottom: var(--ima-gap); padding: 1.25rem 1.4rem 1rem;
	background: #fff; border: 1px solid #e6e9ee; border-radius: var(--ima-radius);
}
.ima-box .ima-box-title a { color: #222; }
.ima-box .ima-box-title a:hover { color: var(--jm-main); text-decoration: none; }
.ima-box hr.hr::after { background-color: var(--jm-main); }
.ima-empty { margin: 1.25rem 0; text-align: center; color: #999; }

.ima-more { font-size: 13px; font-weight: 700; letter-spacing: .5px; color: #555 !important; white-space: nowrap; }
.ima-more i { margin-left: .35rem; color: var(--jm-main); transition: transform .2s; }
.ima-more:hover { text-decoration: none; color: var(--jm-main) !important; }
.ima-more:hover i { transform: translateX(3px); }

/* 탭 : 둥근 알약 모양 */
.ima-tab-head { padding-bottom: .9rem; border-bottom: 1px solid #eceff3; }
.ima-tabs { flex-wrap: nowrap; overflow-x: auto; gap: 6px; }
.ima-tabs .nav-link {
	padding: .45rem 1.05rem; white-space: nowrap; border-radius: 20px;
	background: #f1f4f8; color: #555; font-size: 15px; font-weight: 500; letter-spacing: -.5px;
	transition: background .2s, color .2s;
}
.ima-tabs .nav-link:hover { color: var(--jm-main); }
.ima-tabs .nav-link.active { background: var(--ima-navy); color: #fff; font-weight: 700; }
.ima-tab-box { min-height: 0; }
/* 탭 글 : 줄 높이 고정 + 설정 개수만큼 최소 높이 (글이 적은 탭도 상자 높이가 같게) */
.ima-tab-box .ima-list li { height: 42px; padding-top: 0; padding-bottom: 0; }
.ima-tab-box .tab-content { min-height: calc(var(--ima-tab-rows, 4) * 42px + .35rem); }

/* 오른쪽 칸 : PC 에서 아래 상자가 남은 높이를 채움 */
@media (min-width: 992px) {
	.ima-right { display: flex; flex-direction: column; }
	.ima-right > .ima-fill { flex-grow: 1; }
}
.jm-login { padding: 1.1rem 1.25rem; }

/* 비회원 슬라이드 : 글(큰 제목 → 제목 → 설명) 위 + 사진 아래, 페이드 */
.ima-guest { overflow: hidden; }
.ima-guest .carousel { height: 100%; }
.ima-guest .carousel-fade .carousel-item { transition-duration: .9s; }
.ima-gs { display: flex; flex-direction: column; height: 100%; background: #fff; }
.ima-gs-tx { flex: 0 0 auto; padding: 1.25rem 1.4rem 1.1rem; }
.ima-gs-head {
	margin: 0 0 .9rem; padding-bottom: .8rem; border-bottom: 1px solid #eceff3;
	font-size: 19px; font-weight: 800; letter-spacing: -.5px; color: #1d2733;
}
.ima-gs-title { margin: 0 0 .45rem; font-size: 17px; font-weight: 700; letter-spacing: -.5px; color: var(--ima-navy); }
.ima-gs-desc { margin: 0; font-size: 14.5px; line-height: 1.6; color: #666; word-break: keep-all; }
.ima-gs-ph { position: relative; flex: 0 0 auto; padding-top: 66.6%; overflow: hidden; background: #e9eef4; }
.ima-gs-ph img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; }

/* 점 : 사진 위 오른쪽 아래 (흰색) */
.ima-gs-dots { left: auto; right: 1rem; bottom: .8rem; margin: 0; justify-content: flex-end; }
.ima-gs-dots li { width: 8px; height: 8px; margin: 0 0 0 6px; border: 0; border-radius: 50%; background: rgba(255,255,255,.6); opacity: 1; box-shadow: 0 0 3px rgba(0,0,0,.3); transition: width .3s, background .3s; }
.ima-gs-dots li.active { width: 22px; border-radius: 4px; background: #fff; }

/* PC : 오른쪽 칸 높이에 맞춤 - 남는 높이는 사진이 채움 (원본보다 커지지 않는 범위) */
@media (min-width: 992px) {
	.ima-guest { display: flex; flex-direction: column; min-height: 440px; }
	.ima-guest .carousel { flex: 1 1 auto; display: flex; flex-direction: column; }
	.ima-guest .carousel-inner { flex: 1 1 auto; }
	.ima-guest .carousel-item { position: absolute; left: 0; top: 0; right: 0; bottom: 0; float: none; margin: 0; }
	.ima-gs-ph { flex: 1 1 auto; padding-top: 0; min-height: 200px; }
}

/* 오른쪽 링크 카드 (봉사회 / 자가진단 / 찾아오시는 길) */
.ima-link-card {
	display: flex; align-items: center; margin-bottom: var(--ima-gap); padding: .9rem 1.1rem;
	background: linear-gradient(135deg, var(--jm-tb-from), var(--jm-tb-to));
	border-radius: var(--ima-radius); color: #fff !important;
	box-shadow: 0 6px 16px rgba(18, 57, 95, .15); transition: transform .2s;
}
.ima-link-card:hover { text-decoration: none; transform: translateY(-2px); }
.ima-link-card > i:first-child {
	flex-shrink: 0; width: 44px; height: 44px; line-height: 44px; margin-right: .85rem;
	border-radius: 50%; text-align: center; font-size: 20px; background: rgba(255,255,255,.2);
}
.ima-link-txt { flex-grow: 1; min-width: 0; line-height: 1.3; }
.ima-link-txt b { display: block; font-size: 16px; letter-spacing: -.5px; }
.ima-link-txt small { display: block; margin-top: 2px; font-size: 12px; opacity: .85; }
.ima-link-go { font-size: 22px; opacity: .8; }

/* 흰색 카드 (is-light) : 파란 카드와 번갈아 쓸 때 */
.ima-link-card.is-light { background: #fff; border: 1px solid #d9e6f3; color: #1d2733 !important; box-shadow: 0 2px 8px rgba(18, 57, 95, .06); }
.ima-link-card.is-light > i:first-child { background: #e8f3fb; color: var(--jm-main); }
.ima-link-card.is-light .ima-link-txt small { color: #777; opacity: 1; }
.ima-link-card.is-light .ima-link-go { color: var(--jm-main); }
.ima-link-card.is-light:hover { border-color: var(--jm-main); }

/* 탭 글 목록 */
.ima-list { margin: 0; padding: .35rem 0 0; list-style: none; }
.ima-list li { display: flex; align-items: center; padding: .48rem .25rem; border-bottom: 1px dashed #e6e9ee; }
.ima-list li:last-child { border-bottom: 0; }
.ima-list li > a { display: flex; align-items: center; flex: 1 1 auto; min-width: 0; color: #333; font-size: 15.5px; }
.ima-list li > a::before { content: ""; flex-shrink: 0; width: 5px; height: 5px; margin-right: .7rem; border-radius: 50%; background: var(--jm-main); }
.ima-list li > a:hover { color: var(--jm-main); text-decoration: none; }
.ima-list-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ima-new {
	flex-shrink: 0; margin-left: .4rem; width: 16px; height: 16px; line-height: 16px; border-radius: 3px;
	background: #e8590c; color: #fff; font-size: 10px; font-weight: 700; text-align: center;
}
.ima-list-date { flex-shrink: 0; margin-left: 1rem; color: #999; font-size: 14px; }

/* 오른쪽 최근게시물 : 좁은 칸용 글자 크기 + PC 에서 줄 간격을 상자 높이에 맞춰 고르게 */
.ima-recent-box .ima-list li > a { font-size: 14.5px; }
.ima-recent-box .ima-list li > a::before { width: 4px; height: 4px; margin-right: .5rem; }
.ima-recent-box .ima-list-date { margin-left: .5rem; font-size: 13px; }
@media (min-width: 992px) {
	.ima-recent-box { display: flex; flex-direction: column; }
	.ima-list-fill { flex-grow: 1; display: flex; flex-direction: column; justify-content: space-between; }
}

/* 포토뉴스 : 3장, 사진 크게, 제목 + 날짜 */
.ima-photo-head { margin-bottom: 1rem; }
.ima-photo-title { margin: 0; font-size: 19px; font-weight: 800; letter-spacing: -.5px; color: #1d2733; }
.ima-photo { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.ima-photo li { min-width: 0; }   /* 긴 제목 때문에 칸이 넓어지지 않게 */
.ima-photo a { display: block; color: #222 !important; }
.ima-photo a:hover { text-decoration: none; }
.ima-photo-img {
	position: relative; display: block; padding-bottom: 62%; overflow: hidden;
	border-radius: 8px; background: #eef1f5;
}
.ima-photo-img img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.ima-photo-img i { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 36px; color: #c8d0da; }
.ima-photo a:hover .ima-photo-img img { transform: scale(1.05); }
.ima-photo-txt {
	display: block; margin-top: .65rem; font-size: 16px; font-weight: 500; letter-spacing: -.5px;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ima-photo a:hover .ima-photo-txt { color: var(--jm-main); }
.ima-photo-date { display: block; margin-top: .15rem; font-size: 13px; color: #999; }

/********************************************************
■ 월간행사표 : 왼쪽 칸, 3칸 x 2줄 (왼쪽 날짜 + 오른쪽 행사명)
********************************************************/
.ima-sched { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.ima-sched li { min-width: 0; }
.ima-sched a {
	display: flex; height: 100%; min-height: 72px;
	background: #fff; border: 1px solid #e3e9f0; border-radius: 8px; overflow: hidden;
	color: #222 !important; transition: border-color .2s, box-shadow .2s, transform .2s;
}
.ima-sched a:hover { text-decoration: none; border-color: var(--jm-main); box-shadow: 0 6px 16px rgba(18, 57, 95, .12); transform: translateY(-2px); }


/* 날짜 칸 (왼쪽 색 블록) */
.ima-sd {
	flex: 0 0 66px; display: flex; flex-direction: column; align-items: center; justify-content: center;
	padding: .4rem 0; text-align: center; color: #fff;
	background: linear-gradient(135deg, var(--jm-tb-from), var(--jm-tb-to));
}
.ima-sd em { font-style: normal; font-size: 12px; line-height: 1.2; opacity: .9; }
.ima-sd b  { font-size: 24px; font-weight: 800; line-height: 1.1; letter-spacing: -1px; }
.ima-sd i  { font-style: normal; font-size: 12px; line-height: 1.2; opacity: .9; }
.ima-sched li.is-sat .ima-sd { background: linear-gradient(135deg, #1b4fb3, #3d7ef0); }
.ima-sched li.is-sun .ima-sd { background: linear-gradient(135deg, #c92a2a, #f06565); }
.ima-sched li.is-today a { border-color: #f3a5c0; }

/* 행사명 칸 */
.ima-sched-txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; justify-content: center; padding: .5rem .8rem; }
.ima-st {
	font-size: 15px; font-weight: 500; letter-spacing: -.5px; line-height: 1.35;
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* [ima] 월간행사표 빈 칸 : 일정이 6개보다 적을 때 (index-ima.php) */
.ima-sched li.is-blank a { background: #f8fafc; border-style: dashed; box-shadow: none; }
.ima-sched li.is-blank .ima-sd { background: #e9eef5; color: #8a97a8; }
.ima-sched li.is-blank .ima-st { color: #6b7a90; }
.ima-sched li.is-blank:not(.is-first) a { pointer-events: none; }
.ima-sched li.is-blank.is-first .ima-sd { background: linear-gradient(135deg, #5b7290, #7f93ad); color: #fff; }
.ima-sched li.is-blank.is-first a:hover { background: #fff; border-style: solid; }
.ima-sched li.is-blank.is-first a:hover .ima-sd { background: linear-gradient(135deg, #17365f, #1f5fa8); }

.ima-su { margin-top: .15rem; font-size: 12px; color: #888; }
.ima-sd-badge {
	align-self: flex-start; margin-bottom: .2rem; padding: 0 7px; border-radius: 9px;
	background: #fff0f6; color: #d6336c; font-size: 11px; font-weight: 700; line-height: 18px;
}
.ima-sched li.is-ing .ima-sd-badge { background: #ebfbee; color: #2b8a3e; }
.ima-sched a:hover .ima-st { color: var(--jm-main); }

/********************************************************
■ 구역 2 : 하단 배너 (155 x 74)
 - 화면 폭에 따라 한 줄 개수(--bnr-n)를 정하고 그 개수로 폭 100% 를 채움
 - 배너가 한 줄 개수보다 많으면 한 칸씩 자동으로 넘김, 좌우 버튼은 마우스를 올리면 나타남
********************************************************/
.ima-bnr-sec { padding: 0 0 2rem; }
.ima-bnr {
	--bnr-n: 2;                /* 575px 이하 */
	position: relative; padding: 12px 7px;
	background: #fff; border: 1px solid #e6e9ee; border-radius: var(--ima-radius);
}
@media (min-width: 576px)  { .ima-bnr { --bnr-n: 3; } }
@media (min-width: 768px)  { .ima-bnr { --bnr-n: 4; } }
@media (min-width: 992px)  { .ima-bnr { --bnr-n: 6; } }
@media (min-width: 1200px) { .ima-bnr { --bnr-n: 7; } }

.ima-bnr-view { overflow: hidden; }
.ima-bnr-track { display: flex; margin: 0; padding: 0; list-style: none; will-change: transform; }
.ima-bnr-track li { flex: 0 0 calc(100% / var(--bnr-n)); max-width: calc(100% / var(--bnr-n)); min-width: 0; padding: 0 5px; }
.ima-bnr-track a {
	display: flex; align-items: center; justify-content: center; height: 78px; overflow: hidden;
	background: #fff; border: 1px solid #e3e7ec; border-radius: 4px;
	transition: border-color .2s, box-shadow .2s;
}
.ima-bnr-track a:hover { border-color: var(--jm-main); box-shadow: 0 4px 12px rgba(18, 57, 95, .12); }
.ima-bnr-track img { display: block; max-width: 100%; max-height: 74px; width: auto; height: auto; }
.ima-bnr:not(.is-move) .ima-bnr-track { justify-content: center; }

/* 좌우 버튼 : 배너 위에 떠 있고, 넘길 배너가 있을 때 마우스를 올리면 나타남 */
.ima-bnr-btn {
	position: absolute; top: 50%; z-index: 3; display: none; width: 34px; height: 34px; margin-top: -17px; padding: 0;
	border: 0; border-radius: 50%; background: rgba(18, 57, 95, .82); color: #fff; font-size: 20px; line-height: 34px;
	box-shadow: 0 3px 10px rgba(0, 0, 0, .18); cursor: pointer; opacity: 0; transition: opacity .2s, background .2s;
}
.ima-bnr-btn.is-prev { left: 6px; }
.ima-bnr-btn.is-next { right: 6px; }
.ima-bnr-btn:hover { background: var(--jm-main); }
.ima-bnr-btn:focus { outline: none; }
.ima-bnr.is-move .ima-bnr-btn { display: block; }
.ima-bnr.is-move:hover .ima-bnr-btn,
.ima-bnr.is-move .ima-bnr-btn:focus-visible { opacity: 1; }

/* 관리자 : 배너 관리 바로가기 (톱니) */
.ima-bnr-admin {
	position: absolute; right: -8px; top: -8px; width: 24px; height: 24px; border-radius: 50%;
	background: var(--ima-navy); color: #fff !important; font-size: 13px; line-height: 24px; text-align: center;
}

/********************************************************
■ 태블릿 / 모바일
********************************************************/
@media (max-width: 991.98px) {
	.ima-hero-card { max-width: 430px; }
	.ima-hero-title { font-size: 27px; }
	.ima-hero-sub { font-size: 15px; }
	.ima-photo { gap: 10px; }
}
@media (max-width: 575.98px) {
	/* 모바일은 상단 배너를 숨김 (모바일 메인은 따로 구성 예정) */
	.ima-list li > a { font-size: 15px; }
	.ima-photo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ima-photo li:nth-child(3) { display: none; }
	.ima-sec { padding-top: 1.25rem; }
	.ima-box { padding: 1rem .9rem .8rem; }
	.ima-tabs .nav-link { padding: .4rem .8rem; font-size: 14px; }
	.ima-sched { grid-template-columns: minmax(0, 1fr); gap: 8px; }
}