/* ============================================================
   AKER — darkroom gallery wall
   Monumental type over muted landscape photography.
   Single chromatic accent: Ember #b75928
   ============================================================ */
:root{
  --color-ink:#000000;
  --color-paper:#ffffff;
  --color-char:#1c1c1c;
  --color-midnight:#070707;
  --color-iron:#262626;
  --color-mist:#e5e4e4;
  --color-smoke:#8d8d8d;
  --color-pewter:#666666;
  --color-ember:#b75928;
  --color-pine:#193f32;
  --color-tide:#002934;
  --color-driftwood:#537179;

  --font-sans:'Montserrat','Pretendard',ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-lora:'Lora','Pretendard',Georgia,serif;

  --text-body:15px;        --leading-body:1.5;        --tracking-body:0.15px;
  --text-subheading:18px;  --leading-subheading:1.5;  --tracking-subheading:0.18px;
  --text-heading-sm:22px;  --leading-heading-sm:1.25; --tracking-heading-sm:-0.44px;
  --text-heading:36px;     --leading-heading:1.2;     --tracking-heading:-0.72px;
  --text-heading-lg:62px;  --leading-heading-lg:1.1;  --tracking-heading-lg:-1.55px;
  --text-display:168px;    --leading-display:0.8;     --tracking-display:-4.2px;

  --page-max-width:1200px;
  --section-gap:80px;
  --radius-cards:8px;
  --radius-images:8px;
  --radius-buttons:80px;
  --radius-badges:1584px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-sans);
  background:var(--color-paper);
  color:var(--color-ink);
  font-size:var(--text-body);
  line-height:var(--leading-body);
  letter-spacing:var(--tracking-body);
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  /* 한글은 단어 중간에서 끊지 않는다. 공백에서만 줄을 넘긴다. */
  word-break:keep-all;
  overflow-wrap:break-word;   /* 긴 영문·이메일 등 끊을 수 없는 문자열의 안전판 */
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
ul{list-style:none}
.wrap{max-width:var(--page-max-width);margin:0 auto;padding:0 24px}

/* ---------- Type primitives ---------- */
.label{
  font-size:12px;font-weight:400;letter-spacing:0.12px;
  color:var(--color-smoke);display:block;margin-bottom:8px;
}
.label.on-dark{color:var(--color-mist)}
h1,h2,h3,h4{font-weight:300}
/* 제목은 줄 길이를 고르게 나눠 외톨이 단어를 막는다 */
.h-lg,.h-md,.h-sm{text-wrap:balance}
/* 본문은 마지막 줄에 단어 하나만 남는 것을 막는다 */
.body,.body-lg,.serif,.numlist .d,.cred-item .d,.fcard p{text-wrap:pretty}
.h-lg{
  font-size:clamp(38px,5.4vw,var(--text-heading-lg));font-weight:300;
  line-height:var(--leading-heading-lg);letter-spacing:-0.025em;
}
.h-md{
  font-size:clamp(28px,3.6vw,var(--text-heading));font-weight:300;
  line-height:var(--leading-heading);letter-spacing:-0.02em;
}
.h-sm{
  font-size:var(--text-heading-sm);font-weight:400;
  line-height:var(--leading-heading-sm);letter-spacing:-0.02em;
}
.body{font-size:var(--text-body);line-height:var(--leading-body);letter-spacing:var(--tracking-body)}
.body-lg{font-size:var(--text-subheading);line-height:var(--leading-subheading);letter-spacing:var(--tracking-subheading)}
.serif{font-family:var(--font-lora);font-weight:400;letter-spacing:0.011em;line-height:1.5}
.measure{max-width:600px}
/* 한국어 본문 가독 폭 — 한 줄 45자를 넘지 않게 한다.
   px 대신 em 을 쓰면 15px 본문과 18px 세리프가 같은 글자수를 유지한다. */
.measure p,.band-body p,.numlist .d,.cred-item .d,.fcard p,.foot-grid p{max-width:32em}
.ember{color:var(--color-ember)}
.muted{color:var(--color-pewter)}

