@charset "UTF-8";
@import url('./icon.css');

:root {
	/* 🎨 Colors */
    --white: #fff;
    --black: #000;
    --gray-900 : #121212;
    --gray-800 : #2C2C2C;
    --gray-700 : #4B4B4B;
    --gray-600 : #727272;
    --gray-500 : #999;
    --gray-400 : #B8B8B8;
    --gray-300 : #ddd;
    --gray-200 : #eee;
    --gray-100 : #F5F5F5;
    --gray-50 : #FAFAFA;
	  --primary : #221EF4;
	  --primary-dark : #0F00B0;
	  --warning : #FF3F3F;
    --cat-art: #C57AE7;
    --cat-milestone: #8FC8C2;
    --brand-pink: #F38DEA;
    --brand-yellow: #FCE400;
    /* 매년 진행되는 공모전 컬러 변수 / 색상만 수정하면 배경과 텍스트 색상 변경됨 */
    --event-primary: #F38DEA; 
    --event-sub : #FCE400;

  /* 🖋️ Font Families */
	--font-eulyoo: 'Eulyoo1945';
	--font-pretendard: 'Pretendard', sans-serif;

	/* 🖋️ PC Typography */
	--font-display96-size: 6rem;        /* 96 */
	--font-display80-size: 5rem;        /* 80 */

	--font-title72-size: 4.5rem;        /* 72 */
	--font-title56-size: 3.5rem;        /* 56 */
	--font-title40-size: 2.5rem;        /* 40 */
	--font-title32-size: 2rem;          /* 32 */
	--font-title32-serif-size: 2rem;    /* 32 — Serif */
	--font-title24-serif-size: 1.5rem;  /* 24 — Serif */

	--font-body24-size: 1.5rem;         /* 24 */
	--font-body20-size: 1.25rem;        /* 20 */
	--font-body18-size: 1.125rem;       /* 18 */
	--font-body16-size: 1rem;           /* 16 */
	--font-body15-size: 0.9375rem;      /* 15 */
	--font-body14-size: 0.875rem;       /* 14 */
	--font-body20-serif-size: 1.25rem;  /* 20 — Serif */

	--font-cap15-size: 0.9375rem;       /* 15 */
	--font-cap14-size: 0.875rem;        /* 14 */
	--font-cap18-serif-size: 1.125rem;  /* 18 — Serif */
	--font-cap16-serif-size: 1rem;      /* 16 — Serif */

	@media screen and (max-width: 1280px) {
		& {
			--font-display96-size: 4.8125rem;    /* 77 */
			--font-display80-size: 4.0625rem;    /* 65 */

			--font-title72-size: 3.6875rem;      /* 59 */
			--font-title56-size: 2.9375rem;      /* 47 */
			--font-title40-size: 2.25rem;        /* 36 */
			--font-title32-size: 1.6875rem;      /* 27 */
			--font-title32-serif-size: 1.8125rem; /* 29 — Serif */
			--font-title24-serif-size: 1.4375rem; /* 23 — Serif */

			--font-body24-size: 1.4375rem;       /* 23 */
			--font-body20-size: 1.1875rem;       /* 19 */
			--font-body18-size: 1.0625rem;       /* 17 */
			--font-body16-size: 1rem;            /* 16 */
			--font-body15-size: 0.9375rem;       /* 15 */
			--font-body14-size: 0.875rem;        /* 14 */
			--font-body20-serif-size: 1.1875rem; /* 19 — Serif */

			--font-cap15-size: 0.9375rem;        /* 15 */
			--font-cap14-size: 0.875rem;         /* 14 */
			--font-cap18-serif-size: 1.0625rem;  /* 17 — Serif */
			--font-cap16-serif-size: 0.9375rem;  /* 15 — Serif */
		}
	}

	@media screen and (max-width: 1024px) {
		& {
			--font-display96-size: 3.6875rem;    /* 59 */
			--font-display80-size: 3.1875rem;    /* 51 */

			--font-title72-size: 2.8125rem;      /* 45 */
			--font-title56-size: 2.3125rem;      /* 37 */
			--font-title40-size: 2rem;           /* 32 */
			--font-title32-size: 1.4375rem;      /* 23 */
			--font-title32-serif-size: 1.6875rem; /* 27 — Serif */
			--font-title24-serif-size: 1.3125rem; /* 21 — Serif */

			--font-body24-size: 1.3125rem;       /* 21 */
			--font-body20-size: 1.1875rem;       /* 19 */
			--font-body18-size: 1.0625rem;       /* 17 */
			--font-body16-size: 1rem;            /* 16 */
			--font-body15-size: 0.9375rem;       /* 15 */
			--font-body14-size: 0.875rem;        /* 14 */
			--font-body20-serif-size: 1.1875rem; /* 19 — Serif */

			--font-cap15-size: 0.9375rem;        /* 15 */
			--font-cap14-size: 0.875rem;         /* 14 */
			--font-cap18-serif-size: 0.9375rem;  /* 15 — Serif */
			--font-cap16-serif-size: 0.9375rem;  /* 15 — Serif */
		}
	}

	@media screen and (max-width:800px) {
		& {
			--font-display96-size: 2.5rem;       /* 40 */
			--font-display80-size: 2.25rem;      /* 36 */

			--font-title72-size: 2rem;           /* 32 */
			--font-title56-size: 1.75rem;        /* 28 */
			--font-title40-size: 1.75rem;        /* 28 */
			--font-title32-size: 1.125rem;        /* 18 */
			--font-title32-serif-size: 1.5rem;   /* 24 — Serif */
			--font-title24-serif-size: 1.25rem;  /* 20 — Serif */

			--font-body24-size: 1.25rem;         /* 20 */
			--font-body20-size: 1.125rem;        /* 18 */
			--font-body18-size: 1rem;        	 /* 16 */
			--font-body16-size: 1rem;            /* 16 */
			--font-body15-size: 0.9375rem;       /* 15 */
			--font-body14-size: 0.875rem;        /* 14 */
			--font-body20-serif-size: 1.125rem;  /* 18 — Serif */

			--font-cap15-size: 0.9375rem;        /* 15 */
			--font-cap14-size: 0.875rem;         /* 14 */
			--font-cap18-serif-size: 0.875rem;   /* 14 — Serif */
			--font-cap16-serif-size: 0.875rem;   /* 14 — Serif */
		}
	}
  @media (max-width: 24.99em) {
    html {
      font-size: 4vw;
    }
  }
}

/* Pretendard Variable Font */
@font-face {
  font-family: 'Pretendard';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/resource/fonts/PretendardVariable.woff2') format('woff2');
}

/* Eulyoo1945 */
@font-face {
  font-family: 'Eulyoo1945';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/resource/fonts/Eulyoo1945-Regular.woff2') format('woff2');
}

@font-face {
  font-family: 'Eulyoo1945';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/resource/fonts/Eulyoo1945-SemiBold.woff2') format('woff2');
}

/* 폰트 */
*.ft-eulyoo {font-family: var(--font-eulyoo);}
*.ft-Pretendard {font-family: var(--font-pretendard);}

/* =====================
   Display
   ===================== */
*.ft-display96 {
  font-family: var(--font-pretendard);
  font-size: var(--font-display96-size);
  font-weight: 600;
  line-height: 1.1;
}
@media screen and (max-width: 800px) {
  .ft-display96 {line-height: 1.3;}
}

*.ft-display80 {
  font-family: var(--font-pretendard);
  font-size: var(--font-display80-size);
  font-weight: 600;
  line-height: 1.3;
}

/* =====================
   Title — Sans
   ===================== */
*.ft-title72-sb {
  font-family: var(--font-pretendard);
  font-size: var(--font-title72-size);
  font-weight: 600;
  line-height: 1.3;
}

*.ft-title56-sb {
  font-family: var(--font-pretendard);
  font-size: var(--font-title56-size);
  font-weight: 600;
  line-height: 1.5;
}

*.ft-title40-sb {
  font-family: var(--font-pretendard);
  font-size: var(--font-title40-size);
  font-weight: 600;
  line-height: 1.5;
}

*.ft-title40-el {
  font-family: var(--font-pretendard);
  font-size: var(--font-title40-size);
  font-weight: 200;
  line-height: 1.5;
}

*.ft-title32-sb {
  font-family: var(--font-pretendard);
  font-size: var(--font-title32-size);
  font-weight: 600;
  line-height: 1.5;
}

/* =====================
   Title — Serif
   ===================== */
*.ft-title32-serif {
  font-family: var(--font-eulyoo);
  font-size: var(--font-title32-serif-size);
  font-weight: 400;
  line-height: 1.5;
}

