/* 더노드 모바일 구성 (2026-11-05 사용자 「모바일은 모바일에 맞게 구성과 레이아웃이 변경되야해 · PC화면을 그대로 우겨넣은 느낌」)
   모든 페이지에서 가장 마지막에 불러옴(company.css · intro.css · 페이지별 css 다음) — 800px 이하에서만 적용, PC 화면은 그대로
   글자 크기 = 모바일 기준표(대제목 19.2 · 구역 제목 17.6 · 상자 제목 12.8 · 본문 11.2 · 단추 11.2 · 주석 9.6) */
@media (max-width:800px){

  /* ── 공통: 구역 머리 = 번호와 이름 한 줄 + 제목 ── */
  .sec{padding:48px 0}
  .sec-head{gap:8px; margin-bottom:22px}
  .sec-no{display:flex; align-items:center; gap:8px}
  .sec-no em{display:inline; margin:0; font-size:10.4px}
  .sec-no em::before{content:''; display:inline-block; width:14px; height:1px; margin-right:8px; vertical-align:3px; background:var(--accent)}
  .sec h2{line-height:1.45}
  .sec-head > *{min-width:0}
  html:lang(ja) .sec h2, html:lang(zh) .sec h2{word-break:normal; line-break:strict}
  .screens-copy .sec-no{justify-content:center}
  .about-body > div:first-child, .contact > div:first-child{display:none}

  /* ── 모바일 메뉴 = 오른쪽에서 밀려 나오는 서랍(교육24 방식) · 화면 4/5 폭 · 남은 쪽은 어둡게(누르면 닫힘) · 메뉴마다 선 아이콘 ── */
  .mnav, .mnav.open{display:flex; flex-direction:column; position:fixed; top:0; bottom:0; right:0; left:auto; width:80%; max-width:360px; z-index:40; padding:0 0 24px; background:#fff; border:0; border-left:1px solid var(--line); overflow-y:auto; overscroll-behavior:contain}
  .mnav{transform:translateX(100%); visibility:hidden; transition:transform .3s ease, visibility 0s linear .3s}
  .mnav.open{transform:none; visibility:visible; transition:transform .3s ease, visibility 0s linear 0s}
  .mnav-bd{position:fixed; inset:0; z-index:39; background:rgba(11,13,16,0); visibility:hidden; pointer-events:none; transition:background-color .3s ease, visibility 0s linear .3s}
  .mnav-bd.open{background:rgba(11,13,16,.5); visibility:visible; pointer-events:auto; transition:background-color .3s ease, visibility 0s linear 0s}
  html.mnav-on, html.mnav-on body{overflow:hidden}
  .mnav .mn-head{display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:64px; padding:12px 8px 12px 20px; border-bottom:1px solid var(--line)}
  .mnav a.mn-brand{display:flex; flex-direction:column; align-items:flex-start; gap:6px; padding:0; border:0}
  .mnav .mn-brand img{height:19px; width:auto}
  .mnav .mn-tag{font-size:9.6px; font-weight:700; color:var(--accent); letter-spacing:.01em}
  .mnav .mn-close{width:40px; height:40px; display:inline-flex; align-items:center; justify-content:center; background:none; border:0; cursor:pointer}
  .mnav .mn-close svg{width:20px; height:20px; fill:none; stroke:var(--ink); stroke-width:1.8; stroke-linecap:round}
  .mnav a.mn-top{display:flex; align-items:center; gap:12px; padding:16px 20px; font-size:12.8px; font-weight:700; color:var(--ink); border-bottom:1px solid var(--line2)}
  .mnav a.mn-top::after{content:'→'; margin-left:auto; font-weight:400; font-size:14px; color:var(--mut)}
  .mnav a.mn-top:active{background:var(--bg2)}
  .mnav .mn-ic{flex:0 0 20px; width:20px; height:20px; fill:none; stroke:var(--accent); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round}
  .mnav .mn-ic path[d^="M10 8.5"]{fill:var(--accent); stroke:none}
  .mnav .mn-ic .dot{fill:var(--accent); stroke:none}
  .mnav .mn-ic + span{flex:1}
  .mnav .mn-lang{margin-top:auto; padding:20px 20px 0}
  .mnav .mn-cap{display:flex; align-items:center; gap:8px; font-size:9.6px; font-weight:600; letter-spacing:.14em; color:var(--mut)}
  .mnav .mn-cap .mn-ic{flex-basis:16px; width:16px; height:16px; stroke:var(--mut)}
  .mnav .mlang{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0; margin-top:10px; border-top:1px solid var(--line); border-left:1px solid var(--line)}
  .mnav .mlang a{display:flex; justify-content:center; padding:11px 0; font-size:10.4px; font-weight:600; color:var(--ink2); border:0; border-right:1px solid var(--line); border-bottom:1px solid var(--line)}
  .mnav .mlang a.on, .mnav .mlang a[aria-current]{color:var(--ink); font-weight:800}

  /* ── 인트로: 세로 화면 기준 — 로고 → 슬로건 → 선 → 이름 → 들어가기(폭 가득) ── */
  .it-c.tl{left:36px; top:22px; font-size:9.6px}
  .it-c.br{right:24px; bottom:22px; font-size:9.6px}
  .it-sym{left:44px; width:46px; height:46px; padding:0; transform:translate(0,-100%) translateY(-126px)}
  .it-hero{left:24px; right:20px; padding:0 0 28px 20px}
  .it-hero .ln{font-size:32px; line-height:1.22}
  html:lang(en) .it-hero .ln, html:lang(es) .it-hero .ln{font-size:27px}
  html:lang(ja) .it-hero .ln, html:lang(zh) .it-hero .ln{font-size:25px}
  .it-low{left:24px; right:24px; padding:26px 0 0 20px; gap:28px; align-items:stretch}
  .it-low .it-lg{height:22px}
  .it-low .tag{font-size:11.2px; letter-spacing:.02em}
  .it-go{width:100%; min-width:0; height:48px; font-size:12.8px; justify-content:space-between}
  .it-num{left:34px; bottom:40px; font-size:64px}

  /* ── 메인 대문: 제목 → 글 → 손그림 → 단추 둘(반씩) → 대상 다섯 칸 ── */
  .hero{padding:80px 0 40px}
  .hero .wrap{display:flex; flex-direction:column; align-items:stretch; gap:0}
  .hero .wrap > div:first-child{display:contents}
  .hero .eyebrow{order:1}
  .hero h1{order:2}
  .hero p{order:3}
  .hero-shot{order:4; max-width:none; margin:22px -6px 0}
  .hero .btns{order:5; display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:22px}
  .hero .btn{width:100%; height:44px; padding:0 8px}
  .hero .who{order:6; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:0; margin-top:16px; padding:0; border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
  .hero .who span{padding:10px 0; text-align:center; border-right:1px solid var(--line2)}
  .hero .who span:last-child{border-right:0}

  /* ── 01 이름: 큰 낱말과 단추 한 줄 ── */
  .name{display:flex; align-items:flex-end; justify-content:space-between; gap:16px; padding-top:16px; border-top:2px solid var(--ink)}
  .name-mark b{font-size:34px}
  .name-mark i{margin-top:6px}
  .name-more{margin:0; height:38px; padding:0 14px; flex-shrink:0}

  /* ── 02 회사소개: 첫 문단을 머리글로 ── */
  .about-body .txt p:first-child{font-size:12.8px; line-height:1.75; color:var(--ink)}

  /* ── 03 사업분야: 누르는 목록(번호 · 이름 · 한 줄 설명 · 화살표) ── */
  .biz{border-top:2px solid var(--ink)}
  .biz li, .biz li + li, .biz li:nth-child(n){position:relative; padding:16px 30px 16px 34px; border-top:1px solid var(--line)}
  .biz li:first-child{border-top:0}
  .biz .n{position:absolute; left:0; top:18px}
  .biz h3{margin-top:0}
  .biz p{margin-top:4px}
  .biz .biz-more{position:static; display:block; height:0; margin:0; padding:0; border:0; font-size:0}
  .biz .biz-more::before{content:''; position:absolute; inset:0}
  .biz .biz-more::after{content:'→'; position:absolute; right:2px; top:50%; transform:translateY(-50%); font-size:16px; color:var(--mut)}
  .biz-omr{gap:14px; padding:0; border-top:1px solid var(--line)}
  .biz-omr-txt{position:relative; padding:16px 30px 0 34px}
  .biz-omr .n{position:absolute; left:0; top:18px}
  .biz-omr h3{margin-top:0}
  .biz-omr p{margin-top:4px}
  .biz-omr .biz-more{position:static; display:block; height:0; margin:0; padding:0; border:0; font-size:0}
  .biz-omr .biz-more::before{content:''; position:absolute; left:0; right:0; top:0; height:64px}
  .biz-omr .biz-more::after{content:'→'; position:absolute; right:2px; top:22px; font-size:16px; color:var(--mut)}
  .biz-omr-keys{display:flex; flex-wrap:wrap; gap:6px; margin-top:12px; border:0}
  .biz-omr-keys li, .biz-omr-keys li + li{padding:4px 10px; border:1px solid var(--line); font-size:10.4px}
  .biz-omr-main.sk{margin:4px -6px 0; padding:10px 0; background:var(--bg2)}

  /* ── 04 구축사례 띠 ── */
  .screens{height:300px}
  .screens-track img{height:124px}

  /* ── 시작 띠: 단추 폭 가득 ── */
  .band .wrap{align-items:stretch}
  .band .btn{width:100%; height:44px}

  /* ── 05 고객문의: 전화 · 이메일 = 누르면 바로 거는 두 칸 ── */
  .info dl{display:grid; grid-template-columns:1fr 1fr; gap:8px; border-top:0}
  .info dl div{position:relative; display:block; padding:12px 12px 13px; border:1px solid var(--ink)}
  .info dd a::before{content:''; position:absolute; inset:0}
  .info dt{font-size:9.6px}
  .info dd{margin-top:4px; font-size:12px; font-weight:700; overflow-wrap:anywhere}
  .ct-sk{max-width:none; margin:18px -6px 0}
  .contact-grid{gap:28px}
  form .btn{height:46px}

  /* ── 바닥글: 회사 정보는 한 줄에 하나씩 ── */
  .foot .wrap{gap:18px}
  .foot ul{display:block; margin-top:14px}
  .foot ul li{line-height:1.85}
  .foot .rights{padding-top:12px; border-top:1px solid #23272e}
  .foot .copy{align-self:auto; font-size:9.6px}

  /* ── 사업분야 페이지: 이름 → 한 줄 소개 → 화면 → 설명 → 키워드 → 사이트 단추(폭 가득) ── */
  .bz-in, .bz.rev .bz-in{display:flex; flex-direction:column; align-items:stretch; gap:0}
  .bz-txt{display:contents}
  .bz-no{order:1}
  .bz h2{order:2}
  .bz-head{order:3}
  .pics{order:4; max-width:none; margin-top:16px}
  .bz-body{order:5; margin-top:14px}
  .bz-keys{order:6}
  .bz-btn{order:7; justify-content:space-between; width:100%; height:42px; margin-top:16px}
  .bz-cta a{width:100%; justify-content:center; height:44px}

  /* ── 회사 이야기 페이지 ── */
  .st-hero{padding:36px 0 64px}
  .st-hero-in{display:flex; flex-direction:column-reverse; align-items:flex-start; gap:14px}
  .hero-sym{width:76px; height:76px; margin:0 0 0 -4px; justify-self:auto}
  .st-in{gap:18px}
  .st-h{display:flex; align-items:baseline; gap:10px}
  .st-h h2{margin-top:0}
  .st-no::after{width:14px; margin-left:6px}
  .st-quote{font-size:12.8px}
  .ways div, .ways div + div{display:grid; grid-template-columns:28px minmax(0,1fr); column-gap:6px; padding:14px 0}
  .ways span{grid-row:1 / span 2; padding-top:4px; font-size:9.6px}
  .ways b{margin-top:0}
  .who5{grid-template-columns:1fr 1fr; gap:8px; border-top:0}
  .who5 div, .who5 div + div{padding:14px 12px; background:#fff; border:1px solid var(--line)}
  .who5 div:last-child{grid-column:1 / -1; border:1px solid var(--line)}
  .who5 span span{display:inline; margin:0; font-size:inherit}
  .nm-cols div, .nm-cols div + div{display:grid; grid-template-columns:44px minmax(0,1fr); column-gap:12px; align-items:start; padding:16px 0}
  .nm-cols .ic{grid-row:1 / span 2; width:40px; height:40px; margin:0}
  .nm-cols h4{display:flex; align-items:baseline; gap:8px}
  .nm-cols h4 span{display:inline; margin:0}
  .nm-cols p{margin-top:4px}
  .info-tb th{width:92px; color:var(--mut); font-weight:600}
  .info-tb td{color:var(--ink); font-weight:600}
  .st-sl a{width:100%; justify-content:center}
  .st-next{grid-template-columns:1fr 1fr}
  .st-next a{padding:20px 14px}
  .st-next a + a{border-left:1px solid var(--line2); border-top:0}

  /* ── 브랜드 페이지: 세 가지 요소 = 그림 왼쪽 · 글 오른쪽 한 줄씩 ── */
  .el{grid-template-columns:minmax(0,1fr)}
  .el>div{display:grid; grid-template-columns:76px minmax(0,1fr); column-gap:14px; align-items:start; padding:14px 0; border-right:0; border-bottom:1px solid #c9ccd2}
  .el>div:last-child{border-bottom:0}
  .el .pic{grid-row:1 / span 3; height:76px; margin:0}
  .el .pic svg{width:52px; height:52px}
  .el .k{font-size:8.5px}
  .el p{margin-top:4px; font-size:11.2px; line-height:1.7}
}