/* ---------- Buttons ---------- */
.btn-text{
  display:inline-flex;align-items:center;gap:10px;
  font-size:var(--text-body);font-weight:400;letter-spacing:var(--tracking-body);
  color:var(--color-ink);background:none;border:0;cursor:pointer;
  transition:gap .2s ease;
}
.btn-text .arw{font-size:16px;line-height:1;transition:transform .2s ease}
.btn-text:hover .arw{transform:translateX(4px)}
.btn-text.on-dark{color:var(--color-paper)}
.btn-pill{
  display:inline-flex;align-items:center;gap:10px;
  border:1px solid var(--color-ink);border-radius:var(--radius-buttons);
  padding:16px 19px;font-size:13px;font-weight:400;
  transition:background .2s ease,color .2s ease;
}
.btn-pill:hover{background:var(--color-ink);color:var(--color-paper)}
.btn-pill.on-dark{border-color:rgba(255,255,255,.45);color:var(--color-paper)}
.btn-pill.on-dark:hover{background:var(--color-paper);color:var(--color-ink)}
.btn-filled{
  display:inline-flex;align-items:center;gap:10px;
  background:var(--color-char);color:var(--color-paper);
  border-radius:var(--radius-buttons);padding:16px 19px;
  font-size:13px;font-weight:500;transition:background .2s ease;
}
.btn-filled:hover{background:var(--color-ink)}

/* ---------- Touch targets ----------
   Aker 시각 규격(네비필 ~32px, 텍스트 버튼 = 장식 없는 맨 텍스트)을 유지한 채
   히트 영역만 의사요소로 넓혀 44px 이상을 확보한다. 겉모습은 변하지 않는다.
   문장 안에 놓인 인라인 링크는 WCAG 2.5.8 "Inline" 예외 대상이라 건드리지 않는다. */
.nav-pill,.btn-text{position:relative}
.nav-pill::after{content:"";position:absolute;left:-6px;right:-6px;top:-6px;bottom:-6px}
.btn-text::after{content:"";position:absolute;left:-10px;right:-10px;top:-11px;bottom:-11px}
.foot-grid a{min-height:44px;display:flex;align-items:center;margin-bottom:0}
.contact-list dd a{display:inline-flex;align-items:center;min-height:44px}

/* ---------- Navigation pill ---------- */
.nav-pill{
  position:fixed;top:24px;right:24px;z-index:100;
  display:inline-flex;align-items:center;gap:12px;
  height:36px;padding:0 16px;border:0;cursor:pointer;
  background:var(--color-char);border-radius:var(--radius-badges);
  color:var(--color-paper);font-family:var(--font-sans);
  font-size:12px;font-weight:500;letter-spacing:0.12px;
}
.nav-pill .bars{display:flex;flex-direction:column;gap:3px;width:16px}
.nav-pill .bars i{display:block;height:1.5px;background:var(--color-paper);transition:transform .22s ease,opacity .22s ease}
.nav-pill[aria-expanded="true"] .bars i:nth-child(1){transform:translateY(4.5px) rotate(45deg)}
.nav-pill[aria-expanded="true"] .bars i:nth-child(2){opacity:0}
.nav-pill[aria-expanded="true"] .bars i:nth-child(3){transform:translateY(-4.5px) rotate(-45deg)}

.nav-panel{
  position:fixed;inset:0;z-index:99;background:var(--color-midnight);
  padding:96px 24px 40px;overflow-y:auto;
  opacity:0;visibility:hidden;transition:opacity .28s ease,visibility .28s ease;
}
.nav-panel.open{opacity:1;visibility:visible}
.nav-panel .inner{max-width:var(--page-max-width);margin:0 auto}
.nav-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:24px}
.nav-card{
  display:grid;grid-template-columns:120px 1fr auto;gap:16px;align-items:center;
  background:var(--color-char);border-radius:var(--radius-cards);
  padding:12px;transition:background .2s ease;
}
.nav-card:hover{background:var(--color-iron)}
.nav-card .thumb{aspect-ratio:4/3;border-radius:var(--radius-images);overflow:hidden;background:var(--color-iron)}
.nav-card .thumb img{width:100%;height:100%;object-fit:cover}
.nav-card .t{font-size:var(--text-body);font-weight:400;color:var(--color-paper)}
.nav-card .d{font-size:12px;font-weight:400;color:var(--color-mist);margin-top:4px}
.nav-card .arw{font-size:14px;color:var(--color-paper);padding-right:8px}
.nav-foot{
  margin-top:48px;padding-top:24px;border-top:1px solid rgba(255,255,255,.14);
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px;
  font-size:12px;color:var(--color-smoke);
}

