:root{
  --yellow:#FFD21F; --ink:#15130F; --blue:#4DB6EA; --blue-d:#1479B0;
  --pale:#E3F3FC; --cream:#FFF4B8; --gray:#4A4740; --white:#FFFFFF;
  --display:'Jua','Gothic A1',sans-serif;
  --body:'Gothic A1','Noto Sans KR',system-ui,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:16px}
body{margin:0;background:var(--white);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.7;-webkit-text-size-adjust:100%;word-break:keep-all;overflow-wrap:break-word}
a{color:inherit;text-decoration:none}
img{max-width:100%}
button{font-family:inherit}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--blue-d);outline-offset:3px}

.wrap{max-width:1200px;margin:0 auto;padding-left:clamp(20px,5vw,64px);padding-right:clamp(20px,5vw,64px)}
.section{padding-top:clamp(48px,7vw,96px);padding-bottom:clamp(48px,7vw,96px)}
.stack{display:flex;flex-direction:column}
.eyebrow{font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.eyebrow.blue{color:var(--blue-d)}
.h-display{font-family:var(--display);font-weight:400;letter-spacing:0;margin:0;text-wrap:balance}
h2.h-display{font-size:clamp(30px,4vw,48px);line-height:1.2}
.bar{width:64px;height:8px;background:var(--yellow)}
.bar.dark{background:var(--ink)}
.head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:20px 48px;margin-bottom:48px}
.head .titles{display:flex;flex-direction:column;gap:10px}
.head p{margin:0;max-width:28em;color:var(--gray)}

/* 상단 메뉴 */
.site-header{background:var(--white);border-bottom:2px solid var(--ink)}
.site-header .wrap{padding-top:14px;padding-bottom:14px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 32px}
.logo img{display:block;height:48px;width:auto}
.nav{display:flex;flex-wrap:wrap;align-items:center;gap:0 4px;font-size:15px;font-weight:500}
.nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 14px}
.nav a:hover{background:var(--yellow)}
.nav a[aria-current="page"]{background:var(--yellow);font-weight:700}