*.ft-title24-serif {
  font-family: var(--font-eulyoo);
  font-size: var(--font-title24-serif-size);
  font-weight: 400;
  line-height: 1.5;
}

/* =====================
   Body — Sans
   ===================== */
*.ft-body24-sb {
  font-family: var(--font-pretendard);
  font-size: var(--font-body24-size);
  font-weight: 600;
  line-height: 1.5;
}

*.ft-body24-md {
  font-family: var(--font-pretendard);
  font-size: var(--font-body24-size);
  font-weight: 500;
  line-height: 1.5;
}

*.ft-body24-rg {
  font-family: var(--font-pretendard);
  font-size: var(--font-body24-size);
  font-weight: 400;
  line-height: 1.5;
}

*.ft-body20-sb {
  font-family: var(--font-pretendard);
  font-size: var(--font-body20-size);
  font-weight: 600;
  line-height: 1.5;
}

*.ft-body18-sb {
  font-family: var(--font-pretendard);
  font-size: var(--font-body18-size);
  font-weight: 600;
  line-height: 1.5;
}

*.ft-body18-rg {
  font-family: var(--font-pretendard);
  font-size: var(--font-body18-size);
  font-weight: 400;
  line-height: 1.5;
}

*.ft-body16-sb {
  font-family: var(--font-pretendard);
  font-size: var(--font-body16-size);
  font-weight: 600;
  line-height: 1.8;
}

*.ft-body16-rg {
  font-family: var(--font-pretendard);
  font-size: var(--font-body16-size);
  font-weight: 400;
  line-height: 1.8;
}

*.ft-body15-sb {
  font-family: var(--font-pretendard);
  font-size: var(--font-body15-size);
  font-weight: 600;
  line-height: 1.8;
}

*.ft-body15-rg {
  font-family: var(--font-pretendard);
  font-size: var(--font-body15-size);
  font-weight: 400;
  line-height: 1.8;
}

*.ft-body14-sb {
  font-family: var(--font-pretendard);
  font-size: var(--font-body14-size);
  font-weight: 600;
  line-height: 1.8;
}

/* =====================
   Body — Serif
   ===================== */
*.ft-body20-serif {
  font-family: var(--font-eulyoo);
  font-size: var(--font-body20-serif-size);
  font-weight: 400;
  line-height: 1.8;
}

/* =====================
   Caption — Sans
   ===================== */
*.ft-cap15-sb {
  font-family: var(--font-pretendard);
  font-size: var(--font-cap15-size);
  font-weight: 600;
  line-height: 1.5;
}

*.ft-cap15-rg {
  font-family: var(--font-pretendard);
  font-size: var(--font-cap15-size);
  font-weight: 400;
  line-height: 1.5;
}

*.ft-cap14-rg {
  font-family: var(--font-pretendard);
  font-size: var(--font-cap14-size);
  font-weight: 400;
  line-height: 1.5;
}

/* =====================
   Caption — Serif
   ===================== */
*.ft-cap18-serif {
  font-family: var(--font-eulyoo);
  font-size: var(--font-cap18-serif-size);
  font-weight: 400;
  line-height: 1.5;
}

*.ft-cap16-serif {
  font-family: var(--font-eulyoo);
  font-size: var(--font-cap16-serif-size);
  font-weight: 400;
  line-height: 1.5;
}

/* text color */
.c-white       { color: var(--white); }
.c-black       { color: var(--black); }
.c-gray-900    { color: var(--gray-900); }
.c-gray-800    { color: var(--gray-800); }
.c-gray-700    { color: var(--gray-700); }
.c-gray-600    { color: var(--gray-600); }
.c-gray-500    { color: var(--gray-500); }
.c-gray-400    { color: var(--gray-400); }
.c-gray-300    { color: var(--gray-300); }
.c-gray-200    { color: var(--gray-200); }
.c-gray-100    { color: var(--gray-100); }
.c-gray-50     { color: var(--gray-50); }
.c-primary-dark{ color: var(--primary-dark); }
.c-primary     { color: var(--primary); }
.c-warning     { color: var(--warning); }
.c-brand-pink  {color: var(--brand-pink);}
.c-brand-yellow{color: var(--brand-yellow);}
.c-event-primary{color: var(--event-primary);}
.c-event-sub    {color: var(--event-sub);}

/* background color */
.bg-white      { background-color: var(--white); }
.bg-black      { background-color: var(--black); }
.bg-gray-900   { background-color: var(--gray-900); }
.bg-gray-800   { background-color: var(--gray-800); }
.bg-gray-700   { background-color: var(--gray-700); }
.bg-gray-600   { background-color: var(--gray-600); }
.bg-gray-500   { background-color: var(--gray-500); }
.bg-gray-400   { background-color: var(--gray-400); }
.bg-gray-300   { background-color: var(--gray-300); }
.bg-gray-200   { background-color: var(--gray-200); }
.bg-gray-100   { background-color: var(--gray-100); }
.bg-gray-50    { background-color: var(--gray-50); }
.bg-primary-dark   { background-color: var(--primary-dark); }
.bg-primary    { background-color: var(--primary); }
.bg-warning    { background-color: var(--warning); }
.bg-brand-pink {background-color: var(--brand-pink);}
.bg-brand-yellow {background-color: var(--brand-yellow);}
.bg-event-primary {background-color: var(--event-primary);}
.bg-event-sub {background-color: var(--event-sub);}

/* 폰트 굵기 */
*.fw-100 {font-weight: 100;}
*.fw-200 {font-weight: 200;}
*.fw-300 {font-weight: 300;}
*.fw-400 {font-weight: 400;}
*.fw-500 {font-weight: 500;}
*.fw-600 {font-weight: 600;}
*.fw-700 {font-weight: 700;}
*.fw-800 {font-weight: 800;}
*.fw-900 {font-weight: 900;}

/* 텍스트 정렬 */
.text-center {text-align: center;}
.text-left {text-align: left;}
.text-right {text-align: right;}

.scroll-hidden {overflow: hidden;}

/* padding */
.p-b-0 {padding-bottom: 0 !important;}
.p-b-8 {padding-bottom: .5rem !important;}
/* margin */
/* border */
.b-b-none {border-bottom: 0 !important;}

/* show/hide */
.v1920, .v1600, .v1440, .v1280, .v1024, .v800, .v600, .v480, .v320 {display: none !important;}

@media screen and (max-width: 1920px) {
	.v1920 {display: block !important;}
	.v1920_none {display: none !important;}
}

@media screen and (max-width: 1600px) {
	.v1600 {display: block !important;}
	.v1600_none {display: none !important;}
}

@media screen and (max-width: 1440px) {
	.v1440 {display: block !important;}
	.v1440_none {display: none !important;}
}

@media screen and (max-width: 1280px) {
	.v1280 {display: block !important;}
	.v1280_none {display: none !important;}
}

@media screen and (max-width: 1024px) {
	.v1024 {display: block !important;}
	.v1024_none {display: none !important;}
}

@media screen and (max-width: 800px) {
	.v800 {display: block !important;}
	.v800_none {display: none !important;}
}

@media screen and (max-width: 600px) {
	.v600 {display: block !important;}
	.v600_none {display: none !important;}
}

@media screen and (max-width: 480px) {
	.v480 {display: block !important;}
	.v480_none {display: none !important;}
}

@media screen and (max-width: 320px) {
	.v320 {display: block !important;}
	.v320_none {display: none !important;}
}

/* ─── input ─────────────────────────────── */
.inp {padding: 1rem; width: 100%; max-height: 3.6875rem; border: 1px solid var(--gray-300); font-size: var(--font-body18-size); color: var(--gray-900); background-color: var(--white); outline: none; transition: border-color 0.2s; line-height: 1.5;}
.inp::placeholder { color: var(--gray-300); }
.inp:focus { border-color: var(--gray-900); }
.inp-wrap {position: relative; width: 100%; display: flex; align-items: center;}
.inp-eye {position: absolute; right: 1rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0; padding: 0; background: none; border: none; cursor: pointer;}

/* ─── input - URL 추가/삭제 그룹 ─────────────── */
.url-field-group {display: flex; flex-direction: column; gap: 1rem;}
.url-field-group__rows {display: flex; flex-direction: column; gap: .5rem;}
.url-field-group__row {display: flex; align-items: stretch;}
.url-field-group__row .inp-wrap {flex: 1;}
.url-field-group__remove-btn {flex-shrink: 0; width: 3.5rem; display: flex; align-items: center; justify-content: center; border: none; background-color: var(--gray-900); cursor: pointer;}
.url-field-group__remove-btn i {background-color: var(--white) !important;}
.url-field-group__add-wrap {display: flex; justify-content: flex-end;}