/* ---------- Full-bleed hero ---------- */
.hero{
  position:relative;width:100%;min-height:100vh;
  display:flex;flex-direction:column;justify-content:space-between;
  /* 좌우 여백은 자식이 .wrap 과 동일한 그리드로 잡는다 */
  padding:96px 0 40px;overflow:hidden;
}
.hero-media{position:absolute;inset:0;z-index:0}
.hero-media img,.hero-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-still{display:none}
.hero-scrim{position:absolute;inset:0;z-index:1;background:rgba(7,7,7,.28)}
/* .wrap 과 같은 그리드 — 좌측 기준선을 일반 섹션과 일치시킨다 */
.hero-intro,.hero-mark{
  position:relative;z-index:2;color:var(--color-paper);
  width:100%;max-width:var(--page-max-width);margin:0 auto;padding:0 24px;
}
/* 문장별 <br> 이 한 줄씩 온전히 들어가도록 폭을 잡는다 (본문 measure 와 동일) */
.hero-intro .label,.hero-intro p{max-width:600px}
.hero-intro .label{color:rgba(255,255,255,.72)}
.wordmark{
  font-family:var(--font-sans);font-weight:300;
  font-size:clamp(64px,13vw,var(--text-display));
  line-height:var(--leading-display);letter-spacing:-0.025em;
  color:var(--color-paper);display:block;
}
.hero-mark .ko{
  display:block;margin-top:20px;font-size:var(--text-body);font-weight:400;
  letter-spacing:0.15px;color:rgba(255,255,255,.86);
}
.hero-scroll{
  position:absolute;bottom:40px;z-index:2;
  right:max(24px, calc((100% - 1200px) / 2 + 24px));
  font-size:12px;color:rgba(255,255,255,.68);
  writing-mode:vertical-rl;letter-spacing:0.16em;
}

/* ---------- Sections ---------- */
.section{padding:var(--section-gap) 0}
.section-tight{padding:56px 0}
.head{margin-bottom:48px}
.head .h-lg,.head .h-md{margin-bottom:24px}

/* Full-bleed photo band */
.band{position:relative;width:100%;min-height:72vh;display:flex;align-items:flex-end;overflow:hidden}
.band-media{position:absolute;inset:0;z-index:0}
.band-media img{width:100%;height:100%;object-fit:cover}
.band-scrim{position:absolute;inset:0;z-index:1;background:rgba(7,7,7,.34)}
.band-body{position:relative;z-index:2;width:100%;padding:48px 0}
.band-body .inner{max-width:var(--page-max-width);margin:0 auto;padding:0 24px;color:var(--color-paper)}
.band-body .h-lg{max-width:16em}
.band-body p{margin-top:20px;color:rgba(255,255,255,.86)}

/* Numbered list */
.numlist{margin-top:8px}
.numlist li{
  display:grid;grid-template-columns:48px minmax(0,1fr) minmax(0,1.4fr);
  gap:24px;align-items:baseline;
  padding:24px 0;border-top:1px solid var(--color-mist);
}
.numlist li:last-child{border-bottom:1px solid var(--color-mist)}
.numlist .n{font-size:12px;font-weight:400;color:var(--color-smoke)}
.numlist .t{font-size:var(--text-subheading);font-weight:400;letter-spacing:var(--tracking-subheading)}
.numlist .d{font-size:var(--text-body);color:var(--color-pewter);line-height:var(--leading-body)}