/* 버튼 */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 30px;border:2px solid var(--ink);background:transparent;color:var(--ink);font-size:16px;font-weight:700;cursor:pointer}
.btn-dark{background:var(--ink);color:var(--yellow)}
.btn-dark:hover{background:#3A3528;border-color:#3A3528}
.btn-line:hover{background:var(--ink);color:var(--yellow)}
.nav .btn-dark{min-height:44px;margin-left:8px;padding:0 22px;font-size:15px}
.nav .btn-dark:hover{background:#3A3528}

/* 첫 화면 */
.hero{background:var(--yellow)}
.hero .wrap{padding-top:clamp(40px,6vw,88px);padding-bottom:clamp(40px,6vw,88px);display:flex;flex-direction:column;gap:28px}
.badge{display:inline-flex;align-self:flex-start;align-items:center;gap:10px;padding:6px 14px;border:2px solid var(--ink);font-size:14px;font-weight:700}
.hero h1{font-size:clamp(32px,6vw,80px);line-height:1.15}
.hero p{margin:0;max-width:30em;font-size:18px;line-height:1.75}
.hero .tags{font-size:13px;font-weight:700;letter-spacing:.14em}
.hero .actions{display:flex;flex-wrap:wrap;gap:12px}

/* 대상 */
.targets{background:var(--ink);color:var(--white)}
.targets .wrap{padding-top:28px;padding-bottom:28px;display:flex;flex-wrap:wrap;align-items:center;gap:16px 32px}
.targets .eyebrow{color:var(--yellow)}
.targets .chips{display:flex;flex-wrap:wrap;gap:10px}
.targets .chips span{padding:6px 18px;border:1px solid var(--yellow);font-weight:500}
.targets .note{font-size:15px;color:#D9D4C4}

/* 카드 */
.cards{display:flex;flex-wrap:wrap;gap:20px}
.card{flex:1 1 320px;min-width:0;border:2px solid var(--ink);padding:28px;display:flex;flex-direction:column;gap:10px}
.card .en{font-size:12px;font-weight:700;letter-spacing:.14em;color:var(--blue-d)}
.card h3{margin:0;font-family:var(--display);font-weight:400;font-size:24px;line-height:1.3}
.card p{margin:0;color:var(--gray)}
.card.accent{background:var(--yellow)}
.card.accent .en{color:var(--ink)}
.card.accent p{color:var(--ink)}

/* 워크플로우 */
.band-blue{background:var(--pale);border-top:2px solid var(--ink);border-bottom:2px solid var(--ink)}
.steps{display:flex;flex-wrap:wrap;gap:20px}
.step{flex:1 1 130px;min-width:0;background:var(--white);border:2px solid var(--ink);padding:20px;display:flex;flex-direction:column;gap:8px}
.step .no{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;background:var(--yellow);border:2px solid var(--ink);font-weight:800;font-size:15px}
.step h3{margin:0;font-family:var(--display);font-weight:400;font-size:19px;line-height:1.35}
.step p{margin:0;font-size:14px;line-height:1.6;color:var(--gray)}

/* 포트폴리오 */
.works{display:flex;flex-wrap:wrap;gap:32px 24px}
.work{flex:1 1 320px;min-width:0;display:flex;flex-direction:column;gap:12px}
.thumb{position:relative;width:100%;aspect-ratio:16/9;background:var(--ink);display:flex;align-items:center;justify-content:center}
.work:hover .thumb{background:#262116}
.thumb .cap{position:absolute;left:14px;bottom:10px;font-size:12px;font-weight:700;letter-spacing:.1em;color:var(--yellow)}
.work .t{font-size:18px;font-weight:700;line-height:1.4}
.work .k{font-size:14px;color:var(--gray)}

/* 거래처 */
.partners .wrap{padding-top:clamp(48px,6vw,80px);padding-bottom:clamp(48px,6vw,80px)}
.marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.marquee-track{list-style:none;margin:0;padding:0;display:flex;gap:16px;width:max-content;animation:marquee 45s linear infinite}
.marquee:hover .marquee-track,.marquee:focus-within .marquee-track{animation-play-state:paused}
.marquee-track li{flex:0 0 200px;display:flex;align-items:center;justify-content:center;height:104px;padding:16px 20px;background:var(--white);border:2px solid var(--ink)}
.marquee-track img{display:block;max-width:100%;max-height:56px;width:auto;height:auto;object-fit:contain}
.marquee-track li:has(img[src*="edu-office"]) img{max-height:72px}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(calc(-50% - 8px))}}

/* 서브 페이지 */
.page-hero{background:var(--yellow)}
.page-hero .wrap{padding-top:clamp(48px,7vw,104px);padding-bottom:clamp(48px,7vw,104px);display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:20px 48px}
.page-hero h1{font-size:clamp(38px,6vw,76px);line-height:1.2}
.page-hero p{margin:0;max-width:28em;font-size:18px}
.year-row{display:flex;flex-wrap:wrap;gap:12px 40px;padding:32px 0;border-top:2px solid var(--ink)}
.year-row .y{flex:0 0 140px;font-weight:800;font-size:40px;line-height:1.1}
.year-row ul{flex:1 1 360px;min-width:0;margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px}
.year-row li{display:flex;align-items:flex-start;gap:10px;font-size:17px}
.year-row li::before{content:"";flex:0 0 auto;width:8px;height:8px;margin-top:11px;background:var(--ink);border-radius:50%}
.tag{flex:0 0 auto;padding:0 8px;background:var(--ink);color:var(--yellow);font-size:12px;font-weight:700;line-height:22px;margin-top:3px;font-style:normal}
.end-line{border-top:2px solid var(--ink)}
.msg{display:flex;flex-wrap:wrap;gap:48px 72px}
.msg .text{flex:2 1 460px;min-width:0;display:flex;flex-direction:column;gap:26px;font-size:19px;line-height:1.9}
.msg .text p{margin:0}
.sign{display:flex;align-items:center;gap:16px;margin-top:12px}
.sign .bar{width:48px}
.sign .n{font-family:var(--display);font-size:24px}
.sign .sig{display:block;height:64px;width:auto;margin-left:4px}
.ceo-photo{display:block;width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;object-position:50% 20%}
.side{flex:1 1 300px;min-width:0;align-self:flex-start;background:var(--ink);color:var(--white);padding:32px;display:flex;flex-direction:column;gap:24px}
.frame{border:12px solid var(--blue);padding:22px;display:flex;flex-direction:column;gap:18px}
.frame .icons{display:flex;flex-wrap:wrap;align-items:center;gap:18px}
.frame p{margin:0;font-size:15px;font-weight:500}
.side dl{margin:0;display:flex;flex-direction:column;gap:14px}
.side dt{font-size:12px;font-weight:700;letter-spacing:.14em;color:var(--yellow)}
.side dd{margin:0;font-size:18px;font-weight:700}
.cta{background:var(--pale);border-top:2px solid var(--ink)}
.cta .wrap{padding-top:clamp(40px,6vw,72px);padding-bottom:clamp(40px,6vw,72px);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px 48px}
.cta .big{font-family:var(--display);font-size:clamp(26px,3.4vw,38px);line-height:1.3}
.cta .sub{color:var(--gray)}

/* 바닥글 */
.site-footer{background:var(--ink);color:#D9D4C4;font-size:14px}
.site-footer .wrap{padding-top:40px;padding-bottom:32px;display:flex;flex-direction:column;gap:28px}
.site-footer .top{display:flex;flex-direction:column;align-items:flex-start;gap:22px}
.site-footer .f-logo{display:inline-block;line-height:0}
.site-footer .f-logo img{display:block;height:56px;width:auto}
.site-footer dl{margin:0;display:flex;flex-direction:column;gap:6px;min-width:0}
.site-footer dl div{display:flex;flex-wrap:wrap;gap:0 12px}
.site-footer dt{font-weight:700;color:var(--white)}
.site-footer dt::after{content:"|";margin-left:12px;font-weight:400;color:var(--yellow)}
.site-footer dd{margin:0;min-width:0}
.site-footer dd + dt{margin-left:28px}
.site-footer .motto{padding-top:20px;border-top:1px solid rgba(255,255,255,.25);font-size:12px;font-weight:600;letter-spacing:.12em;color:var(--yellow)}

/* 상담 팝업 */
.modal-backdrop{position:fixed;inset:0;z-index:100;background:rgba(21,19,15,.72);display:none;overflow:auto;padding:24px 16px}
.modal-backdrop.open{display:flex}
.modal{position:relative;width:100%;max-width:1000px;margin:auto;background:var(--yellow);border:2px solid var(--ink)}
.modal-inner{padding:64px clamp(20px,4vw,48px) clamp(28px,4vw,48px);display:flex;flex-wrap:wrap;gap:36px 48px}
.modal-close{position:absolute;top:12px;right:12px;width:44px;height:44px;padding:0;border:2px solid var(--ink);background:var(--white);cursor:pointer;display:flex;align-items:center;justify-content:center}
.modal .info{flex:1 1 300px;min-width:0;display:flex;flex-direction:column;gap:26px}
.modal .info h2{margin:0}
.modal .info p{margin:0;max-width:26em}
.modal .info dl{margin:0;display:flex;flex-direction:column;gap:18px}
.modal .info dt{font-size:12px;font-weight:700;letter-spacing:.14em}
.modal .info dd{margin:0;font-size:18px;font-weight:500}
.modal form{flex:1 1 380px;min-width:0;background:var(--white);border:2px solid var(--ink);padding:clamp(20px,3vw,32px);display:flex;flex-direction:column;gap:18px}
.row{display:flex;flex-wrap:wrap;gap:18px}
.field{flex:1 1 180px;min-width:0;display:flex;flex-direction:column;gap:8px}
.field label{font-size:14px;font-weight:700}
.field input,.field select,.field textarea{width:100%;min-height:48px;padding:0 14px;border:2px solid var(--ink);background:var(--white);color:var(--ink);font-family:inherit;font-size:16px}
.field textarea{padding:12px 14px;line-height:1.6;resize:vertical}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-msg{margin:0;font-size:15px;font-weight:700;min-height:24px}
.form-msg.ok{color:#1B6B2F}
.form-msg.err{color:#B3261E}
.modal button[type="submit"]:disabled{opacity:.6;cursor:wait}

@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.marquee{overflow-x:auto;-webkit-mask-image:none;mask-image:none}.marquee-track{animation:none}.marquee-track li.dup{display:none}}

/* ---- 중앙 정렬 메뉴 + 버튼 액션 ---- */
.nav a,.btn,.card,.work .thumb,.targets .chips span,.f-logo img{transition:transform .18s ease,background-color .18s ease,color .18s ease,box-shadow .18s ease,border-color .18s ease}
.nav a:hover{transform:translateY(-2px)}
.nav a:active,.btn:active{transform:translateY(1px) scale(.97)}
.btn:hover{transform:translateY(-2px);box-shadow:0 4px 0 var(--ink)}
.btn:active{box-shadow:none}
.nav .btn-dark:hover{box-shadow:0 3px 0 var(--yellow)}
.card:hover{transform:translateY(-4px);box-shadow:6px 6px 0 var(--ink)}
.work:hover .thumb{transform:translateY(-3px)}
.targets .chips span:hover{background:var(--yellow);color:var(--ink)}
.btn:focus-visible,.nav a:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
@media (prefers-reduced-motion:reduce){
  .nav a,.btn,.card,.work .thumb{transition:none}
  .nav a:hover,.btn:hover,.card:hover,.work:hover .thumb{transform:none}
}

/* ---- 메뉴 3개 중앙, 상담 · 문의는 오른쪽 ---- */
.site-header .wrap{display:grid;grid-template-columns:1fr auto 1fr;align-items:center}
.site-header .nav{display:contents}
.site-header .links{grid-column:2;display:flex;align-items:center;gap:0 4px}
.site-header .nav .btn-dark{grid-column:3;justify-self:end;margin-left:0}
@media (max-width:820px){
  .site-header .wrap{grid-template-columns:1fr;justify-items:center;gap:8px}
  .site-header .links,.site-header .nav .btn-dark{grid-column:1;justify-self:center}
}

/* ---- 포트폴리오 카드 ---- */
.work .thumb{overflow:hidden;background:#EDEAE0}
.work .thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .35s ease}
.work:hover .thumb img{transform:scale(1.04)}
.work .info{display:flex;flex-direction:column;gap:6px}
.work .t{margin:0;font-family:var(--body);font-size:19px;font-weight:800;letter-spacing:-.01em;line-height:1.4}
.work .c{margin:0;font-size:15px;line-height:1.6;color:var(--gray)}
.work .k{display:flex;align-items:center;gap:8px;margin-top:4px;font-size:13px}
.work .k .cat{padding:3px 12px;background:var(--ink);color:var(--yellow);font-weight:700}
.work .k .typ{color:var(--gray);font-weight:500}
@media (prefers-reduced-motion:reduce){.work .thumb img{transition:none}.work:hover .thumb img{transform:none}}

/* ---- 대표 서명 / 파란 프레임 문구 ---- */
.sign{margin-top:clamp(48px,7vw,88px);gap:20px}
.sign .n{font-size:clamp(26px,3vw,32px)}
.sign .sig{height:clamp(88px,10vw,116px);margin-left:6px}
.frame p{font-size:clamp(16px,1.4vw,18px);font-weight:700;line-height:1.5}

/* ---- 푸터 오른쪽 자회사 로고 ---- */
.site-footer .top{position:relative}
.site-footer .f-sub{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding-top:2px;transition:opacity .18s ease,transform .18s ease}
.site-footer .f-sub span{font-size:12px;font-weight:700;letter-spacing:.14em;color:var(--yellow)}
.site-footer .f-sub img{display:block;height:44px;width:auto}
.site-footer .f-sub:hover{opacity:.8;transform:translateY(-2px)}
@media (min-width:821px){
  .site-footer .top{flex-direction:row;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:22px 48px}
  .site-footer .f-sub{align-items:flex-end;margin-left:auto}
  .site-footer .top > .f-logo{flex:0 0 100%}
}

/* ---- 자료실 ---- */
.doc{display:flex;flex-wrap:wrap;align-items:center;gap:32px 56px}
.doc-cover{flex:0 0 min(300px,100%);display:block;border:2px solid var(--ink);box-shadow:8px 8px 0 var(--ink);transition:transform .18s ease,box-shadow .18s ease}
.doc-cover:hover{transform:translate(-2px,-2px);box-shadow:12px 12px 0 var(--ink)}
.doc-cover img{display:block;width:100%;height:auto}
.doc-info{flex:1 1 320px;min-width:0;display:flex;flex-direction:column;gap:14px}
.doc-title{margin:0;font-family:var(--body);font-weight:800;font-size:clamp(26px,3.4vw,38px);line-height:1.3}
.doc-desc{margin:0;color:var(--gray);font-size:17px}
.doc-meta{display:flex;gap:8px;font-size:13px;font-weight:700}
.doc-meta span{padding:3px 12px;background:var(--ink);color:var(--yellow)}
.doc-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:10px}
@media (prefers-reduced-motion:reduce){.doc-cover{transition:none}.doc-cover:hover{transform:none}}

/* ---- 모바일 메뉴 줄바꿈 방지 ---- */
.nav a{white-space:nowrap}
@media (max-width:480px){
  .site-header .links a{padding:0 9px;font-size:14px}
}

/* ---- 서브페이지 제목 아래에 부연설명 ---- */
.page-hero .wrap{flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:20px}
.page-hero .wrap > p{margin:0;max-width:640px}