@media screen and (max-width: 800px) {
  .url-field-group__rows {gap: .25rem;}
  .url-field-group__remove-btn {width: 3rem;}
}

/* ─── TEXTAREA ────────────────────────────── */
.txta {padding: 1rem; width: 100%; min-height: 15.625rem; border: 1px solid var(--gray-300); font-size: var(--font-body18-size); color: var(--gray-900); background-color: var(--white); outline: none; resize: vertical; transition: border-color 0.2s; line-height: 1.5;}
.txta::placeholder { color: var(--gray-300); }
.txta:focus { border-color: var(--gray-900); }
.txta:disabled {background: var(--warm-200); color: var(--gray-300); cursor: not-allowed; resize: none;}
.texa-wrap {display: flex; flex-direction: column; gap: .25rem;}
.txta-count {display: block; font-size: var(--font-body14-size); color: var(--gray-900); text-align: left;}
.txta-count strong {font-weight: 400; color: var(--gray-500);}

.inp--focus { border-color: var(--gray-900); }
.inp--error { border-color: var(--warning); }
/* 앞 단계에서 받은 값을 되짚어 보여 주는 칸 — 입력이 아니라 확인용이라
   테두리와 좌우 여백을 빼고 글자만 남긴다 (위아래 1rem 은 그대로라 높이 59px 유지). */
.inp--plain {padding-left: 0; padding-right: 0; border: 0; background-color: transparent; cursor: default;}
.inp:disabled {/* background: var(--warm-200); */ color: var(--gray-300); cursor: not-allowed;}
.inp-msg {display: block; padding-left: 1.25rem; text-indent: -1.25rem; font-size: var(--font-body16-size); color: var(--gray-500); line-height: 1.8;}
.inp-msg .ic-msg-mark {margin-right: .25rem; margin-top: -.15em; background-color: var(--gray-500);}
.inp-msg--14 {font-size: var(--font-body14-size); line-height: 1.5;}
.inp-msg--error { color: var(--warning); }
.inp-msg--error .ic-msg-mark { background-color: var(--warning); }

/* ─── input - search ──────────────────────── */
.board-search__input {display: flex; align-items: center; justify-content: space-between; padding: 0 .75rem .75rem .75rem; min-width: 20rem; width: 100%; border-bottom: 1px solid var(--gray-300); background-color: var(--white); transition: border-color 0.2s;}
.board-search__input label {width: 100%;}
.board-search__inp {flex: 1; border: none; outline: none; background: transparent; font-size: var(--font-body16-size); color: var(--gray-900); font-family: inherit;}
.board-search__inp::placeholder {color: var(--gray-500); transition: color 0.2s;}

@media screen and (max-width: 800px) {
  .inp {padding: .75rem; max-height: 3rem;}
  .inp--plain {padding: .75rem 0;}
  .board__search-wrap {width: 100%;}
  .txta-count {font-size: var(--font-body14-size);}
  .inp-msg {font-size: var(--font-body14-size); line-height: 1.5;}
}

/* ─── SELECT ──────────────────────────────── */
.sel {
    width: 100%;
    min-width: 7rem;
    max-height: 3.6875rem;
    padding: 1rem 2.5rem 1rem 1rem;
    border: 1px solid var(--gray-300);
    font-size: var(--font-body18-size);
    color: var(--gray-900);
    background: var(--white);
    outline: none;
    cursor: pointer;
    transition: border-color 0.2s;
    -webkit-appearance: none;
    appearance: none;
    background-image: url("/resource/images/icon/ic-dropDown.svg");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 8px; line-height: 1.5; letter-spacing: -0.5px;
}
.sel:focus { border-color: var(--gray-900); }
.sel:disabled {
    background-color: var(--warm-200);
    color: var(--gray-300);
    cursor: not-allowed;
}

/* ─── CHECKBOX ────────────────────────────── */
.chk-wrap {display: inline-flex; gap: .5rem; cursor: pointer; -webkit-user-select: none; user-select: none;}
.chk-wrap input[type="checkbox"] { display: none; }
.chk-box {flex-shrink: 0; margin-top: .25em; width: 1.25rem; height: 1.25rem; background-image: url('/resource/images/icon/icon-checked-off.svg'); background-size: contain; background-repeat: no-repeat; background-position: center;}
.chk-wrap input[type="checkbox"]:checked + .chk-box {
    background-image: url('/resource/images/icon/icon-checked-on.svg');
}
.chk-wrap:has(input:disabled) { cursor: not-allowed; opacity: 0.55; }
.chk-text { font-size: var(--font-body18-size); }

@media screen and (max-width: 1280px) {
  .chk-box {margin-top: .15em;}
}
@media screen and (max-width: 800px) {
  .sel {padding: .75rem; max-height: 3rem; background-position: right .75rem center;}
  .chk-box {margin-top: .1em;}
}

/* ─── RADIO ───────────────────────────────── */
.rdo-wrap {display: inline-flex; align-items: center; gap: .5rem; cursor: pointer !important; -webkit-user-select: none; user-select: none;}
.rdo-wrap input[type="radio"] { display: none; }
.rdo-box {display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 1.5rem; height: 1.5rem; border: 1px solid var(--gray-300); border-radius: 50%; background: var(--white); transition: border-color 0.15s;}
.rdo-box::after {content: ''; width: .75rem; height: .75rem; border-radius: 50%; background: var(--primary); opacity: 0; transition: opacity 0.15s;}
.rdo-wrap input[type="radio"]:checked + .rdo-box { border-color: var(--primary); }
.rdo-wrap input[type="radio"]:checked + .rdo-box::after { opacity: 1; }
.rdo-wrap input[type="radio"]:disabled + .rdo-box {background: var(--warm-200); border-color: var(--gray-100);}
.rdo-wrap:has(input:disabled) { cursor: not-allowed; opacity: 0.55; }
.rdo-text { font-size: var(--font-body18-size); font-weight: 600; }

/* ─── section ─────────────────────────────── */
.section {position: relative; z-index: 10;}
.sec__inner { padding: 0 2.5rem; }
.sec__heading {font-weight: 600;}
.sec__label {font-family: var(--font-eulyoo);}
.footer__inner {padding: 2rem 2.5rem;}

/* sub */
.s-wrap {padding: 0 2.5rem; margin-top: 10rem;}

@media screen and (max-width: 1280px) {
  .sec__inner, .s-wrap {padding: 0 1.5rem;}
}
@media screen and (max-width: 1024px) {
  .sec__inner, .s-wrap {padding: 0 1rem;}
  .s-wrap {margin-top: 8rem;}
}

/* ─── 페이지 로드 커튼 ─────────────────────────────── */
.page-curtain {position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: var(--gray-900); z-index: 9999; transform-origin: top;}

/* ─── bottom menu ─────────────────────────────── */
.bottom-menu {display: none; position: fixed; bottom: 0; left: 0; z-index: 999; background-color: var(--white); border-top: 1px solid var(--gray-300);}
.bottom-menu li {width: 100%;}
.bottom-menu button {display: flex; flex-direction: column; align-items: center; padding: .4375rem 0; width: 100%;}
.bottom-menu span {display: block; width: 1.5rem; height: 1.5rem; aspect-ratio: 1/1;}
.btm__noti-btn .icon-img {background: url(/resource/images/icon/icon-notice.svg) no-repeat center center/cover;}
.btm__arch-btn .icon-img {background: url(/resource/images/icon/icon-archive.svg) no-repeat center center/cover;}
.btm__sche-btn .icon-img {background: url(/resource/images/icon/icon-schedule.svg) no-repeat center center/cover;}
.btm__inqu-btn .icon-img {background: url(/resource/images/icon/icon-inquiry.svg) no-repeat center center/cover;}
.btm__ala-btn .icon-img {background: url(/resource/images/icon/icon-alarm.svg) no-repeat center center/cover;}
.bottom-menu p {padding-top: .25rem; font-size: .6875rem; line-height: 1.3;}

@media screen and (max-width:1024px) {
  .bottom-menu {display: grid; grid-template-columns: repeat(5, 1fr); justify-items: center; width: 100%;}
}

/* ─── quick menu ─────────────────────────────── */
.quick-menu {position: fixed; bottom: 1rem; right: 1rem; display: flex; flex-direction: column; align-items: flex-end; gap: .25rem; z-index: 111;}
.quick-menu button {display: flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: 20px;}
.inqu-btn {display: flex; align-items: center; justify-content: center; gap: .3125rem; overflow: hidden; white-space: nowrap; background-color: var(--gray-800); border: 1px solid var(--white); transition: width .3s ease;}
.inqu-btn span {display: none; color: var(--white); font-size: var(--font-cap14-size);}
.inqu-btn i {background-color: var(--white) !important; flex-shrink: 0;}
.inqu-btn:hover {padding: .5rem .5rem .5rem .75rem; width: 5.625rem;}
.inqu-btn:hover span {display: inline-block;}
.top-btn {background-color: var(--white); border: 1px solid var(--gray-300);}

/* .bottom-menu 노출 구간(≤1024)에서는 바텀메뉴 높이만큼 띄운다 */
@media screen and (max-width: 1024px) {
  .quick-menu {bottom: 4.5rem;}
  .quick-menu-inqu {display: none;}
}

/* ─── nav ─────────────────────────────── */
.nav {position: fixed; top: 0; left: 0; right: 0; z-index: 300; display: flex; align-items: center; justify-content: space-between; padding: 0 2.5rem; will-change: transform; transform: translateY(-100%); background-color: var(--white); transition: background-color .3s ease;}
.nav__menu-wrap {display: flex; gap: 2rem;}
.nav__menu {display: flex; align-items: center;}
.nav__menu-link, .nav__submenu-link {font-size: var(--font-body20-size); text-transform: uppercase; transition: color 0.25s; font-weight: 600; line-height: 1.5;}
.nav__utility {display: flex; gap: 1rem; margin-top: 1.5rem;}
.nav__utility i {transition: background-color .25s;}

/* ─── nav - 비주얼 히어로 위 투명 헤더 (.has-hero-visual 페이지 전용) ─── */
.has-hero-visual .nav {background-color: transparent;}
.has-hero-visual .nav__menu-link {color: var(--white);}
.has-hero-visual .nav__utility i {background-color: var(--white);}
.has-hero-visual .nav__logo img {filter: brightness(0) invert(1); transition: filter .3s ease;}
/* is-scrolled = 맨 위를 벗어난 상태(스크롤 위치 > 0). 내렸다 올려 헤더가 다시 나올 때는
   히어로가 없으므로 흰 배경 + 기본 색상, 맨 위로 돌아오면 다시 투명으로 되돌아간다. */
.has-hero-visual .nav.nav--solid,
.has-hero-visual .nav.is-scrolled,
.has-hero-visual .nav:has(.nav__menu-item.is-active > .nav__menu-link) {background-color: var(--white);}
.has-hero-visual .nav.nav--solid .nav__menu-link,
.has-hero-visual .nav.is-scrolled .nav__menu-link,
.has-hero-visual .nav:has(.nav__menu-item.is-active > .nav__menu-link) .nav__menu-link {color: var(--gray-900);}
.has-hero-visual .nav:has(.nav__menu-item.is-active > .nav__menu-link) .nav__menu-item.is-active > .nav__menu-link {color: var(--primary);}
.has-hero-visual .nav.nav--solid .nav__utility i,
.has-hero-visual .nav.is-scrolled .nav__utility i,
.has-hero-visual .nav:has(.nav__menu-item.is-active > .nav__menu-link) .nav__utility i {background-color: var(--gray-900);}
.has-hero-visual .nav.nav--solid .nav__logo img,
.has-hero-visual .nav.is-scrolled .nav__logo img,
.has-hero-visual .nav:has(.nav__menu-item.is-active > .nav__menu-link) .nav__logo img {filter: none;}
/* nav 높이가 117.5px(소수점)이라 흰 배경일 때 아래 경계의 반픽셀 행으로 뒤 비주얼이 비쳐
   회색 선처럼 보인다. 같은 흰색을 1px 더 깔아 그 이음매를 덮는다 (박스 크기는 그대로). */
.has-hero-visual .nav.nav--solid,
.has-hero-visual .nav.is-scrolled,
.has-hero-visual .nav:has(.nav__menu-item.is-active > .nav__menu-link) {box-shadow: 0 1px 0 var(--white);}
.has-hero-visual .nav__submenu-link {color: var(--gray-900);}

/* ─── nav__menu - sub menu ─────────────────────────────── */
.nav__submenu {position: absolute; top: 100%; left: 0; width: 17.5rem; height: 0; z-index: 1; overflow: hidden; background-color: var(--white); pointer-events: none;}
.nav:has(.nav__submenu.is-active) {border-bottom: 1px solid var(--gray-300);}
.nav__submenu-panel {display: none;}
.nav__submenu-panel.is-active {display: block;}
.nav__submenu-list {display: flex; flex-direction: column; padding: 1.25rem 2rem; white-space: nowrap;}
.nav__menu-link {display: block; padding: 1.5rem 1.5rem 65px 1.5rem;}
.nav__submenu-link {display: block; padding: 1.25rem 0; font-size: var(--font-body18-size); line-height: 1.3;}
/* 구분선은 2뎁스 사이에만 — 3뎁스 목록까지 번지지 않게 직계 자식으로 한정 */
.nav__submenu-item + .nav__submenu-item > .nav__submenu-link,
.nav__submenu-item + .nav__submenu-item > .nav__submenu-head {border-top: 1px solid color-mix(in srgb, var(--gray-300) 50%, transparent);}

/* 3뎁스 (재단사업) — 2뎁스 클릭 시 펼쳐진다 */
.nav__submenu-head {display: flex; align-items: center; justify-content: space-between; gap: 1rem; cursor: pointer !important;}
.nav__submenu-toggle {display: flex; align-items: center;}
.nav__submenu-list--depth3 {gap: 0.75rem; padding: 0 0 1.25rem;}
.nav__submenu-item--depth3 + .nav__submenu-item--depth3 > .nav__submenu-link {border-top: 0;}
.nav__submenu-link--depth3 {padding: 0; font-size: var(--font-body16-size); font-weight: 400; line-height: 1.5; color: var(--gray-700);}

.nav__submenu.is-active {pointer-events: auto;}
.nav__menu-item.is-active > .nav__menu-link {color: var(--primary);}

@media screen and (max-width: 1024px) {
  .nav__menu, .nav__utility-notice, .nav__utility-clock {display: none;}
  .nav {padding: 1rem;}
  .nav__logo {width: 9rem;}
  .nav__utility {margin-top: 0;}
}

/* ─── nav__menu sub-menu 노출 시 배경 dim ─────────────────────────────── */
.nav__dim {position: fixed; inset: 0; z-index: 200; background-color: rgba(0, 0, 0, .5); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .4s ease, visibility .4s;}
.nav__dim.is-active {opacity: 1; visibility: visible;}
.nav.is-hidden {visibility: hidden;}
body.is-locked {overflow: hidden;}

/* ─── nav - 재단사업 일정안내 ───────────────────── */
.notice {position: fixed; inset: 0; z-index: 290; display: flex; justify-content: flex-end; background: rgba(0, 0, 0, 0.7); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .3s ease;}
.notice.is-active {opacity: 1; visibility: visible; pointer-events: auto;}
.notice__panel {display: flex; flex-direction: column; width: 30.125rem; max-width: 100%; height: 100%; background-color: var(--gray-100);}
.notice__head {display: flex; align-items: center; justify-content: space-between; padding: 1rem; flex-shrink: 0; background-color: var(--white); border-bottom: 1px solid var(--gray-300);}
.notice__list {display: flex; flex-direction: column; gap: 1rem; padding: 1rem; overflow-y: auto;}
/* 등록된 일정이 없을 때 — 목록 영역 전체를 채우고 가운데 정렬 */
.notice__list--empty {height: 100%; justify-content: center;}
.notice__empty {display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; text-align: center;}
.notice__item {padding: 1.25rem; border-radius: 4px; background-color: var(--white); border: 1px solid var(--gray-300);}
.notice__item-title {font-size: var(--font-body18-size); font-weight: 600; margin-bottom: .75rem; line-height: 1.5; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; align-self: stretch; overflow: hidden;}
.notice__info-row p {font-size: var(--font-body15-size); color: var(--gray-700); line-height: 1.8;}

/* .bottom-menu 노출 구간(≤1024)에서는 마지막 항목이 가리지 않게 여백 확보 */
@media screen and (max-width: 1024px) {
  .notice__panel {width: 70%;}
  .notice__list {padding-bottom: 4.5rem;}
}

@media screen and (max-width: 800px) {
  .notice__panel {width: 100%;}
}