/* Two-column feature cards */
.feature-row{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.fcard{
  border-radius:var(--radius-cards);padding:32px;
  display:flex;flex-direction:column;justify-content:space-between;
  min-height:380px;position:relative;overflow:hidden;
}
.fcard.mist{background:var(--color-mist)}
.fcard.pine{background:var(--color-pine);color:var(--color-paper)}
.fcard.tide{background:var(--color-tide);color:var(--color-paper)}
.fcard.photo{padding:0}
.fcard.photo .ph{position:absolute;inset:0;z-index:0}
.fcard.photo .ph img{width:100%;height:100%;object-fit:cover}
.fcard.photo .ph-scrim{position:absolute;inset:0;z-index:1;background:rgba(7,7,7,.34)}
.fcard.photo .fc-body{
  position:relative;z-index:2;padding:32px;color:var(--color-paper);
  display:flex;flex-direction:column;justify-content:space-between;height:100%;min-height:380px;
}
.fcard .fc-top{margin-bottom:32px}
.fcard .fc-bot{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap}
.fcard .fc-mark{font-size:22px;font-weight:300;letter-spacing:-0.025em;opacity:.42}
.fcard.pine .label,.fcard.tide .label{color:rgba(255,255,255,.7)}

/* Stat row */
.statrow{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;border-top:1px solid var(--color-mist);padding-top:32px}
.stat .v{font-size:clamp(38px,5vw,62px);font-weight:300;line-height:1;letter-spacing:-0.025em}
.stat .v em{font-style:normal;font-size:22px;font-weight:400;letter-spacing:normal;margin-left:4px}
.stat .k{font-size:12px;color:var(--color-smoke);margin-top:12px}

/* ---------- Business groups : 전기 / 환경 ---------- */
.biz-group{margin-top:64px}
.biz-group:first-of-type{margin-top:48px}
.subhead{margin-bottom:24px}
.subhead .label{margin-bottom:6px}
.subhead h3{font-size:var(--text-heading-sm);font-weight:400;line-height:var(--leading-heading-sm);letter-spacing:-0.44px}
.biz-group .numlist{margin-top:0}

/* 게시판 (시공 사례) · 갤러리 (제품) */
.board,.gallery{margin-top:32px}
.board-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px 16px;margin-bottom:16px}
.board-head .label{margin-bottom:0}
.board-note{font-size:13px;color:var(--color-pewter)}
.board-empty{
  background:var(--color-mist);border-radius:var(--radius-cards);
  padding:48px 24px;text-align:center;color:var(--color-pewter);font-size:var(--text-body);
}
.board-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.post{border-radius:var(--radius-cards);overflow:hidden;background:var(--color-paper);border:1px solid var(--color-mist)}
.post .p-media{aspect-ratio:4/3;background:var(--color-mist);display:flex;align-items:center;justify-content:center;color:var(--color-smoke);font-size:12px}
.post .p-media img,.post .p-media video{width:100%;height:100%;object-fit:cover}
.post .p-body{padding:16px}
.post .p-title{font-size:var(--text-body);font-weight:500}
.post .p-meta{font-size:12px;color:var(--color-smoke);margin-top:6px}
.gallery-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.g-item{margin:0;border-radius:var(--radius-cards);overflow:hidden;background:var(--color-paper);border:1px solid var(--color-mist)}
.g-media{aspect-ratio:4/3;background:var(--color-mist);display:flex;align-items:center;justify-content:center;color:var(--color-smoke);font-size:12px}
.g-media img,.g-media video{width:100%;height:100%;object-fit:cover}
.g-body{padding:14px 16px;display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.g-name{font-size:var(--text-body);font-weight:500}
.g-tag{font-size:12px;color:var(--color-pewter);white-space:nowrap}

/* 06 Plasma 공정개발 컨소시엄 다이어그램 */
.consortium-wrap{margin-top:40px}
.consortium-wrap > .label{margin-bottom:16px}
.consortium{display:flex;align-items:stretch;gap:14px}
.cons-item{
  flex:1;display:flex;flex-direction:column;text-align:center;
  border:1px solid var(--color-ink);border-radius:var(--radius-cards);
  background:var(--color-paper);overflow:hidden;
}
.cons-name{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:3px;padding:20px 16px;font-size:var(--text-body);font-weight:500;line-height:1.4;
}
.cons-sub{display:block;font-size:11.5px;font-weight:400;color:var(--color-smoke);letter-spacing:0.12px}
.cons-role{
  border-top:1px solid var(--color-ink);background:var(--color-mist);
  padding:11px 16px;font-size:13px;font-weight:500;letter-spacing:0.12px;color:var(--color-ink);
}
.cons-plus{
  align-self:center;flex:0 0 auto;
  font-size:34px;font-weight:300;line-height:1;color:var(--color-ember);
  user-select:none;
}

/* Credentials list */
.cred{display:grid;grid-template-columns:repeat(3,1fr);gap:48px}
.cred-col h3{font-size:12px;font-weight:500;color:var(--color-smoke);letter-spacing:0.12px;padding-bottom:12px;border-bottom:1px solid var(--color-ink)}
.cred-item{padding:22px 0;border-bottom:1px solid var(--color-mist);display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:start}
.cred-item .doc{width:44px;aspect-ratio:1/1.414;border:1px solid var(--color-mist);border-radius:3.2px;background:var(--color-paper)}
.cred-item .doc img{width:100%;height:100%;object-fit:cover;border-radius:3.2px}
.cred-item .t{font-size:var(--text-body);font-weight:500}
.cred-item .d{font-size:13px;color:var(--color-pewter);margin-top:6px;line-height:1.5}
.cred-item .s{display:inline-block;margin-top:10px;font-size:12px;color:var(--color-ember)}
.cred-item .s.done{color:var(--color-pewter)}

/* Info table */
.info{border-top:1px solid var(--color-ink)}
.info .row{display:grid;grid-template-columns:180px 1fr;gap:24px;padding:20px 0;border-bottom:1px solid var(--color-mist)}
.info dt{font-size:12px;color:var(--color-smoke)}
.info dd{font-size:var(--text-body)}

/* Contact */
.contact-list{border-top:1px solid rgba(255,255,255,.2)}
.contact-list .row{display:grid;grid-template-columns:140px 1fr;gap:24px;padding:20px 0;border-bottom:1px solid rgba(255,255,255,.14)}
.contact-list dt{font-size:12px;color:var(--color-smoke)}
.contact-list dd{font-size:var(--text-subheading);font-weight:300}

/* Footer */
.footer{background:var(--color-paper);padding:64px 0 32px;border-top:1px solid var(--color-mist)}
.foot-mark{font-size:clamp(44px,9vw,120px);font-weight:300;line-height:.9;letter-spacing:-0.025em;margin-bottom:48px}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:32px;padding-top:32px;border-top:1px solid var(--color-mist)}
.foot-grid h5{font-size:12px;font-weight:400;color:var(--color-smoke);margin-bottom:16px}
.foot-grid a{display:block;font-size:var(--text-body);margin-bottom:10px}
.foot-grid a:hover{color:var(--color-ember)}
.foot-grid p{font-size:13px;color:var(--color-pewter);line-height:1.6}
.foot-bot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-top:48px;padding-top:24px;border-top:1px solid var(--color-mist);font-size:12px;color:var(--color-smoke)}

