/* =====================================================================
   SOFT PASTEL THEME + MOTION  (loaded after style.css, overrides it)
   ===================================================================== */
:root {
  --ink: #4A6B62;
  --ink-soft: #5E8277;
  --ink-deep: #3F4F4B;
  --head: #3E4F4A;
  --blush: #F6C9BC;
  --blush-soft: #FDEEE8;
  --kakao: #FEE94E;
  --kakao-dark: #F5DC2B;
  --bg: #FFFBF8;
  --bg-alt: #FBF0EC;
  --text: #4B5754;
  --muted: #7A8683;
  --line: #F0E3DD;
  --radius: 10px;
  --radius-lg: 22px;
  --shadow: 0 2px 6px rgba(120, 90, 80, .05), 0 14px 40px rgba(150, 110, 100, .10);
}
h1, h2, h3, h4 { color: var(--head); }

.site-header { background: rgba(255, 251, 248, .85); transition: box-shadow .3s; }
.site-header.scrolled { box-shadow: 0 6px 24px rgba(150, 110, 100, .10); }
.logo-mark { background: linear-gradient(135deg, #F6C9BC, #E9D5F0); color: #fff; box-shadow: 0 4px 12px rgba(246, 201, 188, .6); }
.logo-text { color: var(--head); }
.logo-text em { color: #E08F7A; }
.main-nav a.active, .nav-dropdown.active > a { box-shadow: inset 0 -2px 0 var(--blush); color: var(--ink); }

/* buttons */
.btn { position: relative; overflow: hidden; box-shadow: 0 4px 14px rgba(150, 110, 100, .12); }
.btn:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(150, 110, 100, .18); }
.btn::after { content: ''; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .55) 50%, transparent 70%); transform: translateX(-120%); pointer-events: none; }
.btn:hover::after { transform: translateX(120%); transition: transform .7s; }
.btn-primary { background: linear-gradient(135deg, #6C9A8B, #4F7F70); }
.btn-primary:hover { background: linear-gradient(135deg, #78A596, #5A8B7C); }
.btn-outline { border-color: #9CBBB0; color: var(--ink); background: rgba(255, 255, 255, .6); box-shadow: none; }
.btn-outline:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.btn-dark { background: var(--ink); }
.btn-kakao { box-shadow: 0 6px 18px rgba(254, 233, 78, .55); }
.btn .icon { transition: transform .25s; }
.btn:hover .icon { transform: translateX(3px); }

/* hero */
.hero { position: relative; background: linear-gradient(180deg, #FFF8F4 0%, #FCEFEA 55%, #F6EEF8 100%); }
.hero::before, .hero::after { content: ''; position: absolute; border-radius: 50%; filter: blur(70px); pointer-events: none; z-index: 0; }
.hero::before { width: 420px; height: 420px; background: #F9D5C9; opacity: .7; left: -120px; top: -80px; animation: drift 16s ease-in-out infinite; }
.hero::after { width: 460px; height: 460px; background: #E6DCF5; opacity: .75; right: -140px; bottom: -120px; animation: drift 20s ease-in-out infinite reverse; }
.hero > .container { position: relative; z-index: 1; }
.eyebrow { color: #D2806A; border-color: var(--blush); }
.text-accent { color: #E08F7A; }
.hero-text { color: #6F7C78; }
.hero-arch { position: relative; border-color: #fff; box-shadow: 0 24px 60px rgba(190, 130, 120, .25); animation: float 7s ease-in-out infinite; }
.hero-arch::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255, 220, 205, 0) 55%, rgba(246, 201, 188, .25)); pointer-events: none; }
.hero-photo { filter: saturate(.92) brightness(1.04) contrast(.97); transition: transform 1.2s ease; }
.hero-visual:hover .hero-photo { transform: scale(1.04); }
.hero-visual::before { content: ''; position: absolute; inset: -18px -18px 18px 18px; border-radius: 999px 999px 24px 24px; border: 1.5px dashed rgba(224, 143, 122, .55); animation: float 7s ease-in-out infinite reverse; pointer-events: none; }
.hero-seal { background: linear-gradient(135deg, #F6C9BC, #E3D4F2); color: #fff; box-shadow: 0 10px 28px rgba(224, 143, 122, .35); animation: bob 5s ease-in-out infinite; z-index: 2; }
.hero-seal .icon { animation: beat 2.4s ease-in-out infinite; }
.hero-badges { border-color: rgba(224, 143, 122, .25); }
.hero-badge .icon { color: #E08F7A; }

/* page hero + cta: pastel gradients instead of dark blocks */
.page-hero { background: linear-gradient(120deg, #E4F0EA 0%, #F4E8F2 55%, #FCE9E1 100%); color: var(--head); }
.page-hero::after { border-color: rgba(255, 255, 255, .9); box-shadow: 0 0 0 40px rgba(255, 255, 255, .35); animation: drift 14s ease-in-out infinite; }
.page-hero::before { content: ''; position: absolute; left: -60px; bottom: -90px; width: 240px; height: 240px; border-radius: 50%; background: rgba(246, 201, 188, .45); filter: blur(30px); animation: drift 18s ease-in-out infinite reverse; }
.page-hero .container { position: relative; z-index: 1; }
.page-hero h1 { color: var(--head); }
.page-hero p { color: #6A7773; }
.eyebrow-light { color: #D2806A; border-color: rgba(224, 143, 122, .5); }
.cta-band { background: linear-gradient(120deg, #DDEBE4, #F1E6F3 55%, #FBE4DA); color: var(--head); position: relative; overflow: hidden; }
.cta-band::before { content: ''; position: absolute; right: -80px; top: -100px; width: 300px; height: 300px; border-radius: 50%; background: rgba(255, 255, 255, .55); animation: drift 15s ease-in-out infinite; }
.cta-band .container { position: relative; }
.cta-band h2 { color: var(--head); }
.cta-band p { color: #6A7773; }
.btn-ghost-light { border-color: #8FB3A7; color: var(--ink); }
.btn-ghost-light:hover { background: rgba(255, 255, 255, .6); }

/* sections / cards */
.bg-alt { background: linear-gradient(180deg, #FBF0EC, #F8EEF3); }
.section-eyebrow { color: #D2806A; }
.section-head h2 { position: relative; padding-bottom: 18px; }
.section-head-center h2::after, .section-head-left h2::after { content: ''; position: absolute; left: 50%; bottom: 0; width: 56px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, #F6C9BC, #D9C8EE); transform: translateX(-50%); }
.section-head-left h2::after { left: 0; transform: none; }
.card, .duo-card, .expert-card, .contact-form-card, .contact-info-item, .checklist li { border-color: var(--line); }
.card { position: relative; overflow: hidden; }
.card, .duo-card { transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s, border-color .35s; }
.service-card:hover, .blog-card:hover, .advantage-card:hover, .duo-card:hover { border-color: #F2CFC3; box-shadow: var(--shadow); transform: translateY(-6px); }
.card::before { content: ''; position: absolute; right: -40px; top: -40px; width: 120px; height: 120px; border-radius: 50%; background: radial-gradient(circle, rgba(246, 201, 188, .35), transparent 70%); transition: transform .5s; pointer-events: none; }
.card:hover::before { transform: scale(1.8); }
.card > * { position: relative; }
.card-icon { background: linear-gradient(135deg, #FDEEE8, #EFE7F8); color: #D2806A; transition: transform .4s cubic-bezier(.3, 1.6, .5, 1); }
.card:hover .card-icon, .duo-card:hover .card-icon { transform: scale(1.12) rotate(-6deg); }
.card-link .icon { transition: transform .25s; }
.card:hover .card-link .icon { transform: translateX(4px); }
.blog-tag { color: #D2806A; }
.advantage-card { border-top: 1px solid var(--line); border-radius: var(--radius-lg); background: linear-gradient(180deg, #fff, #FFFAF8); }
.advantage-card::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: linear-gradient(90deg, #F6C9BC, #D9C8EE, #BFE0D2); }
.checklist .icon { color: #7FB5A0; }
.checklist li { transition: transform .25s, box-shadow .25s; }
.checklist li:hover { transform: translateX(6px); box-shadow: var(--shadow); }
.expert-card { background: linear-gradient(135deg, #fff, #FFF8F5); }
.expert-avatar { background: linear-gradient(160deg, #F6C9BC, #DCCFF0); color: #fff; box-shadow: 0 16px 40px rgba(200, 150, 150, .3); }
.expert-title { color: #D2806A; }
.step-item:not(:last-child)::before { background: repeating-linear-gradient(to bottom, #EBCFC6 0 6px, transparent 6px 12px); width: 2px; }
.step-num { border-color: #F2CFC3; background: linear-gradient(135deg, #fff, #FDEEE8); color: #D2806A; transition: transform .3s, background .3s, color .3s; }
.step-item:hover .step-num { transform: scale(1.1); background: linear-gradient(135deg, #F6C9BC, #E3D4F2); color: #fff; }
.callout-box { background: linear-gradient(120deg, #FDEEE8, #F3ECF8); border-left-color: #E9A896; }
.callout-box .icon { color: #D2806A; }
.article .meta { color: #D2806A; }
.contact-form-card { box-shadow: var(--shadow); }
#leadForm input, #leadForm textarea { background: #FFFBF9; transition: border-color .2s, box-shadow .2s, background .2s; }
#leadForm input:focus, #leadForm textarea:focus { outline: none; border-color: #E9A896; box-shadow: 0 0 0 4px rgba(246, 201, 188, .35); background: #fff; }
.form-success { background: #E6F4EE; color: #3E7863; }

/* footer: soft instead of dark */
.site-footer { background: linear-gradient(180deg, #F8ECE8, #F1E6F1); color: #6A7773; }
.footer-col h4 { color: var(--head); }
.footer-col a { transition: color .2s, transform .2s; }
.footer-col a:hover { color: #D2806A; transform: translateX(3px); }
.logo-footer .logo-text { color: var(--head); }
.logo-footer .logo-mark { background: linear-gradient(135deg, #F6C9BC, #E9D5F0); color: #fff; }
.footer-bottom { border-top-color: rgba(120, 90, 80, .15); }
.mobile-bar { background: rgba(255, 251, 248, .94); }

/* ---------- keyframes ---------- */
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes bob { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-8px) rotate(6deg); } }
@keyframes beat { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.18); } }
@keyframes drift { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(40px, 30px) scale(1.08); } }
@keyframes rise { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }

/* entrance on load (CSS only) */
.hero-copy > * { opacity: 0; animation: rise .9s cubic-bezier(.2, .8, .2, 1) forwards; }
.hero-copy > :nth-child(1) { animation-delay: .1s; }
.hero-copy > :nth-child(2) { animation-delay: .25s; }
.hero-copy > :nth-child(3) { animation-delay: .4s; }
.hero-copy > :nth-child(4) { animation-delay: .55s; }
.hero-visual { opacity: 0; animation: rise 1.1s .3s cubic-bezier(.2, .8, .2, 1) forwards; }
.hero-badge { opacity: 0; animation: rise .8s forwards; }
.hero-badge:nth-child(1) { animation-delay: .8s; }
.hero-badge:nth-child(2) { animation-delay: .95s; }
.hero-badge:nth-child(3) { animation-delay: 1.1s; }
.page-hero .container > * { opacity: 0; animation: rise .8s forwards; }
.page-hero .container > :nth-child(1) { animation-delay: .05s; }
.page-hero .container > :nth-child(2) { animation-delay: .18s; }
.page-hero .container > :nth-child(3) { animation-delay: .3s; }

/* scroll reveal: class toggled by main.js; without JS everything stays visible */
.js .reveal { opacity: 0; transform: translateY(32px); transition: opacity .8s cubic-bezier(.2, .8, .2, 1), transform .8s cubic-bezier(.2, .8, .2, 1); transition-delay: var(--d, 0ms); }
.js .reveal.in { opacity: 1; transform: none; }
.js .card.reveal.in, .js .duo-card.reveal.in { transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s, border-color .35s, opacity .8s; transition-delay: 0ms; }

@media (max-width: 640px) {
  .hero::before, .hero::after { width: 260px; height: 260px; }
  .hero-visual::before { inset: -12px -10px 12px 10px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .hero-copy > *, .hero-visual, .hero-badge, .page-hero .container > * { opacity: 1 !important; }
  .js .reveal { opacity: 1 !important; transform: none !important; }
}