/* ─── 전체메뉴 ──────────────────────── */
.all-menu {position: fixed; top: 0; right: 0; bottom: 0; left: 0; inset: 0; display: none; z-index: 9999; background-color: var(--white);}  /* 높이 고정 대신 inset:0 — 100vh 는 주소창 뒤로 하단이 잘리고, 100svh 는 툴바가 숨은 상태(삼성인터넷)에서 하단에 틈이 생겨 .bottom-menu 가 비친다 */
.all-menu.is-active {display: block;}
.all-menu__inner {display: flex; flex-direction: column; height: 100%;}
.all-menu__head {position: fixed; top: 1.5rem; right: 2.5rem; display: flex; justify-content: flex-end;}
.all-menu__logo {display: none;} 
.all-menu__col--left {flex: 1; min-height: 0; background-color: var(--white);}
.all-menu__item--depth1, .all-menu__list--depth2 {display: flex; flex-direction: column;}
.all-menu__item--depth1 {gap: 3.5rem; padding: 7.5rem 5rem; height: 100%;}
.all-menu__item--depth1 > .all-menu__item-head {cursor: pointer;}
.all-menu__item--depth1 > .all-menu__item-head > .all-menu__link {font-size: var(--font-title40-size); font-weight: 600;}
.all-menu__toggle {display: none;}
.all-menu__list--depth2 {gap: 2rem;}
.all-menu__item--depth2 {width: 100%;}
.all-menu__item--depth2 > .all-menu__link {font-size: var(--font-body18-size); font-weight: 600;}
.all-menu__item--depth2 > .all-menu__item-head > .all-menu__link {font-size: var(--font-body18-size); font-weight: 600;}
.all-menu__item--depth2:has(.all-menu__list--depth3) {display: flex; flex-direction: column;}
.all-menu__list--depth3 {display: flex; flex-direction: column; gap: .25rem; margin-top: .5rem;}
.all-menu__item--depth3 > .all-menu__link {font-size: var(--font-body16-size); line-height: 1.8; color: var(--gray-700);}
.all-menu__link {display: block; line-height: 1.5;}
.all-menu__col--right {flex-shrink: 0; display: flex; justify-content: space-between; padding: 1.5rem 2.5rem; background-color: var(--primary-dark);}
.all-menu__util {display: flex; align-items: center; gap: 2rem;}
.all-menu__col-desc p {display: flex; align-items: center; gap: 1rem; font-size: var(--font-title40-size); color: var(--white); font-weight: 600;}
.all-menu__col-desc-img {display: inline-block; height: 1.2em; object-fit: cover; vertical-align: middle;}
/* 시안 160x48 을 em 으로 — 글자 크기가 바뀌는 구간마다 비율이 유지된다
   (4em = 160 / 40, 1.2em = 48 / 40, 기준은 --font-title40-size) */
.all-menu__col-desc-img--1 {width: 4em;}  /* Your Potential, 뒤 */
.all-menu__col-desc-img--2 {width: 4em;}  /* Our Inspiration 뒤 */
.all-menu__policy {display: flex; gap: 1.25rem;}
.all-menu__policy a {position: relative; font-size: var(--font-body15-size); color: var(--white); line-height: 1.5; font-weight: 600;}
.all-menu__policy li:first-of-type a::after {position: absolute; right: -0.8125rem; top: 50%; transform: translateY(-50%); content: ""; width: .25rem; height: .25rem; background-color: var(--gray-300); border-radius: 50%;}
.all-menu__sns {display: flex; align-items: center; justify-content: center; width: 3.75rem; height: 3.75rem; border-radius: 50%; background-color: var(--primary-dark);}
.all-menu__sns i {background-color: var(--white) !important;}

/* ─── 전체메뉴 depth1 호버 배경  */
@media screen and (min-width: 1025px) {
  .all-menu__col--left {position: relative; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; min-height: 0;}
  .all-menu__head {z-index: 1;}
  .all-menu__item--depth1 + .all-menu__item--depth1 {border-left: 1px solid var(--gray-300); transition: border-color .7s cubic-bezier(.4, .1, .1, 1);}
  .all-menu__list:has(> .all-menu__item--depth1:hover) > .all-menu__item--depth1 + .all-menu__item--depth1 {border-left-color: color-mix(in srgb, var(--gray-300) 30%, transparent);}
  .all-menu__nav {display: flex; flex-direction: column; flex: 1; min-height: 0;}
  /*
   * depth1 은 DB(site_menus)에서 오므로 개수가 4개가 아닐 수 있다.
   * repeat(4, 1fr) 로 열을 고정하면 3개일 때 빈 칸이 남고, 5개부터는 둘째 줄로 접히면서
   * 둘째 줄 첫 칸에도 아래 border-left 가 붙는다 → 개수만큼 균등 분할하는 flex 로 둔다.
   * 다만 호버 배경 사진은 pseudo 4장(아래 ①)이 전부라 5번째부터는 배경이 없다
   * (그래서 흰 글씨 규칙도 :nth-child(-n+4) 로 묶여 있다 — 아래 ②).
   * 메뉴가 5개 이상으로 굳어지면 레이어를 늘려야 한다.
   */
  .all-menu__nav > .all-menu__list {flex: 1; display: flex; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; /*scrollbar-gutter: stable;*/}
  .all-menu__nav > .all-menu__list > .all-menu__item--depth1 {flex: 1 1 0; min-width: 0;}
  .all-menu__col--left::before,
  .all-menu__col--left::after,
  .all-menu__nav::before,
  .all-menu__nav::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    opacity: 0;
    transform: scale(1.08);
    /* 나가는 레이어는 조금 늦게(.15s) 사라진다 — 들어오는 사진과 겹쳐 흰 바탕이 비치지 않게 */
    transition: opacity .7s cubic-bezier(.4, .1, .1, 1) .15s, transform 1.2s cubic-bezier(.4, .1, .1, 1);
    pointer-events: none;
  }
  .all-menu__col--left::before {background-image: url('/resource/images/common/all-menu01-bg.webp');}
  .all-menu__col--left::after {background-image: url('/resource/images/common/all-menu02-bg.webp');}
  .all-menu__nav::before {background-image: url('/resource/images/common/all-menu03-bg.webp');}
  .all-menu__nav::after {background-image: url('/resource/images/common/all-menu04-bg.webp');}

  .all-menu__col--left:has(.all-menu__item--depth1:nth-child(1):hover)::before,
  .all-menu__col--left:has(.all-menu__item--depth1:nth-child(2):hover)::after,
  .all-menu__col--left:has(.all-menu__item--depth1:nth-child(3):hover) .all-menu__nav::before,
  .all-menu__col--left:has(.all-menu__item--depth1:nth-child(4):hover) .all-menu__nav::after {
    opacity: 1;
    transform: scale(1);
    transition-delay: 0s;   /* 들어오는 사진은 기다리지 않는다 */
  }

  .all-menu__item--depth1 {position: relative;}
  .all-menu__item--depth1::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: rgba(0, 0, 0, 0.05);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    opacity: 0;
    transition: opacity .7s cubic-bezier(.4, .1, .1, 1);
    pointer-events: none;
  }
  @media (hover: hover) and (pointer: fine) {
    .all-menu__item--depth1:hover::before {opacity: 1;}
  }
  .all-menu__link,
  .all-menu__btn-close i {transition: color .7s cubic-bezier(.4, .1, .1, 1), background-color .7s cubic-bezier(.4, .1, .1, 1);}
  /* ② 배경 사진이 깔리는 4개까지만 흰 글씨 — 5번째 이상은 흰 바탕이라 글자가 사라진다 */
  .all-menu__col--left:has(.all-menu__item--depth1:nth-child(-n+4):hover) .all-menu__link {color: var(--white);}
  .all-menu__inner:has(.all-menu__item--depth1:nth-child(-n+4):hover) .all-menu__btn-close i {background-color: var(--white);}
}
/* 높이가 낮은 화면(노트북 등) — 상·하 여백을 줄여 메뉴 영역을 먼저 확보한다.
   아래 ≤1280 블록이 뒤에 오므로 거기서는 padding 단축을 쓰면 안 된다(상·하까지 덮는다) */
@media screen and (min-width: 1025px) and (max-height: 900px) {
  .all-menu__item--depth1 {padding-top: 1.25rem; padding-bottom: 1.25rem;}
}
@media screen and (max-width: 1280px) {
  .all-menu__item--depth1 {padding-inline: 3rem;}  /* 상·하는 건드리지 않는다 — 위 주석 참고 */
  .all-menu__col-desc {display: none;}
  .all-menu__util {flex: 1; justify-content: space-between; gap: 1rem;}
}