/* ---------- Responsive ---------- */
@media(max-width:900px){
  .feature-row{grid-template-columns:1fr}
  .nav-cards{grid-template-columns:1fr}
  .cred{grid-template-columns:1fr;gap:36px}
  .statrow{grid-template-columns:repeat(2,1fr);gap:32px 16px}
  .board-grid{grid-template-columns:repeat(2,1fr)}
  .gallery-grid{grid-template-columns:repeat(2,1fr)}
  .foot-grid{grid-template-columns:1fr 1fr}
  .numlist li{grid-template-columns:40px 1fr;gap:8px 16px}
  .numlist .d{grid-column:2 / -1}
}
@media(max-width:640px){
  .hero{padding:88px 0 32px;min-height:92vh}
  .band-body{padding:32px 0}
  .hero-scroll{display:none}
  .nav-card{grid-template-columns:88px 1fr auto}
  .info .row,.contact-list .row{grid-template-columns:1fr;gap:6px}
  .statrow{grid-template-columns:1fr}
  .board-grid{grid-template-columns:1fr}
  .gallery-grid{grid-template-columns:1fr}
  .consortium{flex-direction:column;gap:10px}
  .cons-plus{font-size:28px}
  .foot-grid{grid-template-columns:1fr}
  .fcard{padding:24px;min-height:320px}
  .fcard.photo .fc-body{padding:24px;min-height:320px}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none !important}
  .hero-video{display:none}
  .hero-still{display:block}
}

