@charset "utf-8";
/* ==========================================================================
   메인 공지 팝업  ─ 가안(에르네_가안) 디자인  (260929)
   --------------------------------------------------------------------------
   위에서부터  이미지 → 제목 탭 → 투명 바(하루동안 보지않기 · 닫기) 순서다.
   탭은 등록된 팝업 수(--hpop-n)만큼 똑같이 나뉘므로 1개든 5개든 그대로 맞는다.

   예전 스와이퍼 방식(style.css)을 대신한다.
     · 자동으로 넘어가지 않는다 ─ 방문자가 읽는 중에 공지가 바뀌지 않는다
     · 스와이퍼 css·js(약 200KB)를 더 내려받지 않는다
   ========================================================================== */

.hpop {
	position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 9999;
	display: flex; align-items: center; justify-content: center;
	padding: 16px;
}
.hpop[hidden] { display: none; }
@media (min-width:640px) { .hpop { padding: 24px; } }

/* 어두운 배경 ─ 눌러서 닫을 수 있게 버튼으로 둔다 */
.hpop_dim {
	position: absolute; top: 0; left: 0; width: 100%; height: 100%;
	margin: 0; padding: 0; border: 0; background: rgba(0,0,0,.5);
	cursor: pointer; -webkit-appearance: none; appearance: none;
}

.hpop_panel { position: relative; width: 585px; max-width: calc(100vw - 32px); }

.hpop_view { position: relative; width: 100%; background: #fff; overflow: hidden; line-height: 0; }
.hpop_slide { display: none; }
.hpop_slide.on { display: block; }
.hpop_slide[hidden] { display: none; }
.hpop_slide > a { display: block; }
.hpop_slide img { display: block; width: 100%; height: auto; max-width: 100%; }

/* 제목 탭 */
.hpop_tabs {
	display: grid;
	grid-template-columns: repeat(var(--hpop-n,1), minmax(0,1fr));
	min-height: 44px; background: #fff;
}
.hpop_tab {
	display: flex; align-items: center; justify-content: center;
	margin: 0; padding: 8px 4px; border: 0; background: #fff;
	color: rgba(0,0,0,.75);
	font-family: inherit; font-size: 11px; font-weight: 400; line-height: 1.25;
	letter-spacing: -.02em; text-align: center; word-break: keep-all;
	cursor: pointer; transition: background-color .2s, color .2s;
	-webkit-appearance: none; appearance: none;
}
.hpop_tab:hover { background: rgba(0,0,0,.035); }
.hpop_tab[aria-selected="true"] { background: #ff6a00; color: #fff; }
.hpop_tab:focus-visible { outline: 2px solid #ff6a00; outline-offset: -2px; }
.hpop_tab[aria-selected="true"]:focus-visible { outline-color: #fff; }
@media (max-width:639px) { .hpop_tab { font-size: 10px; letter-spacing: -.03em; } }

/* 한글은 낱말 단위로 끊고(keep-all), 영문은 낱말이 길면 넘기고,
   중문·일문은 keep-all 을 쓰면 줄바꿈 자리가 아예 없어져 글자가 넘친다. */
.hpop[data-lang="en"] .hpop_tab { word-break: normal; overflow-wrap: break-word; }
.hpop[data-lang="cn"] .hpop_tab,
.hpop[data-lang="jp"] .hpop_tab { word-break: normal; line-break: strict; }

/* 아래 바 ─ 배경이 비쳐 보이므로 흰 글씨 */
.hpop_bar { display: flex; align-items: center; justify-content: space-between; height: 44px; color: #fff; }
.hpop_today {
	display: inline-flex; align-items: center; gap: 8px;
	margin: 0; padding: 0; border: 0; background: none;
	color: rgba(255,255,255,.9);
	font-family: inherit; font-size: 12px; line-height: 1; letter-spacing: -.04em;
	cursor: pointer; transition: color .2s;
}
.hpop_today:hover { color: #fff; }
.hpop_chk { display: block; width: 14px; height: 14px; border: 1px solid rgba(255,255,255,.8); border-radius: 3px; background: transparent; }
.hpop_x {
	display: grid; place-items: center; width: 36px; height: 36px;
	margin: 0; padding: 0; border: 0; background: none;
	color: rgba(255,255,255,.85); cursor: pointer; transition: color .2s;
}
.hpop_x:hover { color: #fff; }
.hpop_x svg { display: block; }
.hpop_today:focus-visible, .hpop_x:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }