/* 더노드 회사 이야기 페이지 (2026-11-05) — 머리 · 바닥 = /css/company.css */
body{padding-top:64px}
.en{font-family:'Montserrat',sans-serif}
/* 머리 */
.st-hero{position:relative; padding:120px 0 150px; background:#ecebe6; overflow:hidden}
.st-hero .gl i{position:absolute; background:#c5c2b9}.st-hero .gl .a{left:max(20px, calc(50% - 630px)); top:0; bottom:0; width:1px}.st-hero .gl .b{right:max(20px, calc(50% - 630px)); top:0; bottom:0; width:1px}   /* 세로선 = 글자 · 로고 바깥(2026-11-05 사용자 「겹치지 않게」) */.st-hero .gl .c{left:0; right:0; bottom:64px; height:1px}
.st-hero .dot{position:absolute; left:max(20px, calc(50% - 630px)); bottom:64px; width:10px; height:10px; margin:0 0 -5px -5px; border-radius:50%; background:#e4572e}
.st-hero .wrap{position:relative}
.st-hero .eyebrow{margin-bottom:22px}
.st-hero h1{font-size:52px; font-weight:800; letter-spacing:-.04em; line-height:1.22}
.st-hero p{margin-top:24px; max-width:640px; font-size:18px; line-height:1.8; color:var(--ink2)}
.st-hero p strong{color:var(--ink)}
/* 구역 공통 */
.st{padding:120px 0; border-bottom:1px solid var(--line2)}
.st-in{display:grid; grid-template-columns:minmax(0,3fr) minmax(0,7fr); gap:72px; align-items:start}
.st-no{font-size:14px; font-weight:600; color:var(--accent); letter-spacing:.1em}
.st-no::after{content:''; display:inline-block; width:28px; height:1px; background:var(--accent); margin-left:10px; vertical-align:4px}
.st-h h2{margin-top:12px; font-size:30px; font-weight:800; letter-spacing:-.03em}
/* 01 일하는 방식 */
.st-body p{font-size:18px; line-height:1.95; color:var(--ink2); text-align:justify; word-break:normal}
.st-body p + p{margin-top:22px}
.st-quote{margin-top:44px; padding:28px 0 0; border-top:1px solid var(--ink); font-size:24px; font-weight:700; letter-spacing:-.02em; line-height:1.5; color:var(--ink)}
/* 02 이름 */
.nm-top{display:grid; grid-template-columns:auto minmax(0,1fr); gap:56px; align-items:end; padding-bottom:40px; border-bottom:1px solid var(--ink)}
.nm-mark b{display:block; font-family:'Montserrat',sans-serif; font-size:88px; font-weight:700; letter-spacing:-.03em; line-height:1}
.nm-mark i{display:block; margin-top:10px; font-style:normal; font-size:15px; color:var(--mut)}
.nm-top h3{font-size:26px; font-weight:700; letter-spacing:-.02em; line-height:1.5}
.nm-cols{display:grid; grid-template-columns:repeat(3,minmax(0,1fr))}
.nm-cols div{padding:32px 32px 0 0}.nm-cols div + div{padding-left:32px; border-left:1px solid var(--line)}
.nm-cols h4{font-size:19px; font-weight:800}.nm-cols h4 span{display:block; margin-bottom:10px; font-family:'Montserrat',sans-serif; font-size:12px; font-weight:600; color:var(--accent); letter-spacing:.14em}
.nm-cols p{margin-top:12px; font-size:15.5px; line-height:1.85; color:var(--ink2); text-align:justify; word-break:normal}
/* 03 슬로건 */
.st-sl{position:relative; padding:110px 0; background:#16181d; color:#fff; overflow:hidden; text-align:center}
.st-sl img{display:block; height:56px; margin:0 auto}
.st-sl h2{margin-top:44px; font-size:36px; font-weight:700; letter-spacing:-.03em}
.st-sl p{margin-top:16px; font-size:16px; color:#c3c7ce}
.st-sl a{display:inline-flex; margin-top:36px; height:48px; align-items:center; padding:0 26px; border:1px solid #fff; font-weight:600; font-size:15px}
.st-sl a:hover{background:#fff; color:#16181d}
/* 04 회사 정보 */
.info-tb{width:100%; border-collapse:collapse; border-top:1px solid var(--ink)}
.info-tb th, .info-tb td{padding:18px 4px; border-bottom:1px solid var(--line); text-align:left; font-size:16px}
.info-tb th{width:200px; font-weight:700}
.info-tb td{color:var(--ink2)}
/* 마무리 */
.st-next{display:grid; grid-template-columns:1fr 1fr; border-top:1px solid var(--line2)}
.st-next a{display:flex; align-items:center; justify-content:space-between; padding:44px 48px; font-size:22px; font-weight:800; letter-spacing:-.02em}
.st-next a + a{border-left:1px solid var(--line2)}
.st-next a small{display:block; margin-bottom:6px; font-size:12px; font-weight:600; color:var(--mut); letter-spacing:.14em}
.st-next a::after{content:'→'; font-weight:400; font-size:26px}
.st-next a:hover{background:var(--bg2)}
@media (max-width:900px){
  .st-in{grid-template-columns:1fr; gap:24px}
  .nm-top{grid-template-columns:1fr; gap:20px}
  .nm-cols{grid-template-columns:1fr}.nm-cols div, .nm-cols div + div{padding:22px 0; border-left:0; border-bottom:1px solid var(--line)}
}
/* 모바일 — 회사 소개 모바일 기준표 크기 */
@media (max-width:800px){
  body{padding-top:52px}
  .st-hero{padding:48px 0 76px}.st-hero .gl .c, .st-hero .dot{bottom:34px}.st-hero .gl .a{left:16px}.st-hero .dot{left:16px}.st-hero .gl .b{display:none}
  .st-hero .wrap{padding-left:30px}
  .st-hero h1{font-size:19.2px; line-height:1.45}.st-hero p{margin-top:12px; font-size:11.2px}
  .st{padding:40px 0}
  .st-no{font-size:9.6px}.st-h h2{margin-top:6px; font-size:17.6px}
  .st-body p{font-size:11.2px; line-height:1.8}.st-body p + p{margin-top:10px}
  .st-quote{margin-top:22px; padding-top:14px; font-size:12.8px}
  .nm-mark b{font-size:40px}.nm-mark i{font-size:9.6px}.nm-top{padding-bottom:20px}.nm-top h3{font-size:12.8px}
  .nm-cols h4{font-size:12.8px}.nm-cols h4 span{font-size:8px; margin-bottom:4px}.nm-cols p{margin-top:6px; font-size:11.2px}
  .st-sl{padding:52px 0}.st-sl img{height:30px}.st-sl h2{margin-top:22px; font-size:17.6px}.st-sl p{font-size:11.2px}.st-sl a{margin-top:20px; height:38px; padding:0 18px; font-size:11.2px}
  .info-tb th, .info-tb td{padding:10px 2px; font-size:11.2px}.info-tb th{width:96px}
  .st-next{grid-template-columns:1fr}.st-next a{padding:22px 16px; font-size:12.8px}.st-next a + a{border-left:0; border-top:1px solid var(--line2)}.st-next a small{font-size:8px}.st-next a::after{font-size:16px}
}

/* v2 더한 것 */
.st-hero-in{display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:60px; align-items:center}
.hero-sym{width:300px; height:300px; overflow:visible}
.hero-sym .hg path{stroke:#d3d0c7; stroke-width:.04; fill:none}
.hero-sym .hf{fill:none; stroke:#16181d; stroke-width:1; stroke-dasharray:29; stroke-dashoffset:29; animation:hfd 1.6s cubic-bezier(.65,0,.35,1) .3s forwards}
.hero-sym .hn{fill:#e4572e; transform-box:fill-box; transform-origin:center; transform:scale(0); animation:hnp .6s cubic-bezier(.34,1.4,.64,1) 1.8s forwards}
.hero-sym text{font-family:'Montserrat',sans-serif; font-size:.62px; font-weight:600; fill:#8a8f97; opacity:0; animation:hft .6s ease 2.3s forwards}
@keyframes hfd{to{stroke-dashoffset:0}}@keyframes hnp{to{transform:scale(1)}}@keyframes hft{to{opacity:1}}
.ways{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); margin-top:72px; border-top:1px solid var(--ink)}
.ways div{padding:30px 32px 0 0}.ways div + div{padding-left:32px; border-left:1px solid var(--line)}
.ways span{font-size:12px; font-weight:600; color:var(--accent); letter-spacing:.14em}
.ways b{display:block; margin-top:10px; font-size:19px; font-weight:800; letter-spacing:-.02em}
.ways p{margin-top:10px; font-size:15px; line-height:1.8; color:var(--ink2)}
.st-who{background:var(--bg2)}
.who5{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); border-top:1px solid var(--ink)}
.who5 div{padding:28px 18px 26px 0; border-right:1px solid var(--line)}.who5 div + div{padding-left:18px}.who5 div:last-child{border-right:0}
.who5 b{display:block; font-size:22px; font-weight:800; letter-spacing:-.02em}
.who5 b::before{content:''; display:block; width:8px; height:8px; margin-bottom:16px; border-radius:50%; background:#e4572e}
.who5 span{display:block; margin-top:10px; font-size:13.5px; line-height:1.6; color:var(--mut)}
.nm-cols .ic{display:block; width:56px; height:56px; margin-bottom:18px; fill:none; stroke:#16181d; stroke-width:1.6; stroke-linecap:round}
.nm-cols .ic circle{fill:#16181d; stroke:none}.nm-cols .ic .r{fill:#e4572e}
.svc{border-top:1px solid var(--ink)}
.sv{display:grid; grid-template-columns:56px minmax(0,1fr) auto 28px; align-items:center; gap:12px; padding:22px 4px; border-bottom:1px solid var(--line)}
.sv::after{content:'→'; font-size:20px; color:var(--mut); text-align:right; transition:transform .3s, color .3s}
.sv .n{font-size:12px; font-weight:600; color:var(--accent); letter-spacing:.14em}
.sv b{font-size:22px; font-weight:800; letter-spacing:-.02em}
.sv i{font-style:normal; font-size:14px; color:var(--mut)}
.sv:hover b{color:var(--accent)}.sv:hover::after{transform:translateX(6px); color:var(--ink)}
.st-sl .slg{position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px); background-size:48px 48px}
.st-sl .wrap{position:relative}
@media (max-width:900px){
  .st-hero-in{grid-template-columns:1fr}.hero-sym{width:180px; height:180px; justify-self:end}
  .ways, .who5{grid-template-columns:1fr}.ways div, .ways div + div, .who5 div, .who5 div + div{padding:18px 0; border-left:0; border-right:0; border-bottom:1px solid var(--line)}
}
@media (max-width:800px){
  .hero-sym{width:120px; height:120px; margin-top:-8px}
  .ways{margin-top:28px}.ways span{font-size:8px}.ways b{margin-top:4px; font-size:12.8px}.ways p{margin-top:4px; font-size:11.2px}
  .who5{grid-template-columns:1fr 1fr}.who5 div{padding:14px 10px 14px 0; border-right:0}.who5 div + div{padding-left:0}
  .who5 b{font-size:12.8px}.who5 b::before{width:6px; height:6px; margin-bottom:8px}.who5 span{margin-top:4px; font-size:9.6px}
  .nm-cols .ic{width:36px; height:36px; margin-bottom:8px}
  .sv{grid-template-columns:30px minmax(0,1fr) auto 16px; gap:8px; padding:14px 2px}.sv .n{font-size:8px}.sv b{font-size:12.8px}.sv i{font-size:9.6px}.sv::after{font-size:13px}
}

.nm-cols h4 em{font-style:normal}
html:lang(en) .st-body p, html:lang(es) .st-body p, html:lang(en) .nm-cols p, html:lang(es) .nm-cols p{text-align:left}
html:lang(ja) main, html:lang(zh) main{word-break:normal; line-break:strict}
html:lang(ja) .st-body p, html:lang(zh) .st-body p, html:lang(ja) .nm-cols p, html:lang(zh) .nm-cols p{text-justify:inter-character}