/* ============================================================
   site.css
   Tailwind CDN을 대체하는 정적 CSS 파일
   (against-gift.com 페이지에서 실제 사용된 클래스만 포함)
   ============================================================ */

/* ---------- Reset (Tailwind preflight 최소 버전) ---------- */
*, ::before, ::after { box-sizing: border-box; border-width: 0; border-style: solid; border-color: #e5e7eb; }
html { line-height: 1.5; -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans KR", sans-serif; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
svg { display: block; vertical-align: middle; }
ul, ol { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, p { margin: 0; }

/* ---------- 색상 변수 ---------- */
:root{
  --red-400:#f87171; --red-600:#dc2626;
  --green-600:#16a34a;
  --gray-50:#f9fafb; --gray-100:#f3f4f6; --gray-200:#e5e7eb; --gray-300:#d1d5db;
  --gray-400:#9ca3af; --gray-500:#6b7280; --gray-600:#4b5563; --gray-700:#374151;
  --gray-800:#1f2937; --gray-900:#111827;
  --yellow-300:#fde047; --pink-800:#9d174d;
  --orange-100:#ffedd5; --blue-900:#1e3a8a;
  --indigo-300:#a5b4fc; --indigo-500:#6366f1; --indigo-600:#4f46e5;
  --slate-800:#1e293b;
  --white:#fff; --black:#000;
}

/* ---------- Layout / Display ---------- */
.flex{display:flex}.inline-flex{display:inline-flex}.inline-block{display:inline-block}
.block{display:block}.hidden{display:none}
.grid{display:grid} /* [보완] grid 표시 속성 추가 */
.flex-col{flex-direction:column}.flex-row{flex-direction:row}.flex-wrap{flex-wrap:wrap}
.flex-1{flex:1 1 0%}.flex-none{flex:none}
.items-center{align-items:center}.items-start{align-items:flex-start}
.justify-center{justify-content:center}.justify-between{justify-content:space-between}
.justify-start{justify-content:flex-start}
.self-center{align-self:center}
.relative{position:relative}.absolute{position:absolute}.sticky{position:sticky}
.top-0{top:0}.bottom-0{bottom:0}.left-0{left:0}
.z-50{z-index:50}
.overflow-hidden{overflow:hidden}
.break-inside{break-inside:avoid}
.break-words{overflow-wrap:break-word;word-break:break-word}

/* ---------- Grid ---------- */
.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.col-span-full{grid-column:1 / -1}

/* ---------- Sizing ---------- */
.w-full{width:100%}.w-fit{width:fit-content}.w-6{width:1.5rem}.w-5{width:1.25rem}
.h-6{height:1.5rem}.h-5{height:1.25rem}.h-full{height:100%}
.max-w-3xl{max-width:48rem}.max-w-screen-lg{max-width:1024px}
.max-w-screen-xl{max-width:1280px}.max-w-screen-2xl{max-width:1536px}.max-w-md{max-width:28rem}
.min-h-auto{min-height:auto}

/* ---------- Spacing: margin ---------- */
.m-auto{margin:auto}.mx-auto{margin-left:auto;margin-right:auto}
.mx-2{margin-left:.5rem;margin-right:.5rem}.mx-5{margin-left:1.25rem;margin-right:1.25rem}
.mx-10{margin-left:2.5rem;margin-right:2.5rem}
.my-16{margin-top:4rem;margin-bottom:4rem}.my-auto{margin-top:auto;margin-bottom:auto}
.mt-2\.5{margin-top:.625rem}.mt-4{margin-top:1rem}.mt-5{margin-top:1.25rem}
.mb-1{margin-bottom:.25rem}.mb-2{margin-bottom:.5rem}.mb-3{margin-bottom:.75rem}
.mb-4{margin-bottom:1rem}.mb-5{margin-bottom:1.25rem}.mb-6{margin-bottom:1.5rem}
.mb-8{margin-bottom:2rem}.mb-10{margin-bottom:2.5rem}.mb-12{margin-bottom:3rem}.mb-16{margin-bottom:4rem}
.ml-3{margin-left:.75rem}.ml-auto{margin-left:auto}
.mr-1{margin-right:.25rem}.mr-2{margin-right:.5rem}.mr-3{margin-right:.75rem}

/* ---------- Spacing: padding ---------- */
.p-1{padding:.25rem}.p-4{padding:1rem}.p-6{padding:1.5rem}
.px-2{padding-left:.5rem;padding-right:.5rem}.px-2\.5{padding-left:.625rem;padding-right:.625rem}
.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}
.px-5{padding-left:1.25rem;padding-right:1.25rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}
.px-8{padding-left:2rem;padding-right:2rem}
.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-1\.5{padding-top:.375rem;padding-bottom:.375rem}
.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}
.py-5{padding-top:1.25rem;padding-bottom:1.25rem}.py-6{padding-top:1.5rem;padding-bottom:1.5rem}
.py-8{padding-top:2rem;padding-bottom:2rem}
.pt-1{padding-top:.25rem}.pt-4{padding-top:1rem}.pt-6{padding-top:1.5rem}
.pt-12{padding-top:3rem}.pt-28{padding-top:7rem}
.pb-1{padding-bottom:.25rem}.pb-2{padding-bottom:.5rem}.pb-4{padding-bottom:1rem}
.pl-1{padding-left:.25rem}.pl-3{padding-left:.75rem}.pl-4{padding-left:1rem}
.pr-4{padding-right:1rem}.pr-5{padding-right:1.25rem}.pr-8{padding-right:2rem}

/* ---------- Gap ---------- */
.gap-2{gap:.5rem}.gap-4{gap:1rem}.gap-8{gap:2rem}.gap-12{gap:3rem}

/* ---------- Border ---------- */
.border{border-width:1px}.border-0{border-width:0}.border-2{border-width:2px}
.border-t{border-top-width:1px}.border-b{border-bottom-width:1px}.border-l-4{border-left-width:4px}
.border-gray-100{border-color:var(--gray-100)}.border-gray-200{border-color:var(--gray-200)}
.border-gray-300{border-color:var(--gray-300)}.border-gray-700{border-color:var(--gray-700)}
.border-transparent{border-color:transparent}
.border-opacity-60{border-color:rgb(229 231 235 / .6)}
.rounded{border-radius:.25rem}.rounded-lg{border-radius:.5rem}.rounded-3xl{border-radius:1.5rem}

/* ---------- Background ---------- */
.bg-white{background-color:var(--white)}.bg-black{background-color:var(--black)}
.bg-red-400{background-color:var(--red-400)}.bg-green-600{background-color:var(--green-600)}
.bg-gray-50{background-color:var(--gray-50)}.bg-gray-600{background-color:var(--gray-600)}
.bg-gray-900{background-color:var(--gray-900)}
.bg-yellow-300{background-color:var(--yellow-300)}
.bg-orange-100{background-color:var(--orange-100)}
.bg-blue-900{background-color:var(--blue-900)}
.bg-indigo-500{background-color:var(--indigo-500)}
.bg-slate-800{background-color:var(--slate-800)}

/* ---------- Text color ---------- */
.text-white{color:var(--white)}.text-black-800{color:var(--gray-800)}
.text-gray-400{color:var(--gray-400)}.text-gray-500{color:var(--gray-500)}
.text-gray-600{color:var(--gray-600)}.text-gray-700{color:var(--gray-700)}
.text-gray-800{color:var(--gray-800)}.text-gray-900{color:var(--gray-900)}
.text-pink-800{color:var(--pink-800)}
.placeholder-gray-500::placeholder{color:var(--gray-500)}

/* ---------- Typography ---------- */
.text-xs{font-size:.75rem;line-height:1rem}
.text-sm{font-size:.875rem;line-height:1.25rem}
.text-base{font-size:1rem;line-height:1.5rem}
.text-lg{font-size:1.125rem;line-height:1.75rem}
.text-xl{font-size:1.25rem;line-height:1.75rem}
.text-2xl{font-size:1.5rem;line-height:2rem}
.text-3xl{font-size:1.875rem;line-height:2.25rem}
.text-4xl{font-size:2.25rem;line-height:2.5rem}
.font-light{font-weight:300}.font-medium{font-weight:500}
.font-semibold{font-weight:600}.font-bold{font-weight:700}.font-extrabold{font-weight:800}
.leading-none{line-height:1}.leading-relaxed{line-height:1.625}
.tracking-tight{letter-spacing:-.025em}.tracking-widest{letter-spacing:.1em}
.text-center{text-align:center}.text-left{text-align:left}
.uppercase{text-transform:uppercase}
.whitespace-nowrap{white-space:nowrap}
.title-font{font-family:inherit}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}

