*{margin:0;padding:0;box-sizing:border-box}
:root{--bg:#faf5ff;--white:#fff;--ink:#1e1b4b;--purple:#7c3aed;--purple-dk:#5b21b6;--purple-lt:#c4b5fd;--purple-soft:#ede9fe;--pink:#ec4899;--gray:#64748b;--mute:#a8a29e;--line:#e9d5ff}
html{scroll-behavior:smooth}
body{font-family:'IBM Plex Sans KR','Noto Sans KR',sans-serif;background:var(--bg);color:var(--ink);line-height:1.8;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
.out{font-family:'Outfit','Noto Sans KR',sans-serif;font-weight:800;letter-spacing:-.5px}
.topbar{background:var(--ink);color:#e9d5ff;padding:9px 24px;text-align:center;font-size:.85em}.topbar b{color:#fbbf24}
.nav{position:sticky;top:0;z-index:1000;background:rgba(250,245,255,.94);backdrop-filter:blur(20px);border-bottom:1px solid var(--line)}
.nav-in{max-width:1100px;margin:0 auto;padding:16px 24px;display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px}
.brand .b{width:42px;height:42px;background:linear-gradient(135deg,var(--purple) 0%,var(--pink) 100%);color:#fff;border-radius:12px;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:1.15em;box-shadow:0 8px 16px rgba(124,58,237,.3)}
.brand .t{font-weight:900;font-size:1.35em;color:var(--ink);letter-spacing:-.5px;line-height:1}
.brand .t .s{display:block;font-family:'Outfit',sans-serif;font-size:.5em;color:var(--purple-dk);font-weight:700;letter-spacing:1.5px;margin-top:3px}
.nmenu{display:flex;gap:4px;flex-wrap:wrap}
.nmenu a{padding:8px 14px;font-size:.92em;font-weight:600;color:var(--gray);border-radius:30px;transition:.2s}
.nmenu a:hover,.nmenu a.active{color:var(--purple-dk);background:var(--purple-soft)}
.nactions{display:flex;gap:10px}
.nbtn{padding:11px 22px;border-radius:30px;font-weight:700;font-size:.92em;transition:.2s}
.nbtn.c{background:linear-gradient(135deg,var(--purple) 0%,var(--pink) 100%);color:#fff;box-shadow:0 8px 16px rgba(124,58,237,.3)}
.nbtn.h{background:var(--white);color:var(--ink);border:1px solid var(--line)}
.nbtn:hover{transform:translateY(-2px)}
.crumb{max-width:1080px;margin:30px auto 0;padding:0 24px;font-size:.88em;color:var(--mute)}.crumb a:hover{color:var(--purple)}
.page-hero{padding:60px 24px 50px;text-align:center;background:linear-gradient(180deg,var(--purple-soft) 0%,var(--bg) 100%)}
.page-hero h1{font-size:2.4em;font-weight:900;color:var(--ink);margin-bottom:12px;letter-spacing:-1px}
.page-hero h1 .g{background:linear-gradient(135deg,var(--purple) 0%,var(--pink) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.page-hero p{color:var(--gray);font-size:1.08em;max-width:680px;margin:0 auto}
section.s{padding:60px 24px}
.s.bg{background:var(--white)}
.si{max-width:1080px;margin:0 auto}
.si h2{font-size:2em;color:var(--ink);margin-bottom:20px;font-weight:900;letter-spacing:-.5px;position:relative;display:inline-block;padding-bottom:10px}
.si h2::after{content:"";position:absolute;bottom:0;left:0;width:55%;height:3px;background:linear-gradient(90deg,var(--purple) 0%,var(--pink) 100%);border-radius:3px}
.si h3{font-size:1.25em;font-weight:900;color:var(--ink);margin:24px 0 12px}
.si p{margin-bottom:18px;color:var(--gray);font-size:1.05em}
.si p strong{color:var(--purple-dk);font-weight:800}
.values{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:30px}
.val{background:var(--white);padding:30px 26px;border-radius:18px;border:1px solid var(--line);transition:.3s}
.val:hover{transform:translateY(-4px);box-shadow:0 18px 36px rgba(124,58,237,.1);border-color:var(--purple-lt)}
.val .ico{width:50px;height:50px;background:linear-gradient(135deg,var(--purple) 0%,var(--pink) 100%);color:#fff;display:flex;align-items:center;justify-content:center;border-radius:14px;font-size:1.4em;margin-bottom:16px}
.val h3{font-size:1.15em;font-weight:900;color:var(--ink);margin-bottom:8px}
.val p{color:var(--gray);font-size:.96em;margin:0}
.factors{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:24px}
.fac{background:var(--white);padding:24px 26px;border:1px solid var(--line);border-radius:16px;display:flex;gap:16px;align-items:flex-start;transition:.25s}
.fac:hover{transform:translateY(-3px);border-color:var(--purple-lt)}
.fac .i{flex-shrink:0;width:40px;height:40px;background:linear-gradient(135deg,var(--purple) 0%,var(--pink) 100%);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:.95em}
.fac h3{font-size:1.06em;font-weight:900;color:var(--ink);margin-bottom:4px}
.fac p{color:var(--gray);font-size:.94em;margin:0}
.facts{background:linear-gradient(135deg,var(--purple-dk) 0%,var(--purple) 50%,var(--pink) 100%);color:#fff;padding:50px 30px;border-radius:20px;margin-top:30px;display:grid;grid-template-columns:repeat(4,1fr);gap:24px;text-align:center}
.facts .f .n{font-size:2.6em;font-weight:900;color:#fff;line-height:1;letter-spacing:-1px}
.facts .f .l{font-size:.88em;opacity:.92;margin-top:6px;letter-spacing:1px}
.rtbl{background:var(--white);border-radius:16px;overflow:hidden;border:1px solid var(--line);margin-top:24px;box-shadow:0 12px 28px rgba(124,58,237,.08)}
.rtbl-row{display:grid;grid-template-columns:1fr 1fr 1fr 1.2fr;border-bottom:1px solid var(--line);font-size:.96em}
.rtbl-row:last-child{border:none}
.rtbl-row.head{background:linear-gradient(135deg,var(--purple) 0%,var(--pink) 100%);color:#fff;font-weight:800}
.rtbl-cell{padding:18px 22px}
.rtbl-cell.hi{font-weight:800;color:var(--purple-dk)}
.note{background:var(--purple-soft);border-left:4px solid var(--purple);padding:22px 26px;border-radius:0 16px 16px 0;margin-top:24px}
.note h4{color:var(--purple-dk);font-weight:900;margin-bottom:8px;font-size:1.1em}.note p{color:var(--ink);margin:0;font-size:.96em}
.warn{background:#fdf2f8;border:1px solid #f9a8d4;border-left:5px solid var(--pink);padding:22px 26px;border-radius:0 16px 16px 0;margin-top:24px}
.warn h4{color:#9d174d;font-weight:900;margin-bottom:6px}.warn p{color:#831843;margin:0}
.steps{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:24px}
.stp{background:var(--white);border:1px solid var(--line);padding:30px;border-radius:16px;display:flex;gap:20px;transition:.25s}
.stp:hover{transform:translateY(-4px);border-color:var(--purple-lt);box-shadow:0 16px 32px rgba(124,58,237,.1)}
.stp .n{flex-shrink:0;width:50px;height:50px;background:linear-gradient(135deg,var(--purple) 0%,var(--pink) 100%);color:#fff;border-radius:14px;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:1.3em;box-shadow:0 8px 16px rgba(124,58,237,.25)}
.stp h3{font-size:1.15em;font-weight:900;color:var(--ink);margin-bottom:6px}
.stp p{color:var(--gray);font-size:.95em;margin:0;line-height:1.78}
.timeline{margin-top:24px;position:relative;padding-left:30px;border-left:3px solid var(--purple)}
.tlitem{margin-bottom:24px;position:relative}
.tlitem::before{content:"";position:absolute;left:-37px;top:6px;width:14px;height:14px;border-radius:50%;background:var(--white);border:3px solid var(--purple)}
.tlitem .y{color:var(--purple);font-size:1.2em;font-weight:900;margin-bottom:4px}
.tlitem .t{font-weight:800;color:var(--ink);margin-bottom:4px}
.tlitem .d{color:var(--gray);font-size:.96em}
.notice-list{margin-top:24px;background:var(--white);border:1px solid var(--line);border-radius:16px;overflow:hidden}
.notice-item{display:grid;grid-template-columns:80px 1fr 110px;gap:16px;padding:18px 24px;border-bottom:1px solid var(--line);align-items:center}
.notice-item:last-child{border:none}.notice-item:hover{background:var(--purple-soft)}
.notice-item .nbadge{display:inline-block;padding:4px 10px;background:linear-gradient(135deg,var(--purple) 0%,var(--pink) 100%);color:#fff;font-size:.78em;font-weight:700;border-radius:30px;text-align:center}
.notice-item .nbadge.alert{background:#dc2626}
.notice-item .ttitle{color:var(--ink);font-weight:700}
.notice-item .ndate{color:var(--mute);font-size:.88em;text-align:right}
.review-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:24px}
.rev{background:var(--white);border:1px solid var(--line);padding:26px;border-radius:16px;transition:.25s}
.rev:hover{transform:translateY(-3px);border-color:var(--purple-lt)}
.rev .stars{color:#fbbf24;margin-bottom:10px;font-size:1.05em}
.rev .quote{color:var(--ink);font-size:.98em;line-height:1.85;margin-bottom:14px;font-weight:500}
.rev .who{border-top:1px dashed var(--line);padding-top:12px;display:flex;justify-content:space-between;font-size:.86em;color:var(--mute)}
.rev .who b{color:var(--purple-dk);font-weight:700}
details.faq{background:var(--white);border:1px solid var(--line);border-radius:14px;margin-bottom:11px;transition:.2s;overflow:hidden}
details.faq[open]{border-color:var(--purple-lt);box-shadow:0 12px 24px rgba(124,58,237,.08)}
details.faq summary{cursor:pointer;padding:22px 26px;font-weight:700;color:var(--ink);list-style:none;display:flex;justify-content:space-between;gap:14px;align-items:center;font-size:1.02em}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary::after{content:"+";color:var(--purple);font-weight:900;font-size:1.5em;transition:.2s}
details.faq[open] summary::after{transform:rotate(45deg)}
details.faq .a{padding:0 26px 22px;color:var(--gray);line-height:1.9;border-top:1px solid var(--line)}
details.faq[open] .a{padding-top:18px}
.cta-band{background:linear-gradient(135deg,var(--purple-dk) 0%,var(--purple) 50%,var(--pink) 100%);color:#fff;text-align:center;padding:80px 24px;position:relative;overflow:hidden}
.cta-band::before{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:600px;height:600px;background:radial-gradient(circle,rgba(255,255,255,.12) 0%,transparent 65%)}
.cta-band h2{position:relative;color:#fff;font-size:2em;margin-bottom:16px;letter-spacing:-1px}
.cta-band h2::after{display:none}
.cta-band p{position:relative;color:rgba(255,255,255,.95);font-size:1.08em;margin-bottom:24px}
.cta-ctas{position:relative;display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.btn{padding:16px 32px;border-radius:30px;font-weight:800;transition:.25s;display:inline-flex;align-items:center;gap:8px}
.btn.p{background:#fff;color:var(--purple-dk)}
.btn.p:hover{transform:translateY(-3px)}
.btn.s{background:rgba(255,255,255,.15);color:#fff;border:1px solid rgba(255,255,255,.3);backdrop-filter:blur(10px)}
.btn.s:hover{background:rgba(255,255,255,.25);transform:translateY(-3px)}
footer{background:#1e1b4b;color:#c4b5fd;padding:50px 24px 30px;text-align:center}
.ftel{font-size:1.4em;color:#fff;font-weight:800;margin-bottom:14px}.ftel a{color:#fbbf24}
.fnav{margin:18px 0;display:flex;gap:18px;justify-content:center;flex-wrap:wrap}
.fnav a{color:#c4b5fd;font-size:.9em}.fnav a:hover{color:#fbbf24}
footer p{font-size:.93em;line-height:1.85}.disc{font-size:.82em;opacity:.65;max-width:780px;margin:18px auto 0}
.float{position:fixed;right:22px;bottom:22px;display:flex;flex-direction:column;gap:10px;z-index:999}
.fb{width:60px;height:60px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.55em;box-shadow:0 12px 28px rgba(124,58,237,.4);transition:.25s;color:#fff}
.fb.tel{background:linear-gradient(135deg,var(--purple) 0%,var(--pink) 100%);animation:p 2.4s infinite}
.fb.ch{background:#fbbf24;color:#3b2200}
.fb:hover{transform:scale(1.1)}
@keyframes p{0%,100%{box-shadow:0 12px 28px rgba(124,58,237,.4)}50%{box-shadow:0 12px 38px rgba(236,72,153,.7)}}
@media(max-width:900px){.page-hero h1{font-size:1.7em}.values{grid-template-columns:1fr}.factors,.steps,.review-grid{grid-template-columns:1fr}.facts{grid-template-columns:repeat(2,1fr);padding:30px}.rtbl-row{grid-template-columns:1fr 1fr 1fr 1fr;font-size:.85em}.rtbl-cell{padding:12px 10px}.notice-item{grid-template-columns:60px 1fr;font-size:.9em}.notice-item .ndate{grid-column:2}.nmenu{order:3;width:100%;justify-content:center}}

/* === Mobile Hamburger Drawer === */
.hmb{display:none;background:transparent;border:none;cursor:pointer;padding:8px;width:44px;height:44px;align-items:center;justify-content:center;flex-direction:column;gap:5px;border-radius:8px;color:inherit}
.hmb span{display:block;width:24px;height:2.5px;background:currentColor;border-radius:2px;transition:.3s}
.hmb:hover{background:rgba(0,0,0,.05)}
.drwBg{position:fixed;inset:0;background:rgba(0,0,0,.55);opacity:0;visibility:hidden;transition:.3s;z-index:1500}
.drw{position:fixed;top:0;left:0;bottom:0;width:84%;max-width:320px;background:#fff;z-index:1600;transform:translateX(-100%);transition:transform .3s ease;display:flex;flex-direction:column;box-shadow:8px 0 32px rgba(0,0,0,.15)}
body.drwO{overflow:hidden}
body.drwO .drwBg{opacity:1;visibility:visible}
body.drwO .drw{transform:translateX(0)}
.drwH{padding:22px 24px;border-bottom:1px solid #e5e7eb;display:flex;justify-content:space-between;align-items:center}
.drwH .drwBrand{font-weight:900;font-size:1.25em;color:#111827}
.drwH .drwX{background:transparent;border:none;font-size:1.4em;cursor:pointer;line-height:1;padding:4px 10px;border-radius:6px;color:#6b7280}
.drwH .drwX:hover{background:#f3f4f6;color:#111827}
.drwMenu{flex:1;padding:12px 0;display:flex;flex-direction:column;overflow-y:auto}
.drwMenu a{padding:15px 24px;font-weight:600;font-size:1.02em;color:#374151;text-decoration:none;border-left:3px solid transparent;transition:.2s}
.drwMenu a:hover,.drwMenu a.active{background:#f9fafb;color:#111827}
.drwCta{padding:20px 24px;border-top:1px solid #e5e7eb;display:flex;flex-direction:column;gap:10px}
.drwCta a{display:block;text-align:center;padding:14px;border-radius:10px;font-weight:800;text-decoration:none;font-size:.98em}
.drwCta .drwTel{background:#111827;color:#fff}
.drwCta .drwCh{background:#fbbf24;color:#3b2200}
@media(max-width:900px){
  .hmb{display:flex !important}
  .nmenu{display:none !important}
  .nbtn .txt{display:none}
  .nactions{gap:6px}
  .nbtn.h{padding:11px 14px}
  .nbtn.c{padding:11px 14px}
}

        /* === Mobile UX Improvements === */
        @media(max-width:900px){
          .topbar{font-size:.74em;padding:7px 12px;letter-spacing:0;line-height:1.4}
          .nav-in{padding:10px 14px !important;gap:8px !important;flex-wrap:nowrap !important;justify-content:flex-start !important;align-items:center !important}
          .hmb{display:flex !important;width:42px;height:42px;padding:8px;border-radius:10px;flex-shrink:0;order:-1}
          .hmb span{width:22px;height:2.5px;margin:0}
          .logo,.brand{gap:8px !important;flex-shrink:1;min-width:0;margin-right:auto !important}
          .logo .mark,.brand .b{width:36px !important;height:36px !important;font-size:.95em !important;flex-shrink:0;border-radius:9px !important}
          .logo .t,.brand .t{font-size:1.05em !important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:-.3px}
          .logo .t .sub,.brand .t .s{display:none}
          .nmenu{display:none !important}
          .nbtn .txt,.nbtn span.txt{display:none}
          .nactions,.nav-actions,.nav-act{display:flex !important;gap:6px !important;flex-shrink:0 !important;align-items:center !important}
          .nbtn{padding:0 !important;width:42px !important;height:42px !important;min-width:42px !important;display:inline-flex !important;align-items:center !important;justify-content:center !important;font-size:1.2em !important;border-radius:10px !important;gap:0 !important;line-height:1 !important}
        }
        @media(max-width:380px){
          .topbar{display:none}
          .logo .t,.brand .t{display:none}
          .nav-in{padding:10px 12px !important;gap:6px !important}
          .nbtn{width:40px !important;height:40px !important;min-width:40px !important;font-size:1.1em !important}
          .hmb{width:40px;height:40px;padding:7px}
        }

        /* === Mobile-First Polish (≤560px) === */
        @media(max-width:560px){
          /* Hero — tight & focused */
          .hero,.page-hero{padding:50px 16px 40px !important}
          .hero h1,.page-hero h1{font-size:1.7em !important;line-height:1.22 !important;margin-bottom:14px !important;letter-spacing:-.8px !important}
          .hero .sub{font-size:.95em !important;margin-bottom:16px !important;line-height:1.4 !important}
          .hero p.lead,.hero .lead,.hero p,.page-hero p{font-size:.96em !important;margin-bottom:22px !important;line-height:1.7 !important}
          .ribbon{font-size:.7em !important;padding:6px 14px !important;margin-bottom:16px !important;letter-spacing:.5px !important}
          .ribbon::before,.ribbon::after{width:14px !important}
          .badge,.pill,.kicker{font-size:.78em !important;padding:6px 14px !important;margin-bottom:14px !important;letter-spacing:.5px !important}

          /* CTAs full-width */
          .ctas,.cta-row,.hero-cta,.cta-ctas{gap:8px !important;display:flex !important;flex-wrap:wrap !important}
          .ctas .btn,.cta-row .btn,.hero-cta .btn,.cta-ctas .btn{flex:1 1 calc(50% - 4px);min-width:0;padding:14px 16px !important;font-size:.92em !important;border-radius:10px !important;justify-content:center !important;gap:6px !important}

          /* Sections */
          section,section.s,section.section,.sec,section.sec{padding:48px 16px !important}
          .si h2,.s-head h2,.section-head h2,.sh h2,h2{font-size:1.5em !important;margin-bottom:12px !important;line-height:1.3 !important}
          .si p,.s-head p,.section-head p,.sh p{font-size:.95em !important}
          .eyebrow,.tag,.sh .lbl,.s-head .lbl,.s-head .num{font-size:.7em !important;letter-spacing:.5px !important;margin-bottom:8px !important}

          /* Stats — compact 2x2 */
          .stats,.stats{margin:-30px auto 50px !important;padding:0 16px !important}
          .stats-grid,.sg,.facts{padding:22px 14px !important;gap:12px !important;border-radius:14px !important}
          .stats-grid,.sg{grid-template-columns:repeat(2,1fr) !important}
          .stat,.facts .f{padding:10px 6px !important}
          .stat .num,.stat .n,.facts .f .n{font-size:1.5em !important;line-height:1}
          .stat .label,.stat .l,.facts .f .l{font-size:.74em !important;margin-top:4px !important;letter-spacing:.3px !important}

          /* Cards single column */
          .features-grid,.fg,.values,.factors,.steps,.proc,.pillars,.cri-grid,.trans-grid,.fpr,.tr-cards{grid-template-columns:1fr !important;gap:12px !important}
          .feature,.ft,.val,.fac,.cri,.tr-card,.stp,.pil,.step{padding:22px 18px !important;border-radius:14px !important}
          .feature h3,.ft h3,.val h3,.cri h3,.tr-card h3,.stp h3,.pil h3,.step h3{font-size:1.05em !important;margin-bottom:6px !important}
          .feature p,.ft p,.val p,.cri p,.tr-card p,.stp p,.pil p,.step p{font-size:.92em !important}

          /* CTA Band */
          .cta-band,.cta{padding:50px 18px !important}
          .cta-band h2,.cta h2{font-size:1.45em !important;margin-bottom:14px !important;letter-spacing:-.5px !important}
          .cta-band p,.cta p{font-size:.94em !important;margin-bottom:20px !important}

          /* FAQ — touch-friendly */
          details.faq summary{padding:18px 16px !important;font-size:.96em !important;gap:10px !important}
          details.faq summary::after{font-size:1.3em !important}
          details.faq .a,details.faq .ans,details.faq .answer{padding:0 16px 18px 16px !important;font-size:.92em !important;line-height:1.75 !important}
          details.qa summary{padding:18px 16px !important;font-size:.94em !important}
          details.qa summary .qm,details.qa summary .qmark{width:28px !important;height:28px !important;font-size:.85em !important}
          details.qa .a{padding:0 16px 18px 56px !important;font-size:.92em !important}

          /* Notice list */
          .notice-item{padding:14px 16px !important;font-size:.88em !important;grid-template-columns:60px 1fr !important;gap:10px !important}
          .notice-item .ndate{grid-column:2 !important;font-size:.78em !important}

          /* Timeline card */
          .tl-card{padding:22px 18px !important}
          .tl-card .th{font-size:.96em !important;margin-bottom:12px !important}
          .tl-item .t{font-size:.9em !important}
          .tl-item .min{font-size:.78em !important}

          /* Crumb */
          .crumb{margin:18px auto 0 !important;padding:0 16px !important;font-size:.82em !important}

          /* Floating buttons compact */
          .float-btns,.float{right:14px !important;bottom:14px !important;gap:8px !important}
          .floating-btn,.fb{width:52px !important;height:52px !important;font-size:1.35em !important}

          /* Body breathing room for floats */
          body{padding-bottom:0 !important}
          footer{padding:36px 18px 28px !important}
          footer .ftel{font-size:1.2em !important}
          footer .fnav{gap:12px !important}
          footer .fnav a{font-size:.85em !important}
          footer p{font-size:.85em !important}
          footer .disc{font-size:.75em !important}
        }

        @media(max-width:380px){
          .hero h1,.page-hero h1{font-size:1.5em !important}
          .ctas .btn,.cta-row .btn,.hero-cta .btn,.cta-ctas .btn{flex:1 1 100%}
          .si h2,h2{font-size:1.35em !important}
        }