@media screen and (max-width: 1024px) {
  .all-menu__head {position: relative; top: auto; right: auto; flex-shrink: 0; align-items: center; justify-content: space-between; padding: 1rem; border-bottom: 1px solid var(--gray-200);}
  .all-menu__logo {display: block;}
  .all-menu__logo img {width: 9rem;}
  .all-menu__col--left {min-height: 0; overflow-y: auto; overflow-x: hidden; display: block; padding: 0; background-color: var(--white);}
  .all-menu__col--right {padding: .5rem 1rem;}
  .all-menu__sns {width: 3rem; height: 3rem;}


  /* ── 아코디언 ── */
  .all-menu__nav, .all-menu__list {width: 100%;}
  .all-menu__item--depth1 {flex-direction: column; align-items: stretch; gap: 0; padding: 0 !important;}
  .all-menu__item--depth1 > .all-menu__item-head {width: 100%;}
  .all-menu__item--depth1:first-child .all-menu__item-head {padding-top: 2rem;}

  .all-menu__item-head {display: flex; align-items: center; justify-content: space-between; padding: 1.3rem 1rem;}
  .all-menu__item--depth1 > .all-menu__item-head > .all-menu__link {font-size: 1.25rem;}

  .all-menu__toggle {display: flex; align-items: center; justify-content: center; flex-shrink: 0; padding: 0; background: none; border: none; cursor: pointer;}
  .all-menu__toggle i {transition: transform 0.3s ease;}
  .all-menu__item.is-open > .all-menu__item-head > .all-menu__toggle i {transform: rotate(180deg);}

  .all-menu__list--depth2 {display: none; flex-direction: column; gap: 0; width: 100%;}
  .all-menu__item.is-open > .all-menu__list--depth2 {display: flex; padding: 1.05rem 0 0.75rem; background-color: var(--gray-50);}

  .all-menu__item--depth1.is-open > .all-menu__item-head > .all-menu__link {color: var(--primary);}
  .all-menu__item--depth2:has(.all-menu__list--depth3) {display: block;}
  .all-menu__item--depth2 > .all-menu__link, .all-menu__item--depth2 > .all-menu__item-head {padding: 0.8rem 1rem; font-size: var(--font-body20-size);}
  .all-menu__item--depth2 > .all-menu__link {display: block; font-weight: 400;}
  .all-menu__item--depth2 > .all-menu__item-head > .all-menu__link {padding: 0; font-size: var(--font-body20-size); font-weight: 400;}
  .all-menu__item--depth2.is-open > .all-menu__item-head {padding: 0.8rem 1rem 1rem 1rem; cursor: pointer;}
  .all-menu__item--depth2.is-open > .all-menu__item-head > .all-menu__link {color: var(--primary);}
  .all-menu__list--depth3 {display: none; flex-direction: column; gap: 0;}
  .all-menu__item.is-open > .all-menu__list--depth3 {display: flex; gap: 1rem; margin-top: 0; padding-bottom: 0.75rem;}
  .all-menu__item--depth3 > .all-menu__link {padding: 0 2rem; font-size: var(--font-body16-size); line-height: 1.5; color: var(--gray-700); font-weight: 400;}
}

/* ─── footer ──────────────────────── */
.footer {margin-top: 7.5rem; background-color: var(--primary-dark);}
.footer__head {display: flex; justify-content: space-between; gap: 1rem; margin-bottom: 7.5rem;}
.footer__title .sec__heading, .footer__title .sec__label, .footer__policy a, .footer__family-btn {color: var(--white);}
.footer__title .sec__heading {font-size: 5.5rem; line-height: 1.3;}
.footer__title .sec__label {font-size: var(--font-body24-size); line-height: 1.5;}
.footer__slide {width: 27.625rem;}

.footer-btm {display: grid; row-gap: 2.5rem; grid-template-columns: 1fr auto; grid-template-areas: "info   family" "copy   logo-list";}
.footer__info, .footer__policy, .footer__family, .footer__family-btn, .footer__logo-list {display: flex;}
.footer__logo-list a {display: block;}
.footer__info * {font-size: .9375rem;}
.footer__info { grid-area: info; gap: 2.5rem; flex-wrap: wrap;}
.footer__address, .footer__contact * {color: var(--gray-300); line-height: 1.8;}
.footer__contact p {font-weight: 600;}
.footer__contact span {display: inline-block; padding-right: .5rem; width: 2.5rem; font-weight: 400;}
.footer__policy {gap: 1.25rem;}
.footer__policy a {position: relative; font-weight: 600; line-height: 1.5;}
.footer__policy li:first-of-type a::after{position: absolute; right: -0.75rem; top: 50%; transform: translateY(-50%); display: block; content: ""; width: .25rem; height: .25rem; background-color: var(--gray-300); border-radius: 50%;}
.footer__family { position: relative; grid-area: family; justify-content: flex-end; align-self: flex-start;}
.footer__family-btn {justify-content: space-between; align-items: center; padding-bottom: .5rem; max-width: 12.5rem; width: 100%; text-align: left; border-bottom: 1px solid var(--white);}
.footer__family-btn i {background-color: var(--white) !important; transition: transform .25s ease;}
.footer__family-list {position: absolute; right: 0; bottom: calc(100% + .5rem); display: flex; flex-direction: column; gap: 1rem; padding: 1rem; width: 100%; max-width: 12.5rem; max-height: 21.25rem; overflow-y: auto; background-color: var(--white); opacity: 0; visibility: hidden; transform: translateY(.5rem); transition: opacity .25s ease, visibility .25s ease, transform .25s ease;}
.footer__family-group {display: flex; flex-direction: column; gap: .5rem;}
.footer__family-group + .footer__family-group {padding-top: 1rem; border-top: 1px solid var(--gray-300);}
.footer__family-title {font-size: var(--font-body14-size); font-weight: 600; line-height: 1.8;}
.footer__family-group ul {display: flex; flex-direction: column; gap: .25rem;}
.footer__family-list a {display: block; color: var(--gray-900); font-size: var(--font-body14-size); line-height: 1.8; transition: color .25s ease-in-out;}
.footer__family-list a:hover {color: var(--primary);}
.footer__family.is-active .footer__family-list {opacity: 1; visibility: visible; transform: translateY(0); z-index: 99;}
.footer__family.is-active .footer__family-btn i {transform: rotate(45deg);}
.footer__logo-list { grid-area: logo-list; align-items: center; gap: 1.5rem;}
.footer__copy { grid-area: copy; color: var(--gray-500);}

@media screen and (max-width: 1280px) {
  .footer__title .sec__heading {padding-bottom: .5rem; font-size: 3.1875rem;}
  .footer__slide {width: 25.625rem;}
  .footer__family {align-items: flex-start;}
}
@media screen and (max-width: 1024px) {
  .footer__title .sec__heading {font-size: 2.3125rem;}
  .footer__slide {width: 20.625rem;}
  .footer__info {gap: 1.25rem;}
  .footer-btm {
    grid-template-areas:
    "info   family"
    "logo-list logo-list"
    "copy   copy";
  }
  .footer__family-btn {min-width: 12.5rem;}
  /* .bottom-menu(3.5rem) 노출 구간 — 최하단 행이 가리지 않게 여백 확보 */
  .footer__inner {padding-bottom: 5.5rem;}
}
@media (max-width: 800px) {
  .footer {margin-top: 4rem;}
  .footer__inner {padding: 2.5rem 1rem 6rem;}
  .footer__head {margin-bottom: 2rem;}
  .footer__title .sec__heading {font-size: 1.5rem;}
  .footer__title .sec__label {font-size: var(--font-body15-size);}
  .footer__slide {display: none;}
  .footer-btm {
    grid-template-columns: 1fr;
    grid-template-areas:
    "info"
    "family"  
    "logo-list"
    "copy";   
  }
  .footer__info {flex-direction: column; gap: 1rem;}
  .footer__family-list {max-width: none;}
  .footer__family-btn {max-width: inherit;}
  .footer__logo-list img {height: 1.5rem;}
}