/* ---------- Effects ---------- */
.shadow{box-shadow:0 1px 3px 0 rgb(0 0 0 / .1),0 1px 2px -1px rgb(0 0 0 / .1)}
.shadow-lg{box-shadow:0 10px 15px -3px rgb(0 0 0 / .1),0 4px 6px -4px rgb(0 0 0 / .1)}
.outline-none{outline:2px solid transparent;outline-offset:2px}
.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1)}
.duration-100{transition-duration:.1s}

/* ---------- Interactive ---------- */
.hover\:bg-black:hover{background-color:var(--black)}
.hover\:bg-red-600:hover{background-color:var(--red-600)}
.hover\:bg-gray-700:hover{background-color:var(--gray-700)}
.hover\:text-gray-700:hover{color:var(--gray-700)}
.hover\:text-indigo-500:hover{color:var(--indigo-500)}
.hover\:underline:hover{text-decoration:underline}
.active\:bg-indigo-700:active{background-color:#4338ca}
.active\:text-gray-600:active{color:var(--gray-600)}
.active\:text-indigo-600:active{color:var(--indigo-600)}
.focus\:ring:focus{box-shadow:0 0 0 3px var(--indigo-300)}
.focus-visible\:ring:focus-visible{box-shadow:0 0 0 3px var(--indigo-300)}
.ring-indigo-300{--tw-ring-color:var(--indigo-300)}

/* ============================================================
   Responsive breakpoints
   ============================================================ */
@media (min-width:640px){
  .sm\:px-10{padding-left:2.5rem;padding-right:2.5rem}
  .sm\:ml-0{margin-left:0}
  .sm\:text-4xl{font-size:2.25rem;line-height:2.5rem}
  .sm\:text-base{font-size:1rem;line-height:1.5rem}
  .sm\:px-4{padding-left:1rem;padding-right:1rem}
  .sm\:pt-8{padding-top:2rem}
  .sm\:pr-8{padding-right:2rem}
}

@media (min-width:768px){
  .md\:hidden{display:none}
  .md\:block{display:block}
  .md\:flex-row{flex-direction:row}
  .md\:space-x-8>*+*{margin-left:2rem}
  .md\:mt-0{margin-top:0}
  .md\:mx-auto{margin-left:auto;margin-right:auto}
  .md\:ml-0{margin-left:0}
  .md\:p-0{padding:0}
  .md\:px-8{padding-left:2rem;padding-right:2rem}
  .md\:w-auto{width:auto}
  .md\:w-1\/2{width:50%}
  .md\:h-80{height:20rem}
  .md\:text-sm{font-size:.875rem;line-height:1.25rem}
  .md\:text-base{font-size:1rem;line-height:1.5rem}
  .md\:text-2xl{font-size:1.5rem;line-height:2rem}
  .md\:font-medium{font-weight:500}
  .md\:border-0{border-width:0}
  .md\:hover\:bg-transparent:hover{background-color:transparent}
  .md\:hover\:text-gray-700:hover{color:var(--gray-700)}
  .md\:dark\:hover\:bg-transparent:hover{background-color:transparent}
  .md\:dark\:hover\:text-gray:hover{color:var(--gray-400)}
  .md\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
  .md\:mb-0{margin-bottom:0}
  .md\:text-left{text-align:left}
  .md\:max-w-md{max-width:28rem}
}

@media (min-width:1024px){
  .lg\:w-4\/5{width:80%}
  .lg\:w-2\/3{width:66.6667%}
  .lg\:w-3\/4{width:75%}
  .lg\:mb-16{margin-bottom:4rem}
  .lg\:max-w-3xl{max-width:48rem}
  .lg\:rounded-3xl{border-radius:1.5rem}
  .lg\:pt-12{padding-top:3rem}
  .lg\:-mt-2{margin-top:-.5rem}
  .lg\:col-span-2{grid-column:span 2 / span 2}
  .lg\:grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}
  .lg\:gap-8{gap:2rem}
}

@media (min-width:1280px){
  .xl\:w-1\/3{width:33.3333%}
  .xl\:max-w-screen-xl{max-width:1280px}
}

/* ============================================================
   Dark mode (prefers-color-scheme)
   ============================================================ */
@media (prefers-color-scheme: dark){
  .dark\:bg-green-600{background-color:var(--green-600)}
  .dark\:bg-gray-900{background-color:var(--gray-900)}
  .dark\:bg-slate-800{background-color:var(--slate-800)}
  .dark\:bg-gray-700{background-color:var(--gray-700)}
  .dark\:text-white{color:var(--white)}
  .dark\:text-gray-200{color:#e5e7eb}
  .dark\:text-gray-400{color:var(--gray-400)}
  .dark\:hover\:bg-gray-700:hover{background-color:var(--gray-700)}
  .dark\:hover\:text-gray:hover{color:var(--gray-400)}
  .dark\:border-gray-700{border-color:var(--gray-700)}
}