/* =========================================================
   뉴스룸(news-press) · 블로그(news-blog) 공용 — main.css + about.css 위에 얹음
   나중에 Wix Blog / CMS 데이터로 목록을 채울 때도 같은 클래스를 그대로 씀
   ========================================================= */

.sr-only{ position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap }
.ico-plus{ display:inline-block; width:18px; height:18px; background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center/contain no-repeat }

/* 분류 탭: about.css의 섹션 탭과 같은 모양을 버튼에도 적용 */
.subnav button{ position:relative; flex:none; display:inline-flex; align-items:center; min-height:64px; padding:0 18px; font-size:17px; font-weight:600; color:var(--text-sub); transition:color .3s var(--ease) }
.subnav button::after{ content:""; position:absolute; left:18px; right:18px; bottom:0; height:2px; background:var(--point); scale:0 1; transition:scale .4s var(--ease) }
.subnav button:hover{ color:var(--text-strong) }
.subnav button[aria-selected="true"]{ color:var(--text-strong) }
.subnav button[aria-selected="true"]::after{ scale:1 1 }
@media (max-width:767px){ .subnav button{ min-height:56px; padding:0 12px; font-size:16px } .subnav button::after{ left:12px; right:12px } }

/* 분류 태그 */
.tag{ display:inline-flex; align-items:center; align-self:flex-start; padding:4px 12px; border-radius:999px; font-size:16px; font-weight:700; line-height:1.4; white-space:nowrap }
.tag--press{ color:var(--deep); background:var(--point-light) }
.tag--notice{ color:#3D3A50; background:#ECEBF1 }
.tag--event{ color:#0B6E99; background:#E2F5FD }
.tag--story{ color:#7B35D6; background:#F3EAFE }
.tag--insight{ color:var(--deep); background:var(--point-light) }
.tag--case{ color:#1E7A3C; background:#E7F5EC }
.tag--report{ color:#0B6E99; background:#E2F5FD }

/* 썸네일 없는 글의 기본 이미지 */
.ph{ width:100%; height:100%; display:grid; place-items:center; background:linear-gradient(135deg,#1C1640,#0E0C1C 70%) }
.ph img{ width:34% !important; height:auto !important; max-width:150px; object-fit:contain !important; opacity:.9; scale:1 !important }
.ph--press,.ph--insight{ background:radial-gradient(80% 90% at 85% 10%, rgba(127,216,255,.35), transparent 60%), linear-gradient(135deg,var(--point),#1B1460) }
.ph--notice{ background:radial-gradient(80% 90% at 85% 10%, rgba(167,158,255,.25), transparent 60%), linear-gradient(135deg,#2A2740,#0E0C1C) }
.ph--event,.ph--report{ background:radial-gradient(80% 90% at 85% 10%, rgba(127,216,255,.45), transparent 60%), linear-gradient(135deg,#1D5FA8,#101A3E) }
.ph--story{ background:radial-gradient(80% 90% at 85% 10%, rgba(255,170,240,.3), transparent 60%), linear-gradient(135deg,#7B35D6,#2A1270) }
.ph--case{ background:radial-gradient(80% 90% at 85% 10%, rgba(127,255,190,.3), transparent 60%), linear-gradient(135deg,#1E7A5C,#0E2A2A) }

/* 공통 이미지 확대 */
.zoom img,.nfeat__img img,.ni__img img,.bfeat__img img,.bcard__img img{ width:100%; height:100%; object-fit:cover; transition:scale 1s var(--ease) }

/* =========================================================
   뉴스룸
   ========================================================= */
.board{ background:#fff; padding-top:96px }
.nfeat{ display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:var(--gap); align-items:center }
.nfeat__img{ grid-column:1 / 8; aspect-ratio:16 / 9; border-radius:var(--r-xl); overflow:hidden; background:#ECEAF3; box-shadow:0 40px 80px -50px rgba(47,31,196,.45) }
.nfeat__body{ grid-column:8 / 13; display:flex; flex-direction:column; gap:20px; padding-left:24px }
.nfeat__label{ display:flex; align-items:center; gap:12px; font-size:16px; font-weight:700; color:var(--point) }
.nfeat__title{ font-size:34px; font-weight:700; line-height:1.38; letter-spacing:-.04em; color:var(--text-strong); transition:color .3s var(--ease) }
.nfeat__ex{ font-size:18px; line-height:1.7; color:var(--text-sub); display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden }
.nfeat__foot{ margin-top:8px; display:flex; align-items:center; justify-content:space-between; gap:16px; padding-top:20px; border-top:1px solid var(--line); font-size:16px; color:var(--text-sub) }
.nfeat:hover .nfeat__img img{ scale:1.04 }
.nfeat:hover .nfeat__title{ color:var(--point) }

.bctl{ margin-top:120px; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px; padding-bottom:24px; border-bottom:1px solid var(--text-strong) }
.bctl__count{ font-size:18px; color:var(--text-sub) }
.bctl__count strong{ color:var(--text-strong); font-weight:700 }
.bctl__count span{ color:var(--point); font-weight:700 }
.bsch{ position:relative; flex:0 1 360px }
.bsch input{ width:100%; height:52px; padding:0 20px 0 50px; border-radius:999px; border:1px solid var(--line-strong); background:var(--bg-light); font:inherit; font-size:16px; color:var(--text-strong); transition:border-color .3s var(--ease), background-color .3s var(--ease) }
.bsch input:focus{ outline:none; border-color:var(--point); background:#fff }
.bsch::before{ content:""; position:absolute; left:20px; top:50%; width:18px; height:18px; margin-top:-9px; background:var(--text-sub);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4-4'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4-4'/%3E%3C/svg%3E") center/contain no-repeat }

.nlist{ display:flex; flex-direction:column }
.ni{ border-bottom:1px solid var(--line) }
.ni a{ position:relative; display:grid; grid-template-columns:280px 1fr 120px 48px; align-items:center; gap:40px; padding:32px 0 }
.ni__img{ aspect-ratio:16 / 9; border-radius:var(--r-md); overflow:hidden; background:#ECEAF3 }
.ni__body{ display:flex; flex-direction:column; gap:12px; min-width:0 }
.ni__title{ font-size:22px; font-weight:700; line-height:1.45; letter-spacing:-.03em; color:var(--text-strong); transition:color .3s var(--ease);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden }
.ni__ex{ font-size:16px; line-height:1.65; color:var(--text-sub); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden }
.ni__date{ font-size:16px; color:var(--text-sub); font-variant-numeric:tabular-nums; text-align:right }
.ni__go{ width:48px; height:48px; border-radius:50%; background:var(--bg-light); display:grid; place-items:center; transition:background-color .3s var(--ease) }
.ni__go::before{ content:""; width:18px; height:18px; background:var(--text-strong); transition:background-color .3s var(--ease), translate .3s var(--ease);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat }
.ni a:hover .ni__title{ color:var(--point) }
.ni a:hover .ni__img img{ scale:1.05 }
.ni a:hover .ni__go{ background:var(--point) }
.ni a:hover .ni__go::before{ background:#fff; translate:3px 0 }
.ni__title mark,.ni__ex mark{ background:#FFF1A8; color:inherit; border-radius:3px }
.bempty{ padding:80px 0; text-align:center; font-size:18px; color:var(--text-sub) }
.bmore{ margin-top:48px; display:flex; justify-content:center }
.bmore[hidden]{ display:none }

.media{ margin-top:var(--sec); display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:32px; padding:56px 64px; border-radius:var(--r-xl); background:var(--bg-light) }
.media__title{ margin-top:12px; font-size:32px; font-weight:700; letter-spacing:-.04em; color:var(--text-strong) }
.media__lead{ margin-top:10px; font-size:17px; color:var(--text-sub) }
.media__acts{ display:flex; flex-wrap:wrap; gap:10px }

@media (max-width:1280px){ .ni a{ grid-template-columns:240px 1fr 110px; gap:32px } .ni__go{ display:none } }
@media (max-width:1024px){
  .nfeat{ row-gap:28px }
  .nfeat__img,.nfeat__body{ grid-column:1 / -1 } .nfeat__body{ padding-left:0 }
  .nfeat__title{ font-size:30px }
  .bctl{ margin-top:80px }
  .ni a{ grid-template-columns:220px 1fr; gap:6px 28px }
  .ni__img{ grid-row:1 / 3 }
  .ni__date{ grid-column:2; text-align:left }
}
@media (max-width:767px){
  .board{ padding-top:56px }
  .nfeat__title{ font-size:24px } .nfeat__ex{ font-size:16px }
  .bctl{ margin-top:64px } .bsch{ flex:1 1 100% }
  .ni a{ grid-template-columns:116px 1fr; gap:6px 16px; padding:20px 0; align-items:start }
  .ni__img{ grid-row:1 / 3; border-radius:12px; aspect-ratio:4 / 3 }
  .ni__body{ gap:8px }
  .ni__ex{ display:none }
  .ni__date{ grid-column:2; text-align:left }
  .ni__title{ font-size:17px }
  .ni .tag{ padding:2px 10px }
  .ph img{ width:56% !important }
  .media{ padding:32px 24px; gap:24px } .media__title{ font-size:26px }
  .media__acts,.media__acts .btn{ width:100% }
}

/* =========================================================
   블로그
   ========================================================= */
.blog{ background:#fff; padding-top:96px }
.bsec + .bsec{ margin-top:120px }
.bsec[hidden]{ display:none }
.bsec__head{ display:flex; flex-wrap:wrap; align-items:baseline; gap:8px 20px; padding-bottom:28px; margin-bottom:40px; border-bottom:1px solid var(--text-strong) }
.bsec__title{ font-size:36px; font-weight:700; letter-spacing:-.045em; color:var(--text-strong) }
.bsec__desc{ font-size:17px; color:var(--text-sub) }
.bsec__more{ margin-left:auto; display:inline-flex; align-items:center; gap:8px; min-height:44px; font-size:17px; font-weight:600; color:var(--text-strong); transition:color .3s var(--ease) }
.bsec__more:hover{ color:var(--point) }
.bsec__more:hover .ico-arrow{ translate:4px 0 }

/* 새 아티클: 왼쪽 큰 글 + 오른쪽 목록 */
.bnew{ display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:var(--gap); row-gap:32px; align-items:start }
.bfeat{ grid-column:1 / 8; display:flex; flex-direction:column; gap:24px }
.bfeat__img{ aspect-ratio:1140 / 660; border-radius:var(--r-xl); overflow:hidden; background:#111 }
.bfeat__body{ display:flex; flex-direction:column; gap:14px }
.bfeat__title{ font-size:32px; font-weight:700; line-height:1.38; letter-spacing:-.04em; color:var(--text-strong); transition:color .3s var(--ease) }
.bfeat time,.bcard time{ font-size:16px; color:var(--text-sub); font-variant-numeric:tabular-nums }
.bfeat:hover .bfeat__img img{ scale:1.04 }
.bfeat:hover .bfeat__title{ color:var(--point) }
.bside{ grid-column:8 / 13; display:flex; flex-direction:column }
.bside li + li{ border-top:1px solid var(--line) }

/* 카드 */
.bcard{ display:flex; flex-direction:column; gap:20px; height:100% }
.bcard__img{ aspect-ratio:16 / 9.3; border-radius:var(--r-lg); overflow:hidden; background:#111; flex:none }
.bcard__body{ display:flex; flex-direction:column; gap:10px; min-width:0 }
.bcard__title{ font-size:21px; font-weight:700; line-height:1.45; letter-spacing:-.03em; color:var(--text-strong); transition:color .3s var(--ease);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden }
.bcard:hover .bcard__img img{ scale:1.05 }
.bcard:hover .bcard__title{ color:var(--point) }
.bcard--row{ flex-direction:row; align-items:center; gap:24px; padding:24px 0 }
.bside li:first-child .bcard--row{ padding-top:0 }
.bcard--row .bcard__img{ width:42%; border-radius:var(--r-md) }
.bcard--row .bcard__title{ font-size:19px }
.bgrid3{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:56px var(--gap) }
.bgrid3 .is-extra{ display:none }
.bsec.is-open .bgrid3 .is-extra{ display:block }
.bsec.is-open .bsec__more{ display:none }

@media (max-width:1024px){
  .bfeat,.bside{ grid-column:1 / -1 }
  .bfeat__title{ font-size:28px }
  .bgrid3{ grid-template-columns:repeat(2,minmax(0,1fr)) }
}
@media (max-width:767px){
  .blog{ padding-top:56px }
  .bsec + .bsec{ margin-top:80px }
  .bsec__head{ margin-bottom:28px; padding-bottom:20px }
  .bsec__title{ font-size:28px } .bsec__desc{ width:100%; order:3; font-size:16px }
  .bfeat__title{ font-size:23px }
  .bcard--row{ gap:16px; padding:20px 0 } .bcard--row .bcard__img{ width:40% } .bcard--row .bcard__title{ font-size:17px }
  .bcard--row .tag{ display:none }
  /* 분류별 목록: 가로로 넘겨 보기 */
  .bsec:not(.is-open) .bgrid3{ display:flex; gap:12px; margin:0 calc(var(--pad) * -1); padding:0 var(--pad); overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; scroll-padding-inline:var(--pad) }
  .bsec:not(.is-open) .bgrid3::-webkit-scrollbar{ display:none }
  .bsec:not(.is-open) .bgrid3 > li{ flex:0 0 80%; scroll-snap-align:start }
  .bsec.is-open .bgrid3{ grid-template-columns:1fr; gap:40px }
  .bcard__title{ font-size:19px }
}

.page-board .cta{ background:#fff }