*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ── 색상 변수 ── */
:root {
  --color-primary: #e0332a;
  --color-primary-pale: #fef2f2;
  --color-black: #111111;
  --color-gray-dark: #333333;
  --color-gray-mid: #555555;
  --color-gray: #888888;
  --color-gray-light: #aaaaaa;
  --color-gray-pale: #cccccc;
  --color-bg: #F4F4F4;
  --color-bg-hover: #eeeeee;
  --color-bg-body: #f0f0f0;
  --color-white: #ffffff;
  --color-white-85: rgba(255, 255, 255, 0.85);
  --color-divider: #f4f4f4;
  --color-border: #ebebeb;
  --color-dark-gray: #DDDDDD;
  --color-accent-blue: #094E7F;
  --color-accent-blue-pale: #0b78cb12;
  --color-placeholder: #c8d0d8;
  --color-bg-active: #f9f9f9;
  --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 24px rgba(0, 0, 0, 0.12), 0 1px 6px rgba(0, 0, 0, 0.08);
}

/* ── Body ── */
body {
  background-color: var(--color-bg-body);
  font-family: -apple-system, BlinkMacSystemFont, 'Noto Sans KR', 'Segoe UI', sans-serif;
  min-height: 100vh;
}

/* ── 모바일 컨테이너 ── */
.mobile-wrap {
  max-width: 860px;
  min-height: 100vh;
  margin: 0 auto;
  overflow: clip;
  background: var(--color-white);
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-md);
}

/* ── 헤더 ── */
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 60px;
  padding: 10px 20px;
  background: var(--color-white);
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}

.header__logo {
  display: flex;
  align-items: center;
  padding-top: 2px;
}

.header__logo-img {
  height: 32px;
  width: auto;
  display: block;
}

.header__lang {
  /* display: none; */
  margin-left: auto;
  margin-right: 12px;
}

.header.open .header__lang {
  display: block;
}

.lang-select {
  position: relative;
  z-index: 101;
}

.lang-select__trigger {
  display: flex;
  align-items: center;
  gap: 6px;
  background-color: var(--color-white);
  border: 2px solid var(--color-border);
  border-radius: 5px;
  padding: 7px 12px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.lang-select__current {
  font-size: 12px;
  font-weight: 700;
  color: var(--color-gray-dark);
}

.lang-select__arrow {
  transition: transform 0.2s ease;
}

.lang-select.open .lang-select__arrow {
  transform: rotate(180deg);
}

.lang-select__list {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  width: 100%;
  min-width: 60px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 12px; /* Requested border-radius */
  box-shadow: var(--shadow-sm);
  list-style: none;
  padding: 4px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all 0.2s ease;
}

.lang-select.open .lang-select__list {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.lang-select__option {
  padding: 5px 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-gray-dark);
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.2s;
  text-align: center;
}

.lang-select__option:hover {
  background-color: var(--color-bg);
}

.lang-select__option.active {
  color: var(--color-primary);
  background-color: var(--color-primary-pale);
}

.header__menu {
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 38px;
  height: 38px;
}

.header__menu-hamburger,
.header__menu-close {
  position: absolute;
  display: block;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.header__menu-hamburger {
  width: 22px;
  height: 16px;
  opacity: 1;
  transform: rotate(0deg);
}

.header__menu-close {
  width: 20px;
  height: 20px;
  opacity: 0;
  transform: rotate(-90deg);
}

.header__menu.open .header__menu-hamburger {
  opacity: 0;
  transform: rotate(90deg);
}

.header__menu.open .header__menu-close {
  opacity: 1;
  transform: rotate(0deg);
}

/* ── 네비게이션 드로어 ── */
.nav-drawer {
  position: fixed;
  top: 60px;
  left: 50%;
  width: 100%;
  max-width: 860px;
  height: calc(100vh - 60px);
  background: var(--color-white);
  z-index: 99;
  overflow-y: auto;
  transform: translateX(-50%) translateY(-110%);
  transition: transform 0.35s ease;
  padding-bottom: 30px;
}

.nav-drawer.open {
  transform: translateX(-50%) translateY(0);
}

.nav-drawer__user {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 24px 20px;
	background: #f4f4f4;
}

.nav-drawer__user-info {
	flex: 1;
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
}

.nav-drawer__user-clickable {
	display: flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
	width: fit-content;
}

.nav-drawer__username {
	font-size: 20px;
	font-weight: 400;
	color: #1f1f1f;
	line-height: 32px;
	cursor: pointer;
	white-space: nowrap;
}
.nav-drawer__username-nm {
	font-weight: 700;
}

.nav-drawer__badge {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	gap: 2px;
	padding: 2px 8px;
	background: #e7f4fd;
	border: 1px solid rgba(11, 120, 203, 0.50);
	border-radius: 999px;
	color: #094e7f;
	font-size: 12px;
	font-weight: 600;
	line-height: 19.2px;
	flex-shrink: 0;
	margin-top: 0;
}

.nav-drawer__badge-year {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 16px;
	height: 16px;
	background: #094e7f;
	border-radius: 50%;
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	line-height: 1;
	flex-shrink: 0;
}

.nav-drawer__user-arrow {
	display: flex;
	align-items: center;
	line-height: 0;
	flex-shrink: 0;
	cursor: pointer;
}

.nav-drawer__logout {
	flex-shrink: 0;
	padding: 4px 8px;
	background: #ddd;
	border: none;
	border-radius: 4px;
	color: #343434;
	font-size: 14px;
	font-weight: 400;
	line-height: 22.4px;
	cursor: pointer;
}

.nav-drawer__list {
  list-style: none;
}

.nav-drawer__parent {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 16px 15px 16px;
  background-color: transparent;
  background-image: linear-gradient(to right, transparent 16px, var(--color-border) 16px, var(--color-border) calc(100% - 15px), transparent calc(100% - 15px));
  background-position: bottom;
  background-size: 100% 2px;
  background-repeat: no-repeat;
  border: none;
  font-size: 16px;
  font-weight: 700;
  color: var(--color-black);
  cursor: pointer;
  text-align: left;
}

.nav-drawer__arrow {
  flex-shrink: 0;
}

.nav-drawer__children {
  padding-bottom: 5px;
}

.nav-drawer__child {
  display: block;
  padding: 14px 16px 0px 16px;
  font-size: 16px;
  color: var(--color-gray-dark);
  text-decoration: none;
  border-bottom: 1px solid var(--color-border);
}

.nav-drawer__child:last-child {
  border-bottom: none;
}

/* ── 공용 하단 버튼 ── */
.bottom-button {
	display: flex;
	position: sticky;
	align-items: center;
	margin-left: auto;
	margin-top: auto;
	margin-right: 12px;
	bottom: 0;
	gap: 8px;
	flex-direction: column;
	bottom: 8px;
	z-index: 3;
}

.bottom-kakao-btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 4px;

    padding: 0 12px;
    height: 40px;
    margin-top: -70px;

    background: #FEE500;
    border: none;
    border-radius: 999px;

    cursor: pointer;
}

.bottom-kakao-btn__icon {
    width: 15px;
    height: 16px;

    object-fit: contain;
}

.bottom-arrow-btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 10px;

    width: 40px;
    height: 40px;

    background: #094E7F;
    border: none;
    border-radius: 999px;

    cursor: pointer;
}

.bottom-arrow-btn__icon {
    width: 20px;
    height: 20px;

    object-fit: contain;
}

/* ── 푸터 ── */
.footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* justify-content: center; */
  gap: 6px;
  padding: 20px 16px 35px 16px;
  border-top: 1px solid rgba(0, 0, 0, 0.04);
}

.footer__links {
	width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 14px;
  color: var(--color-gray);
}

.footer__links a {
  color: var(--color-gray-mid);
  text-decoration: none;
}

.footer__link--border {
  font-weight: 700;
}

.footer__links span {
  color: var(--color-gray-pale);
}

.footer__text {
  font-size: 13px;
  padding-top: 5px;
  color: var(--color-gray-light);
}

.footer__consult-btn {
	margin-left: auto;

    display: inline-flex;
    align-items: center;
    gap: 4px;

    padding: 0 9px;
    height: 28px;

    background: #FEE500;
    border: none;
    border-radius: 4px;

    cursor: pointer;
}

.footer__consult-btn__icon {
    width: 12px;
    height: 12px;

    object-fit: contain;
}

.footer__consult-btn__text {
    color: #000 !important;
    font-size: 12px;
    font-family: 'Pretendard', sans-serif;
    font-weight: 400;
    line-height: 18px;

    white-space: nowrap;
}

/* ── 공통 ── */
.slider-count {
  font-size: 14px;
  color: var(--color-gray-mid);
}

.slider-count .current {
  font-weight: 700;
  color: var(--color-black);
}

.slider-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--color-black);
  line-height: 1.5;
  margin-bottom: 4px;
}

.slider-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.section-title {
  font-size: 24px;
  font-weight: 700;
  color: var(--color-black);
}

.tag-text {
  font-size: 12px;
  color: var(--color-gray);
  display: block;
}

.btn-circle {
  border: none;
  border-radius: 50%;
  background: var(--color-bg-hover);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 재생(play) 아이콘일 때만 크기 다르게 */
.btn-circle[aria-label="재생"] img {
    width: 14px;
    height: 14px;
}

/* ── 뉴스 슬라이더 ── */
.news-slider {
  display: flex;
  flex-direction: column;
  position: relative;
}

.news-slider__slide {
	transition: opacity 0.4s ease;
	opacity: 1;
}

.news-slider__slide[style*="display: none"] {
	opacity: 0;
}

.news-slider__image {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--color-placeholder);
  overflow: hidden;
}

.news-slider__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.news-slider__image--empty {
	width: 100%;
	height: 100%;
	background: #f4f4f4;
	display: flex;
	align-items: center;
	justify-content: center;
}

.news-slider__image--empty img {
	width: 245px;
	height: 64px;
	flex-shrink: 0;
	aspect-ratio: 245/64;
}

.news-slider__body {
  padding: 16px 20px 0px;
}

.news-slider__tag {
  margin-bottom: 5px;
}

.news-slider__btns {
  display: flex;
  gap: 6px;
}

.news-slider__btns button {
  width: 30px;
  height: 30px;
  color: var(--color-gray-dark);
  font-size: 13px;
  transition: background 0.15s;
}

.news-slider__btns button:hover {
  background: var(--color-bg-hover);
}

/* ── 아이콘 메뉴 ── */
.icon-menu {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding: 40px 6px;
}

.icon-menu__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 16px 4px;
  text-decoration: none;
  color: var(--color-gray-dark);
  font-size: 14px;
  font-weight: bold;
  text-align: center;
  line-height: 1.3;
  white-space: nowrap;
}

.icon-menu__item:active {
  background: var(--color-bg-active);
}

.icon-menu__icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon-menu__icon svg {
  width: 22px;
  height: 22px;
  stroke: var(--color-primary);
}

/* ── 투표 배너 ── */
.vote-banner {
	width: 100%;
	overflow: hidden;
	position: relative;
}

.vote-banner__row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
    margin-top: 8px;
}

.vote-banner__swipe {
	display: flex;
    width: 100%;

    overflow-x: auto;
    overflow-y: hidden;

    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;

    user-select: none;
	-webkit-user-select: none;
}

.vote-banner__swipe::-webkit-scrollbar {
    display: none;
}

.vote-banner__bundle {
	flex: 0 0 100%;
    width: 100%;
    scroll-snap-align: start;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-direction: column;
    padding: 20px;
    margin-bottom: 48px;
    background: #3A53BF;
    box-sizing: border-box;
    text-decoration: none;
}

.vote-banner__row,
.vote-banner__content {
	width: 100%;
	box-sizing: border-box;
}

.vote-banner__content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-self: stretch;
    width: 100%;
	box-sizing: border-box;
}

.vote-banner__title-wrap {
    display: flex;
	justify-content: space-between;
	align-items: flex-start;
	align-self: stretch;
}

.vote-banner__sub-title {
    color: #FFF;
    font-size: 12px;
    font-family: 'Pretendard', sans-serif;
    font-weight: 500;
    line-height: 19.2px;

    margin: 0;
}

.vote-banner__title {
    color: #FFF;
    font-size: 22px;
    font-family: 'Pretendard', sans-serif;
    font-weight: 700;
    line-height: 28.6px;

    margin: 0;
}

.vote-banner__date {
    color: #FFF;
    font-size: 14px;
    font-family: 'Pretendard', sans-serif;
    font-weight: 700;
    line-height: 22.4px;

    margin: 0;
}

.vote-banner__image {
    width: 115px;
    height: 110px;

    object-fit: contain;

    flex-shrink: 0;
}

.vote-banner__bundle:nth-child(2) {
    background: #9B76D5;   /* 두 번째 배너 배경색 */
}

.vote-banner__bundle:nth-child(4) {
    background: #9B76D5;   /* 네 번째 배너 배경색 */
}

.vote-banner__bundle:nth-child(6) {
    background: #9B76D5;   /* 여 번째 배너 배경색 */
}

.vote-banner__bundle:nth-child(8) {
    background: #9B76D5;   /* 여덟 번째 배너 배경색 */
}

.vote-banner__count {
	align-self: flex-end;
	margin-top: 8px;
	font-size: 13px;
	color: #c0c0c0;
}

.vote-banner__count .current {
	color: #1F1F1F;
	font-weight: 700;
}

.vote-banner__nav {
	display: flex;
	align-items: center;
	gap: 4px;
	margin-top: 16px;
}

.vote-banner__dots {
	display: flex;
	align-items: center;
	gap: 6px;
	flex-shrink: 0;
}

.vote-banner__dot {
	width: 8px;
	height: 8px;
	border-radius: 4px;
	background: rgba(255, 255, 255, 0.5);
	flex-shrink: 0;
	transition: width 0.3s ease, background 0.3s ease;
}

.vote-banner__dot.is-active {
	width: 20px;
	background: #FFF;
}

.vote-banner__pause {
	width: 20px;
	height: 20px;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
}

.vote-banner__pause img {
	filter: brightness(0) invert(1);
	width: 10px;
	height: 10px;
	display: block;
}

.vote-banner__swipe {
	position: relative;
}


/* ── KPFA 다양한 활동 ── */
.activity__title {
  margin-bottom: 16px;
  padding: 0 20px;
}

.activity__card {
  display: block;
  position: relative;
  width: 100%;
  overflow: hidden;
  text-decoration: none;
  cursor: pointer;
}

.activity__card:last-child {
  margin-bottom: 16px;
}

.activity__card.active .activity__card-img {
  height: 250px;
}

.activity__card-img {
  display: block;
  width: 100%;
  height: 100px;
  object-fit: cover;
  filter: brightness(0.6);
  transition: height 0.35s ease;
}

.activity__card--featured .activity__card-img {
  height: 200px;
}

.activity__card-body {
  position: absolute;
  top: 0;
  left: 0;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;

  transition: transform 0.35s ease;
}

.activity__card-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 16px;
  font-weight: 700;
  color: var(--color-white);
}

.activity__card-arrow {
  opacity: 0;
  transition: opacity 0.25s ease 0.15s;
  position: relative;
  top: 1px;
  margin-top: -2px;
}

.activity__card-desc {
  font-size: 18px;
  color: var(--color-white-85);
  line-height: 1.4;
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: opacity 0.25s ease 0.15s, max-height 0.3s ease 0.1s;
}

.activity__card.active .activity__card-arrow {
	max-height: 120px;
  	opacity: 1;
}

.activity__card.active .activity__card-desc {
  	opacity: 1;
 	max-height: 80px;
  	overflow: hidden;
	color: #FFF;
	text-overflow: ellipsis;
	font-family: Pretendard;
	font-size: 18px;
	font-style: normal;
	font-weight: 600;
	line-height: 160%; /* 28.8px */
}

/* ── 정회원 혜택 ── */
.benefit {
  padding: 20px 20px 48px;
}

.benefit__header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 16px;
}

.benefit__join {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 16px;
  color: var(--color-gray-mid);
  text-decoration: none;
}

.benefit__join-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
	height: 24px;
    border: 1px solid #222;
    border-radius: 50%;
    margin-left: 4px;
    vertical-align: middle;
}

.benefit__join-arrow {
    width: 14px;   /* 화살표 크기 - 원과 독립적으로 조절 */
    height: 14px;
}

.benefit__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.benefit__item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 20px;
  background: var(--color-bg);
  border-radius: 5px;
  margin-bottom: 8px;
}

.benefit__item:last-child {
  margin-bottom: 0;
}

.benefit__item-top {
  display: flex;
  align-items: center;
  gap: 10px;
}

.benefit__icon {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
}

.benefit__item-top strong {
  font-size: 18px;
  font-weight: 700;
  color: var(--color-black);
  line-height: 1.4;
}

.benefit__desc {
  font-size: 16px;
  color: var(--color-gray);
  line-height: 1.4;
}

.benefit__more {
  display: block;
  text-align: right;
  font-size: 16px;
  text-decoration: underline !important;
  padding: 16px 0 0px;
}

/* ── 공지사항 슬라이더 ── */
.notice-slider {
  padding-bottom: 50px;
  user-select: none;
  cursor: grab;
}

.notice-slider:active {
    cursor: grabbing;
}

.notice-slider__body {
  padding: 16px 0 14px;
  margin: 0 20px;
  border-top: 2px solid var(--color-border);
  border-bottom: 2px solid var(--color-border);
}

.notice-slider__tag {
  margin-bottom: 6px;
}

.notice-slider__date {
  font-size: 14px;
  color: var(--color-gray);
}

.notice-slider__btns {
  display: flex;
  align-items: center;
  gap: 8px;
}

 .notice-slider__nav {
      padding-right: 18px;
  }

.login-wrapper {
  width: 100%;
  max-width: 375px;
  margin: 0 auto;
  min-height: 100vh;
  background: #fff;
  display: flex;
  flex-direction: column;
}

.login-header {
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  font-weight: 500;
  font-size: 16px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}

.login-content {
  padding: 20px;
  flex: 1;
}

.login-content h2 {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 24px;
}

.input {
  width: 100%;
  height: 48px;
  margin-bottom: 12px;
  padding: 0 16px;
  border: 1px solid #CACACA;
  border-radius: 4px;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
}

.checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  cursor: pointer;
}

.checkbox2 {
  zoom: 1.5; /* 1.5배 키우기 (숫자로 조절 가능) */
  cursor: pointer;
  background: #094E7F;
  margin: 0;
}

.checkbox2-input {
    display: none;
}

.checkbox2-custom {
    width: 20px;
    height: 20px;
    border: 1px solid #CBCBCB;
    border-radius: 4px;
    background-color: #FFFFFF;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 12px 12px;
    flex-shrink: 0;
    display: inline-block;
}

.checkbox2-input:checked + .checkbox2-custom {
    border-color: #094E7F;
    background-color: #094E7F;
    background-image: url("/assets/images/report/check_bold.svg");
}

.login-btn {
  width: 100%;
  height: 48px;
  background: #0b4a6f;
  color: #fff;
  border-radius: 4px;
  margin-bottom: 16px;
  border: none;
  cursor: pointer;
  font-weight: 600;
  font-size: 16px;
}

.login-links {
  display: flex;
  justify-content: center;
  gap: 12px;
  font-size: 14px;
  margin-bottom: 24px;
  cursor: pointer;
  color: #343434;
  font-weight: 400;
}

.bold {
  font-weight: 600;
}

.kakao,
.naver,
.google {
  width: 100%;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  border-radius: 4px;
  margin-bottom: 12px;
  border: none;
  cursor: pointer;
  font-weight: 600;
  font-size: 16px;
}

.kakao {
  background: #fee500;
}

.naver {
  background: #03c75a;
  color: #fff;
}

.google {
  background: #eee;
}

.btn_icon {
  position: absolute;
  left: 16px;
  width: 20px;
  height: 20px;
}

