/* 2026-10 개편 공통 스타일 (메인 · /sales · /marketing · /it · /contact). 기존 페이지(/en, /business/*, 404)는 이전 스타일을 그대로 씁니다. */
:root{--navy:#0b2545;--deep:#04162b;--ink:#102f55;--text:#24384f;--muted:#5f7389;--line:#dce5f0;--soft:#f3f7fb;--paper:#fff;--accent:#1b8fd0;--mint:#a1ebef;--radius:14px;--font:"Pretendard Variable",Pretendard,"Noto Sans KR","Malgun Gothic",-apple-system,BlinkMacSystemFont,sans-serif}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:72px;-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font);color:var(--text);background:var(--paper);font-size:16px;line-height:1.75;word-break:keep-all;overflow-wrap:break-word;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,p,ul,ol,figure{margin:0}
ul,ol{padding:0;list-style:none}
button{font:inherit;cursor:pointer}
a:focus-visible,button:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.skip{position:absolute;left:12px;top:-60px;z-index:50;background:#fff;color:var(--ink);padding:10px 14px;border-radius:6px}
.skip:focus{top:12px}
.wrap{width:100%;max-width:1240px;margin:0 auto;padding:0 20px}
.eyebrow{font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.section{padding:72px 0}
.section-soft{background:var(--soft)}
.section-dark{background:var(--deep);color:#e6eef7}
.section-head{margin-bottom:36px;max-width:760px}
.section-head h2{margin-top:14px;font-size:clamp(28px,6.4vw,44px);line-height:1.3;letter-spacing:-.035em;color:var(--ink);font-weight:750}
.section-dark .section-head h2{color:#fff}
.section-head p{margin-top:16px;color:var(--muted);font-size:16px}
.section-dark .section-head p{color:#b8c9db}
.section-dark .eyebrow{color:var(--mint)}

/* 버튼 */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:50px;padding:0 24px;border-radius:8px;font-weight:700;font-size:16px;border:1px solid transparent;transition:background .2s,color .2s,border-color .2s}
.btn-primary{background:var(--navy);color:#fff}
.btn-primary:hover{background:#13365f}
.btn-light{background:#fff;color:var(--navy)}
.btn-light:hover{background:var(--mint)}
.btn-ghost{border-color:#ffffff55;color:#fff}
.btn-ghost:hover{background:#ffffff14}
.btn-outline{border-color:var(--line);color:var(--ink);background:#fff}
.btn-outline:hover{border-color:var(--ink)}
.text-link{color:var(--accent);font-weight:700}
.text-link:hover{text-decoration:underline}

/* 헤더 */
.site-header{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.96);border-bottom:1px solid var(--line);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.nav{display:flex;align-items:center;justify-content:space-between;height:64px}
.brand img{width:138px;height:auto}
.menu-toggle{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:#fff;color:var(--ink);border-radius:999px;padding:8px 16px;font-size:14px;font-weight:600}
.site-nav{display:none;position:absolute;left:0;right:0;top:64px;background:#fff;border-bottom:1px solid var(--line);padding:8px 20px 20px;box-shadow:0 20px 30px rgba(4,22,43,.08)}
.site-nav.open{display:block}
.site-nav a{display:block;padding:14px 0;border-bottom:1px solid var(--line);font-weight:600;color:var(--ink)}
.site-nav a[aria-current="page"]{color:var(--accent)}
.site-nav .nav-cta{margin-top:14px;border:0;text-align:center;background:var(--navy);color:#fff;border-radius:8px}
.site-nav .lang{font-size:13px;color:var(--muted)}

/* 히어로 (메인) */
.hero{position:relative;isolation:isolate;background:var(--deep);color:#fff;overflow:hidden}
.hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:70% center;z-index:-2;opacity:.85}
.hero:after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,#04162bcc 0%,#04162b99 45%,#04162bf2 100%)}
.hero-inner{padding-top:88px;padding-bottom:72px}
.hero .eyebrow{color:var(--mint)}
.hero h1{margin-top:18px;font-size:clamp(34px,8.6vw,64px);line-height:1.24;letter-spacing:-.045em;font-weight:780}
.hero h1 em{font-style:normal;color:var(--mint)}
.hero-lead{margin-top:20px;max-width:620px;font-size:17px;line-height:1.8;color:#c9d8e7}
.hero-actions{margin-top:32px;display:flex;flex-wrap:wrap;gap:12px}
.hero-facts{margin-top:52px;display:grid;grid-template-columns:1fr;gap:1px;background:#ffffff22;border:1px solid #ffffff22;border-radius:var(--radius);overflow:hidden}
.hero-facts div{display:flex;align-items:baseline;gap:12px;padding:18px 20px;background:#04162bcc}
.hero-facts b{font-size:20px;color:var(--mint);letter-spacing:-.02em;white-space:nowrap}
.hero-facts span{color:#dce8f3;font-size:15px}

/* 상세 페이지 상단 */
.page-hero{background:var(--deep);color:#fff;position:relative;isolation:isolate;overflow:hidden}
.page-hero:before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(circle at 85% 20%,#1b8fd040 0%,transparent 45%),radial-gradient(circle at 10% 100%,#0b254599 0%,transparent 55%)}
.page-hero .wrap{padding-top:56px;padding-bottom:60px}
.crumbs{font-size:13px;color:#9fb5cb;display:flex;gap:8px}
.crumbs a:hover{color:#fff}
.page-hero .eyebrow{margin-top:28px;display:block;color:var(--mint)}
.page-hero h1{margin-top:14px;font-size:clamp(32px,8vw,56px);line-height:1.25;letter-spacing:-.045em;font-weight:780}
.page-hero h1 em{font-style:normal;color:var(--mint)}
.page-hero .lead{margin-top:18px;max-width:680px;color:#c9d8e7;font-size:17px}
.page-hero .hero-actions{margin-top:28px}
.chips{margin-top:28px;display:flex;flex-wrap:wrap;gap:8px}
.chips li{padding:7px 14px;border:1px solid #ffffff33;border-radius:999px;font-size:14px;color:#dce8f3}

/* 카드 */
.grid{display:grid;grid-template-columns:1fr;gap:16px}
.card{position:relative;display:flex;flex-direction:column;padding:28px 24px;border:1px solid var(--line);border-radius:var(--radius);background:#fff}
.card .num{font-size:13px;font-weight:700;color:var(--accent);letter-spacing:.08em}
.card h3{margin-top:10px;font-size:23px;line-height:1.35;letter-spacing:-.03em;color:var(--ink);font-weight:750}
.card .en{margin-top:4px;font-size:13px;color:var(--muted);letter-spacing:.04em}
.card p{margin-top:12px;color:var(--muted)}
.card .more{margin-top:auto;padding-top:22px;font-weight:700;color:var(--ink)}
.card-link{transition:border-color .2s,box-shadow .2s,transform .2s}
.card-link:hover{border-color:#9db8d3;box-shadow:0 18px 40px rgba(11,37,69,.1);transform:translateY(-2px)}
.card-link:hover .more{color:var(--accent)}
.badge-new{position:absolute;top:24px;right:22px;padding:3px 10px;border-radius:999px;background:#e6f4fc;color:var(--accent);font-size:12px;font-weight:700}
.list{margin-top:16px;display:grid;gap:8px}
.list li{position:relative;padding-left:18px;color:var(--text);font-size:15px}
.list li:before{content:"";position:absolute;left:2px;top:.72em;width:7px;height:7px;border-radius:2px;background:var(--accent)}
.section-dark .card{background:#0b2545;border-color:#ffffff1f}
.section-dark .card h3{color:#fff}
.section-dark .card p,.section-dark .list li{color:#c3d3e3}

/* 회사 소개 */
.about-grid{display:grid;gap:36px}
.about-copy p+p{margin-top:16px}
.about-copy p{color:var(--text)}
.facts{margin-top:28px;display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.facts div{background:#fff;padding:16px 18px}
.facts dt{font-size:13px;color:var(--muted)}
.facts dd{margin:4px 0 0;font-weight:700;color:var(--ink)}
.message{padding:30px 24px;border-radius:var(--radius);background:var(--soft);border:1px solid var(--line)}
.message h3{font-size:21px;line-height:1.5;color:var(--ink);letter-spacing:-.03em}
.message p{margin-top:14px;color:var(--text);font-size:15.5px}
.message .sign{margin-top:22px;font-weight:700;color:var(--ink)}
.message .sign span{font-weight:500;color:var(--muted);margin-right:6px}

/* 문의 */
.contact-grid{display:grid;gap:14px}
.contact-card{padding:26px 22px;border-radius:var(--radius);background:#0b2545;border:1px solid #ffffff1f;display:flex;flex-direction:column}
.contact-card .eyebrow{color:var(--mint)}
.contact-card h3{margin-top:10px;font-size:21px;color:#fff}
.contact-card p{margin-top:8px;color:#c3d3e3;font-size:15px}
.contact-card .btn{margin-top:20px;align-self:flex-start}
.contact-card .email{margin-top:12px;font-size:19px;font-weight:700;color:#fff;letter-spacing:.01em}
.contact-card .copy-status{margin-top:10px;font-size:13px;color:#9fb5cb;min-height:1.6em}
.light-contact .contact-card{background:#fff;border-color:var(--line)}
.light-contact .contact-card .eyebrow{color:var(--accent)}
.light-contact .contact-card h3,.light-contact .contact-card .email{color:var(--ink)}
.light-contact .contact-card p{color:var(--muted)}
.light-contact .contact-card .copy-status{color:var(--muted)}
.guide{margin-top:28px;padding:26px 22px;border-radius:var(--radius);border:1px dashed #9db8d3;background:#fff}
.guide h3{font-size:19px;color:var(--ink)}
.guide ol{margin-top:14px;display:grid;gap:12px;counter-reset:g}
.guide li{counter-increment:g;padding-left:34px;position:relative;color:var(--text)}
.guide li:before{content:counter(g);position:absolute;left:0;top:1px;width:24px;height:24px;border-radius:50%;background:var(--navy);color:#fff;font-size:13px;font-weight:700;display:grid;place-items:center}
.selected-service{margin-top:14px;padding:12px 16px;border-radius:8px;background:#e6f4fc;color:var(--ink);font-weight:700}

/* 단계 */
.steps{display:grid;gap:12px;counter-reset:s}
.steps li{counter-increment:s;padding:22px 22px 22px 70px;position:relative;border:1px solid var(--line);border-radius:var(--radius);background:#fff}
.steps li:before{content:"0" counter(s);position:absolute;left:22px;top:22px;font-weight:800;color:var(--accent);font-size:18px}
.steps h3{font-size:18px;color:var(--ink)}
.steps p{margin-top:4px;color:var(--muted);font-size:15px}

/* /it 서비스 */
.product{display:grid;gap:24px;padding:28px 22px;border:1px solid var(--line);border-radius:var(--radius);background:#fff}
.product+.product{margin-top:18px}
.product-top{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.status{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:999px;font-size:13px;font-weight:700}
.status:before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.status-live{background:#e3f7ee;color:#0f7a52}
.status-soon{background:#f1f3f6;color:#5f7389}
.product h3{font-size:28px;letter-spacing:-.03em;color:var(--ink)}
.product .for{margin-top:6px;font-weight:700;color:var(--accent)}
.product p{margin-top:12px;color:var(--text)}
.product .note{font-size:14px;color:var(--muted)}
.product .actions{margin-top:22px;display:flex;flex-wrap:wrap;gap:10px}
.shot{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--soft)}
.shot figcaption{padding:10px 14px;font-size:13px;color:var(--muted);border-top:1px solid var(--line);background:#fff}
.shot-brand{display:grid;place-items:center;padding:48px 20px;background:linear-gradient(140deg,#0c2a55,#081d3e)}
.shot-brand img{width:min(300px,80%)}

/* /marketing */
.onestop{display:grid;gap:12px;margin-top:28px}
.onestop div{padding:18px 20px;border-radius:12px;background:#ffffff0f;border:1px solid #ffffff1f}
.onestop b{display:block;color:#fff;font-size:17px}
.onestop span{color:#b8c9db;font-size:15px}
.diff{display:grid;gap:16px}
.diff .card{border-left:4px solid var(--accent)}
.usecases{display:grid;gap:14px}
.usecase{padding:24px 22px;border:1px solid var(--line);border-radius:var(--radius);background:#fff}
.usecase h3{font-size:19px;color:var(--ink);display:flex;align-items:center;gap:10px}
.usecase h3 small{font-size:12px;font-weight:700;color:var(--accent);letter-spacing:.1em}
.usecase ul{margin-top:12px;display:flex;flex-wrap:wrap;gap:8px}
.usecase li{padding:6px 12px;border-radius:999px;background:var(--soft);border:1px solid var(--line);font-size:14px;color:var(--text)}
.pricing{display:grid;gap:16px}
.price{display:flex;flex-direction:column;padding:28px 24px;border:1px solid var(--line);border-radius:var(--radius);background:#fff}
.price.featured{border:2px solid var(--navy)}
.price h3{font-size:20px;color:var(--ink)}
.price .amount{margin-top:12px;font-size:36px;font-weight:800;letter-spacing:-.03em;color:var(--ink);line-height:1.2}
.price .amount small{font-size:16px;font-weight:600;color:var(--muted);margin-left:4px}
.price .vat{margin-top:4px;font-size:13px;color:var(--muted)}
.price .list{margin-top:18px}
.price .btn{margin-top:24px}
.quote-row{margin-top:16px;display:grid;gap:10px}
.quote-row div{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px 20px;border:1px solid var(--line);border-radius:12px;background:#fff}
.quote-row b{color:var(--ink)}
.quote-row span{color:var(--accent);font-weight:700;white-space:nowrap}
.pledge{margin-top:28px;padding:22px 22px;border-radius:12px;background:var(--navy);color:#fff;font-weight:600;line-height:1.7}
.fine{margin-top:14px;font-size:13px;color:var(--muted)}
.principle{margin-top:16px;padding:14px 16px;border-radius:10px;background:#fff7e8;border:1px solid #f1d9a8;color:#6b4b10;font-size:14.5px}
.principle b{color:#5a3d07}

/* CTA 띠 */
.cta-band{background:var(--navy);color:#fff}
.cta-band .wrap{padding-top:56px;padding-bottom:56px;display:grid;gap:22px}
.cta-band h2{font-size:clamp(26px,6vw,38px);line-height:1.35;letter-spacing:-.035em}
.cta-band p{color:#c3d3e3}
.cta-band .hero-actions{margin-top:0}

/* 푸터 */
.site-footer{background:var(--deep);color:#b8c9db;font-size:14px}
.site-footer .wrap{padding-top:48px;padding-bottom:40px}
.footer-top{display:grid;gap:20px;padding-bottom:28px;border-bottom:1px solid #ffffff1f}
.footer-brand{font-size:20px;font-weight:800;letter-spacing:.08em;color:#fff}
.footer-links{display:flex;flex-wrap:wrap;gap:10px 20px}
.footer-links a:hover{color:#fff}
.company{margin-top:24px;line-height:1.9}
.company strong{color:#fff}
.copy{margin-top:16px;font-size:13px;color:#7f97ad}

/* 태블릿 이상 */
@media(min-width:720px){
  .wrap{padding:0 32px}
  .section{padding:96px 0}
  .grid-2{grid-template-columns:1fr 1fr}
  .grid-3{grid-template-columns:1fr 1fr}
  .hero-facts{grid-template-columns:repeat(3,1fr)}
  .contact-grid{grid-template-columns:repeat(3,1fr)}
  .usecases{grid-template-columns:1fr 1fr}
  .pricing{grid-template-columns:repeat(3,1fr)}
  .onestop{grid-template-columns:1fr 1fr}
  .diff{grid-template-columns:1fr 1fr}
  .steps{grid-template-columns:1fr 1fr}
  .quote-row{grid-template-columns:repeat(3,1fr)}
  .footer-top{grid-template-columns:1fr auto;align-items:center}
}
@media(min-width:1000px){
  .nav{height:76px}
  html{scroll-padding-top:84px}
  .brand img{width:160px}
  .menu-toggle{display:none}
  .site-nav{display:flex!important;position:static;align-items:center;gap:30px;padding:0;border:0;box-shadow:none;background:transparent}
  .site-nav a{padding:0;border:0;font-size:15px}
  .site-nav a:hover{color:var(--accent)}
  .site-nav .nav-cta{margin:0;padding:10px 20px}
  .site-nav .nav-cta:hover{color:#fff;background:#13365f}
  .hero-inner{padding-top:132px;padding-bottom:96px}
  .page-hero .wrap{padding-top:72px;padding-bottom:84px}
  .grid-3{grid-template-columns:repeat(3,1fr)}
  .about-grid{grid-template-columns:1.1fr .9fr;gap:56px;align-items:start}
  .product{grid-template-columns:1fr 1.1fr;align-items:center;padding:40px}
  .steps{grid-template-columns:repeat(4,1fr)}
  .steps li{padding:26px 22px}
  .steps li:before{position:static;display:block;margin-bottom:10px}
  .usecases{grid-template-columns:repeat(3,1fr)}
  .cta-band .wrap{grid-template-columns:1fr auto;align-items:center}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}

/* 카카오톡 상담 버튼 (모든 개편 페이지 우측 하단 고정) */
.kakao-float{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:40;display:inline-flex;align-items:center;gap:8px;padding:12px 18px 12px 14px;border-radius:999px;background:#fee500;color:#191919;font-size:15px;font-weight:700;box-shadow:0 10px 24px rgba(4,22,43,.22);transition:transform .2s,box-shadow .2s}
.kakao-float:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(4,22,43,.28)}
.kakao-float:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.site-footer .wrap{padding-bottom:96px}
@media(min-width:1000px){.kakao-float{right:28px;bottom:28px;padding:14px 22px 14px 18px}}

/* 메인 히어로 배경 영상 (글자 없는 10초 반복) */
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:70% center;z-index:-2;opacity:0;transition:opacity .8s}
.hero-video.ready{opacity:.85}
.hero-motion{position:absolute;right:16px;top:16px;z-index:2;padding:7px 14px;border:1px solid #ffffff4d;border-radius:999px;background:#04162b99;color:#dce8f3;font-size:12px}
.hero-motion:hover{background:#04162bdd}
@media(min-width:1000px){.hero-motion{right:32px;top:24px}}

/* /marketing 제작 예시 영상 */
.film-example{margin:0 0 32px}
.film-frame{position:relative;overflow:hidden;aspect-ratio:16/9;border-radius:var(--radius);background:var(--deep);box-shadow:0 24px 60px rgba(11,37,69,.16)}
.brand-film{display:block;width:100%;height:100%;object-fit:cover}
.film-toggle{position:absolute;right:14px;bottom:14px;padding:8px 14px;border:1px solid #ffffff66;border-radius:999px;background:#04162b9e;color:#fff;font-size:12px}
.film-toggle:hover{background:#04162bdd}
.film-example figcaption{margin-top:12px;font-size:14px;color:var(--muted)}
.film-example figcaption b{color:var(--accent);margin-right:6px}
.about-film{margin:48px 0 0}

/* 문의 카드: 세 카드의 버튼을 같은 높이(카드 하단)에 정렬 */
.contact-card{position:relative;padding-bottom:52px}
.contact-card>p:not(.eyebrow):not(.copy-status){margin-bottom:22px}
.contact-card .btn{margin-top:auto;align-self:flex-start}
.contact-card .copy-status{position:absolute;left:22px;right:22px;bottom:16px;margin:0;min-height:0;font-size:12.5px}
@media(min-width:720px){.contact-card .copy-status{left:24px;right:24px}}

/* /it 서비스 소개: 같은 비율(4:3) 이미지, 글·이미지 좌우 번갈아 배치 */
.product{border:0;background:transparent;padding:0;gap:28px}
.product+.product{margin-top:64px;padding-top:64px;border-top:1px solid var(--line)}
.product .actions{margin-top:26px}
.stage{margin:0}
.stage img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:20px;box-shadow:0 30px 70px rgba(4,22,43,.22)}
.stage figcaption{margin-top:12px;font-size:13px;color:var(--muted)}
@media(min-width:1000px){
  .product{grid-template-columns:1fr 1fr;gap:72px;align-items:center}
  .product+.product{margin-top:96px;padding-top:96px}
  .product:nth-of-type(even)>figure{order:-1}
}
.contact-card .email{margin-bottom:16px}

/* FAQ */
.faq{display:grid;gap:10px;max-width:900px}
.faq details{border:1px solid var(--line);border-radius:12px;background:#fff;padding:0 22px}
.faq summary{list-style:none;cursor:pointer;padding:20px 30px 20px 0;position:relative;font-weight:700;color:var(--ink);font-size:17px}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:"+";position:absolute;right:0;top:50%;transform:translateY(-50%);font-size:22px;font-weight:500;color:var(--accent)}
.faq details[open] summary:after{content:"−"}
.faq details p{padding:0 0 20px;color:var(--text);font-size:15.5px;line-height:1.8}