@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;600;700;800&display=swap");
:root { font-family: "Noto Sans KR", "Apple SD Gothic Neo", sans-serif; color: #102845; background: #fff; font-synthesis: none; --navy:#102845; --green:#236532; --sage:#7d9875; --blue:#0c55c7; --cream:#f7f5ef; --line:#dfe5dc; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; scroll-padding-top:92px; } body { margin:0; min-width:320px; min-height:100vh; -webkit-font-smoothing:antialiased; } body,button { font-family:inherit; } a { color:inherit; text-decoration:none; } img { display:block; max-width:100%; } button,a { -webkit-tap-highlight-color:transparent; }
.shell { width:min(1180px,calc(100% - 48px)); margin-inline:auto; } .eyebrow { margin:0 0 12px; color:var(--green); font-size:12px; font-weight:800; letter-spacing:.16em; }
.site-header { position:sticky; z-index:50; top:0; background:rgba(255,255,255,.96); border-bottom:1px solid rgba(16,40,69,.08); backdrop-filter:blur(12px); }
.header-inner { height:82px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:32px; }
.brand { display:inline-flex; align-items:center; gap:10px; width:max-content; font-size:24px; font-weight:800; letter-spacing:-.05em; }
.brand-mark { position:relative; display:grid; place-items:center; width:38px; height:38px; color:var(--green); } .brand-mark>svg:first-child { width:34px; height:34px; } .brand-mark>svg:last-child { position:absolute; right:0; bottom:0; width:16px; height:16px; color:#3f8747; transform:rotate(-18deg); }
.nav { display:flex; align-items:center; gap:clamp(24px,3vw,48px); font-size:15px; font-weight:600; } .nav a,.footer-links a { transition:color .2s ease; } .nav a:hover,.footer-links a:hover { color:var(--green); }
.header-phone { justify-self:end; display:inline-flex; align-items:center; gap:8px; color:var(--blue); font-size:17px; font-weight:800; } .header-phone svg { width:20px; height:20px; } .menu-button { display:none; border:0; background:transparent; color:var(--navy); padding:8px; } .menu-button svg { width:28px; height:28px; }
.hero { position:relative; min-height:620px; overflow:hidden; background:#f7f5ef; } .hero-image { position:absolute; inset:0; background:url("../assets/hero.webp") center/cover no-repeat; } .hero-image::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(255,255,255,.98) 0%,rgba(255,255,255,.94) 27%,rgba(255,255,255,.26) 57%,rgba(255,255,255,0) 100%); }
.hero-inner { position:relative; min-height:620px; display:flex; align-items:center; } .hero-copy { position:relative; z-index:2; width:min(560px,50%); padding:70px 0 82px; } .hero-copy h1 { margin:0; font-size:clamp(48px,5vw,70px); line-height:1.18; letter-spacing:-.055em; } .hero-copy h1 strong { display:block; color:var(--green); font-weight:800; } .hero-description { margin:30px 0 32px; color:#243d5a; font-size:20px; font-weight:500; line-height:1.75; }
.phone-button { display:inline-flex; align-items:center; justify-content:center; gap:11px; min-height:58px; padding:0 25px; border-radius:10px; background:var(--blue); color:white; font-size:18px; font-weight:800; box-shadow:0 10px 26px rgba(12,85,199,.2); transition:transform .2s ease,background .2s ease; } .phone-button:hover { background:#0949ad; transform:translateY(-2px); } .phone-button svg { width:23px; height:23px; }
.hero-cleaner { position:absolute; z-index:3; right:0; top:95px; width:315px; height:430px; margin:0; border:9px solid white; box-shadow:0 20px 45px rgba(16,40,69,.16); } .hero-cleaner img { width:100%; height:100%; object-fit:cover; object-position:center 30%; }
.service-band { background:var(--sage); color:white; } .service-band-inner { min-height:90px; display:grid; grid-template-columns:repeat(4,1fr); align-items:stretch; } .service-band a { display:flex; align-items:center; justify-content:center; gap:13px; font-weight:700; border-right:1px solid rgba(255,255,255,.35); } .service-band a:last-child { border-right:0; } .service-band svg { width:30px; height:30px; }
.services-section { padding:72px 0 92px; background:#fff; } .section-heading { text-align:center; margin-bottom:42px; } .section-heading h2 { margin:0; font-size:clamp(30px,3.2vw,42px); line-height:1.3; letter-spacing:-.045em; } .heading-line { display:block; width:36px; height:3px; margin:18px auto 0; background:var(--green); }
.service-list { overflow:hidden; border:1px solid var(--line); } .service-row { display:grid; grid-template-columns:1.35fr 1fr; min-height:315px; border-bottom:1px solid var(--line); scroll-margin-top:100px; } .service-row:last-child { border-bottom:0; } .service-row.reverse { grid-template-columns:1fr 1.35fr; } .service-row.reverse .service-photo { order:2; } .service-photo { min-width:0; overflow:hidden; } .service-photo img { width:100%; height:100%; object-fit:cover; transition:transform .6s ease; } .service-row:hover .service-photo img { transform:scale(1.025); }
.service-copy { display:flex; flex-direction:column; justify-content:center; align-items:flex-start; padding:48px 60px; background:linear-gradient(135deg,#fff 0%,#fbfaf6 100%); } .service-copy>svg { width:38px; height:38px; color:var(--green); } .service-copy h3 { margin:17px 0 10px; color:var(--green); font-size:29px; letter-spacing:-.04em; } .service-copy p { margin:0; color:#405167; font-size:16px; line-height:1.75; word-break:keep-all; } .service-copy a { display:inline-flex; align-items:center; gap:7px; margin-top:22px; color:var(--blue); font-size:14px; font-weight:800; } .service-copy a svg { width:15px; height:15px; }
.process-section { padding:78px 0 82px; background:var(--cream); } .process-list { position:relative; display:grid; grid-template-columns:repeat(4,1fr); gap:36px; margin:0; padding:0; list-style:none; } .process-list::before { content:""; position:absolute; top:48px; left:12.5%; right:12.5%; height:1px; background:#cbd5c8; } .process-list li { position:relative; text-align:center; } .step-number { position:absolute; z-index:2; top:-4px; left:calc(50% - 43px); display:grid; place-items:center; width:25px; height:25px; border-radius:50%; background:var(--green); color:white; font-size:12px; font-weight:800; } .step-icon { position:relative; z-index:1; display:grid; place-items:center; width:94px; height:94px; margin:0 auto 16px; border:1px solid #cad3c8; border-radius:50%; background:white; color:var(--navy); } .step-icon svg { width:39px; height:39px; } .process-list strong { display:block; font-size:18px; } .process-list p { margin:8px auto 0; max-width:180px; color:#667587; font-size:13px; line-height:1.6; }
.final-cta { padding:0 0 22px; background:var(--cream); } .final-cta-inner { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:26px; min-height:142px; padding:26px 44px; border-radius:18px; background:linear-gradient(105deg,#0d55c3,#0648ad); color:white; box-shadow:0 16px 40px rgba(7,65,157,.18); } .cta-icon { display:grid; place-items:center; width:72px; height:72px; border:1px solid rgba(255,255,255,.55); border-radius:50%; } .cta-icon svg { width:31px; height:31px; } .final-cta h2 { margin:0 0 6px; font-size:26px; letter-spacing:-.04em; } .final-cta p { margin:0; color:rgba(255,255,255,.8); } .final-cta-inner>a { display:flex; flex-direction:column; align-items:center; justify-content:center; min-width:240px; min-height:88px; border-radius:14px; background:white; color:var(--blue); } .final-cta-inner>a span { font-size:13px; font-weight:700; } .final-cta-inner>a strong { margin-top:2px; font-size:24px; }
.site-footer { padding:38px 0 48px; background:white; border-top:1px solid var(--line); } .footer-inner { display:grid; grid-template-columns:auto auto 1fr; align-items:start; gap:24px 38px; } .site-footer .brand { font-size:20px; } .site-footer .brand-mark { width:31px; height:31px; } .footer-links { display:flex; gap:22px; align-items:center; min-height:34px; font-size:13px; } .business-info { display:flex; flex-wrap:wrap; gap:6px 18px; color:#657080; font-size:12px; line-height:1.7; } .copyright { grid-column:3; margin:-8px 0 0; color:#99a1aa; font-size:11px; } .mobile-call { display:none; }
.policy-main { padding:76px 0 100px; background:var(--cream); } .policy-shell { max-width:860px; } .policy-shell>h1 { margin:0; font-size:46px; letter-spacing:-.05em; } .policy-date { color:#7b8794; font-size:13px; } .policy-intro { display:flex; gap:12px; align-items:flex-start; margin:38px 0; padding:22px 24px; background:#eef4ec; color:#31573a; } .policy-intro svg { flex:0 0 auto; width:22px; height:22px; margin-top:2px; } .policy-intro p { margin:0; line-height:1.7; } .policy-content { padding:52px 56px; background:white; border:1px solid var(--line); } .policy-content section+section { margin-top:34px; padding-top:34px; border-top:1px solid #e7ebe5; } .policy-content h2 { margin:0 0 12px; font-size:20px; } .policy-content p { margin:0; color:#4b5b6d; line-height:1.9; } .back-link { display:inline-flex; margin-top:28px; color:var(--blue); font-weight:700; }
@media (max-width:1020px) { .header-inner { grid-template-columns:1fr auto auto; } .nav { display:none; position:absolute; top:82px; left:0; right:0; padding:20px 24px 26px; background:white; border-bottom:1px solid var(--line); flex-direction:column; align-items:flex-start; gap:20px; box-shadow:0 14px 28px rgba(16,40,69,.08); } .nav.open { display:flex; } .header-phone { margin-left:auto; } .menu-button { display:inline-grid; place-items:center; } .hero-cleaner { right:-20px; width:280px; } .service-copy { padding:40px; } .final-cta-inner { padding:26px 30px; } }
@media (max-width:760px) { html { scroll-padding-top:70px; } .shell { width:min(100% - 32px,1180px); } .header-inner { height:70px; gap:8px; } .brand { font-size:20px; } .brand-mark { width:31px; height:31px; } .header-phone span { display:none; } .header-phone { justify-content:center; width:42px; height:42px; border-radius:50%; background:#eef4ff; } .nav { top:70px; } .hero { min-height:auto; } .hero-image { position:relative; height:330px; background-position:64% center; } .hero-image::after { background:linear-gradient(0deg,rgba(255,255,255,.92),rgba(255,255,255,0) 55%); } .hero-inner { min-height:0; display:block; } .hero-copy { width:100%; padding:42px 0 50px; } .hero-copy h1 { font-size:clamp(38px,10.4vw,48px); } .hero-description { margin:22px 0 26px; font-size:17px; } .phone-button:not(.mobile-call) { width:100%; } .hero-cleaner { top:-302px; right:15px; width:142px; height:196px; border-width:5px; } .service-band-inner { width:100%; grid-template-columns:repeat(2,1fr); } .service-band a { min-height:72px; border-bottom:1px solid rgba(255,255,255,.25); font-size:14px; } .service-band a:nth-child(2) { border-right:0; } .service-band svg { width:24px; height:24px; } .services-section { padding:58px 0 68px; } .section-heading { margin-bottom:30px; } .section-heading h2 { font-size:30px; } .service-list { border:0; overflow:visible; } .service-row,.service-row.reverse { display:flex; flex-direction:column; min-height:0; margin-bottom:18px; border:1px solid var(--line); } .service-row.reverse .service-photo { order:0; } .service-photo { height:235px; } .service-copy { padding:31px 28px 34px; } .service-copy>svg { width:32px; height:32px; } .service-copy h3 { margin:13px 0 8px; font-size:25px; } .service-copy a { margin-top:16px; } .process-section { padding:60px 0 62px; } .process-list { grid-template-columns:repeat(2,1fr); gap:38px 18px; } .process-list::before { display:none; } .step-icon { width:82px; height:82px; } .step-number { left:calc(50% - 39px); } .process-list p { display:none; } .final-cta { padding-bottom:24px; } .final-cta-inner { grid-template-columns:auto 1fr; gap:18px; padding:27px 22px; border-radius:14px; } .cta-icon { width:54px; height:54px; } .final-cta h2 { font-size:21px; } .final-cta p { margin-top:5px; font-size:13px; } .final-cta-inner>a { grid-column:1/-1; width:100%; min-height:74px; } .footer-inner { display:flex; flex-direction:column; gap:18px; } .footer-links { min-height:0; } .business-info { flex-direction:column; gap:2px; } .copyright { margin:0; } .mobile-call { position:fixed; z-index:60; right:16px; bottom:max(16px,env(safe-area-inset-bottom)); display:inline-flex; min-height:52px; padding:0 18px; border-radius:999px; font-size:15px; box-shadow:0 12px 28px rgba(12,85,199,.32); } .policy-main { padding:52px 0 78px; } .policy-shell>h1 { font-size:36px; } .policy-content { padding:32px 24px; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { transition-duration:.01ms!important; } }

/* Static HTML icon adjustments */
.brand-mark { font-size: 28px; }
.brand-mark .leaf { position:absolute; right:0; bottom:0; font-size:14px; color:#3f8747; transform:rotate(-18deg); }
.header-phone i,.phone-button i { font-size:18px; }
.service-band i { font-size:27px; }
.service-copy>i { color:var(--green); font-size:34px; }
.service-copy a i { font-size:13px; }
.step-icon i { font-size:34px; }
.cta-icon i { font-size:27px; }
.menu-button i { font-size:24px; }
.policy-header .header-inner { grid-template-columns:1fr auto; }