/* 소식(news) 페이지 전용 스타일 — 공통 d3.css 위에 덧붙임 */

/* ===== 머리 ===== */
/* 사무실 사진은 흰 천장·고른 조명이라 공통 필터를 거치면 회색으로 뜸 → 메인 '테이프 · 필름' 카드와 같은 흑백 처리로
   바탕은 검게 가라앉히고 천장 조명만 은빛 점으로 남김 (공통 .phero-img img 보다 우선하도록 두 단계 선택자) */
.phero-img .nw-hero{object-position:50% 30%;filter:grayscale(1) brightness(.46) contrast(1.42)}
/* 머리 높이는 공통 .phero.short (기술자료 · 소식 · 문의 공통). 1440×900 첫 화면에서 대표 기사 사진이 보이기 시작하게 위 여백만 줄임 */
@media (min-width:641px){
  .page-news #ev2026{padding-top:clamp(56px,calc(5vw / var(--z)),72px)}
}

/* ===== 대표 소식: 오른쪽 날짜 (메인 .nums 와 같은 가는 대형 숫자) ===== */
.ev-when{text-align:right;padding-bottom:4px}
.ev-day{font-size:clamp(56px,calc(6.4vw / var(--z)),104px);font-weight:200;letter-spacing:-.05em;line-height:1;font-variant-numeric:tabular-nums;color:var(--fg);white-space:nowrap}
.ev-dash{color:var(--mute);margin:0 .06em}
.ev-where{display:flex;justify-content:flex-end;align-items:baseline;gap:10px;margin-top:14px;font-size:15px;color:var(--mute)}
.ev-where .tn{color:var(--fg);font-weight:600}

/* ===== 대표 소식: 실제 사진 3장 + 본문 (넓은 사진 · 전시대 확대 / 본문 · 간판 사진) ===== */
.gallery.ev{grid-template-columns:repeat(12,minmax(0,1fr));grid-auto-rows:auto;
  grid-template-areas:"a a a a a a a a b b b b" "t t t t t c c c c c c c";
  grid-template-rows:clamp(320px,calc(40vw / var(--z)),600px) auto;row-gap:clamp(8px,calc(1vw / var(--z)),16px)}
/* 전시 사진은 메인 #expo 에서 원색에 가깝게 나오므로 공통 .gallery 필터보다 약하게 (메인 .hq 사진과 같은 값) */
.gallery.ev img{filter:saturate(.72) brightness(.86) contrast(1.06)}
.gallery.ev > .ev-a{grid-area:a}
.gallery.ev > .ev-b{grid-area:b}
.gallery.ev > .ev-c{grid-area:c;aspect-ratio:3/2;margin-top:clamp(24px,calc(3vw / var(--z)),48px)}
.gallery.ev > .ev-a img{object-position:50% 46%}
/* ev-b 는 ev-a 와 같은 모서리·구도라 Dow 마름모가 두 번 겹쳐 보임 → 로고를 빼고 전시대(전기차 모형)만 확대 */
.gallery.ev > .ev-b img{object-position:50% 40%;transform:scale(1.75);transform-origin:44% 74%}
.gallery.ev > .ev-c img{object-position:45% 30%}
/* 본문은 간판 사진 윗선에 맞춰 위에서 시작 (큰 사진 바로 아래에 빈 곳이 생기지 않게) */
.ev-txt{grid-area:t;align-self:start;padding:clamp(24px,calc(3vw / var(--z)),48px) clamp(24px,calc(3.6vw / var(--z)),64px) 6px 0;min-width:0}
.ev-txt > * + *{margin-top:24px}
.ev-txt .kv > div{grid-template-columns:96px minmax(0,1fr)}
.ev-txt .prose{font-size:16.5px}
.ev-txt .acts{gap:12px 28px;margin-top:32px}
.ev-note{font-size:13px;color:var(--mute2)}

/* ===== 소식 목록 (메인 .plist/.prow 와 같은 1px 선 목록) ===== */
#list .sec-head{margin-bottom:clamp(28px,calc(3vw / var(--z)),44px)}
#list .subhead{margin:clamp(44px,calc(4.4vw / var(--z)),64px) 0 18px}
#list .sec-head + .subhead{margin-top:0}
.nlist{border-top:1px solid var(--line2)}
.nlist li{scroll-margin-top:28px}
.nrow{position:relative;display:grid;grid-template-columns:150px minmax(0,1fr) 128px 48px;gap:28px;align-items:center;width:100%;padding:24px 0;
  border-bottom:1px solid var(--line2);text-align:left;font:inherit;color:inherit;line-height:inherit}
