/* ── Layout grids (desktop defaults) ── */ .grid-hero{display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:center} .grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px} .grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px} .grid-5{display:grid;grid-template-columns:repeat(5,1fr);gap:0} .grid-2{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start} .stats-flex{display:flex;flex-wrap:wrap;justify-content:space-between;gap:32px;align-items:center} .stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px} .section-head{display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:20px} /* Card layouts — see /assets/cards.css (loaded in ) */ /* ── Desktop nav: see /assets/nav.css (loaded in ) ── */ /* ── Tablet ── */ @media(max-width:1024px){ .grid-3{grid-template-columns:repeat(2,1fr)} .grid-4{grid-template-columns:repeat(2,1fr)} #process .grid-5{grid-template-columns:1fr} } /* ── Mobile ── */ @media(max-width:768px){ html{-webkit-text-size-adjust:100%;word-break:keep-all;overflow-wrap:break-word} /* Korean word-level breaks — reinforce typography.css */ body,h1,h2,h3,h4,p,li,summary,label,.chCard,.navlink{ word-break:keep-all !important; overflow-wrap:break-word !important; } h1,h2,h3{text-wrap:balance;line-height:1.35 !important} .flow-title br{display:none !important} /* Mobile typography — center + spacing */ .page-hero,.section-block,.section-head,.inner-pad,.faq-block,.contact-grid,.cta-block{text-align:center !important} .page-hero h1,.section-block h2,.section-head h2{margin-left:auto;margin-right:auto} .page-hero p,.section-head p,.section-block p,.inner-pad p,.contact-grid p{ margin-left:auto !important;margin-right:auto !important; margin-bottom:1.35em !important; } .page-hero p:last-child,.section-head p:last-child{margin-bottom:0 !important} .hero-actions{align-items:center !important} .hero-actions + div{display:flex !important;justify-content:center !important;width:100%} .section-head{align-items:center !important;text-align:center !important} .chCard .brand-mark{margin:0 auto} .channel-ticker{justify-content:center !important} .pfCard > div:last-child{flex-direction:column !important;gap:6px !important;text-align:center !important} /* Hero */ .page-hero{padding:104px 20px 48px !important} .page-hero h1{font-size:clamp(28px,8vw,40px) !important;line-height:1.35 !important;margin-bottom:18px !important} .page-hero .hero-lead{font-size:17px !important;line-height:1.85 !important;max-width:none !important;margin-bottom:28px !important} .hero-decor{display:none !important} .grid-hero{grid-template-columns:1fr !important;gap:36px !important} .hero-actions{flex-direction:column !important;gap:10px !important} .hero-actions .btnPrimary,.hero-actions .btnGhost{ width:100% !important;text-align:center !important;justify-content:center !important; padding:16px 20px !important;font-size:16px !important; } .hero-phone{margin-top:8px} .hero-phone > div[style*="width:300px"]{width:min(100%,280px) !important;margin:0 auto} .phone-badge{display:none !important} .hero-phone [style*="min-height:500px"]{min-height:360px !important} .channel-ticker{margin-top:40px !important;padding-top:24px !important;gap:10px 16px !important;font-size:14px !important} /* Sections */ .section-block{padding-top:56px !important;padding-bottom:56px !important} .section-block .inner-pad{padding-left:20px !important;padding-right:20px !important} .section-head{flex-direction:column;align-items:center !important;gap:14px !important;margin-bottom:32px !important} .section-head p{max-width:none !important} .section-block h2{font-size:clamp(24px,6.5vw,32px) !important;line-height:1.35 !important} .section-head p,.section-block p,.inner-pad p{font-size:17px !important;line-height:1.85 !important} /* Grids → single column (cards.css handles card sizing) */ .grid-3,.grid-4,.grid-2{grid-template-columns:1fr !important;gap:16px !important} .grid-5{grid-template-columns:1fr !important} .stats-grid{grid-template-columns:repeat(2,1fr) !important} .stats-grid > div{padding:24px 18px !important} .stats-flex{flex-direction:column !important;align-items:center !important;gap:24px !important;text-align:center !important} .stats-flex > div:last-child{display:grid !important;grid-template-columns:repeat(2,1fr) !important;gap:20px 16px !important;width:100%} /* Cards — see cards.css */ .pfCard .pf-img{height:200px !important} /* FAQ */ .faq-block{padding-left:20px !important;padding-right:20px !important} .faq-block summary{font-size:16px !important;padding:18px 0 !important;line-height:1.45 !important} .faq-block p{font-size:15px !important;line-height:1.75 !important} /* Contact */ .contact-grid{padding:56px 20px !important;gap:32px !important} .contact-grid h2{font-size:clamp(26px,6vw,34px) !important} .contact-grid > .reveal{ display:flex !important; flex-direction:column !important; align-items:center !important; text-align:center !important; width:100% !important; } .contact-grid p{ font-size:15px !important; line-height:1.75 !important; text-align:center !important; width:100% !important; max-width:420px !important; margin-left:auto !important; margin-right:auto !important; } .contact-form{padding:24px 20px !important} .contact-form input,.contact-form textarea{font-size:16px !important;padding:14px 15px !important} .contact-form button{padding:16px !important;font-size:16px !important} /* Footer */ footer{text-align:center !important} .footer-top{ flex-direction:column !important; align-items:center !important; justify-content:center !important; gap:28px !important; margin-bottom:32px !important; text-align:center !important; } .footer-top > div{ max-width:none !important; width:100% !important; text-align:center !important; } .footer-top > div:first-child > div:first-child{ justify-content:center !important; } .footer-top > div:last-child{ flex-direction:column !important; align-items:center !important; justify-content:center !important; gap:28px !important; width:100% !important; } .footer-top > div:last-child > div{ align-items:center !important; text-align:center !important; } .footer-top .navlink{text-align:center !important} .footer-bottom{ flex-direction:column !important; align-items:center !important; justify-content:center !important; gap:8px !important; text-align:center !important; font-size:12px !important; line-height:1.6 !important; } /* Floating CTA */ .float-chat{ bottom:16px !important;right:16px !important;left:16px !important; justify-content:center !important;padding:14px 18px !important;font-size:14px !important; } .grid-4 > div,.grid-3 > div{text-align:center} /* Stats banner */ .stats-banner{padding:0 20px 56px !important} .stats-banner > div{padding:32px 22px !important;border-radius:18px !important} .stats-banner h2{font-size:22px !important;line-height:1.3 !important} /* Service page rows — cards.css */ .contact-grid .reveal p{max-width:420px;margin-left:auto !important;margin-right:auto !important;text-align:center !important} /* About page */ .about-hero{padding:104px 20px 48px !important} .about-hero h1{font-size:clamp(28px,8vw,40px) !important} .about-hero p{font-size:16px !important;line-height:1.75 !important} .company-row{grid-template-columns:1fr !important;gap:24px !important} .company-row .info-row{align-items:center !important;text-align:center !important} .cta-block{padding:56px 20px !important} .cta-block h2{font-size:clamp(24px,6.5vw,32px) !important} .cta-block p{font-size:15px !important} .simple-footer{flex-direction:column !important;text-align:center;gap:8px !important;padding:32px 20px !important;font-size:12px !important} } @media(max-width:480px){ .stats-grid{grid-template-columns:1fr !important} .stats-flex > div:last-child{grid-template-columns:1fr 1fr !important} }