/* ---------- Link feature cards (메인 사업영역) ---------- */
.fcard.link{text-decoration:none}
.fcard.link .fc-top,.fcard.link .fc-bot{display:flex;flex-direction:column;align-items:flex-start}
.fcard.link .fc-bot{gap:14px}
.fc-lines{display:block;font-size:13px;line-height:1.65;opacity:.85}
.fcard.link:hover .arw{transform:translateX(4px)}

/* ---------- Subpage head ---------- */
.page-head{padding:110px 0 48px;border-bottom:1px solid var(--color-mist)}
.page-back{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--color-pewter);margin-bottom:28px}
.page-back:hover{color:var(--color-ember)}
.page-head .h-lg{margin:14px 0 20px}

/* ---------- Lightbox ---------- */
.lightbox{border:0;border-radius:var(--radius-cards);padding:0;max-width:min(940px,94vw);background:var(--color-midnight)}
.lightbox::backdrop{background:rgba(7,7,7,.74)}
.lightbox img,.lightbox video{display:block;max-width:100%;max-height:80vh;margin:0 auto}
.lb-cap{padding:12px 16px;color:var(--color-paper);font-size:13px;display:flex;justify-content:space-between;gap:16px;align-items:center}
.lb-close{background:none;border:1px solid rgba(255,255,255,.4);border-radius:var(--radius-buttons);color:#fff;font-size:12px;padding:6px 14px;cursor:pointer;font-family:var(--font-sans)}
.lb-close:hover{background:rgba(255,255,255,.12)}
.has-media{cursor:zoom-in}
.g-media .play{font-size:12px;letter-spacing:.08em;color:var(--color-paper);background:rgba(7,7,7,.55);padding:6px 12px;border-radius:var(--radius-buttons)}
.g-media{position:relative}
.g-media .play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}

/* ---------- Nav list : 텍스트형 전체 메뉴 (사진 카드 대체) ---------- */
.nav-list{display:flex;flex-direction:column;margin-top:32px}
.nav-item{
  display:grid;grid-template-columns:48px 1fr auto 24px;gap:24px;align-items:baseline;
  padding:24px 8px;border-top:1px solid rgba(255,255,255,.14);
  transition:background .15s ease;
}
.nav-item:last-child{border-bottom:1px solid rgba(255,255,255,.14)}
.nav-item:hover{background:rgba(255,255,255,.045)}
.nav-item .no{font-size:12px;color:var(--color-smoke)}
.nav-item .ti{
  font-size:clamp(22px,3.2vw,34px);font-weight:300;letter-spacing:-0.02em;
  color:var(--color-paper);line-height:1.15;transition:color .15s ease;
}
.nav-item .de{font-size:13px;color:var(--color-smoke);justify-self:end;text-align:right}
.nav-item .arw{font-size:18px;color:var(--color-paper);justify-self:end;transition:transform .2s ease}
.nav-item:hover .ti{color:var(--color-ember)}
.nav-item:hover .arw{transform:translateX(5px)}
@media(max-width:640px){
  .nav-item{grid-template-columns:32px 1fr 20px;gap:14px;padding:18px 4px}
  .nav-item .de{display:none}
  .nav-item .ti{font-size:21px}
}

/* ---------- 모바일 타이포 보정 ----------
   · h-lg 최소 38px 는 327px 폭에서 한 줄 8자뿐이라 과대 → 30px
   · 워드마크 최소 64px 는 360px 기기에서 가용폭과 동일(여유 0) → vw 연동으로 안전화 */
@media(max-width:640px){
  .h-lg{font-size:30px;letter-spacing:-0.6px}
  .page-head{padding:96px 0 40px}
  .wordmark{font-size:clamp(44px,16.5vw,64px)}
  .foot-mark{font-size:clamp(40px,12vw,64px)}
  .hero-intro .label,.hero-intro p{max-width:100%}
}