.nrow::before{content:"";position:absolute;inset:0 calc(var(--gut) * -1);background:var(--bg3);opacity:0;transition:opacity .35s;z-index:0}
.nrow > *{position:relative;z-index:1}
.nrow:hover::before{opacity:1}
.nrow:focus-visible{outline-offset:-2px}
.nrow-cat{display:flex;align-items:baseline;gap:10px;font-size:14px;font-weight:500;color:var(--mute)}
.nrow-cat em{font-style:normal;font-size:11.5px;letter-spacing:.08em;font-weight:700;color:var(--accent)}
.nrow-t{font-size:clamp(20px,calc(1.75vw / var(--z)),26px);font-weight:600;letter-spacing:-.03em;line-height:1.3;color:var(--fg)}
.nrow-t small{display:block;margin-top:8px;font-size:15.5px;font-weight:400;letter-spacing:0;line-height:1.65;color:var(--mute);max-width:46em;text-wrap:pretty}
.nrow-d{font-size:14px;color:var(--mute);text-align:right;white-space:nowrap}
.nrow-go{width:48px;height:48px;border:1px solid var(--line2);border-radius:50%;display:grid;place-items:center;transition:background .35s,border-color .35s,color .35s}
.nrow-go .ext{width:18px;height:18px;transition:transform .35s var(--ease)}
.nrow:hover .nrow-go{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.nrow:hover .nrow-go .arw{transform:translateX(3px)}
.nrow:hover .nrow-go .ext{transform:translate(2px,-2px)}
/* 이동할 곳이 없는 줄(사내 소식): 마우스 바탕·동그란 화살표 없이, 제목도 한 단계 작게 */
.nrow.is-static::before{display:none}
.nrow.is-static .nrow-go{visibility:hidden}
.nrow.is-static .nrow-t{font-size:clamp(19px,calc(1.5vw / var(--z)),22px)}
/* 다른 페이지에서 news.html#esg 로 들어오면 해당 줄 표시 */
.nlist li:target .nrow::before{opacity:1}
.nlist li:target .nrow-cat{color:var(--accent)}

/* ===== 반응형 ===== */
@media (max-width:1023px){
  .gallery.ev{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:auto;
    grid-template-areas:"a a" "t t" "b c"}
  .gallery.ev > .ev-a{aspect-ratio:3/2}
  .gallery.ev > .ev-b,.gallery.ev > .ev-c{aspect-ratio:4/5;margin-top:0}
  .gallery.ev > .ev-c img{object-position:48% 50%}
  .ev-txt{padding:clamp(28px,calc(4vw / var(--z)),44px) 0 clamp(28px,calc(4vw / var(--z)),44px)}
  .ev-txt .prose{max-width:40em}
  .nrow{grid-template-columns:120px minmax(0,1fr) 110px 48px;gap:22px}
}
/* 낮은 가로 화면(d3.css '낮은 화면'과 같은 520px 기준): 쌓인 전시 사진이 화면보다 높아지지 않게 (폭을 못박아야 비율 때문에 사진이 좁아지지 않음) */
@media (max-width:1023px) and (max-height:520px) and (orientation:landscape){
  .gallery.ev > figure{width:100%;max-height:calc(72vh / var(--z));max-height:calc(72svh / var(--z))}
}
@media (max-width:640px){
  .sec-head .ev-when{align-self:stretch;text-align:left;display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:16px 0 0;border-top:1px solid var(--line)}
  .ev-day{font-size:48px}
  .ev-where{margin-top:0}
  /* 공통 .gallery 모바일 규칙(첫 장 전체 폭 + 2열 정사각)을 이 배치에 맞게 덮어씀 */
  .gallery.ev{gap:8px}
  .gallery.ev > figure.ev-a{grid-area:a !important;aspect-ratio:4/3}
  .gallery.ev > figure.ev-b{grid-area:b !important;aspect-ratio:3/4}
  .gallery.ev > figure.ev-c{grid-area:c !important;aspect-ratio:3/4}
  .gallery.ev > .ev-c img{object-position:50% 40%}
  .ev-txt{padding:28px 0 32px}
  .ev-txt > * + *{margin-top:22px}
  .ev-txt .acts{flex-direction:column;align-items:flex-start;gap:18px;margin-top:28px}
  .ev-txt .kv > div{grid-template-columns:84px minmax(0,1fr)}
  .nrow{grid-template-columns:auto minmax(0,1fr) 44px;grid-template-areas:"c d g" "t t g";column-gap:14px;row-gap:8px;padding:22px 0}
  .nrow-cat{grid-area:c}
  .nrow-d{grid-area:d;text-align:left;font-size:13px}
  .nrow-t{grid-area:t;font-size:19px}
  .nrow-t small{font-size:14.5px;margin-top:6px}
  .nrow-go{grid-area:g;width:44px;height:44px;align-self:center}
  /* 이동 없는 줄은 빈 화살표 칸을 없애 제목이 끝까지 쓰이게 */
  .nrow.is-static{grid-template-columns:auto minmax(0,1fr);grid-template-areas:"c d" "t t"}
  .nrow.is-static .nrow-go{display:none}
  .nrow.is-static .nrow-t{font-size:18px}
}

/* ===== 아주 좁은 화면 (두 언어 공통) ===== */
@media (max-width:640px){
  /* 320px 폭에서 날짜 옆 장소가 칸을 넘어 가로 스크롤이 생김 → 자리가 모자랄 때만 장소를 날짜 아래로 내림 */
  .sec-head .ev-when{flex-wrap:wrap;row-gap:6px}
}

/* ===== 영문판(.lang-en) 조정 ===== */
/* 문의 띠 제목: 메인 · 회사소개 영문과 같은 폭(15em) → 물음표 뒤에서 두 줄로 나뉨 */
.lang-en .cta h2{max-width:15em}
/* 공통 .tn(자간 .06em)은 숫자용이라 영문 월 이름(Aug, Apr)까지 벌어짐 → 영문 날짜는 자간만 좁힘(숫자 폭 맞춤은 유지) */
.lang-en .ev-txt .kv .tn,.lang-en .nrow-d.tn{letter-spacing:.01em}
/* 오른쪽 칸 'Original (Korean site)'가 한국어 '원문 게시판'보다 넓어 날짜 칸(128 · 110px)을 넘음 → 영문만 칸을 넓힘
   (640px 이하는 위 모바일 배치가 그대로 쓰이도록 폭 구간을 나눠 지정) */
@media (min-width:1024px){
  .lang-en .nrow{grid-template-columns:150px minmax(0,1fr) 148px 48px}
}
@media (min-width:641px) and (max-width:1023px){
  .lang-en .nrow{grid-template-columns:120px minmax(0,1fr) 140px 48px}
}
@media (max-width:640px){
  /* 'Aug 25–27'은 숫자만 쓰는 한국어 날짜(08.25–27)보다 넓어 장소(COEX, Seoul)가 두 줄로 꺾임
     → 날짜를 조금 줄이고 장소는 한 줄로 (390px에서 한 줄에 들어감, 더 좁으면 위 규칙대로 날짜 아래로) */
  .lang-en .sec-head .ev-when{column-gap:12px}
  .lang-en .ev-day{font-size:40px}
  .lang-en .ev-where{white-space:nowrap}
  /* 큰 제목이 두 줄이 되는 폭: 'Trade shows ·'처럼 가운뎃점이 줄 끝에 매달리지 않게 점을 숨김 → News Trade shows / Notices */
  .lang-en .phero h1 .dot{display:none}
}

/* 관리 화면에서 쓴 소식 (10-19) — 목록 줄을 누르면 본문·사진이 펼쳐진다 */
.npost > summary{list-style:none;cursor:pointer}
.npost > summary::-webkit-details-marker{display:none}
.npost-plus{position:relative;width:14px;height:14px;display:block}
.npost-plus::before,.npost-plus::after{content:"";position:absolute;left:0;top:6px;width:14px;height:2px;background:currentColor;border-radius:1px;transition:transform .3s var(--ease)}
.npost-plus::after{transform:rotate(90deg)}
.npost[open] .npost-plus::after{transform:rotate(0)}
.npost-body{padding:20px 0 36px;margin-left:178px;max-width:46em;color:var(--fg2, var(--fg));font-size:16px;line-height:1.8}
.npost-body p{margin:0 0 14px;white-space:pre-line}
.npost-imgs{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;margin:18px 0}
.npost-imgs figure{margin:0}.npost-imgs img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:12px;display:block;background:var(--bg3)}
.npost-imgs figcaption{font-size:13px;color:var(--mute);margin-top:6px}
@media (max-width:1023px){ .npost-body{margin-left:142px} }
@media (max-width:640px){ .npost-body{margin-left:0;font-size:15px} .npost-imgs{grid-template-columns:repeat(2,minmax(0,1fr))} }
.lang-en .npost-body{margin-left:178px}
@media (max-width:1023px){ .lang-en .npost-body{margin-left:142px} }
@media (max-width:640px){ .lang-en .npost-body{margin-left:0} }
/* 10-23 사내 소식 사진: width·height 속성이 있어도 4:3 칸에 맞게, 안내문 이미지는 자르지 않고 통째로 */
.npost-imgs img{height:auto}
.npost-imgs figure.doc{grid-column:1 / -1;max-width:440px}
.npost-imgs figure.doc img{aspect-ratio:auto;object-fit:contain;background:#fff}