/* 회원가입 */
.signup-wrap { width: 100%; padding: 20px; margin: 0 auto; background: #fff; position:relative; }

.signup-body { padding: 20px 0px 20px; display: flex; flex-direction: column; gap: 32px; }
.signup-title { color: #1F1F1F; font-size: 24px; font-weight: 700; line-height: 38.4px; }

.signup-section { display: flex; flex-direction: column; gap: 12px; }
.signup-section-title { color: #1F1F1F; font-size: 18px; font-weight: 700; line-height: 28.8px; }

.signup-form-group { display: flex; flex-direction: column; gap: 8px; }
.signup-form-label { display: flex; gap: 4px; color: #1F1F1F; font-size: 16px; }
.signup-form-label .signup-required { color: #D91C0B; }
.signup-form-help { color: #666; font-size: 14px; line-height: 22.4px; }

.signup-form-control {
    width: 100%; height: 48px; padding: 0 16px; box-sizing: border-box;
    border: 1px solid #CBCBCB; border-radius: 4px;
    font-size: 16px; color: #1F1F1F; background: #fff;
}
.signup-form-control::placeholder { color: #CACACA; }
.signup-form-control:disabled,
.signup-form-control[readonly] { background: #F5F5F5; border-color: #DDD; color: #1F1F1F; }

select.signup-form-control { appearance: none; background: #fff url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='%23797979' d='M4 6l4 4 4-4z'/%3E%3C/svg%3E") no-repeat right 16px center; }

/* .signup-radio-group { display: flex; align-items: center; gap: 16px; }
.signup-radio-item, .signup-checkbox-item { display: flex; align-items: center; gap: 8px; }
.signup-radio-item label, .signup-checkbox-item label { font-size: 16px; color: #1F1F1F; }
.signup-radio-item input[type="radio"] { width: 20px; height: 20px; accent-color: #094E7F; }
.signup-checkbox-item input[type="checkbox"] { width: 18px; height: 18px; accent-color: #094E7F; } */

.signup-addr-row { display: flex; gap: 8px; }
.signup-addr-row .signup-form-control { flex: 1 1 0; }
.signup-btn-postcode {
    height: 48px; padding: 0 16px; background: #222; color: #fff;
    border: none; border-radius: 4px; font-size: 14px; font-weight: 600; cursor: pointer;
    white-space: nowrap;
}

.signup-notice-box {
    padding: 12px; background: #F4F4F4; border-radius: 8px;
    color: #0B78CB; font-size: 14px; line-height: 22.4px;
    display: flex; align-items: flex-start; gap: 4px;
}

.signup-agree-row { display: flex; }
.signup-agree-row .signup-checkbox-item { flex: 1 1 0; padding: 4px 0; }
.signup-agree-single { padding: 4px 0; }
.signup-agree-note { display: flex; align-items: flex-start; gap: 8px; color: #666; font-size: 14px; }
.signup-agree-note .signup-dot { width: 4px; height: 4px; margin-top: 9px; border-radius: 50%; background: #666; }

.signup-btn-submit {
    width: 100%; height: 48px; background: #094E7F; color: #fff;
    border: none; border-radius: 4px; font-size: 16px; font-weight: 600;
    cursor: pointer;
}

.signup-checkbox-item input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border: 1px solid #CBCBCB;
  border-radius: 4px;
  background-color: #FFFFFF;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 12px 12px;
  flex-shrink: 0;
  cursor: pointer;
  margin: 0;
  padding: 0;
}

.signup-checkbox-item input[type="checkbox"]:checked {
  border-color: #094E7F;
  background-color: #094E7F;
  background-image: url("/assets/images/report/check_bold.svg");
}

.signup-radio-group { display: flex; align-items: center; gap: 16px; }

.signup-radio-item {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.signup-radio-item input[type="radio"] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

.signup-radio-custom {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    border: 1px solid #CBCBCB;
    border-radius: 50%;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: border-color 0.2s ease;
}

.signup-radio-item input[type="radio"]:checked + .signup-radio-custom {
    border-color: #094E7F;
    background: #094E7F;
}

.signup-radio-item input[type="radio"]:checked + .signup-radio-custom::after {
    content: '';
    position: absolute;
    left: 6px;
    top: 3px;
    width: 5px;
    height: 9px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    margin-top: 0.5px;
    margin-left: 0.3px;
}

.signup-radio-text { font-size: 16px; color: #1F1F1F; }

/* 회원가입 아이디 중복 */
.signup-id-msg {
    display: none;
    margin-top: 8px;
    font-size: 14px;
    align-items: center;
    gap: 4px;
}

.signup-id-msg.error,
.signup-id-msg.success {
    display: flex;
}

.signup-id-msg-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.signup-id-msg.error{
    color:#E53935;
}

.signup-id-msg.success{
    color:#2E7D32;
}

.signup-form-control.error{
    border:1px solid #E53935 !important;
}

.signup-form-control.success{
    border:1px solid #2E7D32 !important;
}

/* 회원가입 팝업 */
.signup-complete {
    display:none;
    width: 100%;
    min-height: 70vh;
    background:#fff;
    justify-content:center;
    align-items:center;
}

.signup-complete.show {
    display: flex;
}

.signup-wrap.hide-body .signup-body {
    display: none;
}

.signup-complete-page{
    width:100%;
    min-height:700px;
    background:#fff;
    display:flex;
    justify-content:center;
    align-items:center;
    padding:80px 20px;
}

.signup-container{
    width:100%;
    max-width:560px;
}

.signup-content{
	width: 100%;
    background:#fff;
    border-radius:24px;
    margin: 0 auto;
    padding-top: 70px;
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
}

.signup-icon-wrap{
    margin-bottom:32px;
}

.signup-icon{
    width:120px;
    height:120px;
    border-radius:50%;
    background:#094E7F;
    display:flex;
    justify-content:center;
    align-items:center;
}

.signup-icon img {
	width: 100px;
	height: 100px;
}

.signup-text-wrap{
    margin-bottom:50px;
}

.signup-popup-title{
    margin:0 0 18px;
    font-size:24px;
    font-weight:700;
    color:#1F1F1F;
}

.signup-description{
    margin:0;
    font-size:20px;
    line-height:1.8;
    color:#666;
    font-size: 16px;
}

.signup-login-btn{
    width:100%;
    height:58px;
    border:none;
    border-radius:10px;
    background:#094E7F;
    color:#fff;
    font-size:18px;
    font-weight:600;
    cursor:pointer;
    transition:.2s;
}

.signup-login-btn:hover{
    background:#082B4F;
}

/* 회원가입2 */
.signup2-container {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 32px;
    flex: 1;
}

.signup2-title {
    font-size: 24px;
    font-weight: 700;
    line-height: 38px;
}

.signup2-buttons {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 12px;
}

.signup2-buttons1 {
    display: flex;
    flex-direction: column;
}

.signup2-btn {
    height: 48px;
    border: none;
    border-radius: 4px;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 16px;
    font-weight: 600;

    cursor: pointer;
}

.signup2-btn.primary {
    background: #094E7F;
    color: #fff;
}

.signup2-btn.dark {
    background: #222;
    color: #fff;
}

/* 회원가입3 */
.signup3-container{
    flex:1;
    padding:20px;
    display:flex;
    flex-direction:column;
    gap:32px;
}

.signup3-title{
    color:#1F1F1F;
    font-size:24px;
    font-weight:700;
    line-height:38px;
}

.signup3-agree-wrap{
    display:flex;
    flex-direction:column;
}

.signup3-agree-all{
    display:flex;
    align-items:center;
    gap:9px;

    padding-bottom:20px;

    border-bottom:1px solid rgba(31,31,31,.08);

    font-size:16px;
    color:#343434;
}

.signup3-agree-list{
    padding-top:12px;
}

.signup3-agree-item{
    display:flex;
    justify-content:space-between;
    align-items:center;

    padding:8px 0;
}

.signup3-agree-item label{
    display:flex;
    align-items:center;
    gap:8px;

    font-size:16px;
    color:#343434;

    cursor:pointer;
}

.signup3-agree-item input,
.signup3-agree-all input{
    width:20px;
    height:20px;
}

.signup3-agree-more{
    width:24px;
    height:24px;
    border:none;
    background:none;
    color:#797979;
    font-size:18px;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0;
}

.signup3-agree-more img{
    width:16px;
    height:16px;
    display:block;   /* 추가: inline 요소의 baseline 여백 제거 */
}

.signup3-btn-certify{
    width:100%;
    height:48px;

    border:none;
    border-radius:4px;

    background:#094E7F;
    color:#fff;

    font-size:16px;
    font-weight:600;

    cursor:pointer;
}

.signup3-checkbox-input {
    display: none; /* native 체크박스 완전히 숨기기 */
}

.signup3-checkbox-custom {
    width: 20px;
    height: 20px;
    border: 1px solid #CBCBCB;
    border-radius: 4px;
    background-color: #FFFFFF;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 12px 12px;
    flex-shrink: 0;
    display: inline-block;
}

.signup3-checkbox-input:checked + .signup3-checkbox-custom {
    border-color: #094E7F;
    background-color: #094E7F;
    background-image: url("/assets/images/report/check_bold.svg");
}

/* 회원가입3 팝업 */
.signup3-modal{
    position:fixed;
    top:0;
    left:50%;
    width:100%;
    max-width:860px;
    height:100%;
    background:#fff;
    z-index:9999;
    display:none;
    flex-direction:column;
    transform:translateX(-50%);
}
.signup3-modal.active{
    display:flex;
}

.signup3-modal-header{
    height:56px;
    padding:0 20px;
    border-bottom:1px solid rgba(0,0,0,.04);

    display:flex;
    justify-content:flex-end;
    align-items:center;
    flex-shrink:0;
}

.signup3-modal-close{
    width:24px;
    height:24px;

    border:none;
    background:none;

    cursor:pointer;

    font-size:20px;
    color:#222;
}

.signup3-modal-body{
    flex:1;
	min-height:0;
    overflow:hidden;
    padding:20px;
    display:flex;
    flex-direction:column;
    gap:24px;
}

.signup3-modal-content{
    flex:1;
	min-height:0;
    overflow-y:auto;
    color:#343434;
    font-size:16px;
    line-height:1.8;
}

.signup3-modal-content h3{
    margin-bottom:20px;

    font-size:18px;
    font-weight:700;
}

.signup3-modal-content h4{
    margin:28px 0 12px;

    font-size:16px;
    font-weight:700;
}

.signup3-modal-content p{
    margin-bottom:16px;

    font-size:16px;
    font-weight:400;

    line-height:1.8;
}

.signup3-modal-content .terms-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0px;         /* 항목 사이 간격: p보다 좁게 */
    margin-bottom: 16px; /* 다음 조(h4)와의 간격 */
}

.signup3-modal-content .terms-list li {
    padding: 0;
}

/* 서브 리스트 */
.signup3-modal-content .terms-sublist {
    list-style: none;
    margin: 8px 0 0;      /* 상위 텍스트와의 간격 */
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0px;              /* 서브 항목끼리는 더 촘촘하게 */
}

.signup3-modal-content .terms-sublist li {
    padding-left: 8px;     /* 살짝 들여쓰기 느낌 */
}

.signup3-modal-content .terms-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 16px;
    font-size: 15px;
}

.signup3-modal-content .terms-table thead th {
    background: #4B4B4B;
    color: #fff;
    font-weight: 700;
    text-align: center;
    padding: 14px 8px;
}

.signup3-modal-content .terms-table tbody td {
    text-align: center;
    padding: 16px 8px;
    border-bottom: 1px solid #E5E5E5;
    color: #343434;
    line-height: 1.5;
}

.signup3-modal-content .terms-table tbody tr:last-child td {
    border-bottom: none;
}

.signup3-modal-btn{
    width:100%;
    height:48px;

    border:none;
    border-radius:4px;

    background:#094E7F;
    color:#fff;

    font-size:16px;
    font-weight:600;

    cursor:pointer;

    flex-shrink:0;
}

/* 아이디 찾기 */
.find-wrap{
    width:100%;
    max-width:375px;
    min-height:100vh;
    margin:0 auto;
    background:#fff;
    display:flex;
    flex-direction:column;
}

.find-container{
    flex:1;
    padding:20px;
    display:flex;
    flex-direction:column;
    gap:32px;
}

.find-title{
    font-size:24px;
    font-weight:700;
    color:#1F1F1F;
    line-height:1.6;
}

.find-form{
    display:flex;
    flex-direction:column;
    gap:16px;
}

.find-input-group{
    display:flex;
    flex-direction:column;
    gap:12px;
}

.find-input{
    width:100%;
    height:48px;
    padding:0 16px;
    border:1px solid #CBCBCB;
    border-radius:4px;
    font-size:16px;
    color:#222;
    outline:none;
    box-sizing:border-box;
}

.find-input::placeholder{
    color:#CACACA;
}

.find-btn-group{
    display:flex;
    flex-direction:column;
}

.find-btn{
    width:100%;
    height:48px;
    border:none;
    border-radius:4px;
    font-size:16px;
    font-weight:600;
    cursor:pointer;
}

.find-btn-black{
    background:#222;
    color:#fff;
}

.find-btn-blue{
    background:#094E7F;
    color:#fff;
}

.find-or{
    display:flex;
    align-items:center;
    gap:8px;
    padding:32px 0;
}

.find-line{
    flex:1;
    height:1px;
    background:#929292;
}

.find-or span{
    font-size:14px;
    color:#343434;
}

/* 아이디 찾기 결과 팝업 */
.find-result-modal .signup3-modal-body {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.find-result-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    width: 100%;
}

.find-result-text {
	font-size: 18px;
    text-align: center;
}

/* 비밀번호 찾기 */

/* 협회 소개 , 인사말 , 공지사항, 기프트 세트 목록/신청 내역, 해커스 신청, 꾸까 신청 h2*/
.content .main-title {
  margin-top: 20px;
  margin-bottom: 32px;
  font-size: 24px;
  font-weight: 700;
  color: #1F1F1F;
  padding: 0 20px;
}

/* 협회 소개  */
.about-section{
  display: flex;
  flex-direction: column;
  gap: 32px;
  margin: 0 20px;
  margin-bottom: 32px;
  scroll-margin-top: 80px;
}

.about-section .desc {
    text-align: justify;
    text-justify: inter-character;


    word-break: break-all;
    line-height: 160%;
}

.about-section .desc1 {
    text-align: center;
    margin-top: -24px;
}

.OrgChart {
	align-self: stretch;
	color: #1F1F1F;
	font-family: Pretendard;
	font-size: 20px;
	font-style: normal;
	font-weight: 700;
	line-height: 160%; /* 32px */
}

.OrgChart_i {
	width: 100%;
	display: block;
}

.about-section--last {
	margin-bottom: 110px;
}

/* 인사말 */
.executive-list {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 12px;
}

.executive-list .executive-row {
  display: flex;
  width: 100%;
  gap: 24px;
}

.executive-list .executive-row .executive-item {
  flex: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-right: 4px;
}

.executive-list .executive-row .executive-item .name {
  color: #343434;
  font-size: 16px;
  font-weight: 600;
  white-space: nowrap;
}

.executive-list .executive-row .executive-item .icon-arrow-circle {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.about-section .subtitle {
  font-size: 20px;
  font-weight: 700;
  color: #343434;
  line-height: 32px;
}

.about-section .signature {
  display: flex;
  justify-content: flex-end;
  align-items: baseline;
  gap: 5px;
  font-size: 16px;
  color: #343434;
  margin-bottom: 80px;

  /* --- 선 긋기 및 하단 여백 추가 --- */
  padding-bottom: 80px;
  border-bottom: 1px solid #F0F0F0;
  margin-bottom: 80px;

}

.about-section .signature .rank {
  font-weight: 400;
}

.about-section .signature .name {
  color: #343434;
  font-size: 18px;
  font-weight: 700;
  line-height: 160%;
}

.about-section:last-of-type .signature {
  margin-bottom: 0; /* 마지막 섹션만 적용할 다른 px 값 */
  /* 만약 마지막 섹션에는 선이 필요 없다면 border-bottom: none; 추가 가능 */
}

/* 오시는 길 */
.location-section {
	display: flex;
	flex-direction: column;
	gap: 32px;
	margin: 0 20px;
	margin-bottom: 32px;
	scroll-margin-top: 80px;
}

.location-map-wrap {
	position: relative;
	width: 100%;
	border-radius: 8px;
	overflow: hidden;
	border: 1px solid #F0F0F0;
}

.location-map-img {
	width: 100%;
	height: auto;
	display: block;
}

.location-map-btn {
	position: absolute;
	right: 12px;
	top: 12px;
	padding: 4px 8px;
	background: #fff;
	border-radius: 4px;
	border: 1px solid #CBCBCB;
	color: #1F1F1F;
	text-overflow: ellipsis;
	font-size: 14px;
	font-weight: 600;
	line-height: 22.4px;
	text-decoration: none;
	cursor: pointer;
	white-space: nowrap;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
}

.location-map-btn svg {
	flex-shrink: 0;
}

.location-info {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.location-info__title {
	color: #343434;
	font-size: 20px;
	font-weight: 700;
	line-height: 32px;
}

.location-info__list {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.location-info__item {
	padding-bottom: 12px;
	border-bottom: 1px solid #F0F0F0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.location-info__item.no-border {
	border-bottom: none;
	padding-bottom: 0;
}

.location-info__label {
	color: #1F1F1F;
	font-size: 16px;
	font-weight: 700;
	line-height: 25.6px;
}

.location-info__value {
	color: #343434;
	font-size: 16px;
	font-weight: 400;
	line-height: 25.6px;
}

.location-info__subway {
	display: flex;
	align-items: center;
	gap: 4px;
}

.subway-badge {
	width: 20px;
	height: 20px;
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	line-height: 22.4px;
}

.subway-badge--4 {
	background: #2C9EDE;
	text-indent: -1px;
}

.subway-badge--7 {
	background: #697115;
}

/* 공지 - 목록*/
/* 검색 */
a {
	text-decoration: none;
}

.notice-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0 20px;
}

.notice-section .search-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border: 1px solid#CBCBCB;
    border-radius: 4px;
    margin-bottom: 0;
}

.signup-notice-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    margin-top: 3px; /* 텍스트 첫 줄과 세로 정렬 맞춤용, 필요시 미세조정 */
}

.content .search-box .search-input {
    border: none;
    outline: none;
    background: transparent;
    flex: 1;
    font-size: 14px;
    color: #CACACA;
	font-family: Pretendard;
	font-size: 16px;
}

.content .search-box .search img {
	transform: translateY(2px);
}

/* 리스트 */
.notice-list {
    display: flex;
    flex-direction: column;
    margin: 0 0 60px 0;
}

.notice-list .notice-item {
    padding: 16px 0;
    border-bottom: 1px solid #F0F0F0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    text-decoration: none;
    color: #1F1F1F;
    margin-left: 2px;
}

.notice-list .notice-item .notice-title {
    font-size: 16px;
    font-weight: 600;
    display: inline; /* flex → inline으로 변경 */
    gap: 4px;
}

.notice-list .notice-item .notice-title img {
    width: 14px;
    height: 14px;
    vertical-align: middle;
    margin-left: 4px;
    margin-bottom: 2px;
}

.notice-list .notice-item .notice-meta {
    display: flex;
    align-items: center;
    gap: 8px;
}

.notice-list .notice-item .notice-meta .date {
    font-size: 14px;
    color: #868A93;
}

.notice-list .notice-item .notice-meta .badge {
    padding: 2px 8px;
    background: #E7F4FD;
    color: #094E7F;
    font-size: 12px;
    border-radius: 4px;
}

.page-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.2rem;
    height: 3.2rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: #fff;
    transition: border-color 0.2s, background-color 0.2s;
}

.page-arrow-next img {
    transform: rotate(180deg);
}

/* 공지 - 상세 */
.notice-detail .content .notice-section {
	gap: 0;
}

.notice-section .notice-header {
	padding-bottom: 20px;
	border-bottom: 1px solid #F0F0F0;
}

.notice-section .notice-header .notice-de-title {
	font-size: 24px;
  	font-weight: 600;
}

.notice-section .notice-header .notice-date {
  font-size: 14px;
  color: #868A93;
}

.notice-section .notice-body {
	color: #343434;
	font-family: Pretendard;
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: 160%; /* 25.6px */
	align-self: stretch;
	margin-bottom: 32px;
	margin-top: 32px;

	max-width: 100%;
	overflow-x: hidden;
	word-break: break-word;

}

.notice-body img {
	max-width: 100%;
	height: auto !important;
}

/* 첨부파일 */
.notice-section .file-box-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 32px;
}

.notice-section .file-box-container .file-title {
    color: #1F1F1F;
	font-family: Pretendard;
	font-size: 16px;
	font-style: normal;
	font-weight: 700;
	line-height: 140%; /* 22.4px */
}

.notice-section .file-box-container .file-box {
  background: #F4F4F4;
  padding: 12px;
  border-radius: 4px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* 이전/다음 */
.notice-section .nav-box {
  border-top: 1px solid #F0F0F0;
  margin-bottom: 32px;
}

.notice-section .nav-box .nav-item {
  display: flex;
  gap: 12px;
  padding: 12px 8px;
  border-bottom: 1px solid #F0F0F0;
  /* align-items: center; 보다는 글자 높이를 맞추기 위해 flex-start나 baseline이 깔끔할 수 있습니다 */
  align-items: flex-start;
}

.notice-section .nav-box .nav-item .nav-label {
  flex-shrink: 0;
  color: #868A93;
  font-size: 14px;
  line-height: 1.5; /* 글자 높이 통일 */
  width: 45px;      /* 레이블 너비를 고정하면 제목 시작 위치가 일정해집니다 */
	font-family: Pretendard;
	font-size: 14px;
	font-style: normal;
	font-weight: 400;
	line-height: 160%; /* 22.4px */
}

.notice-section .nav-box .nav-item .nav-text {
  flex: 1;          /* 남은 공간을 모두 차지하게 함 */
  font-size: 16px;
  color: #1F1F1F;
  line-height: 1.5; /* 글자 높이 통일 */

  /* 텍스트가 길어질 때 줄바꿈 처리 */
  word-break: break-all;
  display: block;
text-overflow: ellipsis;
font-family: Pretendard;
font-style: normal;
font-weight: 400;
line-height: 160%; /* 25.6px */
}

/* 버튼 */
.btn-list {
  height: 48px;
  background: #094E7F;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 4px;
  text-decoration: none;
  font-size: 16px;
}

/* 기프트 세트 - 목록 */
.content .banner {
  width: 100%;
  height: 211px;
  object-fit: cover;
  margin-bottom: 0;
}


.content .inner .gf-info-box {
  display: flex;
  gap: 4px;
  padding: 12px;
  background: #F4F4F4;
  border-radius: 8px;
  align-items: flex-start;
}

.gf-info-box--top {
	margin-top: 8px;
}

/* section-subtitle 공통 */
.content .inner .section .section-subtitle, .hckST, .hckST2 {
  font-size: 18px;
  font-weight: 700;
}


/* 이름과 *를 감싸는 박스 */
.input-group .label-box {
  display: flex;
  align-items: center; /* 높이 중앙 맞춤 */
  gap: 2px;            /* 이름과 * 사이의 간격 */
  margin-bottom: 8px;  /* input과의 간격 */
}

.input-group .label-box p {
  font-size: 16px;
  font-weight: 400;
  color: #1F1F1F;
  margin: 0 4px;           /* 기본 마진 제거 */
}

.input-group .label-box .required {
  color: #D91C0B;      /* 별표 색상 */
  font-size: 16px;
}

.input-group input {
  width: 100%;
  height: 48px;
  padding: 0 16px;
  border: 1px solid #CACACA;
  border-radius: 4px;
  font-size: 16px;
  box-sizing: border-box; /* 패딩이 너비에 영향을 주지 않도록 추가 */
}

.input-group .infotext {
	color: #1F1F1F;
	font-family: Pretendard;
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: 160%; /* 25.6px */
}

/* 주소 */
.input-group address input {
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
}

.address .row {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}

.address .row2 input:first-child {
  margin-bottom: 12px; /* 첫 번째 input 아래에만 간격 추가 */
}

.address button {
  background: #222;
  color: #fff;
  border: none;
  border-radius: 4px;
  width: 81px;
  height: 48px;
}

/* 상품들 */
.product-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.product-grid .product {
  position: relative;
}

.product-grid .product img {
  width: 100%;
  border-radius: 4px;
}

/* 실제 인풋 숨기기 */
.product-grid .product .check-input { display: none; }

.product-grid .product .product-item .check-input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

/* 이미지 박스 기본 설정 */
.product-grid .product .img-box {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    box-sizing: border-box;
    border: 1px solid rgba(203, 203, 203, 0.50);
    border-radius: 4px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 이미지 설정 */
.product-grid .product .img-box img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 이미지가 박스를 가득 채우되 찌그러지지 않게 */
  display: block;    /* 이미지 하단 미세한 공백 제거 */
}

.product-grid .product .product-item .custom-check {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 22px;
  height: 22px;
  background-color: #ffffff; /* 평소엔 흰색 */
  border: 1px solid #BBBBBB; /* 회색 테두리 */
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ----------------------------------
   [체크 시] 활성화 스타일
---------------------------------- */

/* 1. 이미지 박스 파란 테두리 */
.check-input:checked + .img-box {
  border: 2px solid #0B78CB;
}

/* 2. 체크박스 배경 파란색으로 변경 */
.check-input:checked + .img-box .custom-check {
  background-color: #094E7F;
  border-color: #094E7F;
}

/* 3. 숨겨놨던 하얀 체크 아이콘 보이게 하기 */
.check-input:checked + .img-box .custom-check .check-icon {
  opacity: 1;
}


.product-grid .product h3 {
  font-size: 16px;
  margin-top: 10px;
  margin-bottom: 4px;
  font-weight: 600;
}


.product-grid .product .detail-btn {
  border: 1px solid #0B78CB;
  border-radius: 4px;
  color: #0B78CB;
  background: none;
  padding: 4px 8px;
  font-size: 12px;
  font-weight: 400;
  text-decoration: none;
  margin-bottom: 18px;
  cursor: pointer;
}

/* 신청하기- 버튼 */
.fixed-bottom , .reg-fixed-bottom{
  width: 100%;
  max-width: 860px;
  padding: 12px;
  background-color: #ffffff;
}

.reg-fixed-bottom{
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  box-sizing: border-box;
}

.fixed-bottom .submit-btn , .reg-fixed-bottom .submit-btn{
  width: 100%;
  height: 48px;
  background: #094E7F;
  color: #fff;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
}

.fixed-bottom .submit-btn.disabled, .reg-fixed-bottom .submit-btn.disabled {
  background: #ccc;
  cursor: not-allowed;
}

/* 기프트 세트 - 신청 */
/* 모달 */

.modal-body {
  max-height: 400px; /* 상품이 많아지면 스크롤 발생 */
  overflow-y: auto;
  padding: 10px 20px;
}

.modal {
  display: block;
  visibility: hidden;
  pointer-events: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10000;
}

.modal.active {
  visibility: visible;
  pointer-events: auto;
}

.modal .modal-overlay {
  	position: absolute;
  	top: 0;
  	left: 50%;
  	transform: translateX(-50%);
  	width: 100%;
  	max-width: 860px;
  	height: 100%;
  	background: rgba(0, 0, 0, 0.75);
	margin: 0 auto;
}

.modal.active .modal-content {
  transform: translate(-50%, 0);
  /* 제자리로 올라옴 */
}

.modal-content {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 860px;
  background: #fff;
  border-radius: 16px 16px 0 0;
  z-index: 10002;
  margin: 0;
  transform: translate(-50%, 100%);
  /* 아래에 숨어있음 */
  transition: transform 0.3s ease-out;
}

.modal-content .modal-header {
  /* ⭐ 핵심: 가로(수평) 정렬 및 세로 중앙 맞춤 */
  display: flex;
  justify-content: space-between;
  /* 양 끝 배치 */
  align-items: center;
  /* 세로 중앙 정렬 */

  height: 56px;
  /* 이미지 속 높이 */
  padding: 0 20px;
  /* 양옆 여백 */
  background-color: #fff;
  /* 흰색 배경 */
  border-bottom: 1px solid #EEEEEE;
  /* 밑줄 */
  border-radius: 16px 16px 0 0;
  /* 윗부분 둥글게 */
}

/* '선택 상품' 타이틀 */
.modal-content .modal-header h3 {
  font-size: 18px;
  /* 글씨 크기 */
  font-weight: 700;
  /* 굵게 */
  margin: 0;
  /* 기본 여백 제거 */
  margin-top: 4px;
  color: #000;
}

.selected-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 0;
  border-bottom: 1px solid #f5f5f5;
}

.item-name {
  font-size: 16px;
  color: #333;
  font-weight: 500;
}

/* 모달 하단 버튼 전용 패딩 */
.modal-content .modal-footer {
  margin: 12px; /* 하단 여백 넉넉히 */
  background: #fff;
}

.final-submit , .submit-btn{
  width: 100%;
  height: 48px;
  background: #094E7F;
  color: #fff;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
}

.modal-overlay {
    z-index: 10001; /* modal-content(10002)보다 낮게 */
}

/* 신청 완료  */
.finish-content {
    text-align: center;
}

.finish-title {
    font-size: 22px;
    font-weight: 700;
    color: #333;
    margin-bottom: 12px;
}

.finish-text {
    font-size: 16px;
    color: #666;
    margin-bottom: 25px;
    line-height: 1.5;
}
/* 완료 팝업을 화면 정중앙으로 강제 이동 */
#finishModal .modal-content {
    position: fixed;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;

    /* 요청하신 높이 고정 */
    width: 90%;
    max-width: 340px;
    height: 178px !important;

    /* 내부 여백을 확 줄여서 공간 확보 */
    padding: 24px 20px !important;
    border-radius: 15px;
    background: #fff;
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* 요소들을 위아래로 끝까지 분산 배치 */
    box-sizing: border-box; /* 패딩이 높이에 포함되도록 설정 */
}

/* 닫기 버튼 위치 미세 조정 */
#finishModal .modal-header {
    height: 0;
    border: none;
}
#finishModal .close-btn {
    position: absolute;
    top: 20px;
    right: 20px;
}

/* 텍스트 간격 축소 */
.finish-title {
    font-size: 18px; /* 크기 살짝 줄임 */
    margin: 5px 0 0 0 !important;
}

.finish-text {
    font-size: 14px; /* 크기 살짝 줄임 */
    margin: 5px 0 !important;
    line-height: 1.2;
}

/* 확인 버튼 박스 안으로 강제 삽입 */
#finishModal .modal-footer {
    border: none;
    margin: 0;
    padding: 0;
}

#confirmFinishBtn {
    width: 100%;
    height: 44px; /* 버튼 높이 고정 */
    background-color: #064f84;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 15px;
    cursor: pointer;
}

/* 기프트 세트 - 거래 내역 */
.content .complete-box {
	margin: 20px;
	border-radius: 8px;
	background: #F4F4F4;
}

.content .complete-box .gFdetail-container {
    display: flex;
    flex-direction: column;
    padding: 16px;
    background: #F4F4F4;
    border-radius: 8px;
    width: 100%;
    box-sizing: border-box;
}

.content .complete-box .gFdetail-container .gFdetail-message {
    display: flex;
    flex-direction: column;
    gap: 4px;
    text-align: center;
    border-bottom: 1px solid #CBCBCB;

    /* 선을 아래로 내리는 핵심 코드 */
    padding-bottom: 8px; /* 이 수치를 높일수록 선이 더 아래로 내려갑니다 */
}

.content .complete-box .gFdetail-container .gFdetail-message .gFdetail-title{
    color: #1F1F1F;
	text-align: center;
	font-family: Pretendard;
	font-size: 16px;
	font-style: normal;
	font-weight: 700;
	line-height: 160%; /* 25.6px */
	letter-spacing: -0.3px;
}

.content .sub-title {
	display: flex;
    flex-direction: column;
    margin-top: 10px;
}

.content .complete-box .gFdetail-container .gFdetail-message .gFdetail-desc{
    color: #1F1F1F;
    font-size: 14px;
    font-weight: 400;
}

.content .complete-box .gFdetail-container .product-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 12px 8px 0 8px;
}

.content .complete-box .gFdetail-container .product-list .product-name {
    color: #1F1F1F;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.6;
}

.section-hackers{
	display: flex;
	flex-direction: column;
	gap: 12px;
}

/* 해커스 수강 신청 - 목록 */
.PR-highlight .highlight-header {
  text-align: center;
}

.PR-highlight .highlight-header span {
  color: #094E7F;
  font-weight: 700;
}

.PR-highlight .highlight-header h2 {
  margin-top: 4px;
  color: #1F1F1F;
	text-align: center;
	font-family: Pretendard;
	font-size: 20px;
	font-style: normal;
	font-weight: 700;
	line-height: 160%; /* 32px */
}

.PR-highlight .card h3 {
	color: #094E7F;
	font-family: Pretendard;
	font-size: 20px;
	font-style: normal;
	font-weight: 700;
	line-height: 160%; /* 32px */
}

/* 카드 */
.PR-highlight .card {
  position: relative; /* 숫자의 기준점을 카드로 설정 */
  margin-top: 16px;
  background: #fff;
  border-radius: 4px;
  display: flex;
  padding: 24px; /* 여백을 조금 더 넉넉히 주면 깔끔합니다 */
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  align-self: stretch;
  overflow: hidden; /* 숫자가 카드 밖으로 삐져나가는 것 방지 */
}

/* ul에 걸려있던 relative는 제거해도 무방합니다 */
.PR-highlight .card ul {
  list-style: none;
  padding: 0;
  margin: 0;
  z-index: 2; /* 텍스트가 숫자보다 위에 오도록 설정 */
}

/* 배경 숫자 스타일 */
.bg-number {
  position: absolute;
  right: 20px;
  top: 16px;

  font-size: 52px; /* 이미지처럼 크게 보이려면 사이즈를 키우세요 */
  font-weight: 400;
  color: rgba(9, 78, 127, 0.1); /* 더 흐리게 조절 (이미지 느낌) */

  line-height: 1;
  z-index: 1; /* 글자 뒤로 배치 */
  pointer-events: none; /* 마우스 클릭 방해 금지 */
}

/* 신청 */
.section-1 {
  display: flex;
}

.section-1 img {
  width: 2px;
  height: 2px;
  margin-right: 5px;
  margin-top: 9px;
}

.section-1 .Introduce {
  color: #0B78CB;
	font-family: Pretendard;
	font-size: 14px;
	font-style: normal;
	font-weight: 400;
	line-height: 160%; /* 22.4px */
}

.input-group label {
  display: block;
  margin-bottom: 4px;
}

.input-group input {
  width: 100%;
  height: 48px;
  border: 1px solid #CBCBCB;
  border-radius: 4px;
  color: #CACACA;
}

.input-group span {
  color: red;
}

.sin {
	display: flex;
	flex-direction: column;
	gap: 6px;
	align-self: stretch;
}

/* select */
/* select 내부 */
.hc-select-box {
  position: relative;
  height: 48px;
  border: 1px solid #CBCBCB;
  border-radius: 4px;
  background: #fff;
  display: flex;
}

/* 실제 select */
.hc-select-box select {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 0 40px 0 16px;
  border: none;
  outline: none;
  font-size: 16px;
  background: transparent;

  /* 기본 화살표 제거 */
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

/* 커스텀 화살표 */
.hc-select-box .arrow {
  position: absolute;
  right: -1px;
  top: -0.5px;
  display: flex;
  width: 48px;
  height: 48px;
  justify-content: center;
  align-items: center;
  gap: 10px;

  /* 테두리 및 배경 */
  background: #F6F6F6;
  border: 1px solid #CBCBCB;
  /* 왼쪽은 직선, 오른쪽만 둥글게 */
  border-radius: 0 4px 4px 0;

  /* 박스가 겹치지 않게 설정 */
  overflow: hidden;
  box-sizing: border-box;
  cursor: pointer;
  pointer-events: none;
}

/* IT 강좌 목록 */
/* 카드 전체 컨테이너 */
.course-card {
  align-self: stretch;
}

/* 실제 라디오 인풋은 숨김 */
.course-radio-input {
  display: none;
}

/* 내부 레이아웃 및 기본 스타일 */
.course-item-inner {
  display: flex;
  padding: 16px;
  align-items: flex-start;
  gap: 8px;
  background: #FFFFFF; /* 기본 배경 */
  border-radius: 4px;
  border: 1px solid #EEEEEE; /* 기본 테두리 */
  cursor: pointer;
  transition: all 0.2s ease;
}

/* [핵심] 라디오 버튼이 체크되었을 때 스타일 변경 */
.course-radio-input:checked + .course-item-inner {
  background: #EFF6FF;
  border: 1px solid #0B78CB;
}

/* 체크 아이콘 박스 */
.radio-indicator {
  height: 26px;
  display: flex;
  align-items: center;
}

.custom-radio {
  width: 20px;
  height: 20px;
  background: #E0E0E0; /* 체크 전 색상 */
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 체크되었을 때 아이콘 배경색 변경 */
.course-radio-input:checked + .course-item-inner .custom-radio {
  background: #094E7F;
}

.icon-radio {
  width: 14px;
  height: 14px;
}

/* 텍스트 정보 영역 */
.course-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.course-title {
  color: #1F1F1F;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
}

.course-details {
  display: flex;
  flex-direction: column;
}

.detail-row, .original-price-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.detail-label {
  color: #868A93;
  font-size: 14px;
  font-weight: 600;
}

.detail-value {
  color: #343434;
  font-size: 16px;
}

.price-old {
  color: #90A1B9;
  font-size: 14px;
  text-decoration: line-through;
}

/* 가격 강조 영역 */
.price-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
}

.price-new {
  color: #343434;
  font-size: 20px;
  font-weight: 700;
}

.currency {
  font-size: 14px;
  font-weight: 700;
  color: #343434;
}

.discount-tag {
  color: #868A93;
  font-size: 14px;
}

/* it 강좌 신청 방법 */

/* 박스 전체 컨테이너 */
.info-box-h {
  display: flex;
  padding: 12px;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  align-self: stretch;
  border-radius: 4px;
  background: #F4F4F4;
  font-family: 'Pretendard', sans-serif;
  margin-bottom: 32px;
}

/* 상단 헤더 (아이콘 + 타이틀) */
.info-header {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 4px;
}

.info-tt {
  color: #1F1F1F;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.6;
}

/* 본문 영역 */
.info-body {
  display: flex;
  flex-direction: column;
  align-self: stretch;
  padding-left: 4px;
  gap: 4px;
}

/* 계좌 정보 한 줄 */
.account-row {
  display: flex;
  align-items: center;
  gap: 8px;
  align-self: stretch;
}

.account-row .dot-wrap{
  display: flex;
  align-items: center;
  height: 22.4px; /* 텍스트 line-height에 맞춘 높이 */
}

.info-body .account-row .row-content {
  flex: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* 안내 및 주의사항 텍스트 */
.guide-text {
  color: #666;
font-family: Pretendard;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 160%; /* 22.4px */
  margin-top: 4px;
}

.highlight {
  color: #0B78CB;
}

.notice-text {
  color: #666;
  font-size: 14px;
  line-height: 1.6;
  font-weight: 400;
}

.notice-text span {
	color: #0B78CB;
}

.notice-text strong {
  font-weight: 700;
}

/* 해커스 신청 - 버튼*/
.Reg-btn-submit , .mzn-btn{
  /* 레이아웃 */
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  align-self: stretch;
  width: 100%; /* 부모 너비에 맞춤 */
  height: 48px;
  padding: 10px;

  /* 스타일 */
  background: #094E7F;
  border-radius: 4px;
  border: none; /* 버튼 기본 테두리 제거 */
  cursor: pointer;

  /* 텍스트 스타일 */
  color: white;
  font-size: 16px;
  font-family: 'Pretendard', sans-serif;
  font-weight: 600;
  line-height: 25.60px;
  word-wrap: break-word;
}

/* 컨테이너 및 폰트 설정 */
.complete-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  align-self: stretch;
  font-family: 'Pretendard', sans-serif;
}

.complete-title {
  color: #1F1F1F;
  font-size: 24px;
  font-weight: 700;
  line-height: 38.4px;
  margin: 0;
}

/* 중앙 상세 정보 회색 박스 */
.complete-content-box {
  align-self: stretch;
  padding: 16px;
  background: #F4F4F4;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 20px;
}

.info-section {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.info-section .f-section-title {
  color: #1F1F1F;
  font-size: 16px;
  font-weight: 700;
  line-height: 25.6px;
  margin: 0;
}

.info-section .f-section-title .info-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.info-item {
  display: flex;
  align-items: flex-start; /* 텍스트가 길 경우 상단 정렬 */
  gap: 12px;
}

.row-label {
  color: #666;
  font-family: Pretendard;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 160%; /* 22.4px */
}

.row-value {
  font-size: 16px;
  font-weight: 400;
  line-height: 25.6px;
  color: #343434;
}

.sub-value {
  color: #1F1F1F;
  font-size: 14px;
  font-weight: 400;
  line-height: 22.4px;

  word-break: break-all;
  word-wrap: break-word;
  white-space: normal; /* 혹시 nowrap이 걸려있다면 해제 */
  display: inline-block;
  max-width: 100%;
  vertical-align: top;

}

.text-wrap {
  flex: 1;
}

/* 계좌 정보 흰색 카드 */
.account-card {
  padding: 8px 16px;
  background: white;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
}

.account-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  height: 24px;
}

.dot-bullet {
  width: 2px;
  height: 2px;
  background: #666666;
  border-radius: 50%;
  gap: 5px;
}

.row-inner {
  flex: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.acc-label {
  color: #666666;
  font-size: 14px;
  line-height: 22.4px;
}

.acc-value {
  color: #1F1F1F;
  font-size: 14px;
  line-height: 22.4px;
}

/* 하단 최종 안내 */
.final-notice {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  align-self: stretch;
  margin: 16px 20px 32px 20px;
}

.blue-bullet {
  width: 2px;
  height: 2px;
  background: #0B78CB;
  border-radius: 50%;
  margin-top: 11px;
}

.comp-btn-submit {
  /* 레이아웃 */
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  align-self: stretch;
  width: calc(100% - 40px); /* 전체에서 양옆 마진 40px 제외 */
  height: 48px;
  padding: 10px;
  margin: 0 20px 0 20px;

  /* 스타일 */
  background: #094E7F;
  border-radius: 4px;
  border: none; /* 버튼 기본 테두리 제거 */
  cursor: pointer;

  /* 텍스트 스타일 */
  color: white;
  font-size: 16px;
  font-weight: 600;
  line-height: 25.60px;
  word-wrap: break-word;
}

/* 해커스 , 꾸까 세트 신청 */
.content .inner .section .PR-highlight {
  padding: 16px;
  background: #EFF6FF;
  border-radius: 4px;
}

.content .inner .section-kukka p {
	margin-bottom: 8px;
	font-size: 16px;
}

/* 컨테이너 */
.delivery-date-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
  font-family: 'Pretendard', sans-serif;
}

.delivery-date-container .notice-box {
	margin-bottom: 8px;
}

/* KUKKA 공지 박스 */
.notice-box {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  align-self: stretch;
}

.dot-icon {
  display: flex;
  align-items: center;
  height: 22.4px; /* 텍스트 line-height에 맞춰 정렬 */
}

/* 날짜 선택 필드 (Input UI) */
.datepicker-field {
  display: flex;
  justify-content: space-between;
  align-items: center;
  align-self: stretch;
  height: 48px;
  padding: 0 16px;
  border-radius: 4px;
  border: 1px solid #CBCBCB;
  background: #FFF;
  cursor: pointer;
}

.placeholder {
  color: #CACACA !important;
  font-size: 16px;
  font-weight: 400;
  line-height: 22.4px;
}

.calendar-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 하단 정보 메시지 공통 */
.info-message {
  display: flex;
  align-items: flex-start;
  gap: 4px;
  align-self: stretch;
}

.kukka-message {
	margin-top: 8px;
}

.info-icon {
  display: flex;
  align-items: center;
  height: 22.4px; /* 텍스트 정렬 */

}

.info-text {
  flex: 1;
  color: #0B78CB;
  font-size: 14px;
  font-weight: 400;
  line-height: 22.4px;
  margin: 0;

}

/* 컨테이너 */
.message-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  align-self: stretch;
  font-family: 'Pretendard', sans-serif;
}

/* 라벨 스타일 */
.label-group {
  display: flex;
  align-items: flex-start;
}

.label-text {
  color: #1F1F1F;
  font-size: 16px;
  font-weight: 400;
  line-height: 25.6px;
}

/* 안내 문구 박스 */
.notice-box {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  align-self: stretch;
}

.dot-icon {
  display: flex;
  align-items: center;
  height: 22.4px;
}

/* 텍스트 영역 래퍼 (입력창 + 글자수) */
.textarea-wrapper {
  display: flex;
  flex-direction: column;
  align-self: stretch;
  border: 1px solid #CBCBCB;
  border-radius: 4px;
  overflow: hidden; /* 테두리 안쪽으로 내용 고정 */
}

/* 실제 입력창 영역 */
.input-area {
  padding: 12px 16px;
  height: 140px;
}

.input-area textarea {
  width: 100%;
  height: 100%;
  border: none;
  outline: none;
  resize: none; /* 사용자 임의 크기 조절 방지 */
  font-size: 16px;
  font-family: 'Pretendard', sans-serif;
  color: #343434;
  padding: 0;
}

.input-area textarea::placeholder {
  color: #CACACA;
}

/* 하단 글자 수 표시 */
.char-count {
  display: flex;
  justify-content: flex-end;
  padding: 0 16px 12px 16px;
}

.char-count .current {
  color: #343434;
  font-size: 16px;
  line-height: 22.4px;
}

.char-count .total {
  color: #CACACA;
  font-size: 16px;
  line-height: 22.4px;
}

/* 전체 박스 컨테이너 */
.completion-info-box {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  align-self: stretch;
  padding: 12px;
  background: #F4F4F4;
  border-radius: 4px;
  font-family: 'Pretendard', sans-serif;
}

/* 제목 영역 */
.info-title-group {
  display: flex;
  align-items: center;
  gap: 4px;
}

.info-title-group .icon-wrap {
  display: flex;
  align-items: center;
}

.info-title-group .title {
  margin: 0;
  color: #1F1F1F;
  font-size: 16px;
  font-weight: 700;
  line-height: 25.6px;
}

/* 상세 내용 래퍼 */
.info-content-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  align-self: stretch;
  padding-left: 4px;
}

/* 개별 로우 (예금주, 계좌번호) */
.info-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  align-self: stretch;
}

.info-row .dot-wrap {
  display: flex;
  align-items: center;
  height: 22.4px; /* 텍스트 line-height에 맞춘 높이 */
}

.row-text-wrap {
  flex: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.row-text-wrap .label {
  color: #666666;
  font-size: 14px;
  font-weight: 400;
  line-height: 22.4px;
}

.row-text-wrap .value {
  color: #1F1F1F;
  font-size: 14px;
  font-weight: 400;
  line-height: 22.4px;
}

/* 설명 및 강조 문구 */
.description {
  margin: 0;
  align-self: stretch;
  color: #666666;
  font-size: 14px;
  font-weight: 400;
  line-height: 22.4px;
}

.highlight {
  color: #0B78CB;
}

.notice-blue {
  margin: 0;
  color: #0B78CB;
  font-size: 14px;
  font-weight: 400;
  line-height: 22.4px;
}

/* 컨테이너 */
.confirm-check-container {
  display: flex;
  align-items: center;
}

.check-group {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

/* 기본 체크박스 숨기기 */
.hidden-checkbox {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

/* 알려주신 수치를 적용한 커스텀 박스 */
.custom-checkbox {
  width: 20px;
  height: 20px;
  aspect-ratio: 1/1;
  border-radius: 4px;
  border: 1px solid #BBB;
  background: #FFF;

  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  flex-shrink: 0;
  transition: all 0.2s ease; /* 부드러운 색상 전환 */
}

/* 체크 표시 아이콘 (기본 숨김) */
.check-mark {
  width: 14px; /* 박스보다 약간 작게 */
  height: 14px;
  display: none;
  /* 아이콘 색상을 흰색으로 강제 변환 */
  filter: brightness(0) invert(1);
  pointer-events: none;
}

/* [핵심] 체크 시 배경색 파란색 변경 및 테두리 제거 */
.hidden-checkbox:checked + .custom-checkbox {
  background: #094E7F;
  border-color: #094E7F;
}

/* 체크 시 아이콘 보이기 */
.hidden-checkbox:checked + .custom-checkbox .check-mark {
  display: block;
}

/* 텍스트 스타일 */
.check-text {
  color: #343434;
  font-size: 15px;
  font-weight: 400;
  line-height: 24px;
  word-wrap: break-word;
}

.ac-sub-title  {
	text-align: center;
	margin-top: 20px;
}

.PR-highlight .Loc {
	color: #1F1F1F;
	text-align: center;
	font-family: Pretendard;
	font-size: 16px;
	font-style: normal;
	font-weight: 700;
	line-height: 160%; /* 25.6px */
	margin: 16px 0;
}

/* 유의사항 전체 컨테이너 */
.ldrlic-notice-container, .sono-notice-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px; /* 리스트 항목 간의 간격 */
  align-self: stretch;
  font-family: 'Pretendard', sans-serif;
  margin-top: 16px;
}


.ldrlic-notice-container .note , .sono-notice-container .note  {
	color: #1F1F1F;
	text-align: center;
	font-family: Pretendard;
	font-size: 16px;
	font-style: normal;
	font-weight: 700;
	line-height: 160%; /* 25.6px */
	align-self: stretch;
	margin-bottom: 8px;
}

/* 각 리스트 항목 (가로 정렬) */
.ldrlic-notice-item , .sono-notice-item{
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 8px; /* 불렛과 텍스트 사이 간격 */
  align-self: stretch;
}

/* 불렛 스타일 */
.ldrlic-notice-item .ldrlic-bullet , .sono-notice-item .sono-bullet  {
  color: #343434;
  font-size: 14px;
  font-weight: 400;
  line-height: 22.4px;
  flex-shrink: 0; /* 불렛 크기 고정 */
}

/* 텍스트 스타일 */
.ldrlic-notice-item .ldrlic-text, .sono-notice-item .sono-text {
  flex: 1; /* 남은 공간 차지 */
  color: #343434;
  font-size: 14px;
  font-weight: 400;
  line-height: 22.4px;
  margin: 0; /* 기본 마진 제거 */
  word-wrap: break-word;
}

/* 라디오 버튼 그룹 (가로 정렬) */
.radio-group {
  display: flex;
  align-items: center;
  gap: 20px; /* 라디오 버튼 사이 간격 */
}

/* 개별 라디오 버튼 라벨 */
.radio-btn {
  display: flex !important;
    flex-direction: row !important; /* 가로 방향 강제 */
    align-items: center !important; /* 세로 중앙 맞춤 */
    gap: 8px !important;            /* 아이콘과 글자 사이 간격 */
    width: auto !important;         /* 너비를 내용만큼만 */
    cursor: pointer;
}

/* 실제 라디오 input은 숨김 */
.radio-btn input[type="radio"] {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

/* 커스텀 라디오 외형 (원형) */
.custom-radio1 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex-shrink: 0;          /* 공간이 부족해도 원 모양이 찌그러지지 않게 고정 */
  border: 1px solid #BBBBBB;
  border-radius: 50%;
}

.radio-btn span {
  font-size: 16px;
  line-height: 1;          /* 높이 균형을 위해 설정 */
}

/* 체크 아이콘 (기본 숨김) */
.iconridio {
  width: 12px;
  height: 12px;
  display: none;
}

/* ---------------------------------
   체크되었을 때의 스타일 변화
---------------------------------- */

/* 1. 커스텀 라디오 테두리와 배경 변경 */
.radio-btn input[type="radio"]:checked + .custom-radio1 {
  border-color: #094E7F; /* 강조 색상 */
  background: #094E7F;
}

/* 2. 체크 아이콘 보이기 */
.radio-btn input[type="radio"]:checked + .custom-radio1 .iconridio {
  display: block;
}


/* 약관 줄 */
.terms-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 16px 0;
  font-size: 16px;
  cursor: pointer;
}

/* 신문고 */
.report-content {
	padding: 20px;
}

.report-content .title {
	font-size: 24px;
	font-weight: 700;
	margin-bottom: 32px;
}

/* form */
.form {
	display: flex;
	flex-direction: column;
	gap: 32px;
}

.report-form .form-group {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.report-form .form-group label {
	margin-top: 10px;
	font-size: 16px;
}

/* input */
.form-group input, textarea {
	width: 100%;
	padding: 0 16px;
	border: 1px solid #CBCBCB;
	border-radius: 4px;
	font-size: 16px;
}

.report-form .form-group label span {
	color: red;
}

.report-form .form-group input {
	height: 48px;
}

.report-form .form-group textarea {
	height: 168px;
	padding-top: 12px;
}

/* select */
.report-form .form-group .select-box {
	position: relative;
	width: 100%;
	height: 48px;
	display: flex;
	align-items: center;
	border: 1px solid #CBCBCB;
	border-radius: 4px;
	background: #FFFFFF;
	overflow: hidden;
}

.report-form .form-group .select-box select {
	flex: 1;
	height: 100%;
	height: 48px;
	padding: 0 16px;
	border: 1px solid #CBCBCB;
	border-left: none;
	border-radius: 4px;
	font-size: 16px;
	color: #CACACA;
	background: transparent;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	cursor: pointer;
	outline: none;
}

.report-form .form-group .select-box select option {
	color: #1F1F1F;
}

/* placeholder 느낌 */
.report-form .form-group .select-box select:valid {
	color: #1F1F1F;
}

/* 오른쪽 영역 */
.report-form .form-group .select-arrow {
	position: absolute;
	top: 0;
	right: 0;
	width: 48px;
	height: 48px;
	background: #F6F6F6;
	border-left: 1px solid #CBCBCB;
	border-top-right-radius: 4px;
	border-bottom-right-radius: 4px;
	display: flex;
	justify-content: center;
	align-items: center;
	pointer-events: none;
}

/* 화살표 이미지 */
.report-form .form-group .select-arrow img {
	width: 16px;
	height: 16px;
	transform: rotate(90deg);
}

.report-agree-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.report-agree-item .checkbox {
    margin-bottom: 0;
}

.report-agree-more {
    width: 24px;
    height: 24px;
    border: none;
    background: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    flex-shrink: 0;
}

.report-agree-more img {
    display: block;
    width: 16px;
    height: 16px;
}

.report-form .form-group .placeholder {
	color: #CACACA;
}

/* guide */
.report-form .form-group .guide {
	font-size: 14px;
	color: #666;
}

/* file */
.report-form .form-group .file-btn {
	width: 100%;
	height: 48px;
	background: #222;
	color: #fff;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 8px;
}

.file-item {
	padding: 8px 12px;
	border: 1px solid #CBCBCB;
	border-radius: 4px;
	font-size: 14px;
	color: #343434;
	background: #F8F8F8;
	display: flex;
	justify-content: space-between;
	align-items: center;
	box-sizing: border-box;
}

.file-name {
	flex: 1;
	color: #1F1F1F;
	font-size: 14px;
	line-height: 22px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.file-delete {
	width: 24px;
	height: 24px;
	border: none;
	background: transparent;
	color: #797979;
	font-size: 16px;
	cursor: pointer;
	display: flex;
	justify-content: center;
	align-items: center;
}

.report-form .form-group .file-list {
	margin-top: 8px;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

/* 주의사항 */
.report-form .matters {
	width: 100%;
	display: flex;
	align-items: center;
	gap: 6px;
	color: #666666;
	font-size: 14px;
	line-height: 22px;
}

.report-form .matters a {
	color: #0B78CB;
	font-size: 14px;
	font-family: Pretendard;
	font-weight: 400;
	margin-left: 20px;
}

.report-form .matters_t {
	margin-top: 32px;
	font-size: 15px;
}

.report-form .matters_t p {
	padding: 0 0 10px;
}

/* checkbox */
.report-form .form-group_check-box .checkbox {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	cursor: pointer;
}

/* 기본 checkbox 제거 */
.report-form .form-group_check-box .checkbox input {
	appearance: none;
	-webkit-appearance: none;
	width: 20px;
	height: 20px;
	border: 1px solid #CBCBCB;
	border-radius: 4px;
	background-color: #FFFFFF;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 12px 12px;
	flex-shrink: 0;
	cursor: pointer;
	margin: 2px 0 0;
	padding: 0;
}

/* 체크 상태 */
.report-form .form-group_check-box .checkbox input:checked {
	border-color: #094E7F;
	background-color: #094E7F;
	background-image: url("/assets/images/report/check_bold.svg");
}

/* 기존 체크 표시 제거 */
.report-form .form-group_check-box .checkbox input:checked::after {
	display: none;
}

/* 텍스트 */
.report-form .form-group_check-box .checkbox p {
	margin: 0;
	line-height: 1.5;
}

/* 화살표 이미지 조정 */
.report-form .form-group_check-box .checkbox img {
	margin-left: auto;
	margin-right: 15px;
}

/* submit */
.submit-btn {
	height: 48px;
	background: #094E7F;
	color: #fff;
	border: none;
	border-radius: 4px;
	font-size: 16px;
	font-weight: 600;
}

/* 팝업 배경 */
.popup-overlay {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 80px 0px 60px;
}

.popup {
	width: 100%;
	max-width: 830px;
}

.popup-content {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.popup-title {
	display: none; /* 상단 페이지 타이틀("신문고")이 이미 있으므로 중복 숨김 */
}

.popup-body {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
	margin-bottom: 40px;
}

.icon-circle {
	width: 72px;
	height: 72px;
	border-radius: 50%;
	background: #094E7F;
	display: flex;
	justify-content: center;
	align-items: center;
}

.icon-box {
	width: 60px;
	height: 60px;
	display: flex;
	justify-content: center;
	align-items: center;
}

.icon-box img.lconly {
	width: 100%;
	height: 100%;
	object-fit: contain;
	filter: brightness(0) invert(1);
}

.text-group {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
}

.complete-title {
	font-size: 18px;
	font-weight: 700;
	color: #1F1F1F;
}

.complete-desc {
	font-size: 14px;
	color: #666666;
	line-height: 1.5;
}

.confirm-btn {
	width: 100%;
	height: 48px;
	background: #094E7F;
	color: #FFFFFF;
	border: none;
	border-radius: 4px;
	font-size: 16px;
	font-weight: 700;
	cursor: pointer;
}

/* 회비 안내 */

.section {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.container {
    width: 100%;
    height: 100%;
    position: relative;
    background: #ffffff;
    overflow: hidden;
}

.duesinfo-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
}

.main-image {
    width: 100%;
    height: 211px;
    object-fit: cover;
}

.duesinfo-inner {
    width: 100%;
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    gap: 32px;
    box-sizing: border-box;
}

.duesinfo-title {
    color: #1F1F1F;
    font-size: 24px;
    font-family: 'Pretendard', sans-serif;
    font-weight: 700;
    line-height: 38.4px;
}

.duesinfo-section {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.duesinfo-desc {
    color: #343434;
    font-size: 15px;
    font-family: 'Pretendard', sans-serif;
    line-height: 24px;
}

/* 비로그인 안내 박스 */
.info-box {
    background: #F7F8FA;
    border-radius: 8px;
    padding: 20px 16px;
}

.info-title {
    color: #1F1F1F;
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 12px;
}

/* 리스트 */
.duesinfo-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.duesinfo-list li {
    color: #666666;
    font-size: 14px;
    line-height: 22.4px;
    padding-left: 12px;
    position: relative;
}

.duesinfo-list li::before {
    content: '·';
    position: absolute;
    left: 0;
}

/* 로그인 회비 안내 박스 (공통) */
.fee-box {
    background: #EFF6FF;
    border-radius: 8px;
    padding: 20px 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.fee-box-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.fee-box-title {
    color: #1F1F1F;
    font-size: 20px;
    font-weight: 700;
    text-align: center;
    line-height: 32px;
}

/* 예금주 / 계좌번호 */
.account-info {
    background: #ffffff;
    border-radius: 4px;
    padding: 8px 16px;
}

.account-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 4px 8px;
    height: auto;
    min-height: 24px;
}

.account-row::before {
    content: '';
    display: none;
}

.acc-label {
    flex-shrink: 0;
    white-space: nowrap;
}

.acc-value {
    flex: 1;
    min-width: 0;
    text-align: right;        /* 기존 space-between 느낌 유지 */
    word-break: break-word;
}

/* 회비 테이블 */
.fee-table {
    width: 100%;
    border-collapse: collapse;
    border-radius: 4px;
    overflow: hidden;
    font-family: 'Pretendard', sans-serif;
}

.fee-table thead th {
    background: #222222;
    color: #ffffff;
    font-size: 16px;
    font-weight: 400;
    line-height: 25.6px;
    padding: 4px 0;
    text-align: center;
}

.fee-table thead th:first-child {
    border-top-left-radius: 4px;
}

.fee-table thead th:last-child {
    border-top-right-radius: 4px;
    border-left: 1px solid #F0F0F0;
}

.fee-table tbody td {
    background: #ffffff;
    color: #343434;
    font-size: 16px;
    line-height: 25.6px;
    padding: 4px 0;
    text-align: center;
    border-left: 1px solid #F0F0F0;
    border-bottom: 1px solid #F0F0F0;
}

.fee-table tbody td:last-child {
    border-right: 1px solid #F0F0F0;
}

.fee-table tbody tr:last-child td:first-child {
    border-bottom-left-radius: 4px;
}

.fee-table tbody tr:last-child td:last-child {
    border-bottom-right-radius: 4px;
}

.col-fee {
    width: 92px;
}

/* 정회원 혜택 */
.main-image {
	width: 100%;
	height: 211px;
	object-fit: cover;
}

/* 내부 영역 */
.inner {
	padding: 0 20px;
	display: flex;
	flex-direction: column;
	gap: 32px;
}

.inner .section .info-box {
	background-color: #EFF6FF;
}


.benefit-list .main-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* 제목 */
.inner h1 {
	font-size: 24px;
	font-weight: 700;
	color: #1F1F1F;
	line-height: 38.4px;
	margin: 0px;
	padding-top: 20px;
}

/* 설명 */
.desc {
	font-size: 16px;
	color: #343434;
	line-height: 25.6px;
}

/* 섹션 */
.benefit-section {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

/* 카드 리스트 */
.benefit-list { display: flex; flex-direction: column; gap: 16px; list-style: none; margin: 0; padding: 0; }

.benefit-card {
	position: relative;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: space-between;
	width: 100%;
	aspect-ratio: 67 / 21;
	padding: 20px 24px 24px 20px;
	overflow: hidden;
	text-decoration: none;
	color: #fff;
}

.benefit-card__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	background-color: #000;
}

.benefit-card__bg::before {
	content: '';
	position: absolute;
	inset: 0;
	opacity: 0.6;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}

.benefit-card__text {
   position: relative;
   z-index: 1;
   display: flex;
   flex-wrap: wrap; /* 자식 요소가 한 줄에 안 들어가면 다음 줄로 자동 줄바꿈 */
   align-items: baseline; 
   gap: 4px 8px; /* (세로 간격 4px / 가로 간격 8px) */
   width: 100%;
}

.benefit-card__title {
   margin: 0;
   font-family: Pretendard, sans-serif;
   font-weight: 700;
   font-size: 18px;
   line-height: 1.3; /* 줄간격을 줄여 2줄 이상일 때 뭉침 예방 */
   letter-spacing: -0.3px;
   color: #fff;
   word-break: keep-all;
}

.benefit-card__meta {
	font-family: Pretendard, sans-serif;
	font-weight: 400;
	font-size: 12px;
	line-height: 1.6;
	letter-spacing: -0.3px;
	color: #fff;
	white-space: nowrap;
}

.benefit-card__arrow {
   position: absolute; /* absolute로 고정 */
   right: 20px;
   bottom: 20px;
   z-index: 1;
   align-self: flex-end;
   display: flex;
   align-items: center;
   justify-content: center;
   width: 24px;
   height: 24px;
   border: 1px solid #fff;
   border-radius: 999px;
}

.benefit-card__arrow-icon {
	width: 14px;
	height: 14px;
}

/* 카드별 배경 사진 */
.benefit-card--giftset .benefit-card__bg::before { background-image: url('/assets/images/duesinfo/giftset.jpg'); }
.benefit-card--kukka .benefit-card__bg::before { background-image: url('/assets/images/duesinfo/kukka.jpg'); }
.benefit-card--hackers .benefit-card__bg::before { background-image: url('/assets/images/duesinfo/hackers.jpg'); }
.benefit-card--checkup .benefit-card__bg::before { background-image: url('/assets/images/duesinfo/checkup.jpg'); }
.benefit-card--mizuno .benefit-card__bg::before { background-image: url('/assets/images/duesinfo/mizuno.jpg'); }
.benefit-card--legal .benefit-card__bg::before { background-image: url('/assets/images/duesinfo/legal.jpg'); }
.benefit-card--sono .benefit-card__bg::before {
	background-image: url('/assets/images/duesinfo/sono.jpg');
	/* Figma 원본 크롭 위치 그대로 반영 - 인물 상반신이 보이도록 */
	inset: auto;
	top: -2.96%;
	left: -14.1%;
	width: 125.23%;
	height: 265.81%;
	background-size: 100% 100%;
	background-position: center;
}

/* 회비납부내역 */
.due-card {
	width: 100%;
	padding: 16px 20px;
	background: #F4F4F4;
	border-radius: 8px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.card-title {
	color: #343434;
	font-size: 18px;
	font-family: 'Pretendard';
	font-weight: 700;
	line-height: 28.8px;
}

.card-content {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.row {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.row .label {
	color: #666666;
	font-size: 16px;
	font-family: 'Pretendard';
	font-weight: 400;
}

.row .value {
	color: #343434;
	font-size: 16px;
	display:flex;
	font-family: 'Pretendard';
	font-weight: 400;
	line-height: 25.6px;
	margin-right: 0 auto;
	justify-content: flex-end; /* 오른쪽 정렬 */
	align-items: center;       /* 세로 정렬 */
}

/* 상태 영역 */
.status {
	display: flex;
	align-items: center;
	gap: 4px;
}

/* 아이콘 */
.status-icon {
	width: 16px;
	height: 16px;
	position: relative;
}

.status-bg {
	position: absolute;
	width: 16px;
	height: 16px;
	opacity: 0.1;
}

/* 웹진 */
.page {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	background: #fff;
	font-family: 'Pretendard', sans-serif;
	padding: 20px;
}

.main {
	flex: 1;
}

.container {
	display: flex;
	flex-direction: column;
}

/* 타이틀 */
.webzine-title {
	font-size: 24px;
	font-weight: 700;
	line-height: 38.4px;
	color: #1F1F1F;
}

/* 리스트 */
.magazine-list {
	display: flex;
	flex-direction: column;
	gap: 32px;
	margin-top: 32px;
}

/* 아이템 */
.magazine-item {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

/* 썸네일 박스 */
.magazine-thumb {
	background: #F4F4F4;
	border-radius: 8px;
	padding: 32px 0;
	display: flex;
	justify-content: center;
	align-items: center;
}

.magazine-thumb img {
	width: 170px;
	height: 227px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

/* 제목 */
.magazine-title {
	font-size: 16px;
	font-weight: 600;
	line-height: 25.6px;
	color: #1F1F1F;
}

/* 보도자료-리스트 */
.main {
	flex: 1;
}

.container .press-title {
	font-size: 24px;
	font-weight: 700;
	color: #1F1F1F;
	margin: 0px;
	margin-bottom: 32px;
}

.category { position: relative; cursor: pointer; }
.category .category-options {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 110px;
	margin-top: 10px;
	margin-left: -17px;
	padding: 0;
	background: #fff;
	border: 1px solid #c4c4c4;
	border-radius: 4px;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
	z-index: 10;
	list-style: none;
	overflow: hidden;
}
.category.open .category-options { display: block; }
.category .category-options li {
	padding: 9px 14px;
	font-size: 14px;
	line-height: 1.2;
	color: #333;
	white-space: nowrap;
}
.category .category-options li:hover { background: #f2f4f7; }
.category .category-options li.active,
.category .category-options li.active:hover {
	background: #1a5cff;   /* 선택 항목: 네이티브 파란 하이라이트 */
	color: #fff;
}

/* 검색 */
.search-box {
	height: 48px;
    padding: 0 16px;
    margin-bottom: 8px;
    border: 1px solid #CBCBCB;
    border-radius: 4px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}

.search-box .search-input::placeholder {
	color: #CACACA;
}

.search-box img {
	width: 20px;
	height: 20px;
	flex-shrink: 0;
}

.search-left {
	display: flex;
	align-items: center;
	gap: 12px;
	flex: 1;
}

.category {
	display: flex;
	align-items: center;
	gap: 4px;
}

.category span {
	color: #1F1F1F;
	font-size: 16px;
	font-weight: 400;
}

.arrow {
	width: 0;
	height: 0;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-top: 5px solid #797979;
}

.divider {
	width: 1px;
	height: 20px;
	background: #F0F0F0;
}

.search-box .search-input {
	flex: 1;
	width: 100%;
	height: 100%;
	border: none;
	outline: none;
	background: transparent;
	font-size: 16px;
	color: #1F1F1F !important;
	padding: 0;
}

/* 검색 아이콘 */
.search-icon {
	width: 20px;
	height: 20px;
	border: 2px solid #222;
	border-radius: 50%;
	position: relative;
}

.search-icon::after {
	content: '';
	position: absolute;
	width: 6px;
	height: 2px;
	background: #222;
	right: -4px;
	bottom: -2px;
	transform: rotate(45deg);
}

/* 리스트 */
.news-list {
	display: flex;
	flex-direction: column;
}

.news-item {
	padding: 16px 0;
	border-bottom: 1px solid #F0F0F0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.date {
	font-size: 14px;
	color: #868A93;
}

.news-content {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	align-self: stretch;
}

.news-title {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	flex: 1 0 0;
	overflow: hidden;
	color: #1F1F1F;
	text-overflow: ellipsis;
	font-family: Pretendard;
	font-size: 16px;
	font-style: normal;
	font-weight: 600;
	line-height: 160%; /* 25.6px */

	word-break: break-all;
	word-wrap: break-word;
}

.news-thumb {
	flex-shrink: 0;
	width: 100px;   /* 실제 디자인 크기에 맞게 조정 */
	height: 60px;
	object-fit: cover;
	border-radius: 8px; /* 디자인에 맞게 조정 */
}

.news-content img {
	width: 100px;
	height: 60px;
	border-radius: 4px;
	border: 1px solid #F0F0F0;
}

/* 페이지네이션 */
.pagination {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 8px;
	margin-top: 24px;
}

.pagination .page-btn img {
	margin-top: 3px;
}

.page-btn {
	width: 28px;
	height: 28px;
	border: 1px solid #CBCBCB;
	background: #fff;
	border-radius: 4px;
	cursor: pointer;
}

.page-numbers {
	display: flex;
	gap: 4px;
}

.page-numbers span {
	width: 28px;
	height: 28px;
	display: flex;
	justify-content: center;
	align-items: center;
	color: #868A93;
}

.page-numbers .active {
	color: #094E7F;
	font-weight: 700;
	text-decoration: underline;
}

/* 보도자료-상세 */

/* 메인 */
.main {
	flex: 1;
}

/* 페이지 타이틀 */
.container .page-title {
	font-size: 24px;
	font-weight: 700;
	line-height: 1.6;
	margin-bottom: 32px;
}

/* 상세 */
.press-detail {
	display: flex;
	flex-direction: column;
	gap: 32px;
}

/* 제목 */
.detail-header {
	padding-bottom: 20px;
	border-bottom: 1px solid #F0F0F0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.detail-title {
	font-size: 24px;
	font-weight: 600;
	line-height: 1.6;
	word-break: keep-all;
}

.detail-date {
	font-size: 14px;
	color: #868A93;
	line-height: 1.6;
}

/* 썸네일 */
.detail-thumbnail img {
	width: 100%;
	border-radius: 8px;
	object-fit: cover;
}

/* 본문 */
.detail-content {
	display: flex;
	flex-direction: column;
	gap: 24px;
	font-size: 16px;
	line-height: 1.8;
	color: #343434;
	word-break: keep-all;
	margin-bottom: 32px;
}

.detail-content .detail-text { white-space: pre-line; }

.detail-text img,
.detail-text video {
	max-width: 100%;
	width: 100%;
	height: auto;
	display: block;
}

.detail-text iframe {
	max-width: 100%;
	width: 100%;
	aspect-ratio: 16 / 9;
	height: auto;
}

/* 이전글 다음글 */
.post-navigation {
	border-top: 1px solid #F0F0F0;
	border-bottom: 1px solid #F0F0F0;
}

.nav-item {
	display: flex;
	gap: 12px;
	padding: 12px 8px;
	border-bottom: 1px solid #F0F0F0;
}

.nav-item:last-child {
	border-bottom: none;
}

.nav-label {
	width: 48px;
	font-size: 14px;
	color: #868A93;
	flex-shrink: 0;
}

.nav-title {
	flex: 1;
	font-size: 16px;
	line-height: 1.6;
	word-break: keep-all;
}

/* 목록 버튼 */
.list-btn {
	height: 48px;
	background: #094E7F;
	border-radius: 4px;
	display: flex;
	justify-content: center;
	align-items: center;
	color: #fff;
	font-size: 16px;
	font-weight: 600;
}

/* 갤러리 목록 */
/* 컨텐츠 */
.gallery-page .content {
	padding: 20px;
}

.gallery-page .content .page-title {
	font-size: 24px;
	font-weight: 700;
	line-height: 1.6;
	margin-bottom: 32px;
}

.tab {
	padding: 0 4px 4px;
	border: none;
	background: none;
	font-size: 18px;
	font-weight: 600;
	color: #868A93;
	cursor: pointer;
}

.tab.active {
	border-bottom: 2px solid #094E7F;
	color: #1F1F1F;
	font-weight: 700;
}

.search-icon {
	width: 20px;
	height: 20px;
	position: relative;
}

.search-icon .circle {
	width: 13px;
	height: 13px;
	border: 2px solid #222;
	border-radius: 50%;
	position: absolute;
	top: 2px;
	left: 2px;
}

.search-icon .line {
	width: 6px;
	height: 2px;
	background: #222;
	position: absolute;
	right: 0;
	bottom: 2px;
	transform: rotate(45deg);
}

/* 리스트 */
.gallery-list {
	display: flex;
	flex-direction: column;
}

.gallery-thumb-wrap{
	width: 100%;
	height: auto;
	background: #ffffff;
	min-height: 0;
  	aspect-ratio: 1.75 / 1;
}

.gallery-thumb-wrap img {
	width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid #F0F0F0;
}

/* 아이템 */
.gallery-item {
	padding: 20px 0 16px;
	border-bottom: 1px solid #F0F0F0;
}

.thumb-wrap {
	position: relative;
	margin-bottom: 12px;
}

.thumb-wrap img {
	width: 100%;
	border-radius: 8px;
	border: 1px solid #F0F0F0;
	display: block;
	object-fit: cover;
}

/* 플레이 버튼 */
.play-btn {
	width: 56px;
	height: 56px;
	background: rgba(34, 34, 34, 0.8);
	border-radius: 999px;
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.play-icon {
	width: 0;
	height: 0;
	border-top: 8px solid transparent;
	border-bottom: 8px solid transparent;
	border-left: 14px solid #fff;
}

/* 정보 */
.gallery-info {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin-top: 12px;
}

.badge {
	width: fit-content;
	padding: 2px 8px;
	border-radius: 4px;
	background: #094E7F;
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.6;
}

.gallery-info .title {
	font-size: 16px;
	line-height: 1.6;
	font-weight: 600;
}

/* 갤러리 상세 */

.gallery-detail-page .content {
	padding: 20px;
}

/* 제목 */
.gallery-detail-page .content .page-title {
	margin-bottom: 32px;
	font-size: 24px;
	font-weight: 700;
	line-height: 1.6;
}

/* 탭 */
.tab-wrap {
	display: flex;
	gap: 8px;
	margin-bottom: 32px;
}

.tab {
	padding: 0 4px 4px;
	border: none;
	background: none;
	color: #868A93;
	font-size: 18px;
	font-weight: 600;
	line-height: 1.6;
	cursor: pointer;
}

.tab.active {
	color: #1F1F1F;
	font-weight: 700;
	border-bottom: 2px solid #094E7F;
}

/* 상세 */
.gallery-detail {
	display: flex;
	flex-direction: column;
	gap: 32px;
}

/* 상세 상단 */
.detail-header {
	padding-bottom: 20px;
	border-bottom: 1px solid #F0F0F0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.badge {
	width: fit-content;
	padding: 2px 8px;
	border-radius: 4px;
	background: #094E7F;
	color: #ffffff;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.6;
}

.detail-title {
	font-size: 24px;
	font-weight: 600;
	line-height: 1.6;
}

.date {
	color: #868A93;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.6;
}

/* 이미지 리스트 */
.image-list {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.image-list img {
	width: 100%;
	border-radius: 8px;
	border: 1px solid #F0F0F0;
	display: block;
	object-fit: cover;
}

.image-list img,
.detail-contents img {
    width: 100%;
    max-width: 100%;
    height: auto;
    display: block;
}


/* .detail-contents img,
.detail-contents iframe {
    max-width: 100% !important;
}

.detail-contents img {
    width: auto !important;
    height: auto !important;
}

.detail-contents iframe {
    width: 100% !important;
    aspect-ratio: 16 / 9;
    height: auto !important;
} */

.detail-contents iframe {
    width: 100% !important;
    max-width: 100%;
    aspect-ratio: 16 / 9;
    height: auto !important;
    border: 0;
}

.detail-contents {
    overflow: hidden;
}

/* 이전글 다음글 */
.post-navigation {
	margin-top: 32px;
	border-top: 1px solid #F0F0F0;
	border-bottom: 1px solid #F0F0F0;
}

.nav-item {
	padding: 12px 8px;
	display: flex;
	align-items: flex-start;
	gap: 12px;
}

.nav-item+.nav-item {
	border-top: 1px solid #F0F0F0;
}

.nav-label {
	min-width: 45px;
	color: #868A93;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.6;
}

.nav-title {
	flex: 1;
	color: #1F1F1F;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.6;
}

/* 버튼 */
.list-btn {
	width: 100%;
	height: 48px;
	margin-top: 32px;
	border: none;
	border-radius: 4px;
	background: #094E7F;
	color: #ffffff;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.6;
	cursor: pointer;
}

/* 자선경기 */
.charity-page {
	width: 100%;
	min-height: 100vh;
	background: #FFFFFF;
	overflow-x: hidden;
	font-family: 'Pretendard', sans-serif;
}
/* 메인 */
.main-content {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

/* 메인 이미지 */
.hero-image {
	width: 100%;
	height: 211px;
	object-fit: cover;
}

/* 내부 */
.content-inner {
	padding: 0 20px;
	display: flex;
	flex-direction: column;
	gap: 32px;
}

.top-arrow .top-a {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	align-items: center;
}

.top-arrow .top-a a {
   font: 14px;
   font-weight: 600;
   gap: 4px;
   display: flex;
   align-items: center;
}

.top-arrow .top-a img {
	width: 16px;
	height: 16px;
}

.top-arrow .top-a-vip {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	align-items: center;
}

.top-arrow .top-a-vip a {
	font: 14px;
	font-weight: 600;
	gap: 4px;
	display: flex;
	align-items: center;
}

.top-arrow .top-a-vip img {
	width: 16px;
	height: 16px;
}

/* 타이틀 */
.page-title {
	margin: 0;
	font-size: 24px;
	font-weight: 700;
	line-height: 38.4px;
	color: #1F1F1F;
}

/* 연도 탭 */
.year-tabs {
	/*display: flex;*/
	gap: 8px;
	padding-bottom: 16px;
}

.tab {
	padding: 0 4px 4px;
	border: none;
	background: transparent;
	font-size: 18px;
	font-weight: 600;
	line-height: 28.8px;
	color: #868A93;
	cursor: pointer;
}

.tab.active {
	color: #1F1F1F;
	font-weight: 700;
	border-bottom: 2px solid #094E7F;
}

.tab-content {
	display: none;
}

.tab-content.active {
	display: block;
}

/* 자선 경기 설명 */
.rcrt-desc {
	align-self: stretch;
	color: #343434;
	font-family: Pretendard;
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: 160%;
}

/* 자선 경기 섹션 */
.match-section {
	display: flex;
	flex-direction: column;
	gap: 32px;
}

/* 카드 */
.match-card {
	padding: 16px;
	background: #F4F4F4;
	border-radius: 8px;
	margin-bottom: 20px;
}

.match-info {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.match-title {
	margin: 0;
	font-size: 18px;
	font-weight: 700;
	line-height: 28.8px;
	color: #1F1F1F;
}

/* 정보 리스트 */
.info-list {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.info-row {
	display: flex;
	align-items: flex-start;
	gap: 4px;
}

.label {
	min-width: 80px;
	font-size: 14px;
	font-weight: 400;
	line-height: 22.4px;
	color: #666666;
}

.value {
	flex: 1;
	font-size: 16px;
	font-weight: 400;
	line-height: 25.6px;
	color: #343434;
}

/* 설명 */
.match-description {
	margin: 0;
	font-size: 16px;
	font-weight: 400;
	line-height: 25.6px;
	color: #343434;
}

/* 이미지 리스트 */
.tab-content .image-list {
	display: flex;
	flex-direction: column;
	margin-bottom: 32px;
}

.tab-content .image-list img {
	width: 100%;
	border-radius: 8px;
	border: 1px solid #F0F0F0;
	object-fit: cover;
	display: block;
}

/* 영상 */
.tab-content .video-section {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.video-thumbnail {
	position: relative;
}

.video-thumbnail img {
	width: 100%;
	border-radius: 8px;
	border: 1px solid #F0F0F0;
	object-fit: cover;
	display: block;
}

/* 플레이 버튼 */
.play-btn {
	width: 56px;
	height: 56px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	border: none;
	border-radius: 999px;
	background: rgba(34, 34, 34, 0.8);
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: pointer;
}

.play-icon {
	width: 0;
	height: 0;
	border-top: 8px solid transparent;
	border-bottom: 8px solid transparent;
	border-left: 14px solid #FFFFFF;
}

/* 영상 제목 */
.video-title {
	margin: 0;
	font-size: 16px;
	font-weight: 600;
	line-height: 25.6px;
	color: #1F1F1F;
}

/* 영상 버튼 */
.more-btn {
	width: 260px;
	padding: 12px 20px;
	border: 1px solid #CBCBCB;
	border-radius: 999px;
	background: #FFFFFF;
	display: inline-flex;
	justify-content: flex-start;
	align-items: center;
	gap: 4px;
	margin-left: 60px;
	margin-top: 40px;
	cursor: pointer;
	display: flex;
	justify-content: center;
	align-items: center;
	appearance: none;
	-webkit-appearance: none;
	background-image: none;
}

.more-btn::before, .more-btn::after {
	display: none;
	content: none;
}

.more-btn-text {
	color: #1F1F1F;
	font-size: 16px;
	font-family: 'Pretendard', sans-serif;
	font-weight: 600;
	line-height: 25.6px;
}

/* 카피라이트 */
.copyright {
	margin: 0;
	font-size: 13px;
	font-weight: 400;
	line-height: 19.5px;
	color: #868A93;
}

.contents-area iframe {
    width: 100% !important;
    aspect-ratio: 16 / 9 !important;
    height: auto !important;
    border: 0;
}

/* 자선경기 신청 */

/* 참여 신청 영역 */
.apply-section {
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 32px;
}

/* 탭 */
.apply-tabs {
	display: flex;
	gap: 8px;
	padding-bottom: 16px;
}

.apply-tab {
	padding: 0 4px 4px;
	border: none;
	background: none;
	font-size: 18px;
	font-weight: 600;
	line-height: 28px;
	color: #868A93;
	cursor: pointer;
}

.apply-tab.active {
	color: #1F1F1F;
	font-weight: 700;
	border-bottom: 2px solid #094E7F;
}

/* 폼 */
.apply-form {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.apply-form p {
	font-size: 20px;
	font-weight: 700;
}

.recipient {
	margin-top: 32px;
}

/* 그룹 */
.form-group {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

/* 라벨 */
.form-label {
	font-size: 16px;
	font-weight: 400;
	line-height: 25px;
	color: #1F1F1F;
}

.form-label span {
	color: #D91C0B;
}

/* 인풋 */
.form-input {
	width: 100%;
	height: 48px;
	padding: 0 16px;
	border: 1px solid #CBCBCB;
	border-radius: 4px;
	font-size: 16px;
	color: #1F1F1F;
	background: #fff;
	box-sizing: border-box;
}

.form-input::placeholder {
	color: #CACACA;
}

/* select */
.apply-form .form-group .form-select {
	position: relative;
	width: 100%;
	height: 48px;
	display: flex;
	align-items: center;
	border: 1px solid #CBCBCB;
	border-radius: 4px;
	background: #FFFFFF;
	overflow: hidden;
}

.apply-form .form-group .form-select select {
	flex: 1;
	height: 100%;
	height: 48px;
	padding: 0 16px;
	border: 1px solid #CBCBCB;
	border-radius: 4px;
	font-size: 16px;
	color: #1F1F1F;
	background: transparent;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	cursor: pointer;
	outline: none;
}

/* 오른쪽 영역 */
.apply-form .form-group .select-arrow {
	position: absolute;
	top: 0;
	right: 0;
	width: 48px;
	height: 48px;
	background: #F6F6F6;
	border-left: 1px solid #CBCBCB;
	border-top-right-radius: 4px;
	border-bottom-right-radius: 4px;
	display: flex;
	justify-content: center;
	align-items: center;
	pointer-events: none;
}

/* 화살표 이미지 */
.apply-form .form-group .select-arrow img {
	width: 16px;
	height: 16px;
	transform: rotate(90deg);
}




/* 하단 */
.apply-bottom {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

/* 버튼 */
.submit-btn {
	width: 100%;
	height: 48px;
	border: none;
	border-radius: 4px;
	background: #094E7F;
	color: #fff;
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
}

/* 안내 박스 */
.apply-bottom .notice-box {
	display: flex;
	align-items: flex-start;
	gap: 4px;
	padding: 12px;
	border-radius: 8px;
	background: #F4F4F4;
}

/* 아이콘 */
.notice-icon {
	width: 16px;
	height: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	margin-top: 3px;
}

/* 안내 문구 */
.notice-tt {
	color: #0B78CB;
	font-family: Pretendard;
	font-size: 14px;
	font-style: normal;
	font-weight: 400;
	line-height: 160%; /* 22.4px */
}


/* 참여신청 모달창 */

/* 모달 배경 */
.charity-page .modal-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: none;
	justify-content: center;
	align-items: center;
	z-index: 9999;
}

/* 모달 박스 */
.modal-container {
	width: 100%;
	max-width: 860px;
	height: 100vh;
	background: #fff;
	border-radius: 0;
	display: flex;
	flex-direction: column;
}

/* 헤더 */
.modal-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 16px;
	border-bottom: 1px solid rgba(0,0,0,0.04);
}

.modal-header .title {
	font-size: 16px;
	font-weight: 600;
	color: #1F1F1F;
}

/* 내용 */
.modal-content-ch {
	padding: 20px;
	flex: 1;
	overflow-y: auto;
}

.modal-title {
	font-size: 24px;
	font-weight: 700;
	margin-bottom: 16px;
}

/* 정보 박스 */
.info-box {
	background: #F4F4F4;
	padding: 16px;
	border-radius: 8px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.info-row {
	display: flex;
	justify-content: space-between;
	font-size: 14px;
}

.info-row span:first-child {
	color: #666;
	width: 80px;
}

.info-row span:last-child {
	color: #1F1F1F;
}

/* 안내 문구 아이콘 */
.modal-notice-icon {
	width: 16px;
	height: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	margin-top: 2px;
	margin-right: 5px;
}

/* 안내 문구 */
.info-notice {
	color: #0B78CB;
	font-size: 14px;
	margin-top: 10px;
	display: flex;
}

/* 버튼 */
.modal-container .modal-content-ch .confirm-btn {
	width: 100%;
	height: 48px;
	margin-top: 20px;
	background: #094E7F;
	color: #fff;
	border: none;
	border-radius: 4px;
	font-size: 16px;
	cursor: pointer;
}

/* 기프트 세트 자세히 보기 팝업*/

.productModal {
  position: fixed;
  top: 0;   /* 최상단에 붙임 */
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 10;
  display: none; /* JS에서 active 클래스로 제어 */
}

.productModal.active {
  display: flex !important;
}

.productmodal-content {
	margin: 0 auto;
	background-color: #fff;
	width: 100%;
	max-width: 860px;
	height: 100vh;
	display: flex;
	flex-direction: column;
	padding: 24px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
	position: absolute;
	left: 0;
	right: 0;
	box-sizing: border-box;
	overflow-y: auto;
}

#modalImg {
  width: 100%;
  display: block;
  border-radius: 0;
  margin-bottom: 0;
}

.productmodal-body {
	margin-top: 50px;
	display: flex;
	flex-direction: column;
}

.productmodal-content .btn-list {
	flex-shrink: 0;
	margin-top: 16px;
	width: 100%;
	position: static;
}

.product-text-content {
  padding: 24px;
}

#modalTitle {
  font-size: 24px;
  font-weight: 700;
  margin: 20px 0 10px 0;
}

#modalContents {
	color: #343434;
	font-family: Pretendard;
	font-size: 15px;
	font-weight: 400;
	line-height: 160%;
	word-break: break-word;
	overflow-x: hidden;
}

#modalContents img {
	max-width: 100%;
	height: auto !important;
}

#modalContents table {
	max-width: 100%;
	display: block;
	overflow-x: auto;
}

/* ── 마이페이지 팝업 (사이트맵과 동일 구조) ── */
.mypage {
	position: fixed;
	top: 0;                          /* ★ 60px → 0 (헤더까지 덮음) */
	left: 50%;
	width: 100%;
	max-width: 860px;
	height: 100vh;                   /* ★ 전체 높이 */
	background: var(--color-white);
	z-index: 100;                    /* 헤더보다 위 (헤더 z-index 확인 필요) */
	transform: translateX(-50%);
	display: none;
	flex-direction: column;
	overflow: hidden;
}

.mypage.is-open {
	display: flex;
}

.mypage__header {
	flex-shrink: 0;
	display: flex;
	justify-content: flex-end;
	align-items: center;
	height: 60px;                    /* ★ 원래 헤더와 같은 높이 */
	padding: 0 20px;
	box-sizing: border-box;
}

.mypage__close {
	background: none;
	border: none;
	cursor: pointer;
	line-height: 0;
	padding: 8px 4px;
	width: 38px;
    height: 38px;
}

/* 스크롤 영역 */
.mypage__body {
	flex: 1;
	overflow-y: auto;
	padding: 0 20px 30px;
}

/* 타이틀 */
.mypage__title {
	font-size: 24px;
	font-weight: 700;
	color: #1f1f1f;
	line-height: 1.6;
	padding: 20px 0 0;
	margin: 0;
}

/* 사용자 정보 */
.mypage__user {
	display: flex;
	align-items: center;
	gap: 8px;
	padding-bottom: 24px;
}

/* 이름 */
.mypage__user-name {
	font-size: 20px;
	font-weight: 400;
	color: #1f1f1f;
	line-height: 32px;
}
.mypage__user-nm {
	font-weight: 700;
}

/* 등급 배지 */
.mypage__badge {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	gap: 2px;
	padding: 2px 8px;
	background: #e7f4fd;
	border: 1px solid rgba(11, 120, 203, 0.50);
	border-radius: 999px;
	color: #094e7f;
	font-size: 12px;
	font-weight: 600;
	line-height: 19.2px;
	flex-shrink: 0;
}

/* 연차 원형 */
.mypage__badge-year {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 16px;
	height: 16px;
	background: #094e7f;
	border-radius: 50%;
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	line-height: 1;
	flex-shrink: 0;
}
/* 메뉴 그룹 */
.mypage__group {
	margin-bottom: 20px;
}
.mypage__group-title {
	padding: 8px 0;
	border-bottom: 2px solid #222;
	font-size: 16px;
	font-weight: 600;
	color: #1f1f1f;
	margin: 0;
}
.mypage__list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.mypage__item {
	display: block;
	padding: 12px 0;
	border-bottom: 1px solid #f0f0f0;
	font-size: 16px;
	font-weight: 400;
	color: #1f1f1f;
	text-decoration: none;
}

/* 푸터 */
.mypage__footer {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	padding-top: 16px;
}
.mypage__footer-links {
	display: flex;
	align-items: center;
	gap: 8px;
}
.mypage__footer-link {
	font-size: 14px;
	color: #868a93;
	font-weight: 400;
	cursor: pointer;
}
.mypage__footer-link.is-bold {
	color: #343434;
	font-weight: 700;
}
.mypage__footer-divider {
	width: 1px;
	height: 12px;
	background: #d5d5d5;
}
.mypage__copyright {
	font-size: 13px;
	color: #868a93;
	margin: 0;
}

/* 마이 페이지 > 회원정보 수정 */
.info-edit {
	padding: 20px;
	display: flex;
	flex-direction: column;
	gap: 32px;
}
.info-edit__title {
	font-size: 24px;
	font-weight: 700;
	color: #1f1f1f;
	line-height: 1.6;
	margin: 0;
}
.info-edit__form {
	display: flex;
	flex-direction: column;
	gap: 32px;
}

/* 섹션 */
.info-edit__section {
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.info-edit__section-title {
	font-size: 18px;
	font-weight: 700;
	color: #1f1f1f;
	line-height: 1.6;
	margin: 0;
}

/* 필드 */
.info-edit__field {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.info-edit__label {
	font-size: 16px;
	font-weight: 400;
	color: #1f1f1f;
	line-height: 1.6;
}
.info-edit__req { color: #d91c0b; }

/* 인풋 */
.info-edit__input {
	width: 100%;
	height: 48px;
	padding: 0 16px;
	background: #fff;
	border: 1px solid #cbcbcb;
	border-radius: 4px;
	font-size: 16px;
	color: #1f1f1f;
	box-sizing: border-box;
}
.info-edit__input--readonly {
	display: flex;
	align-items: center;
	background: #f5f5f5;
	border-color: #ddd;
}

/* 셀렉트 박스 (구단/리그) */
.info-edit__select-box {
	position: relative;
	height: 48px;
	border: 1px solid #cbcbcb;
	border-radius: 4px;
	background: #fff;
	display: flex;
	align-items: center;
	margin-bottom: 8px;
}
.info-edit__select-box select {
	width: 100%;
	height: 100%;
	padding: 0 40px 0 16px;
	border: none;
	outline: none;
	font-size: 16px;
	color: #1f1f1f;
	background: transparent;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	cursor: pointer;
}
.info-edit__select-arrow {
	position: relative;
	right: 0;
	top: 0;
	display: flex;
	width: 50px;
	height: 46px;
	justify-content: center;
	align-items: center;
	background: #f6f6f6;
	border-left: 1px solid #cbcbcb;
	border-radius: 0 4px 4px 0;
	overflow: hidden;
	box-sizing: border-box;
	pointer-events: none;
}

/* 기본정보 박스 */
.info-edit__box {
	padding: 16px;
	background: #f5f5f5;
	border-radius: 4px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.info-edit__row {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
}
.info-edit__row-label {
	font-size: 16px;
	color: #1f1f1f;
}
.info-edit__row-value {
	font-size: 16px;
	color: #1f1f1f;
}

/* 주소 */
.info-edit__addr {
	display: flex;
	gap: 8px;
	margin-bottom: 8px;
}
.info-edit__addr .info-edit__input { flex: 1; }

/* 버튼 */
.info-edit__btn {
	height: 48px;
	padding: 0 16px;
	border-radius: 4px;
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
	border: none;
}
.info-edit__btn--outline {
	width: 100%;
	background: #fff;
	border: 1px solid #222;
	color: #222;
}
.info-edit__btn--dark {
	background: #222;
	color: #fff;
	font-size: 14px;
	white-space: nowrap;
}

/* 안내 박스 */
.info-edit__notice {
	display: flex;
	align-items: flex-start;
	gap: 4px;
	padding: 12px;
	background: #f4f4f4;
	border-radius: 8px;
}
.info-edit__notice span {
	font-size: 14px;
	color: #0b78cb;
	line-height: 1.6;
}
.info-edit__notice img {
	flex-shrink: 0; margin-top: 3px;
}

/* 체크박스 영역 */
.info-edit__checks {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.info-edit__checks-row {
	display: flex;
}
.info-edit__check {
	flex: 1;
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 4px 0;
	cursor: pointer;
}

/* 기본 체크박스 숨기기 */
.info-edit__check-input {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	border: 0;
}

/* 커스텀 체크박스 */
.info-edit__checkbox {
	width: 20px;
	height: 20px;
	aspect-ratio: 1/1;
	border-radius: 4px;
	border: 1px solid #bbb;
	background: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	flex-shrink: 0;
	transition: all 0.2s ease;
}

/* 체크마크 아이콘 (기본 숨김, 흰색) */
.info-edit__check-mark {
	width: 14px;
	height: 14px;
	display: none;
	filter: brightness(0) invert(1);   /* 흰색으로 */
	pointer-events: none;
}

/* 체크 시 파란 배경 + 테두리 */
.info-edit__check-input:checked + .info-edit__checkbox {
	background: #094e7f;
	border-color: #094e7f;
}
/* 체크 시 체크마크 표시 */
.info-edit__check-input:checked + .info-edit__checkbox .info-edit__check-mark {
	display: block;
}

/* 텍스트 */
.info-edit__check-text {
	color: #343434;
	font-size: 15px;
	font-weight: 400;
	line-height: 24px;
}

/* 가이드 (점 + 텍스트) */
.info-edit__guide {
	display: flex;
}
.info-edit__guide-dot {
	width: 2px;
	height: 2px;
	margin-right: 5px;
	margin-top: 9px;
	flex-shrink: 0;
}
.info-edit__guide-text {
	color: #666666;
	font-size: 14px;
	font-weight: 400;
	line-height: 160%;
}

/* 제출 버튼 */
.info-edit__submit {
	width: 100%;
	height: 48px;
	background: #094e7f;
	border: none;
	border-radius: 4px;
	color: #fff;
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
}

/* input label */
.label_noPointer {
	cursor: auto;
}

/* 마이페이지 > 혜택 신청 내역 */
.ben-app {
	padding: 20px 20px 60px;
	display: flex;
	flex-direction: column;
	gap: 32px;
	background: #fff;
}

/* 타이틀 + 연도 */
.ben-app__head {
	display: flex;
	align-items: center;
	gap: 8px;
}
.ben-app__title {
	flex: 1;
	font-size: 24px;
	font-weight: 700;
	color: #1f1f1f;
	line-height: 1.6;
	margin: 0;
}
.ben-app__year {
	position: relative;
	height: 36px;
	border: 1px solid #cbcbcb;
	border-radius: 4px;
	display: flex;
	align-items: center;
}
.ben-app__year-select {
	height: 36px;
	padding: 0 44px 0 10px;
	border: none;
	outline: none;
	background: transparent;
	font-size: 16px;
	color: #1f1f1f;
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
}
.ben-app__year-arrow {
	position: absolute;
	right: 0;
	top: 0;
	width: 34px;
	height: 34px;
	display: flex;
	justify-content: center;
	align-items: center;
	background: #f6f6f6;
	border-left: 1px solid #cbcbcb;
	border-radius: 0 4px 4px 0;
	pointer-events: none;
}

/* 본문 */
.ben-app__body {
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.ben-app__desc {
	font-size: 14px;
	color: #1f1f1f;
	margin: 0;
}

/* 카드 */
.ben-app__card {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 16px;
	background: #fff;
	border: 1px solid #ddd;
	border-radius: 8px;
	text-decoration: none;
}
.ben-app__card-info {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.ben-app__card-title {
	font-size: 18px;
	font-weight: 700;
	color: #1f1f1f;
	line-height: 1.6;
}
.ben-app__card-desc {
	font-size: 16px;
	font-weight: 400;
	color: #1f1f1f;
	line-height: 1.6;
	margin: 0;
}
.ben-app__card-arrow {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	color: #797979;

	width: 14px;
    height: 14px;
    display: inline-block;
    background-color: #797979;

    -webkit-mask: url('/assets/images/icon/etc/arrow-right-small.svg') no-repeat center;
    -webkit-mask-size: contain;

    mask: url('/assets/images/icon/etc/arrow-right-small.svg') no-repeat center;
    mask-size: contain;
}

/* 신청 내역 없는 카드 (화살표 없음, 클릭 불가 느낌) */
.ben-app__card--disabled {
	cursor: default;
}

/* 비밀번호 재설정 */
.pw-wrap{
    width:100%;
    max-width:375px;
    min-height:100vh;
    margin:0 auto;
    background:#fff;
    display:flex;
    flex-direction:column;
}

.pw-container{
    flex:1;
    padding:20px;
}

.pw-title{
    font-size:24px;
    font-weight:700;
    color:#1F1F1F;
    line-height:38px;
    margin-bottom:32px;
}

.pw-form{
    display:flex;
    flex-direction:column;
    gap:32px;
}

.pw-field{
    display:flex;
    flex-direction:column;
    gap:8px;
}

.pw-label{
    display:flex;
    align-items:center;
    gap:4px;
    font-size:16px;
    color:#1F1F1F;
}

.pw-required{
    color:#D91C0B;
}

.pw-input-group{
    display:flex;
    flex-direction:column;
    gap:12px;
}

.pw-input{
    width:100%;
    height:48px;
    padding:0 16px;
    border:1px solid #CBCBCB;
    border-radius:4px;
    font-size:16px;
    outline:none;
    box-sizing:border-box;
}

.pw-input::placeholder{
    color:#CACACA;
}

.pw-submit{
    width:100%;
    height:48px;
    border:none;
    border-radius:4px;
    background:#CCCCCC;
    color:#fff;
    font-size:16px;
    font-weight:600;
    cursor:pointer;
}

.pw-submit:not(:disabled){
    background:#094E7F;
}

.pw-msg {
    margin-bottom: 20px;
    padding: 12px 16px;
    border-radius: 4px;
    background: #EFF6FF;
    color: #094E7F;
    font-size: 14px;
    line-height: 1.6;
}

/* 혜택 신청 내역 */
/* ===== Wrap (모바일 430px 고정) ===== */
.ben_sebtitle-wrap{
    width:100%;
    max-width:860px;
    min-height:100vh;
    margin:0 auto;
    background:#fff;
    display:flex;
    flex-direction:column;
    font-family:'Pretendard', sans-serif;
}

/* ===== 컨테이너 ===== */
.ben_sebtitle-container{
    flex:1;
    padding:20px;
    display:flex;
    flex-direction:column;
    gap:32px;
}

.ben_sebtitle-top{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:8px;
}

.ben_sebtitle-title{
    font-size:24px;
    font-weight:700;
    color:#1F1F1F;
    line-height:38.4px;
}

.ben_sebtitle-year-select{
    display:flex;
    align-items:center;
    height:40px;
    border:1px solid #CBCBCB;
    border-radius:4px;
    overflow:hidden;
}

.ben_sebtitle-year-select span{
    padding:0 16px;
    font-size:16px;
    color:#1F1F1F;
    line-height:25.6px;
}

.ben_sebtitle-year-btn{
    width:40px;
    height:40px;
    border:none;
    border-left:1px solid #CBCBCB;
    background:#F6F6F6;
    cursor:pointer;
    color:#797979;
    font-size:10px;
    transform:rotate(90deg);
}

/* ===== 섹션 ===== */
.ben_sebtitle-section{
    display:flex;
    flex-direction:column;
    gap:12px;
}

.ben_sebtitle-section-title{
    font-size:20px;
    font-weight:700;
    color:#1F1F1F;
    line-height:32px;
}

.ben_sebtitle-card-list{
    display:flex;
    flex-direction:column;
    gap:16px;
}

/* ===== 카드 ===== */
.ben_sebtitle-card{
    padding:16px;
    background:#F4F4F4;
    border-radius:8px;
    display:flex;
    flex-direction:column;
    gap:12px;
}

.ben_sebtitle-date{
    font-size:18px;
    font-weight:700;
    color:#343434;
    line-height:28.8px;
}

.ben_sebtitle-divider{
    height:1px;
    background:#CBCBCB;
}

/* ===== 리스트형 (기프트세트) ===== */
.ben_sebtitle-list{
    list-style:none;
    padding:0;
    margin:0;
    display:flex;
    flex-direction:column;
    gap:4px;
}

.ben_sebtitle-list li{
    font-size:14px;
    line-height:22px;
    color:#1F1F1F;
}

/* ===== 라벨-값형 (해커스/꾸까/건강검진/미즈노/지도자라이선스) ===== */
.ben_sebtitle-body{
    display:flex;
    flex-direction:column;
    gap:12px;
}

.ben_sebtitle-item{
    display:flex;
    flex-direction:column;
    gap:4px;
}

.ben_sebtitle-item-title{
    font-size:16px;
    font-weight:700;
    color:#1F1F1F;
    line-height:25.6px;
}

.ben_sebtitle-rows{
    display:flex;
    flex-direction:column;
    gap:8px;
}

.ben_sebtitle-row{
    max-width:500px;
    display:flex;
    align-items:flex-start;
    gap:12px;
}

.ben_sebtitle-label {
	width: 80px;
	flex-shrink: 0;
	color: #666666;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.6;
}

.ben_sebtitle-value{
    font-size:14px;
    color:#1F1F1F;
    line-height:22.4px;

    word-break: break-all;
	word-wrap: break-word;
	white-space: normal; /* 혹시 nowrap이 걸려있다면 해제 */
	display: inline-block;
	max-width: 100%;
	vertical-align: top;
}

.ben_sebtitle-value--long{
    flex:1 1 0;
    align-items:flex-start;
}

.ben_sebtitle-notice{
    display:flex;
    align-items:center;
    gap:4px;
}

.ben_sebtitle-notice img {
	flex-shrink: 0;
}
.ben_sebtitle-notice span {
	color: #0b78cb;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.6;
}

.ben_sebtitle-notice-text{
    flex:1 1 0;
    font-size:14px;
    color:#0B78CB;
    line-height:22.4px;
}

/* 메인 서포터즈 팝업 */
.main-popup {
	display: none;
	position: fixed;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 100%;
	max-width: 860px;
	height: 100vh;
	background: rgba(0, 0, 0, 0.6);
	z-index: 200;
	justify-content: center;
	align-items: center;
}
.main-popup.is-open {
	display: flex;
}

/* 팝업 박스 */
.main-popup__box {
	width: 340px;
	max-width: calc(100% - 24px);
	min-height: 320px;
	border-radius: 16px;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

/* 상단 그라데이션 영역 */
.main-popup__content {
	position: relative;
	min-height: 320px;
	padding: 32px;
	background: linear-gradient(123deg, #F2F8FC 14.29%, #D0E4F3 85.71%);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	box-sizing: border-box;
}

/* 로고 모양 워터마크 (오른쪽 뒤) */
.main-popup__mask {
	position: absolute;
	right: 0;
	top: 0;
	width: 205px;
	height: 205px;
	margin-right: -70px;
	margin-top: 60px;
	background: linear-gradient(180deg, rgba(9, 78, 127, 0.00) 0%, rgba(9, 78, 127, 0.07) 100%);

	/* 로고 모양대로 그라데이션을 잘라냄 */
	-webkit-mask-image: url('/assets/images/icon/logo_small.png');
	mask-image: url('/assets/images/icon/logo_small.png');
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-position: center;
	mask-position: center;

	pointer-events: none;
}

/* 틴트 (이미지 위 반투명 그라데이션) */
.main-popup__tint {
	position: absolute;
	right: 0;
	top: 0;
	width: 205px;
	height: 205px;
	background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.10) 100%);
	pointer-events: none;
}

.main-popup__deco {
	position: absolute;
	left: -35px;
	top: 246px;
	width: 90px;
	height: 90px;
	background: rgba(9, 78, 127, 0.05);
	border-radius: 50%;
	pointer-events: none;
}

/* 로고 */
.main-popup__logo {
	height: 32px;
}
.main-popup__logo img {
	width: 31px;
	height: 32px;
}

/* 텍스트 */
.main-popup__title {
	text-align: center;
	color: #094E7F;
	font-size: 24px;
	font-weight: 700;
	line-height: 1.6;
	margin: 0;
}
.main-popup__desc {
	text-align: center;
	color: #1F1F1F;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.6;
	margin: 0;
}

/* 모집기간 */
.main-popup__period {
	display: flex;
	align-items: center;
	gap: 12px;
}
.main-popup__period-label,
.main-popup__period-date {
	color: #343434;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.6;
}

/* 자세히보기 */
.main-popup__more {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 4px 12px;
	border: 1px solid rgba(9, 78, 127, 0.60);
	border-radius: 100px;
	color: #094E7F;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.6;
	text-decoration: none;
}

.main-popup__more img {
	margin-left: 2px;
}

/* 하단 버튼 영역 */
.main-popup__btns {
	display: flex;
	background: #fff;
	border-top: 1px solid #ddd;
}
.main-popup__btn {
	flex: 1;
	padding: 12px 0;
	background: none;
	border: none;
	font-size: 16px;
	font-weight: 400;
	color: #222;
	cursor: pointer;
}
.main-popup__btn:first-child {
	border-right: 1px solid #ddd;
}


/* 투표 */
/* 메인 이미지 */
.vote-hero {
	width: 100%;
	height: 211px;
	object-fit: cover;
}

/* 타이틀 */
.vote-title {
	font-size: 24px;
	font-weight: 700;
	color: #1f1f1f;
	line-height: 1.6;
	margin: 20px 0 0;
	padding: 0 20px;
}

/* 목록 */
.vote-list {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 32px 20px 60px;
}

/* 카드 (참여가능) */
.vote-card {
	position: relative;
	padding: 20px;
	background: linear-gradient(123deg, #2378B2 0%, #094E7F 100%);
	border-radius: 8px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
	box-sizing: border-box;
}

/* 로고 워터마크 (오른쪽 뒤) */
.vote-card__mask {
	position: absolute;
	right: 0;
	top: 0;
	width: 170px;
	height: 170px;
	background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.20) 100%);
	-webkit-mask-image: url('/assets/images/icon/logo_small.png');
	mask-image: url('/assets/images/icon/logo_small.png');
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-position: center;
	mask-position: center;
	pointer-events: none;
}

/* 원형 장식 (왼쪽 아래) */
.vote-card__deco {
	position: absolute;
	left: -35px;
	top: 120px;
	width: 90px;
	height: 90px;
	background: rgba(255,255,255,0.07);
	border-radius: 50%;
	pointer-events: none;
}

/* 배지 */
.vote-card__badge {
	position: relative;
	z-index: 1;
	padding: 4px 10px;
	background: rgba(9,78,127,0.60);
	border-radius: 100px;
	color: #fff;
	font-size: 12px;
	font-weight: 500;
	line-height: 1.6;
}

/* 내용 */
.vote-card__info {
	position: relative;
	z-index: 1;
	align-self: stretch;
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.vote-card__title {
	font-size: 18px;
	font-weight: 700;
	color: #fff;
	line-height: 1.6;
	margin: 0;
}
.vote-card__period {
	display: flex;
	align-items: center;
	gap: 12px;
}
.vote-card__period-label,
.vote-card__period-date {
	font-size: 14px;
	font-weight: 400;
	color: #fff;
	line-height: 1.6;
}

/* 버튼 */
.vote-card__btn {
	position: relative;
	z-index: 1;
	align-self: stretch;
	height: 40px;
	display: flex;
	justify-content: center;
	align-items: center;
	background: #fff;
	border-radius: 4px;
	color: #094e7f;
	font-size: 16px;
	font-weight: 600;
	text-decoration: none;
}

/* ── 종료된 투표 ── */
.vote-card--end {
	background: linear-gradient(123deg, #ECEDEF 0%, #D6D9DE 100%);
}
.vote-card--end .vote-card__mask {
	background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.25) 100%);
}
.vote-card--end .vote-card__deco {
	background: rgba(255,255,255,0.24);
}
.vote-card--end .vote-card__badge {
	background: rgba(189,194,202,0.50);
	color: #4a4e56;
}
.vote-card--end .vote-card__title {
	color: #3c4048;
}
.vote-card--end .vote-card__period-label,
.vote-card--end .vote-card__period-date {
	color: #565a63;
}
.vote-card--end .vote-card__btn {
	background: rgba(255,255,255,0.60);
	color: #222;
}

/* 투표하기 */
.vote-reg {
	padding: 16px 20px 100px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

/* 뒤로가기 */
.vote-reg__nav {
	display: flex;
	align-items: center;
	padding: 4px 0;
}
.vote-reg__back {
	line-height: 0;
	text-decoration: none;
}

/* 질문 */
.vote-reg__question {
	font-size: 20px;
	font-weight: 700;
	color: #1f1f1f;
	line-height: 1.6;
	margin: 0;
}

/* 보기 목록 */
.vote-reg__options {
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.vote-reg__option {
	position: relative;
	display: flex;
	align-items: center;
	gap: 20px;
	height: 56px;
	padding: 0 18px;
	background: #f4f4f4;
	border-radius: 4px;
	cursor: pointer;
	box-sizing: border-box;
}

/* 실제 라디오 숨김 */
.vote-reg__radio {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	border: 0;
}

/* 보기 텍스트 */
.vote-reg__label {
	flex: 1;
	font-size: 16px;
	font-weight: 400;
	color: #1f1f1f;
	line-height: 1.6;
}

/* 라디오 원 */
.vote-reg__mark {
	position: relative;
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 50%;
	box-sizing: border-box;
}

/* 기본: 빈 원 */
.vote-reg__mark-off {
	width: 20px;
	height: 20px;
	display: block;
}

/* 체크 아이콘 (기본 숨김, 흰색) */
.vote-reg__mark-on {
	position: absolute;
	width: 14px;
	height: 14px;
	display: none;
	filter: brightness(0) invert(1);   /* 흰색으로 */
	pointer-events: none;
}

/* 선택 시: 파란 배경 + 흰 체크 */
.vote-reg__radio:checked ~ .vote-reg__mark {
	background: #094e7f;
}
.vote-reg__radio:checked ~ .vote-reg__mark .vote-reg__mark-off {
	display: none;
}
.vote-reg__radio:checked ~ .vote-reg__mark .vote-reg__mark-on {
	display: block;
}

.vote-reg__mark svg { display: none; }

.vote-reg__option.is-selected {
	background: #fff;
	outline: 1.5px solid #094e7f;
	outline-offset: -1.5px;
}

/* 하단 고정 버튼 */
.vote-reg__bottom {
	position: fixed;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 100%;
	max-width: 860px;
	padding: 16px 12px 12px;
	background: linear-gradient(180deg, rgba(255,255,255,0) 0%, #fff 13%, #fff 100%);
	box-sizing: border-box;
}
.vote-reg__btn {
	width: 100%;
	height: 52px;
	background: #094e7f;
	border: none;
	border-radius: 4px;
	color: #fff;
	font-size: 16px;
	font-weight: 700;
	cursor: pointer;
}

/* 투표하기 완료*/
.vote-done {
	display: none;
	position: fixed;
	top: 56px;
	left: 50%;
	transform: translateX(-50%);
	width: 100%;
	max-width: 860px;
	height: calc(100vh - 56px);
	background: #fff;
	z-index: 1;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.vote-done.is-open {
	display: flex;
}

/* 가운데 내용 */
.vote-done__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	padding: 0 20px;
}

/* 체크 아이콘 */
.vote-done__icon {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 4px;
	background: #094e7f;
	border-radius: 40px;
}

/* 텍스트 */
.vote-done__text {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
}
.vote-done__title {
	font-size: 24px;
	font-weight: 700;
	color: #1f1f1f;
	line-height: 1.6;
	margin: 0;
}
.vote-done__desc {
	text-align: center;
	font-size: 16px;
	font-weight: 400;
	color: #343434;
	line-height: 1.6;
	margin: 0;
}

/* 하단 버튼 */
.vote-done__bottom {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	padding: 16px 12px 12px;
	background: linear-gradient(180deg, rgba(255,255,255,0) 0%, #fff 13%, #fff 100%);
}
.vote-popup-next-btn {
	width: 100%;
	height: 52px;
	background: #094E7F;
	color: #fff;
	border: none;
	border-radius: 4px;
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
}

/* 투표 결과*/
.vote-result {
	padding: 16px 20px 40px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

/* 뒤로가기 */
.vote-result__nav {
	display: flex;
	align-items: center;
	padding: 4px 0;
}
.vote-result__back {
	line-height: 0;
	text-decoration: none;
}

/* 제목 영역 */
.vote-result__head {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
}
.vote-result__badge {
	padding: 4px 10px;
	background: rgba(189,194,202,0.50);
	border-radius: 999px;
	color: #4a4e56;
	font-size: 12px;
	font-weight: 500;
	line-height: 1.6;
}
.vote-result__title {
	font-size: 20px;
	font-weight: 700;
	color: #1f1f1f;
	line-height: 1.6;
	margin: 0;
}
.vote-result__meta {
	font-size: 13px;
	font-weight: 400;
	color: #868a93;
	line-height: 1.6;
	margin: 0;
}

/* 결과 목록 */
.vote-result__list {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

/* 카드 */
.vote-result__card {
	padding: 14px 16px;
	background: #f4f4f4;
	border-radius: 4px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	box-sizing: border-box;
}
.vote-result__card--top {
	background: #eff6ff;
	outline: 1px solid #094e7f;
	outline-offset: -1px;
}

/* 행 */
.vote-result__row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 8px;
}
.vote-result__left {
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
}
.vote-result__right {
	display: flex;
	align-items: center;
	gap: 6px;
	flex-shrink: 0;
}

/* 순위 */
.vote-result__rank {
	font-size: 14px;
	font-weight: 700;
	color: #868a93;
	flex-shrink: 0;
}
.vote-result__card--top .vote-result__rank {
	color: #094e7f;
}

/* 이름 */
.vote-result__name {
	font-size: 16px;
	font-weight: 400;
	color: #1f1f1f;
	line-height: 1.6;
}
.vote-result__card--top .vote-result__name {
	font-weight: 600;
}

/* 내 투표 칩 */
.vote-result__chip {
	padding: 2px 8px;
	background: rgba(9,78,127,0.10);
	border-radius: 999px;
	color: #094e7f;
	font-size: 11px;
	font-weight: 500;
	line-height: 1.6;
	flex-shrink: 0;
}

/* 퍼센트 / 표수 */
.vote-result__rate {
	font-size: 16px;
	font-weight: 700;
	color: #555860;
	line-height: 1.6;
}
.vote-result__card--top .vote-result__rate {
	color: #094e7f;
}
.vote-result__cnt {
	font-size: 12px;
	font-weight: 400;
	color: #868a93;
	line-height: 1.6;
}

/* 게이지 */
.vote-result__gauge {
	width: 100%;
	height: 6px;
	background: #e4e7ec;
	border-radius: 3px;
	overflow: hidden;
}
.vote-result__gauge-fill {
	display: block;
	height: 6px;
	background: #9ea2ac;
	border-radius: 3px;
}
.vote-result__card--top .vote-result__gauge-fill {
	background: #094e7f;
}

/* 설문조사 */
.survey-wrap {
	width: 100%;
 	max-width: 860px;
  	overflow: hidden;
 	display: flex;
  	flex-direction: column;
  	align-items: flex-start;
  	gap: 20px;
}

.survey-hero-img {
	width: 100%;
  	align-self: stretch;
  	height: 210.94px;
}

.survey-content {
  	align-self: stretch;
  	padding-left: 20px;
  	padding-right: 20px;
  	display: flex;
  	flex-direction: column;
  	align-items: flex-start;
  	gap: 32px;
}

.survey-title {
  	align-self: stretch;
  	color: #1F1F1F;
  	font-size: 24px;
  	font-family: 'Pretendard', sans-serif;
  	font-weight: 700;
  	line-height: 38.4px;
  	word-wrap: break-word;
}

.survey-list {
  align-self: stretch;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}

/* 카드 공통 */
.survey-card {
  align-self: stretch;
  padding: 20px;
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

.survey-card--active {
  background: linear-gradient(123deg, #2378B2 0%, #094E7F 100%);
}

.survey-card--closed {
  background: linear-gradient(123deg, #ECEDEF 0%, #D6D9DE 100%);
}

.survey-card-thumb {
  width: 170px;
  height: 170px;
}

.survey-card-shade {
  width: 170px;
  height: 170px;
}

.survey-card--active .survey-card-shade {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.20) 100%);
}

.survey-card--closed .survey-card-shade {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.25) 100%);
}

.survey-card-circle {
  width: 90px;
  height: 90px;
  left: -35px;
  top: 120px;
  position: absolute;
  border-radius: 9999px;
}

.survey-card--active .survey-card-circle {
  background: rgba(255, 255, 255, 0.07);
}

.survey-card--closed .survey-card-circle {
  background: rgba(255, 255, 255, 0.24);
}

.survey-badge {
  padding: 4px 10px;
  overflow: hidden;
  border-radius: 100px;
  display: inline-flex;
  align-items: flex-start;
  justify-content: flex-start;
}

.survey-card-mask{
	position: absolute;
	right: 0;
	top: 0;
	width: 170px;
	height: 170px;
	background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.20) 100%);
	-webkit-mask-image: url('/assets/images/survey/logo_small.png');
	mask-image: url('/assets/images/icon/logo_small.png');
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-position: center;
	mask-position: center;
	pointer-events: none;
}

.survey-badge--active {
  background: rgba(9, 78, 127, 0.60);
}

.survey-badge--closed {
  background: rgba(189, 194, 202, 0.50);
}

.survey-badge-text {
  font-size: 12px;
  font-family: 'Pretendard', sans-serif;
  font-weight: 500;
  line-height: 19.2px;
  word-wrap: break-word;
}

.survey-badge--active .survey-badge-text {
  color: white;
}

.survey-badge--closed .survey-badge-text {
  color: #4A4E56;
}

.survey-info {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

.survey-name {
  align-self: stretch;
  font-size: 18px;
  font-family: 'Pretendard', sans-serif;
  font-weight: 600;
  line-height: 28.8px;
  word-wrap: break-word;
}

.survey-card--active .survey-name {
  color: white;
}

.survey-card--closed .survey-name {
  color: #3C4048;
}

.survey-period {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.survey-period-label,
.survey-period-value {
  font-size: 14px;
  font-family: 'Pretendard', sans-serif;
  font-weight: 400;
  line-height: 22.4px;
  word-wrap: break-word;
}

.survey-card--active .survey-period-label,
.survey-card--active .survey-period-value {
  color: white;
}

.survey-card--closed .survey-period-label,
.survey-card--closed .survey-period-value {
  color: #565A63;
}

.survey-btn {
  align-self: stretch;
  height: 40px;
  overflow: hidden;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.survey-btn--active {
  background: white;
}

.survey-btn--closed {
  background: rgba(189, 194, 202, 0.55);
}

.survey-btn-text {
  font-size: 16px;
  font-family: 'Pretendard', sans-serif;
  font-weight: 600;
  line-height: 25.6px;
  word-wrap: break-word;
}

.survey-btn--active .survey-btn-text {
  color: #094E7F;
}

.survey-btn--closed .survey-btn-text {
  color: #4A4E56;
}

/* 설문조사 상세 */
.survey-d-wrap{
    width:100%;
    min-height:100vh;
    position:relative;
    background:#fff;
    overflow:hidden;
}

/* Header */
.survey-d-header{
    height:56px;
    padding:0 20px;
    border-bottom:1px solid rgba(0,0,0,.04);
    display:flex;
    justify-content:space-between;
    align-items:center;
    background:#fff;
}

.survey-d-logo{
    width:96px;
    height:25px;
    object-fit:contain;
}

.survey-d-header-right{
    display:flex;
    align-items:center;
    gap:12px;
}

.survey-d-lang{
    display:flex;
    align-items:center;
    gap:8px;
    padding:2px 6px;
    background:#F4F4F4;
    border-radius:4px;
}

.survey-d-lang-text{
    font-size:14px;
    font-weight:600;
    line-height:22.4px;
    color:#222;
}

.survey-d-lang-arrow{
    width:12px;
    height:12px;
    display:inline-block;
    transform:rotate(90deg);
    position:relative;
}

.survey-d-lang-arrow::before{
    content:"";
    position:absolute;
    top:3px;
    left:1px;
    width:8px;
    height:8px;
    border-right:2px solid #797979;
    border-bottom:2px solid #797979;
    transform:rotate(45deg);
}

.survey-d-menu-btn{
    width:24px;
    height:24px;
    border:none;
    background:none;
    cursor:pointer;
    padding:0;
}

.survey-d-menu-icon{
    width:18px;
    height:16px;
    display:block;
    margin:auto;
    background:#222;
}

/* Container */
.survey-d-container{
    padding:16px 20px 120px;
    display:flex;
    flex-direction:column;
    gap:16px;
}

/* Top */
.survey-d-top{
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.survey-d-back-btn{
    width:24px;
    height:24px;
    border:none;
    background:none;
    padding:0;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
}

.survey-d-back-icon{
    display:block;
    width:14px;
    height:14px;
    border-left:3px solid #222;
    border-bottom:3px solid #222;
    transform:rotate(45deg);
}

/* Banner */
.survey-d-banner{
    position:relative;
    overflow:hidden;
    border-radius:8px;
    padding:24px 20px;
    background:linear-gradient(123deg,#2378B2 0%,#094E7F 100%);
    display:flex;
    flex-direction:column;
}

.survey-d-banner-img{
    width:160px;
    height:160px;
    object-fit:contain;
}

.survey-d-banner-bg{
    position:absolute;
    width:160px;
    height:160px;
    background:linear-gradient(
        180deg,
        rgba(255,255,255,0) 0%,
        rgba(255,255,255,.2) 100%
    );
}

.survey-d-banner-circle{
    position:absolute;
    width:90px;
    height:90px;
    left:-30px;
    top:64px;
    border-radius:50%;
    background:rgba(255,255,255,.07);
}

.survey-d-banner-title{
    margin-top:16px;
    color:#fff;
    font-size:20px;
    font-weight:700;
    line-height:30px;
}

/* Description */
.survey-d-desc{
    font-size:16px;
    font-weight:400;
    line-height:25.6px;
    color:#343434;
    margin:0;
}

/* Info */
.survey-d-info{
    padding:16px;
    background:#F4F4F4;
    border-radius:4px;
    display:flex;
    flex-direction:column;
    gap:4px;
}

.survey-d-info-row{
    display:flex;
    gap:12px;
    align-items:flex-start;
}

.survey-d-info-label{
    width:60px;
    color:#666;
    font-size:16px;
    font-weight:400;
    line-height:25.6px;
    flex-shrink:0;
}

.survey-d-info-value{
    color:#1F1F1F;
    font-size:16px;
    font-weight:400;
    line-height:25.6px;
}

/* Bottom */
.survey-d-bottom{
	max-width: 860px;
	margin: 0 auto;
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    padding:16px 12px 12px;
    background:linear-gradient(
        180deg,
        rgba(255,255,255,0) 0%,
        #fff 13%,
        #fff 100%
    );
}

.survey-d-start-btn{
    width:100%;
    height:52px;
    border:none;
    border-radius:4px;
    background:#094E7F;
    color:#fff;
    font-size:16px;
    font-weight:600;
    line-height:25.6px;
    cursor:pointer;
}

/* ── 설문 응답 팝업 (피그마 구조) ── */
.srvy-popup {
	position: fixed;
	top: 60px;
	left: 50%;
	width: 100%;
	max-width: 860px;
	height: calc(100% - 60px);
	background: #fff;
	z-index: 1;
	transform: translate(-50%, 100%);
	transition: transform 0.3s ease-out;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}
.srvy-popup.active {
	transform: translate(-50%, 0);
}

/* 상단: 뒤로가기 + 카운트 */
.srvy-popup-top {
	flex-shrink: 0;
	padding: 20px 20px 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.srvy-popup-back-btn {
	width:24px;
    height:24px;
    border:none;
    background:none;
    padding:0;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
}
.srvy-popup-back-icon {
	position: absolute;
	top: 3px;
	left: 6px;
	width: 14px;
	height: 14px;
	border-left: 3px solid #222;
	border-bottom: 3px solid #222;
	transform: rotate(45deg);
}

.srvy-popup-count {
	color: #868A93;
	font-size: 13px;
	font-weight: 500;
}

/* 진행바 */
.srvy-popup-progress {
	flex-shrink: 0;
	display: flex;
	gap: 4px;
	height: 4px;
	margin: 20px 20px 0;
}
.srvy-progress-seg {
	flex: 1 1 0;
	height: 4px;
	border-radius: 2px;
	background: #E9EAEC;
}
.srvy-progress-seg.done {
	background: #094E7F;
}

/* 본문 */
.srvy-popup-body {
	flex: 1;
	overflow-y: auto;
	padding: 16px 20px 100px;
}

.srvy-popup-qtitle {
	color: #1F1F1F;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.6;
	margin-bottom: 16px;
	word-break: keep-all;
}

.srvy-popup-options {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

/* 옵션 한 줄: 텍스트 왼쪽, 원형체크 오른쪽 */
.srvy-option {
	min-height: 52px;
	padding: 12px 18px;
	background: #F4F4F4;
	border-radius: 4px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	cursor: pointer;
}

.srvy-option-text {
	flex: 1;
	color: #1F1F1F;
	font-size: 16px;
	font-weight: 400;
	line-height: 25.6px;
	word-break: keep-all;
}

.srvy-option.active {
	background: #fff;
	outline: 1.5px solid #094E7F;
	outline-offset: -1.5px;
}
.srvy-option.active .srvy-option-text {
	color: #094E7F;
	font-weight: 600;
}

/* 원형 체크 표시 */
.srvy-option-radio {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: #fff;
	border: 1px solid #BBBBBB;
	flex-shrink: 0;
	position: relative;
}
.srvy-option.active .srvy-option-radio {
	background: #094E7F;
	border: none;
}
.srvy-option-radio-check {
	display: none;
}
.srvy-option.active .srvy-option-radio-check {
	display: block;
	position: absolute;
	top: 6px;
	left: 5px;
	width: 10px;
	height: 6px;
	border-left: 2px solid #fff;
	border-bottom: 2px solid #fff;
	transform: rotate(-45deg);
}

/* 기타(직접입력) */
.srvy-option--etc {
	cursor: default;
	background: #fff;
	border: 1px solid #CBCBCB;
}
.srvy-etc-input {
	width: 100%;
	border: none;
	outline: none;
	font-size: 16px;
	background: transparent;
}

/* 주관식 */
.srvy-textarea {
	width: 100%;
	min-height: 140px;
	padding: 12px 16px;
	border: 1px solid #CBCBCB;
	border-radius: 4px;
	font-size: 16px;
	resize: none;
	outline: none;
}

/* 하단 고정 버튼 (피그마: linear-gradient 배경 + 파란버튼) */
.srvy-popup-bottom {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	padding: 16px 12px 12px;
	background: linear-gradient(180deg, rgba(255,255,255,0) 0%, #fff 13%, #fff 100%);
}

.srvy-popup-next-btn {
	width: 100%;
	height: 52px;
	background: #094E7F;
	color: #fff;
	border: none;
	border-radius: 4px;
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
}

/* 제출완료페이지 */
/* ── 설문 제출 완료 화면 ── */
.srvy-complete {
	display: none;
	flex: 1;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 16px;
	padding: 20px;
}
.srvy-complete.active {
	display: flex;
}

.srvy-complete-icon {
    width: 90px;
    height: 90px;
    background: #094E7F;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.srvy-complete-check-icon {
    width: 80px;
    height: 80px;
    display: block;
}

.srvy-complete-text {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
}

.srvy-complete-title {
	color: #1F1F1F;
	font-size: 24px;
	font-weight: 700;
	line-height: 38.4px;
}

.srvy-complete-desc {
	text-align: center;
	color: #343434;
	font-size: 16px;
	font-weight: 400;
	line-height: 25.6px;
}

/* 설문 나가기 확인 모달 */
.srvy-exit-overlay {
	position: fixed;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 100%;
	max-width: 860px;
	height: 100%;
	background: rgba(0, 0, 0, 0.60);
	z-index: 10050;
	display: none;
	align-items: center;
	justify-content: center;
}
.srvy-exit-overlay.active { display: flex; }

.srvy-exit-modal {
	width: 300px;
	max-width: 84%;
	padding: 24px 20px;
	background: #fff;
	border-radius: 16px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
	box-sizing: border-box;
}

.srvy-exit-close {
	align-self: flex-end;
	width: 20px;
	height: 20px;
	border: none;
	background: none;
	cursor: pointer;
	padding: 0;
	position: relative;
}
.srvy-exit-close::before,
.srvy-exit-close::after {
	content: '';
	position: absolute;
	left: 2px;
	top: 9px;
	width: 16px;
	height: 2px;
	background: #797979;
}
.srvy-exit-close::before { transform: rotate(45deg); }
.srvy-exit-close::after  { transform: rotate(-45deg); }

.srvy-exit-text {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
}
.srvy-exit-title {
	text-align: center;
	color: #1F1F1F;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.4;
}
.srvy-exit-desc {
	text-align: center;
	color: #343434;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.45;
}

.srvy-exit-btns {
	align-self: stretch;
	display: flex;
	gap: 8px;
}
.srvy-exit-btn {
	flex: 1;
	height: 40px;
	border-radius: 4px;
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
	border: none;
}
.srvy-exit-btn--outline {
	background: #fff;
	color: #094E7F;
	outline: 1px solid #094E7F;
	outline-offset: -1px;
}
.srvy-exit-btn--fill {
	background: #094E7F;
	color: #fff;
}
.note-editor.note-airframe, .note-editor.note-frame {
    border: none;
}

/* 법률 상담 */
.lglady-legal-content {
  width: 100%;
  max-width: 860px;
  margin: 0 auto;
  background: #ffffff;
  overflow: hidden;
}

/* 히어로 이미지 영역 - div는 크기/위치 확보용 컨테이너, 실제 이미지는 안의 img 태그 */
.lglady-hero-image {
  display: block;
  width: 100%;
  height: 210.94px;
  overflow: hidden;
}

.lglady-hero-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover; /* 비율 유지하며 영역 꽉 채움 */
}

.lglady-content-wrap {
  padding: 0 20px;
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding-top: 20px;
}

.lglady-page-title {
  color: #1F1F1F;
  font-size: 24px;
  font-weight: 700;
  line-height: 38.4px;
}

.lglady-section-group {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

/* 상단 소개 문구 */
.lglady-intro-text {
  color: #343434;
  font-size: 16px;
  font-weight: 400;
  line-height: 25.6px;
}

.lglady-intro-text strong {
  font-weight: 700;
}

/* 안내 카드 박스 */
.lglady-info-box {
  padding: 20px 16px 16px;
  background: #EFF6FF;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.lglady-info-box-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}

/* 로고 이미지 영역 - div는 크기 확보용, 실제 이미지는 안의 img 태그 */
.lglady-logo-small {
  width: 96px;
  height: 25px;
  overflow: hidden;
}

.lglady-logo-small img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain; /* 로고는 잘리지 않게 비율 유지하며 영역 안에 맞춤 */
}

.lglady-info-box-title {
  color: #1F1F1F;
  font-size: 20px;
  font-weight: 700;
  line-height: 32px;
}

.lglady-info-box-desc {
  color: #343434;
  font-size: 14px;
  font-weight: 400;
  line-height: 22.4px;
}

.lglady-info-box-desc strong {
  font-weight: 700;
}

/* 카테고리 카드 (계약 / 급여·보상 / 에이전트 / 일상 법률) */
.lglady-category-card {
  padding: 16px 20px;
  background: #ffffff;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.lglady-category-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.lglady-category-name {
  color: #094E7F;
  font-size: 20px;
  font-weight: 700;
  line-height: 32px;
}

.lglady-category-desc {
  color: #343434;
  font-size: 16px;
  font-weight: 400;
  line-height: 25.6px;
}

.lglady-category-desc--narrow {
  max-width: 263px;
}

/* 아이콘 공통 - div/span은 크기 확보용 컨테이너, 실제 이미지는 안의 img(svg) 태그 */
.lglady-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
}

.lglady-icon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain; /* svg 비율 유지하며 영역 안에 맞춤 */
}

.lglady-icon-notice {
  width: 16px;
  height: 16px;
}

.lglady-icon-kakao {
  width: 20.76px;
  height: 23px;
}

/* 신청 안내 박스 */
.lglady-notice-box {
  padding: 12px;
  background: #F4F4F4;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.lglady-notice-box-title {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #1F1F1F;
  font-size: 16px;
  font-weight: 700;
  line-height: 25.6px;
}

.lglady-notice-list {
  padding-left: 4px;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.lglady-notice-list li {
  position: relative;
  padding-left: 16px;
  color: #666666;
  font-size: 14px;
  font-weight: 400;
  line-height: 22.4px;
}

.lglady-notice-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 10px;
  width: 2px;
  height: 2px;
  background: #666666;
  border-radius: 9999px;
}

.lglady-notice-list strong {
  font-weight: 700;
}

/* 신청 버튼 */
.lglady-apply-button {
  width: 100%;
  padding: 10px;
  background: #FEE500;
  border: none;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  cursor: pointer;
}

.lglady-apply-button span:last-child {
  color: #000000;
  font-size: 16px;
  font-weight: 600;
  line-height: 25.6px;
}