/* ─── btn ──────────────────────── */
.btn-wrap {display: flex; gap: 1rem; flex-shrink: 0;}
.btn-wrap--grid {display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; width: 100%;}
.btn {display: inline-block; flex-shrink: 0; font-size: var(--font-body18-size);}
.btn:has(i) {display: flex; align-items: center; justify-content: center; gap: .5rem;}
.btn--outline {padding: .75rem 2rem; border: 1px solid var(--gray-900); font-size: var(--font-body16-size); font-weight: 600; line-height: 1.8; background-color: var(--white); transition: background-color 0.35s ease;}
.btn--outline i {transition: background-color 0.35s ease;}
.btn--outline-gray {border-color: var(--gray-300); color: var(--gray-500);}
.btn--outline--sm {padding: .5rem 1.25rem;}
.btn--gray {padding: .5rem 1.25rem; font-size: var(--font-body16-size); background-color: var(--gray-100);}
.btn--gray i {background-color: var(--gray-700);}
.btn--underline {display: inline-flex; align-items: center; --btn-icon-shift: 1.75rem; position: relative; overflow: hidden; width: fit-content; line-height: 1.5; font-weight: 600;}
.btn--underline::after {content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background-color: currentColor; transform: scaleX(0); transform-origin: left; transition: transform 0.35s ease;}
.btn--underline .btn__inner {display: flex; align-items: center; gap: .5rem; transition: transform 0.35s ease;}
.btn--underline .btn__icon {flex-shrink: 0; transition: opacity 0.35s ease;}
.btn--underline .btn__icon--prev {position: absolute; top: 50%; left: 0; opacity: 0; transform: translate(calc(-1 * var(--btn-icon-shift)), -50%); transition: transform 0.35s ease, opacity 0.35s ease;}

/* ─── Corner Cut Button ──────────────────────── */
.cta-wrap { display: flex; justify-content: center; padding-top: 2.5rem; }
.cta-wrap--gap { gap: 1rem; }
.cta-group { display: flex; gap: 1rem; }
.cta-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; overflow: hidden; padding: 1.125rem 2rem; color: var(--white); font-size: var(--font-body16-size); font-weight: 600; background-color: var(--primary); line-height: 1.8;}
.cta-btn--blue  { background-color: var(--primary); }
.cta-btn--black { background-color: var(--gray-900); }
.cta-btn--gray { background-color: var(--gray-700); }
.cta-btn::after { content: ''; position: absolute; right: -12px; bottom: -12px; width: 24px; height: 24px; background-color: var(--white); transform: rotate(45deg); transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); }

.btn-transparent {background-color: transparent;}
.btn.w160 {width: 100%; max-width: 10rem;}

@media (hover: hover) and (pointer: fine) {
  .btn--outline:hover {background-color: var(--gray-900); color: var(--white);}
  .btn--outline:hover i {background-color: var(--white);}
  .btn--underline:hover .btn__inner {transform: translateX(var(--btn-icon-shift));}
  .btn--underline:hover .btn__icon--prev {opacity: 1; transform: translate(0, -50%);}
  .btn--underline:hover .btn__icon--next {opacity: 0;}
  .btn--underline:hover::after {transform: scaleX(1);}
  .cta-btn:hover::after { transform: rotate(45deg) scale(0); } 
  .btn--outline-gray:hover {background-color: var(--gray-500); color: var(--white); border: 1px solid var(--gray-300);}
}
.btn--pill {gap: .5rem; padding: .75rem 1rem; border-radius: 25.5px; border: 1px solid var(--gray-900); transition: background-color 0.35s ease;}
.btn--pill span {font-size: var(--font-body18-size); font-weight: 600; line-height: 1.5;}
.btn--pill .btn-icon {position: relative; width: 1.25rem; height: 1.25rem; overflow: hidden; flex-shrink: 0;}
.btn--pill .btn-icon i {position: absolute; top: 0; left: 0; transition: transform 0.35s ease; transform: translateX(0);}
.btn--pill .btn-icon i:first-child {transform: translateX(0);}
.btn--pill .btn-icon i:last-child {background-color: var(--gray-900); transform: translateX(-100%);}
@media (hover: hover) and (pointer: fine) {
  .btn--pill:hover {color: var(--gray-900); border: 1px solid var(--white); background-color: var(--white);}
  .btn--pill:hover .btn-icon i:first-child {transform: translateX(100%);}
  .btn--pill:hover .btn-icon i:last-child {transform: translateX(0);}
  .young-info__links .btn--pill:hover {border: 1px solid var(--gray-900);}
}
@media screen and (max-width: 800px) {
  .btn--outline {padding: .75rem 1.5rem; font-size: var(--font-body14-size);}
  .btn--outline--sm {padding: .5rem 1.5rem;}
  .btn--underline {--btn-icon-shift: 1.5rem;}
  .btn--outline, .btn--pill span {font-size: var(--font-body14-size);}
  .cta-wrap {padding-top: 1.5rem;}
  .cta-wrap--gap {gap: .5rem;}
  .cta-group {gap: .5rem;}
  .cta-btn {padding: .75rem 1.5rem; font-size: var(--font-body14-size); line-height: 1.5;}
  .cta-btn::after {width: 21px; height: 1.3125rem;}
}

/* ─── swiper ──────────────────────── */
.swiper {width: 100%; height: 100%;}
.swiper-slide {display: flex; justify-content: center; align-items: center; text-align: center;}
.swiper-slide img {display: block; width: 100%; height: 100%; object-fit: cover;}

/* ─── calendar ───────────────────────────── */
.cal-wrap { position: relative; width: 100%; }
.cal-field { display: flex; align-items: stretch; border: 1px solid var(--gray-300); background: var(--white); transition: border-color .2s; }
.cal-inp { flex: 1; padding: 1rem; max-height: 3.6875rem; border: none; outline: none; font-size: var(--font-body18-size); color: var(--gray-900); background: transparent; cursor: pointer; caret-color: transparent; line-height: 1.5;}
.cal-inp::placeholder { color: var(--gray-300); }
.cal-toggle-btn { flex-shrink: 0; width: 3.5rem; display: flex; align-items: center; justify-content: center; border: none; border-left: 1px solid var(--gray-300); background-color: var(--gray-100); cursor: pointer; transition: background-color .2s; }
.cal-toggle-btn.is-active { background-color: var(--gray-900); }
.cal-toggle-btn.is-active i { background-color: var(--white) !important; }
.cal-panel { position: absolute; top: calc(100% + 1.5rem); right: 0; z-index: 200; padding: 2rem; background: var(--white); box-shadow: 0 10px 15px 0 rgba(0, 0, 0, 0.10); min-width: 24.125rem; }
.cal-panel[hidden] { display: none; }
.cal-panel__head { display: flex; gap: 1rem; margin-bottom: 1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--black);}
.cal-panel__sel { padding: .5rem .75rem; width: 50%; border: 1px solid var(--gray-400); font-size: var(--font-body16-size); color: var(--gray-900); background: var(--white); outline: none; cursor: pointer; font-family: inherit; -webkit-appearance: none; appearance: none; background-image: url("/resource/images/icon/ic-dropDown.svg"); background-repeat: no-repeat; background-position: right .75rem center; background-size: 8px; padding-right: 1.25rem; font-size: var(--font-body15-size);}
.cal-panel__weekdays { display: grid; grid-template-columns: repeat(7, 1fr); margin-bottom: .5rem; }
.cal-panel__weekdays span { text-align: center; font-size: var(--font-body16-size); color: var(--gray-500); padding: .5rem;}
.cal-panel__days { display: grid; grid-template-columns: repeat(7, 1fr); row-gap: .5rem; }
.cal-day { display: flex; align-items: center; justify-content: center; padding: .5rem; width: 2.875rem; height: 2.875rem; font-size: var(--font-body16-size); color: var(--gray-900); background: none; border: none; cursor: pointer; transition: background-color .15s, color .15s; border-radius: 2px; font-family: inherit; }
.cal-day:hover:not(.cal-day--empty) { background-color: var(--gray-100); }
.cal-day.is-selected { background-color: var(--gray-900); color: var(--white); font-weight: 600; }
.cal-day.is-selected:hover { background-color: var(--gray-900); }
.cal-day--empty { cursor: default; pointer-events: none; }

@media screen and (max-width: 800px) {
  .cal-panel {min-width: 20rem;}
  .cal-day {width: 2.5rem; height: 2.5rem;}
  .cal-inp {max-height: 3rem; padding: .75rem;}
  .cal-toggle-btn {width: 3rem; height: 3rem; background-color: var(--gray-100);}
}

