/* 더노드 회사 소개 페이지 (2026-10-13 새 디자인) — 목업 Downloads/회사소개_목업_20261013 을 옮김 */
:root{
  --ink:#111418; --ink2:#3a3f47; --mut:#5b626c; --line:#d9dce1; --line2:#ebedf0;
  --bg2:#f4f5f7; --navy:#0e1f38; --accent:#e4572e; --wrap:1200px;
}
*{box-sizing:border-box; margin:0; padding:0}
html{scroll-behavior:smooth; scroll-padding-top:64px}
body{font-family:'Pretendard',system-ui,sans-serif; color:var(--ink); background:#fff; font-size:16px; line-height:1.7; word-break:keep-all; -webkit-font-smoothing:antialiased}
a{color:inherit; text-decoration:none}
img{display:block; max-width:100%}
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 40px}

/* 머리 */
.top{position:fixed; top:0; left:0; right:0; z-index:10; height:64px; background:#fff; border-bottom:1px solid var(--line2)}
.top .wrap{height:100%; display:flex; align-items:center; justify-content:space-between}
.logo{font-size:18px; font-weight:800; letter-spacing:.14em}
.logo b{color:var(--accent)}
.gnb{display:flex; align-items:center; gap:36px; font-size:15px; font-weight:600; color:var(--ink2)}
.gnb a:hover{color:var(--ink)}
.gnb .lang{color:var(--mut); font-weight:500}
.gnb .cta{padding:9px 18px; border:1px solid var(--ink); color:var(--ink)}
.gnb .cta:hover{background:var(--ink); color:#fff}
.menu-btn{display:none; width:40px; height:40px; background:none; border:0; cursor:pointer}
.menu-btn i{display:block; width:22px; height:2px; margin:5px auto; background:var(--ink)}

/* 첫 화면 */
.hero{padding:150px 0 96px; border-bottom:1px solid var(--line2)}
.hero .wrap{display:grid; grid-template-columns:1.05fr 1fr; gap:64px; align-items:center}
.eyebrow{display:flex; align-items:center; gap:12px; font-size:13px; font-weight:700; letter-spacing:.16em; color:var(--accent)}
.eyebrow::before{content:''; width:28px; height:2px; background:var(--accent)}
.hero h1{margin-top:22px; font-size:48px; line-height:1.28; font-weight:800; letter-spacing:-0.02em}
.hero p{margin-top:24px; font-size:17px; color:var(--ink2); max-width:520px}
.btns{margin-top:40px; display:flex; gap:12px; flex-wrap:wrap}
.btn{display:inline-flex; align-items:center; justify-content:center; height:52px; padding:0 28px; font-size:16px; font-weight:700; border:1px solid var(--ink)}
.btn.fill{background:var(--ink); color:#fff}
.btn.fill:hover{background:var(--navy); border-color:var(--navy)}
.btn.line:hover{background:var(--bg2)}
.hero-shot{position:relative}
.hero-shot .pc{border:1px solid var(--line)}
.hero-shot .mo{position:absolute; right:-12px; bottom:-40px; width:26%; border:1px solid var(--line); background:#fff}
.who{margin-top:56px; display:flex; flex-wrap:wrap; gap:8px 28px; padding-top:16px; border-top:1px solid var(--line2)}
.who span{font-size:14px; font-weight:600; color:var(--mut)}   /* 구분선 없이 간격만 — 여러 줄로 넘어가도 줄 밖에 선이 남지 않게 */

/* 구역 공통 */
.sec{padding:112px 0}
.sec.alt{background:var(--bg2)}
.sec-head{display:grid; grid-template-columns:240px 1fr; gap:40px; margin-bottom:56px}
.sec-no{font-size:13px; font-weight:700; letter-spacing:.16em; color:var(--accent); padding-top:10px}
.sec-no em{display:block; font-style:normal; margin-top:6px; color:var(--ink); letter-spacing:0; font-size:15px}
.sec h2{font-size:32px; line-height:1.4; font-weight:800; letter-spacing:-0.02em}

/* 회사소개 */
.about-body{display:grid; grid-template-columns:240px 1fr; gap:40px}
.about-body .txt{max-width:760px}
.about-body .txt p{font-size:17px; color:var(--ink2)}
.about-body .txt p + p{margin-top:20px}
.about-body .txt strong{color:var(--ink)}

/* 사업분야 */
.biz{display:grid; grid-template-columns:repeat(4,1fr); border-top:2px solid var(--ink)}
.biz li{list-style:none; padding:32px 28px 40px 0; border-right:1px solid var(--line)}
.biz li + li{padding-left:28px}
.biz li:last-child{border-right:0}
.biz .n{font-size:14px; font-weight:700; color:var(--accent)}
.biz h3{margin-top:18px; font-size:20px; font-weight:800}
.biz p{margin-top:14px; font-size:15px; color:var(--ink2)}

/* 구축사례 */
.works{display:grid; grid-template-columns:repeat(3,1fr); gap:28px}
.work figure{border:1px solid var(--line); background:#fff}
.work figure img{width:100%; aspect-ratio:16/10; object-fit:cover; object-position:top}
.work figcaption{padding:16px 18px; border-top:1px solid var(--line); font-size:15px; font-weight:700}
.work figcaption small{display:block; margin-top:2px; font-size:13px; font-weight:500; color:var(--mut)}

/* 구축사례 — 실제 서비스 화면을 기울여 흘려 보냄(기존 회사 소개 페이지 움직임보다 1.5배 빠르게) */
.screens{position:relative; overflow:hidden; background:#111418; height:560px; display:flex; align-items:center}
.screens-stage{position:absolute; left:-25%; right:-25%; top:50%; transform:translateY(-50%) perspective(1800px) rotateX(16deg) rotateZ(-7deg); display:flex; flex-direction:column; gap:22px}
.screens-track{display:flex; width:max-content; animation:screensFlow 73s linear infinite}   /* 그림 묶음 4번 이어 붙임 — 한 묶음(25%)씩 끊김 없이 이어 돔 */
.screens-row-2 .screens-track{animation-direction:reverse; animation-duration:87s}
.screens-row-3 .screens-track{animation-duration:100s}
.screens-track img{height:250px; width:auto; margin-right:22px; border:1px solid rgba(255,255,255,.18); filter:saturate(.75) brightness(.55)}
.screens::after{content:''; position:absolute; inset:0; background:linear-gradient(to bottom,#111418 0%,rgba(17,20,24,0) 22%,rgba(17,20,24,0) 78%,#111418 100%),linear-gradient(to right,#111418 0%,rgba(17,20,24,0) 18%,rgba(17,20,24,0) 82%,#111418 100%); pointer-events:none}
.screens-copy{position:relative; z-index:2; width:100%; text-align:center; color:#fff}
.screens-copy .sec-no{padding-top:0}
.screens-copy .sec-no em{color:#fff}
.screens-copy h2{margin-top:18px; font-size:36px; line-height:1.4; font-weight:800; letter-spacing:-0.02em; text-shadow:0 2px 18px #000}
.screens-who{margin-top:18px; font-size:15px; font-weight:600; letter-spacing:.12em; color:#d5dae2; text-shadow:0 2px 12px #000}
@keyframes screensFlow{from{transform:translateX(0)} to{transform:translateX(-25%)}}
@media (prefers-reduced-motion:reduce){.screens-track{animation:none}}
@media (max-width:800px){
  .screens{height:360px}
  .screens-track img{height:150px}
  .screens-stage{gap:14px}
  .screens-track img{margin-right:14px}
  .screens-copy h2{margin-top:12px; font-size:17.6px}
  .screens-who{margin-top:12px; font-size:10.4px; letter-spacing:.06em}
}

/* 이름 풀이 */
.name{display:grid; grid-template-columns:240px 1fr; gap:40px}
.name-mark{font-size:15px; color:var(--mut)}
.name-mark b{display:block; font-size:44px; line-height:1.1; color:var(--ink); font-weight:800; letter-spacing:-0.01em}
.name-mark i{display:block; margin-top:10px; font-style:normal}
.name-cols{display:grid; grid-template-columns:repeat(3,1fr); border-top:2px solid var(--ink)}
.name-cols div{padding:28px 28px 0 0; border-right:1px solid var(--line)}
.name-cols div + div{padding-left:28px}
.name-cols div:last-child{border-right:0}
.name-cols h4{font-size:14px; font-weight:700; color:var(--accent)}
.name-cols p{margin-top:12px; font-size:15px; color:var(--ink2)}

/* 시작 띠 */
.band{background:var(--navy); color:#fff; padding:80px 0}
.band .wrap{display:flex; align-items:center; justify-content:space-between; gap:40px}
.band h2{font-size:28px; font-weight:800; line-height:1.4}
.band p{margin-top:10px; color:#c5ccd8; font-size:16px}
.band .btn{border-color:#fff; color:#fff; flex-shrink:0}
.band .btn:hover{background:#fff; color:var(--navy)}

/* 고객문의 */
.contact{display:grid; grid-template-columns:240px 1fr; gap:40px}
.contact-grid{display:grid; grid-template-columns:1fr 1.4fr; gap:56px}
.info dl{border-top:2px solid var(--ink)}
.info dl div{display:grid; grid-template-columns:72px 1fr; gap:12px; padding:18px 0; border-bottom:1px solid var(--line)}
.info dt{font-size:14px; font-weight:700; color:var(--mut)}
.info dd{font-size:16px; font-weight:600}
.info p{margin-top:24px; font-size:15px; color:var(--ink2)}
form .row{display:grid; grid-template-columns:1fr 1fr; gap:16px}
form label{display:block; margin-bottom:16px}
form label span{display:block; margin-bottom:8px; font-size:14px; font-weight:700}
form input, form textarea{width:100%; height:50px; padding:0 16px; font:inherit; font-size:16px; color:var(--ink); background:#fff; border:1px solid var(--line); border-radius:0; outline:none}
form textarea{height:160px; padding:14px 16px; resize:vertical}
form input:focus, form textarea:focus{border-color:var(--ink)}
form .btn{width:100%; margin-top:8px; cursor:pointer}

/* 바닥 */
.foot{background:#0b0d10; color:#9aa1ab; padding:48px 0; font-size:13px}
.foot .wrap{display:flex; justify-content:space-between; gap:32px; flex-wrap:wrap}
.foot .logo{color:#fff; font-size:16px}
.foot ul{list-style:none; display:flex; flex-wrap:wrap; gap:6px 20px; margin-top:14px; max-width:760px}
.foot .copy{align-self:flex-end}

/* 문장은 양끝 정렬 — 단어 사이·글자 사이가 벌어지지 않게 줄 끝에서 글자 단위로 넘김(keep-all 이면 단어째 넘겨 빈칸이 크게 벌어짐) */
.hero p, .about-body .txt p, .biz p, .name-cols p, .band p, .info p{text-align:justify; text-justify:inter-word; word-break:normal; overflow-wrap:anywhere; letter-spacing:0; -webkit-hyphens:auto; hyphens:auto}   /* 영어·스페인어는 하이픈으로 낱말을 나눠 단어 사이가 벌어지지 않게 */

/* 영어·스페인어는 문장이 길어 첫 화면 제목을 조금 작게 (PC) */
@media (min-width:801px){ html:lang(en) .hero h1, html:lang(es) .hero h1{font-size:40px} }
/* 폭이 좁은 문단(첫 화면 소개·사업분야 4칸·이름 풀이 3칸·문의 안내)의 영어·스페인어는 낱말을 쪼갤 수 없어 양끝 정렬하면 단어 사이가 크게 벌어짐 — 이 문단만 왼쪽 정렬 (넓은 회사소개 문단은 양끝 정렬 유지) */
html:lang(en) .hero p, html:lang(es) .hero p, html:lang(en) .info p, html:lang(es) .info p,
html:lang(en) .biz p, html:lang(es) .biz p, html:lang(en) .name-cols p, html:lang(es) .name-cols p{text-align:left}
@media (max-width:800px){ html:lang(en) .about-body .txt p, html:lang(es) .about-body .txt p, html:lang(en) .band p, html:lang(es) .band p{text-align:left} }   /* 모바일은 폭이 좁아 영어·스페인어 문단 모두 왼쪽 정렬 */
/* 중국어·일본어는 띄어쓰기가 거의 없어 공백 한 곳에 몰리지 않게 글자 사이로 고르게 나눔 */
html:lang(zh) .hero p, html:lang(zh) .about-body .txt p, html:lang(zh) .biz p, html:lang(zh) .name-cols p, html:lang(zh) .band p, html:lang(zh) .info p,
html:lang(ja) .hero p, html:lang(ja) .about-body .txt p, html:lang(ja) .biz p, html:lang(ja) .name-cols p, html:lang(ja) .band p, html:lang(ja) .info p{text-justify:inter-character}

/* 태블릿 */
@media (max-width:1100px){
  .hero .wrap{grid-template-columns:1fr; gap:56px}
  .hero-shot{max-width:640px}
  .biz{grid-template-columns:repeat(2,1fr)}
  .biz li:nth-child(2){border-right:0}
  .biz li:nth-child(3){padding-left:0; border-top:1px solid var(--line)}
  .biz li:nth-child(4){border-top:1px solid var(--line)}
  .works{grid-template-columns:repeat(2,1fr)}
  .contact-grid{grid-template-columns:1fr}
}
/* 모바일 — 대학입결검색기 메인 화면 모바일 기준표 크기(대제목 19.2 · 구역 제목 17.6 · 상자 제목 12.8 · 본문 11.2 · 단추 11.2 · 주석 9.6) */
@media (max-width:800px){
  html{scroll-padding-top:52px}
  .wrap{padding:0 16px}
  .top{height:52px}
  .logo{font-size:14.4px}
  .gnb{display:none}
  .menu-btn{display:block}
  .hero{padding:96px 0 56px}
  .eyebrow{font-size:9.6px}
  .eyebrow::before{width:20px}
  .hero h1{margin-top:14px; font-size:19.2px}
  .hero p{margin-top:14px; font-size:11.2px}
  .btns{margin-top:24px; gap:8px}
  .btn{height:40px; padding:0 18px; font-size:11.2px}
  .hero-shot .mo{right:-4px; bottom:-24px}
  .who{margin-top:40px}
  .who{gap:6px 18px; padding-top:12px}
  .who span{font-size:10.4px}
  .sec{padding:56px 0}
  .sec-head,.about-body,.name,.contact{grid-template-columns:1fr; gap:12px}
  .sec-head{margin-bottom:28px}
  .sec-no{font-size:9.6px; padding-top:0}
  .sec-no em{font-size:10.4px}
  .sec h2{font-size:17.6px}
  .about-body .txt p{font-size:11.2px}
  .about-body .txt p + p{margin-top:12px}
  .biz{grid-template-columns:1fr}
  .biz li, .biz li + li{padding:20px 0; border-right:0; border-top:1px solid var(--line)}
  .biz li:first-child{border-top:0}
  .biz .n{font-size:9.6px}
  .biz h3{margin-top:8px; font-size:12.8px}
  .biz p{margin-top:6px; font-size:11.2px}
  .works{grid-template-columns:1fr 1fr; gap:12px}
  .work figcaption{padding:10px 12px; font-size:10.4px}
  .work figcaption small{font-size:9.6px}
  .name-mark b{font-size:24px}
  .name-mark{font-size:10.4px}
  .name-cols{grid-template-columns:1fr}
  .name-cols div, .name-cols div + div{padding:18px 0; border-right:0; border-top:1px solid var(--line)}
  .name-cols div:first-child{border-top:0}
  .name-cols h4{font-size:9.6px}
  .name-cols p{margin-top:6px; font-size:11.2px}
  .band{padding:48px 0}
  .band .wrap{flex-direction:column; align-items:flex-start; gap:20px}
  .band h2{font-size:17.6px}
  .band p{font-size:11.2px}
  .contact-grid{gap:32px}
  .info dl div{grid-template-columns:56px 1fr; padding:12px 0}
  .info dt{font-size:10.4px}
  .info dd{font-size:11.2px}
  .info p{margin-top:16px; font-size:11.2px}
  form .row{grid-template-columns:1fr; gap:0}
  form label{margin-bottom:12px}
  form label span{font-size:10.4px; margin-bottom:6px}
  form input, form textarea{height:40px; font-size:12.8px; padding:0 12px}
  form textarea{height:120px; padding:10px 12px}
  .foot{padding:32px 0; font-size:9.6px}
  .foot .logo{font-size:12.8px}
}

/* ── 실제 페이지용 덧붙임 (2026-10-13) ── */
.d-none{display:none !important}
.gnb .lang-wrap{position:relative}
.gnb .lang-btn{display:inline-flex; align-items:center; gap:6px; height:38px; padding:0 12px; font:inherit; font-size:14px; font-weight:600; color:var(--ink2); background:#fff; border:1px solid var(--line); cursor:pointer}
.gnb .lang-btn::after{content:''; width:6px; height:6px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:rotate(45deg) translateY(-2px)}
.lang-list{position:absolute; right:0; top:calc(100% + 6px); min-width:140px; padding:6px 0; background:#fff; border:1px solid var(--line); list-style:none; z-index:20}
.lang-list a{display:block; padding:8px 16px; font-size:14px; font-weight:500; color:var(--ink2)}
.lang-list a:hover{background:var(--bg2); color:var(--ink)}
.mnav{display:none}
.form-msg{margin-bottom:14px; padding:12px 14px; font-size:15px; font-weight:600; border:1px solid}
.form-msg.ok{color:#0f6b3a; border-color:#9fd3b4; background:#f1faf4}
.form-msg.err{color:#b42318; border-color:#f3b4ae; background:#fef3f2}
.to-top{position:fixed; right:20px; bottom:20px; width:44px; height:44px; display:flex; align-items:center; justify-content:center; background:#fff; border:1px solid var(--ink); cursor:pointer; z-index:9}
.to-top::before{content:''; width:10px; height:10px; border-left:2px solid var(--ink); border-top:2px solid var(--ink); transform:translateY(3px) rotate(45deg)}
@media (max-width:800px){
  .mnav.open{display:block; position:fixed; top:52px; left:0; right:0; bottom:0; z-index:11; background:#fff; padding:8px 16px 24px; overflow-y:auto; border-top:1px solid var(--line2)}
  .mnav a{display:block; padding:14px 0; font-size:12.8px; font-weight:700; border-bottom:1px solid var(--line2)}
  .mnav .mlang{display:flex; flex-wrap:wrap; gap:8px; margin-top:16px}
  .mnav .mlang a{padding:8px 12px; font-size:10.4px; font-weight:600; border:1px solid var(--line)}
  .form-msg{font-size:11.2px; padding:10px 12px}
  .to-top{width:36px; height:36px; right:12px; bottom:12px}
}