@font-face {
font-family: "GmarketSans";
font-style: normal;
font-weight: 700;
src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansBold.woff") format("woff");
font-display: swap;
}

/* pagination + 화살표를 한 덩어리로 가운데 정렬 */
.swiper-controls {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

/* swiper 기본 navigation absolute 해제 */
.swiper-button-prev,
.swiper-button-next {
  position: static;
  margin: 0;
  top: auto;
  width: 32px;
  height: 13px;
  
  color: #374151;
  --swiper-navigation-size: 13px;
  flex-shrink: 0;
}

.swiper-button-prev::after,
.swiper-button-next::after {
  font-size: 13px;
  font-weight: 800;
}

.swiper-button-disabled { opacity: 0.3; }

/* pagination dot을 flex item으로 */
.swiper-pagination {
  position: static !important;
  width: auto !important;
  display: flex !important;
  align-items: center;
  gap: 6px;
}

.swiper-pagination-bullet { background: #9ca3af; opacity: 1; width: 8px; height: 8px; }
.swiper-pagination-bullet-active { background: #111827; }


/* =============================================
   Reset
   ============================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body { line-height: 1.5; -webkit-font-smoothing: antialiased; }
img, video, svg { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; }
a { text-decoration: none; color: inherit; }
ul, ol { list-style: none; }
table { border-collapse: collapse; }
button { cursor: pointer; background: none; border: none; }

/* =============================================
   Display
   ============================================= */
.d-block  { display: block; }
.d-flex   { display: flex; }
.d-grid   { display: grid; }
.d-none   { display: none; }
.d-inline { display: inline; }
.d-inline-block { display: inline-block; }
.d-inline-flex  { display: inline-flex; }

/* =============================================
   Flex 유틸
   ============================================= */
.flex-col     { flex-direction: column; }
.flex-row     { flex-direction: row; }
.flex-wrap    { flex-wrap: wrap; }
.flex-nowrap  { flex-wrap: nowrap; }
.flex-1       { flex: 1; }
.flex-auto    { flex: 1 1 auto; }
.flex-none    { flex: none; }
.flex-shrink-0 { flex-shrink: 0; }

.items-start    { align-items: flex-start; }
.items-center   { align-items: center; }
.items-end      { align-items: flex-end; }
.items-stretch  { align-items: stretch; }

.justify-start    { justify-content: flex-start; }
.justify-center   { justify-content: center; }
.justify-end      { justify-content: flex-end; }
.justify-between  { justify-content: space-between; }
.justify-around   { justify-content: space-around; }

.self-start   { align-self: flex-start; }
.self-center  { align-self: center; }
.self-end     { align-self: flex-end; }

/* =============================================
   Gap (4px 단위, 0~12)
   ============================================= */
.gap-0  { gap: 0; }
.gap-1  { gap: 4px; }
.gap-2  { gap: 8px; }
.gap-3  { gap: 12px; }
.gap-4  { gap: 16px; }
.gap-5  { gap: 20px; }
.gap-6  { gap: 24px; }
.gap-8  { gap: 32px; }
.gap-10 { gap: 40px; }
.gap-12 { gap: 48px; }

.col-gap-4  { column-gap: 16px; }
.col-gap-6  { column-gap: 24px; }
.row-gap-4  { row-gap: 16px; }
.row-gap-6  { row-gap: 24px; }

/* =============================================
   Padding (4px 단위)
   ============================================= */
.p-0  { padding: 0; }
.p-1  { padding: 4px; }
.p-2  { padding: 8px; }
.p-3  { padding: 12px; }
.p-4  { padding: 16px; }
.p-5  { padding: 20px; }
.p-6  { padding: 24px; }
.p-8  { padding: 32px; }
.p-10 { padding: 40px; }
.p-12 { padding: 48px; }

.px-0 { padding-left: 0;    padding-right: 0; }
.px-2 { padding-left: 8px;  padding-right: 8px; }
.px-3 { padding-left: 12px; padding-right: 12px; }
.px-4 { padding-left: 16px; padding-right: 16px; }
.px-5 { padding-left: 20px; padding-right: 20px; }
.px-6 { padding-left: 24px; padding-right: 24px; }
.px-8 { padding-left: 32px; padding-right: 32px; }

.py-0 { padding-top: 0;    padding-bottom: 0; }
.py-2 { padding-top: 8px;  padding-bottom: 8px; }
.py-3 { padding-top: 12px; padding-bottom: 12px; }
.py-4 { padding-top: 16px; padding-bottom: 16px; }
.py-5 { padding-top: 20px; padding-bottom: 20px; }
.py-6 { padding-top: 24px; padding-bottom: 24px; }
.py-8 { padding-top: 32px; padding-bottom: 32px; }
.py-10 { padding-top: 40px; padding-bottom: 40px; }
.py-12 { padding-top: 48px; padding-bottom: 48px; }
.py-16 { padding-top: 64px; padding-bottom: 64px; }
.py-20 { padding-top: 80px; padding-bottom: 80px; }

.pt-0  { padding-top: 0; }
.pt-2  { padding-top: 8px; }
.pt-4  { padding-top: 16px; }
.pt-6  { padding-top: 24px; }
.pt-8  { padding-top: 32px; }
.pb-0  { padding-bottom: 0; }
.pb-2  { padding-bottom: 8px; }
.pb-4  { padding-bottom: 16px; }
.pb-6  { padding-bottom: 24px; }
.pb-8  { padding-bottom: 32px; }
.pl-4  { padding-left: 16px; }
.pl-6  { padding-left: 24px; }
.pr-4  { padding-right: 16px; }
.pr-6  { padding-right: 24px; }

/* =============================================
   Margin (4px 단위)
   ============================================= */
.m-0  { margin: 0; }
.mx-auto { margin-left: auto; margin-right: auto; }
.ml-auto { margin-left: auto; }
.mr-auto { margin-right: auto; }

.mt-0  { margin-top: 0; }
.mt-1  { margin-top: 4px; }
.mt-2  { margin-top: 8px; }
.mt-3  { margin-top: 12px; }
.mt-4  { margin-top: 16px; }
.mt-6  { margin-top: 24px; }
.mt-8  { margin-top: 32px; }
.mt-10 { margin-top: 40px; }
.mt-12 { margin-top: 48px; }

.mb-0  { margin-bottom: 0; }
.mb-1  { margin-bottom: 4px; }
.mb-2  { margin-bottom: 8px; }
.mb-3  { margin-bottom: 12px; }
.mb-4  { margin-bottom: 16px; }
.mb-6  { margin-bottom: 24px; }
.mb-8  { margin-bottom: 32px; }
.mb-10 { margin-bottom: 40px; }
.mb-12 { margin-bottom: 48px; }

.ml-2  { margin-left: 8px; }
.ml-4  { margin-left: 16px; }
.mr-2  { margin-right: 8px; }
.mr-4  { margin-right: 16px; }

/* =============================================
   Width / Height
   ============================================= */
.w-full    { width: 100%; }
.w-auto    { width: auto; }
.w-fit     { width: fit-content; }
.h-full    { height: 100%; }
.h-auto    { height: auto; }
.h-screen  { height: 100vh; }
.min-h-screen { min-height: 100vh; }
.max-w-full { max-width: 100%; }

/* =============================================
   Text
   ============================================= */
.text-left    { text-align: left; }
.text-center  { text-align: center; }
.text-right   { text-align: right; }

.font-normal  { font-weight: 400; }
.font-medium  { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold    { font-weight: 700; }

.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.break-word { word-break: break-word; overflow-wrap: break-word; }

/* =============================================
   Position
   ============================================= */
.relative { position: relative; }
.absolute { position: absolute; }
.fixed    { position: fixed; }
.sticky   { position: sticky; }
.inset-0  { top: 0; right: 0; bottom: 0; left: 0; }

/* =============================================
   Overflow
   ============================================= */
.overflow-hidden { overflow: hidden; }
.overflow-auto   { overflow: auto; }
.overflow-x-hidden { overflow-x: hidden; }

/* =============================================
   Etc
   ============================================= */
.pointer-events-none { pointer-events: none; }
.select-none { user-select: none; }
.opacity-0   { opacity: 0; }
.opacity-50  { opacity: 0.5; }
.opacity-100 { opacity: 1; }
.rounded     { border-radius: 4px; }
.rounded-md  { border-radius: 8px; }
.rounded-lg  { border-radius: 12px; }
.rounded-full { border-radius: 9999px; }
.shadow      { box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
.shadow-md   { box-shadow: 0 4px 16px rgba(0,0,0,0.12); }
.transition  { transition: all 0.2s ease; }
.cursor-pointer { cursor: pointer; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }</style>

/* Tailwind 대체 — faq2 + form_9099 섹션용 */

/* Spacing */
.pt-24   { padding-top: 6rem; }
.pb-24   { padding-bottom: 6rem; }
.pb-3    { padding-bottom: .75rem; }
.pb-0\.5 { padding-bottom: .125rem; }
.pt-0\.5 { padding-top: .125rem; }
.pr-0    { padding-right: 0; }
.pr-8    { padding-right: 2rem; }
.pr-12   { padding-right: 3rem; }
.pl-3    { padding-left: .75rem; }
.px-1    { padding-left: .25rem; padding-right: .25rem; }
.px-10   { padding-left: 2.5rem; padding-right: 2.5rem; }
.py-2    { padding-top: .5rem; padding-bottom: .5rem; }
.py-3    { padding-top: .75rem; padding-bottom: .75rem; }
.p-2\.5  { padding: .625rem; }
.mt-0\.5 { margin-top: .125rem; }
.mt-1\.5 { margin-top: .375rem; }
.mt-6    { margin-top: 1.5rem; }
.mb-5    { margin-bottom: 1.25rem; }
.mb-\[30px\] { margin-bottom: 30px; }
.mt-\[30px\] { margin-top: 30px; }
.mx-0\.5 { margin-left: .125rem; margin-right: .125rem; }

/* Sizing */
.w-9           { width: 2.25rem; }
.w-2           { width: .5rem; }
.w-px          { width: 1px; }
.w-52          { width: 13rem; }
.w-\[14px\]    { width: 14px; }
.h-9           { height: 2.25rem; }
.h-2           { height: .5rem; }
.h-2\.5        { height: .625rem; }
.h-10          { height: 2.5rem; }
.h-\[14px\]    { height: 14px; }
.min-w-0       { min-width: 0; }
.min-h-\[120px\] { min-height: 120px; }
.max-w-screen-xl { max-width: 1280px; }
.max-w-\[920px\] { max-width: 920px; }

/* Display */
.hidden       { display: none !important; }
.block        { display: block; }
.inline-block { display: inline-block; }
.flex-1       { flex: 1 1 0%; }
.gap-1\.5     { gap: .375rem; }
.space-y-3 > * + * { margin-top: .75rem; }

/* Position */
.right-0  { right: 0; }
.right-2  { right: .5rem; }
.top-9    { top: 2.25rem; }
.top-1\/2 { top: 50%; }
.z-10     { z-index: 10; }
.-translate-y-\[60\%\] { transform: translateY(-60%); }
.rotate-45 { transform: rotate(45deg); }

/* Typography */
.text-sm      { font-size: .875rem; line-height: 1.25rem; }
.text-base    { font-size: 1rem; line-height: 1.5rem; }
.font-medium  { font-weight: 500; }
.leading-snug { line-height: 1.375; }
.break-keep   { word-break: keep-all; }

/* Colors */
.text-black      { color: #000; }
.text-gray-400   { color: #9ca3af; }
.text-gray-500   { color: #6b7280; }
.text-gray-900   { color: #111827; }
.bg-white        { background-color: #fff; }
.bg-transparent  { background-color: transparent; }
.bg-gray-50      { background-color: #f9fafb; }
.bg-gray-300     { background-color: #d1d5db; }
.caret-black     { caret-color: #000; }

/* Border */
.border         { border: 1px solid; }
.border-0       { border: 0; }
.border-none    { border: none; }
.border-b       { border-bottom: 1px solid; }
.border-t       { border-top: 1px solid; }
.border-t-2     { border-top: 2px solid; }
.border-r       { border-right: 1px solid; }
.border-dashed  { border-style: dashed; }
.border-black    { border-color: #000; }
.border-gray-100 { border-color: #f3f4f6; }
.border-gray-200 { border-color: #e5e7eb; }
.border-gray-300 { border-color: #d1d5db; }
.rounded-sm     { border-radius: .125rem; }

/* Form */
.outline-none   { outline: none; }
.resize-none    { resize: none; }

/* Transition */
.transition-all    { transition: all .15s ease; }
.transition-colors { transition: color .15s ease, background-color .15s ease, border-color .15s ease; }
.duration-200      { transition-duration: .2s; }

/* Tailwind 대체 — faq2 섹션용 */
.pt-24   { padding-top: 6rem; }
.pb-24   { padding-bottom: 6rem; }
.pb-3    { padding-bottom: .75rem; }
.pr-0    { padding-right: 0; }
.px-1    { padding-left: .25rem; padding-right: .25rem; }
.mt-0\.5 { margin-top: .125rem; }
.mt-1\.5 { margin-top: .375rem; }
.mt-6    { margin-top: 1.5rem; }
.mb-5    { margin-bottom: 1.25rem; }
.mx-0\.5 { margin-left: .125rem; margin-right: .125rem; }

.w-9     { width: 2.25rem; }
.w-px    { width: 1px; }
.w-52    { width: 13rem; }
.h-9     { height: 2.25rem; }
.h-2\.5  { height: .625rem; }
.min-w-0 { min-width: 0; }
.max-w-screen-xl { max-width: 1280px; }

.hidden  { display: none !important; }
.flex-1  { flex: 1 1 0%; }
.gap-1\.5 { gap: .375rem; }
.space-y-3 > * + * { margin-top: .75rem; }

.right-0 { right: 0; }
.top-9   { top: 2.25rem; }
.z-10    { z-index: 10; }

.text-sm      { font-size: .875rem; line-height: 1.25rem; }
.text-base    { font-size: 1rem; line-height: 1.5rem; }
.leading-snug { line-height: 1.375; }
.break-keep   { word-break: keep-all; }

.text-black    { color: #000; }
.text-gray-400 { color: #9ca3af; }
.text-gray-500 { color: #6b7280; }
.text-gray-900 { color: #111827; }
.bg-white      { background-color: #fff; }
.bg-gray-50    { background-color: #f9fafb; }
.bg-gray-300   { background-color: #d1d5db; }

.border         { border: 1px solid; }
.border-0       { border: 0; }
.border-b       { border-bottom: 1px solid; }
.border-t       { border-top: 1px solid; }
.border-t-2     { border-top: 2px solid; }
.border-black    { border-color: #000; }
.border-gray-100 { border-color: #f3f4f6; }
.border-gray-200 { border-color: #e5e7eb; }
.border-gray-300 { border-color: #d1d5db; }
/* ── 누락된 display 유틸 ── */
.flex         { display: flex; }
.inline-flex  { display: inline-flex; }
.grid         { display: grid; }

/* ── 누락된 색상 유틸 (페이지네이션 활성 버튼) ── */
.bg-black     { background-color: #000; }
.text-white   { color: #fff; }

/* ── Tailwind !important 모디파이어 ── */
.\!hidden     { display: none !important; }