/* ─── paging ──────────────────────── */
.paging_wrap {display: flex; align-items: center; justify-content: center; gap: .5rem; padding-top: 2.5rem;}
.paging_btn, .paging_num {display: flex; align-items: center; justify-content: center; min-width: 2.5rem; height: 2.5rem; border: 1px solid var(--gray-400); font-size: 0.875rem; color: var(--gray-400); cursor: pointer; transition: color .2s, border-color .2s;}
.paging_num {color: var(--gray-500); font-size: var(--font-body16-size); line-height: 1.5; letter-spacing: -1px; border: none;}
.paging_num.is-active {font-weight: 700; color: var(--gray-900);}
.paging_list {display: flex; align-items: center; gap: .5rem; margin: 0 .5rem;}
.paging_num--m {display: none; width: 1.25rem; font-size: var(--font-body14-size); color: var(--gray-500); text-align: center;}
@media (hover: hover) and (pointer: fine) {
  .paging_num:hover {font-weight: 700; color: var(--primary); }
  .paging_btn:hover {border-color: var(--gray-400);}
}
@media screen and (max-width: 800px) {
  .paging_list {counter-reset: page-total; gap: 0; margin: 0 .5rem;}
  .paging_list > li {counter-increment: page-total; width: 0; overflow: hidden;}
  .paging_list > li:has(.paging_num.is-active) {width: auto; overflow: visible;}
  .paging_list::after {content: "" counter(page-total); display: flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; color: var(--gray-400); font-size: var(--font-body16-size); line-height: 1.5;}
  .paging_num--m {display: block;}
  .paging_num.is-active {color: var(--primary);}
}

/* ─── drag & drop upload ──────────────────────── */
.upload-drop { position: relative; display: flex; flex-direction: column; align-items: center; padding: 2rem; width: 100%; border: 1px dashed var(--gray-500); background-color: var(--white); text-align: center; cursor: pointer; transition: border-color .2s; border-radius: 12px;}
.upload-drop.is-dragover { border-color: var(--gray-900); }
.upload-drop__text { font-size: var(--font-body18-size); color: var(--gray-500); }
.upload-drop__btn { margin-top: 1rem; }
.upload-drop__input { display: none; }
.upload-drop__list { display: flex; flex-direction: column; gap: 1.5rem; width: 100%; }
.upload-drop__list:not(:empty) { margin-top: 2.5rem; }
.upload-drop__item { display: flex; align-items: center; padding: 1rem; background-color: var(--gray-50); cursor: default; border-radius: 6px;}
.upload-drop__remove { flex-shrink: 0; display: flex; align-items: center; justify-content: center; margin-right: 2rem; }
.upload-drop__remove i { background-color: var(--gray-500); }
.upload-drop__icon { flex-shrink: 0; width: 1.5rem; height: 1.5rem; object-fit: contain; }
.upload-drop__name { flex: 1; overflow: hidden; margin-left: .5rem; text-overflow: ellipsis; white-space: nowrap; text-align: left; font-size: var(--font-body18-size); }
.upload-drop__size { flex-shrink: 0; font-size: var(--font-body16-size); color: var(--gray-700); line-height: 1.8;}

@media screen and (max-width: 800px) {
  .upload-drop__list {gap: .5rem; }
  .upload-drop__list:not(:empty) {margin-top: 1.5rem;}
  .upload-drop { padding: 1.5rem 1rem; }
  .upload-drop__btn {margin-top: .5rem;}
}

/* ─── 셀렉트 드롭다운 (.c-sel-drop) ─────────────────────────── */
.c-sel-drop {position: relative; display: inline-block;}
.c-sel-drop__btn {display: inline-flex; align-items: center; gap: .5rem; padding: .125rem .75rem; font-size: var(--font-title32-size); font-weight: 600; letter-spacing: -0.5px; white-space: nowrap; color: var(--white); background-color: var(--gray-900);}
.c-sel-drop__label {color: var(--white);}
.c-sel-drop__btn i {transition: transform 0.2s ease;}
.c-sel-drop__btn i[class*="ic-"] {background-color: var(--white);}
.c-sel-drop__btn[aria-expanded="true"] i {transform: rotate(180deg);}
.c-sel-drop__list {display: none; position: absolute; top: 3.25rem; right: 0; padding: 1rem; min-width: 100%; background-color: var(--white); box-shadow: 0 10px 15px 0 rgba(0, 0, 0, 0.10); z-index: 10;}
.c-sel-drop.is-open .c-sel-drop__list {display: flex; flex-direction: column; gap: .5rem;}
.c-sel-drop__option {display: block; width: 100%; background: none; border: none; cursor: pointer; font-size: var(--font-body24-size); white-space: nowrap; font-weight: 500;}
@media screen and (max-width: 800px) {
  .c-sel-drop__btn {padding: .25rem .5rem}
  .c-sel-drop__list {top: 2.1875rem;}
}

/* ─── 알럿 팝업 (.layer-popup--alert) ─────────── */
.layer-popup--alert .alert-popup {display: flex; flex-direction: column; align-items: center; gap: 1.5rem; width: 100%; min-width: auto; max-width: 34rem; padding: 2.5rem 2rem; background-color: var(--white);}
.alert-popup__icon {width: 3rem; height: 3rem;}
.alert-popup__text {display: flex; flex-direction: column; align-items: center; gap: .5rem; width: 100%; text-align: center;}
.alert-popup__title {color: var(--gray-900);}
.alert-popup__desc {color: var(--gray-900);}
.alert-popup__btns {display: flex; gap: .75rem; width: 100%;}
.alert-popup__btn {flex: 1; display: flex; align-items: center; justify-content: center; height: 3.6875rem; padding: .75rem 2rem; font-size: var(--font-body16-size); font-weight: 600; line-height: 1.8; transition: background-color 0.35s ease, color 0.35s ease;}
.alert-popup__btn--primary {color: var(--white); background-color: var(--primary);}
.alert-popup__btn--outline {color: var(--gray-900); background-color: var(--white); border: 1px solid var(--gray-900);}
@media (hover: hover) {
    .alert-popup__btn--primary:hover {background-color: var(--primary-dark);}
    .alert-popup__btn--outline:hover {color: var(--white); background-color: var(--gray-900);}
}
@media screen and (max-width: 800px) {
    .layer-popup--alert .alert-popup {max-width: calc(100vw - 2rem); gap: 1.25rem; padding: 2rem 1.25rem;}
}

/* ─── 통계 쿠키 동의 배너 (.analytics-consent) ─────────── */
.analytics-consent {position: fixed; z-index: 10000; left: 1rem; bottom: 1rem; display: flex; flex-direction: column; gap: 2rem; width: 25rem; padding: 2rem; background-color: var(--white); border: 1px solid var(--gray-900);}
.analytics-consent__title {font-size: 1.5rem; font-weight: 500; line-height: 1.5; letter-spacing: -0.5px; color: var(--gray-900);}
.analytics-consent__divider {margin: 0; height: 1px; border: none; background-color: var(--gray-200);}
.analytics-consent__desc {font-size: 1rem; font-weight: 400; line-height: 1.8; letter-spacing: -0.5px; color: var(--gray-900);}
.analytics-consent__desc a {margin-left: .375rem; color: inherit; text-decoration: underline;}
.analytics-consent__actions {display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem;}
.analytics-consent__btn {padding: .75rem 1.5rem; white-space: nowrap; text-align: center;}
.analytics-consent__btn--accept {color: var(--gray-900);}

/* 재방문 시 배너 대신 뜨는 쿠키 QuickMenu 아이콘 — PC는 배너와 같은 좌하단, 모바일은 quick-menu(우하단) 스택 위 */
.analytics-consent-settings {position: fixed; z-index: 111; left: 1rem; bottom: 1rem; display: flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; padding: 0; color: var(--gray-900); background-color: var(--white); border: 1px solid var(--gray-300); border-radius: 20px; cursor: pointer;}
.analytics-consent-settings__icon {width: 1rem; height: 1rem;}
@media screen and (max-width: 1024px) {
  .analytics-consent-settings {left: auto; right: 1rem; bottom: 7.25rem;}
}
@media screen and (max-width: 800px) {
  .analytics-consent {left: 1rem; right: 1rem; width: auto; padding: 1.5rem 1rem; gap: 1.5rem;}
  .analytics-consent__title {font-size: 1.125rem;}
  .analytics-consent__actions {gap: .5rem;}
}

/* 데어터가 없을때 */
.board-empty {display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.5rem; min-height: 17.5rem; height: 100%; border-bottom: 1px solid var(--gray-300);}

@media screen and (max-width: 800px) {
  .board-empty {gap: .75rem;}
}

/* width */
.min-w-auto {min-width: auto;}
.w114 {width: 100%; max-width: 7.125rem;}
/* height */
.h100 {height: 100%;}
/* flex */
.jc-s-b {justify-content: space-between;}