/* 영문 사이트 안쪽 페이지 공통 — 2026-11-12
   랜딩(en/index)과 같은 규칙: 흰 바탕, 4px 상자, 알약 버튼, 초록은 작은 포인트만, 사진 덮개는 네이비 투명도 */
:root{--ov:16,30,58;--green:#28a745;--green-logo:#51ad32;--btn-bg:#e6f3e0;--btn-line:#8cc979;--ink:#1d1d1d;--txt:#4d4d4d;--sub:#6b6457;--line:#e9e5da;--beige:#F4F3ED}
*{box-sizing:border-box}
body{margin:0;font-family:'Pretendard','Noto Sans',sans-serif;color:var(--txt);line-height:1.75;background:#fff;-webkit-font-smoothing:antialiased;word-break:keep-all}
a{color:var(--ink)}
.in{max-width:1100px;margin:0 auto;padding:0 54px}
.big{font-family:'Archivo Black','Pretendard',sans-serif;font-weight:400;letter-spacing:-.01em;line-height:1.08;color:var(--ink)}

/* 머리 메뉴 (사진 위) */
.top{position:absolute;inset:0 0 auto;z-index:5}
.top .in{display:flex;align-items:center;justify-content:space-between;height:84px}
.top img{height:50px;display:block}
.top nav{display:flex;gap:26px;align-items:center}
.top nav a{color:#fff;text-decoration:none;font-size:.95rem;font-weight:600;text-shadow:0 1px 2px rgba(0,0,0,.35)}
.top nav a[aria-current]{border-bottom:2px solid #fff;padding-bottom:2px}
.top nav a.ko{border:1px solid rgba(255,255,255,.7);border-radius:999px;padding:3px 12px;font-weight:500}

/* 좁은 화면 메뉴: 줄 세 개 단추를 누르면 메뉴가 펼쳐짐 (스크립트 없이 details 로 동작) */
.mnav{display:none}
@media (max-width:991.98px){
  .top nav{display:none}
  .mnav{display:block}
  .mnav summary{list-style:none;width:44px;height:44px;display:flex;align-items:center;justify-content:center;cursor:pointer;margin-right:-10px}
  .mnav summary::-webkit-details-marker{display:none}
  .mnav summary span{position:relative;display:block;width:24px;height:2px;background:#fff;box-shadow:0 -7px 0 #fff,0 7px 0 #fff;filter:drop-shadow(0 1px 1px rgba(0,0,0,.45))}
  .mnav[open] summary span{background:transparent;box-shadow:none;filter:none}
  .mnav[open] summary span:before,.mnav[open] summary span:after{content:'';position:absolute;left:0;top:0;width:24px;height:2px;background:#fff}
  .mnav[open] summary span:before{transform:rotate(45deg)}
  .mnav[open] summary span:after{transform:rotate(-45deg)}
  .top:has(.mnav[open]){background:rgb(16,30,58)}
  .mpanel{position:absolute;left:0;right:0;top:calc(100% - 1px);background:rgb(16,30,58);padding:4px 20px 20px;display:flex;flex-direction:column}
  .mpanel a{color:#fff;text-decoration:none;font-size:1.1rem;font-weight:600;padding:15px 0;border-bottom:1px solid rgba(255,255,255,.14)}
  .mpanel a[aria-current]{font-weight:800}
  .mpanel a.ko{border-bottom:0;font-weight:500;font-size:1rem;opacity:.85}
}

/* 안쪽 페이지 첫 화면: 사진 + 네이비 덮개(위·왼쪽만) */
.phero{position:relative;min-height:380px;display:flex;align-items:flex-end;color:#fff;background:rgb(var(--ov)) center/cover no-repeat}
.phero:before{content:'';position:absolute;inset:0;background:linear-gradient(to bottom,rgba(var(--ov),.5) 0%,rgba(var(--ov),0) 30%),linear-gradient(to right,rgba(var(--ov),.6) 0%,rgba(var(--ov),.25) 40%,rgba(var(--ov),0) 65%),rgba(var(--ov),.15)}
.phero .in{position:relative;width:100%;padding-bottom:52px}
.phero h1{color:#fff;font-size:3rem;margin:0 0 12px}
.phero p{margin:0;font-size:1.1rem;max-width:520px;color:#fff}

/* 본문 단락 */
.sec{padding:96px 0}
.sec.tint{background:rgba(16,30,58,.045)}
.sec:not(.tint)+.sec:not(.tint){padding-top:0} /* 흰 바탕 구역이 이어질 때 간격이 두 배가 되지 않게 */
.sec h2{font-size:2rem;font-weight:800;color:var(--ink);margin:0 0 24px;line-height:1.3}
.prose{max-width:760px}
.prose p{margin:0 0 14px}
.prose ul{margin:0 0 14px;padding-left:1.2em}
.prose li{padding:2px 0}
.note{font-weight:600;color:var(--ink)}

/* 소개 + 개념도 (원래 페이지: 왼쪽 글, 오른쪽 개념도) */
.intro{display:grid;grid-template-columns:1.15fr 1fr;gap:56px;align-items:center}
.concept{margin:0}
.concept svg{display:block;width:100%;max-width:460px;margin:0 auto;height:auto}

/* 항목 목록 (원래 페이지: 한 줄로 이어지는 항목, 위에 짧은 선) */
.items{display:flex;flex-direction:column;gap:72px}
.item{display:grid;grid-template-columns:260px 1fr;gap:48px;align-items:start}
.item .hd{position:sticky;top:24px}
.item h3{margin:0;font-size:1.45rem;font-weight:800;color:var(--ink);line-height:1.3;padding-top:14px;border-top:2px solid var(--ink)}
.item .bd p{margin:0 0 12px}
.item .bd ul{margin:0 0 12px;padding-left:1.2em}
.item .bd li{padding:2px 0}
.item .motto{font-weight:700;color:var(--ink)}
.item dl{display:grid;grid-template-columns:140px 1fr;margin:16px 0 0;border-top:1px solid var(--line);font-size:.95rem}
.item dt,.item dd{margin:0;padding:9px 0;border-bottom:1px solid var(--line)}
.item dt{font-weight:700;color:var(--ink)}
.item .sub{margin:20px 0 0;display:flex;flex-direction:column;gap:18px}
.item .sub h4{margin:0 0 4px;font-size:1.05rem;font-weight:800;color:var(--ink)}
.item .sub p{margin:0}
.item .small{font-size:.92rem;color:var(--sub);margin-top:12px}

/* 버튼 */
.btn{display:inline-block;padding:7px 18px;border-radius:999px;background:var(--btn-bg);border:1px solid var(--btn-line);color:var(--ink);font-weight:600;font-size:.92rem;text-decoration:none;transition:border-color .15s}
.btn:hover{border-color:var(--green-logo)}
.btn.primary{background:var(--green);border-color:var(--green);color:#fff;font-weight:700}
.btn.primary:hover{background:#218838;border-color:#218838}
.item .btn{margin-top:18px}

/* What We Do 페이지: 구역 바로가기, 카드 목록 (한글 사업 페이지 bwp-card 와 같은 모양) */
.tabs{border-bottom:1px solid var(--line);background:#fff}
.tabs ul{list-style:none;margin:0 auto;max-width:1100px;padding:0 54px;display:flex;gap:28px;overflow-x:auto;scrollbar-width:none}
.tabs ul::-webkit-scrollbar{display:none}
.tabs a{display:block;white-space:nowrap;padding:16px 0 14px;font-size:.95rem;color:var(--sub);text-decoration:none;border-bottom:3px solid transparent}
.tabs a:hover{color:var(--ink)}
.tabs a[aria-current]{color:var(--ink);font-weight:700;border-bottom-color:var(--green)}
.sec.wsec{padding-top:56px}
a.tile{text-decoration:none;color:inherit;transition:border-color .15s}
a.tile:hover{border-color:var(--btn-line)}
.sec .wh{padding-top:16px;border-top:2px solid var(--ink);font-size:1.9rem}
.wsec .lead{max-width:760px;margin:0 0 32px}
.wsec .grp{font-size:1.25rem;font-weight:800;color:var(--ink);margin:48px 0 18px}
.wsec .lead+.grp,.wsec dl+.grp{margin-top:40px}
.wsec>.in>.grp:first-child{margin-top:0}
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.tiles.four{grid-template-columns:repeat(4,1fr)}
.tiles.two{grid-template-columns:1fr 1fr}
.sec.wsec+.sec.wsec{padding-top:0}
.vm{display:grid;grid-template-columns:1fr 1fr;gap:40px}
.vm .state{font-family:'Archivo Black','Pretendard',sans-serif;font-size:1.7rem;line-height:1.2;color:var(--ink);margin:0 0 10px}
.vm .meta{font-size:.88rem;color:var(--sub);margin:0}
.wsec .grp.lg{font-size:1.7rem;margin:100px 0 24px}
.wsec>.in>.grp.lg:first-child{margin-top:0}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.duo+.duo{margin-top:72px}
.duo img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:4px}
.duo.rev img{order:2}
.duo h3{font-size:1.6rem;font-weight:800;color:var(--ink);margin:0 0 14px;line-height:1.3}
.duo p{margin:0 0 12px}
.duo ul{margin:0;padding-left:1.2em}
.duo li{padding:2px 0}
.cols3{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
.cols3>div{border-top:1px solid var(--line);padding-top:16px}
.cols3 h4{font-size:1.15rem;font-weight:800;color:var(--ink);margin:0 0 4px;line-height:1.4}
.cols3 p{margin:0}
/* About: Vision·Mission·Core Value·Key Words. 왼쪽 작은 이름표, 오른쪽 큰 글 */
.vrows{border-top:2px solid var(--ink)}
.vrow{display:grid;grid-template-columns:200px 1fr;gap:40px;padding:44px 0;border-bottom:1px solid var(--line)}
.sec .vrow h2{margin:8px 0 0;font-size:1rem;font-weight:800;color:var(--green);line-height:1.4}
.vrow .state{font-family:'Archivo Black','Pretendard',sans-serif;font-size:2.3rem;line-height:1.15;letter-spacing:-.01em;color:var(--ink);margin:0;max-width:760px}
.vrow .meta{font-size:.88rem;color:var(--sub);margin:14px 0 0}
.vrow .cv{list-style:none;margin:0;padding:0}
.vrow .cv li{font-size:1.5rem;font-weight:800;color:var(--ink);line-height:1.3;padding:5px 0}
.vrow .cv em{font-style:normal;color:var(--green)}
.vrow .kw{display:grid;grid-template-columns:240px 1fr;gap:10px 24px;margin:4px 0 0;border:0;max-width:none;font-size:1rem}
.vrow .kw dt{font-weight:800;color:var(--ink);padding:0;border:0}
.vrow .kw dd{margin:0;padding:0;border:0}
.items.hist{gap:0}
.hist .item{grid-template-columns:200px 1fr;padding:22px 0;border-top:1px solid var(--line)}
.hist .item:first-child{border-top:0;padding-top:0}
.hist .item .hd{position:static}
.hist .item h3{border-top:0;padding-top:0;font-family:'Archivo Black','Pretendard',sans-serif;font-weight:400;font-size:1.5rem}
.hist .item .bd ul{margin:0}
.hist.divs .item{grid-template-columns:280px 1fr;padding:20px 0}
.hist.divs .item:first-child{border-top:1px solid var(--line);padding-top:20px}
.hist.divs .item:last-child{border-bottom:1px solid var(--line)}
.hist.divs .item h3{font-family:inherit;font-weight:800;font-size:1.15rem}
.tile{background:#fff;border:1px solid var(--line);border-radius:4px;overflow:hidden;display:flex;flex-direction:column}
.tile>img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block}
.tile>img[src*="/ise/value_"]{aspect-ratio:auto;height:110px;object-fit:contain;margin-top:24px} /* 그림 아이콘은 자르지 않음 */
.tile .bd{padding:20px 22px 22px;display:flex;flex-direction:column;gap:10px;flex:1;font-size:.95rem;line-height:1.7}
.tile h4{font-size:1.15rem;font-weight:800;color:var(--ink);margin:0;line-height:1.4}
.tile p{margin:0}
.tile ul{margin:0;padding-left:1.1em}
.tile li{padding:1px 0}
.tile .meta{font-size:.88rem;color:var(--sub)}
.tile .btn{align-self:flex-start;margin-top:auto}
.wsec dl{display:grid;grid-template-columns:140px 1fr;margin:0;max-width:760px;border-top:1px solid var(--line);font-size:.95rem}
.wsec dt,.wsec dd{margin:0;padding:9px 0;border-bottom:1px solid var(--line)}
.wsec dt{font-weight:700;color:var(--ink)}
.quotes{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.quotes li{border:1px solid var(--line);border-radius:4px;padding:20px 22px;font-size:.95rem;line-height:1.7}
.quotes cite{display:block;font-style:normal;font-weight:700;color:var(--ink);margin-top:10px}
@media (max-width:991.98px){.tiles,.tiles.four,.quotes{grid-template-columns:1fr 1fr}.hist .item,.hist.divs .item{grid-template-columns:1fr;gap:8px}}
@media (max-width:767.98px){.tabs ul{padding:0 20px;gap:22px}.tiles,.tiles.four,.tiles.two,.quotes,.vm,.duo,.cols3,.vrow{grid-template-columns:1fr}.vrow{gap:14px;padding:32px 0}.vrow .state{font-size:1.7rem}.vrow .cv li{font-size:1.25rem}.vrow .kw{grid-template-columns:1fr;gap:2px}.vrow .kw dd{margin-bottom:12px}.duo{gap:20px}.duo.rev img{order:0}.cols3{gap:20px}.wsec .grp.lg{font-size:1.4rem;margin-top:56px}.vm .state{font-size:1.4rem}.sec .wh{font-size:1.5rem}.wsec dl{grid-template-columns:100px 1fr}}

/* Contact 양식 */
.cform-wrap{display:grid;grid-template-columns:1fr 280px;gap:64px;align-items:start}
.cform{max-width:640px}
.cform .fld{margin:0 0 22px}
.cform label{display:block;font-weight:700;color:var(--ink);margin:0 0 6px;font-size:.98rem}
.cform .req,.cform .opt{font-weight:400;color:var(--sub);font-size:.88rem;margin-left:4px}
.cform input[type=text],.cform input[type=email],.cform input[type=url],.cform select,.cform textarea{display:block;width:100%;padding:11px 12px;border:1px solid #cfcabd;border-radius:4px;background:#fff;font:inherit;color:var(--ink);font-size:1rem}
.cform textarea{resize:vertical;min-height:180px;line-height:1.6}
.cform input:focus,.cform select:focus,.cform textarea:focus{outline:2px solid var(--btn-line);outline-offset:1px;border-color:var(--green-logo)}
.cform .hint{margin:6px 0 0;font-size:.88rem;color:var(--sub)}
.cform .note-box{margin:-6px 0 22px;padding:14px 16px;border-left:3px solid var(--btn-line);background:var(--btn-bg);font-size:.94rem}
.cform .note-box p{margin:0 0 6px}.cform .note-box p:last-child{margin:0}
.cform .chk label{display:flex;gap:10px;align-items:flex-start;font-weight:400;color:var(--txt);line-height:1.6}
.cform .chk input{margin-top:5px;width:18px;height:18px;flex:none}
.cform .privacy{margin:0 0 28px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:12px 0;font-size:.92rem}
.cform .privacy summary{cursor:pointer;font-weight:700;color:var(--ink)}
.cform .privacy p{margin:10px 0 0}
.cform .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.cform .btn.primary{font-size:1rem;padding:10px 28px}
.cform .err{margin:6px 0 0;color:#b42318;font-size:.9rem;font-weight:600}
.cform .err-sum{margin:0 0 22px;padding:12px 14px;border:1px solid #f1b5ae;border-left:3px solid #b42318;border-radius:4px;background:#fdf1f0;color:#7a1a12;font-weight:600}
.cform [aria-invalid="true"]{border-color:#b42318}
.sent h2{font-size:1.8rem;font-weight:800;color:var(--ink);margin:0 0 14px}
.cside h2{font-size:1rem;font-weight:800;color:var(--ink);margin:0 0 6px}
.cside p{margin:0 0 22px;font-size:.95rem}
@media (max-width:991.98px){.cform-wrap{grid-template-columns:1fr;gap:24px}}

/* Stories (뉴스처럼 읽는 글) */
.phero.story{min-height:440px}
.phero.story h1{font-size:2.5rem;max-width:860px;line-height:1.12}
.phero.story.noimg{background:rgb(var(--ov))}
.phero .kick{margin:0 0 10px;font-size:.95rem;font-weight:600}
.phero .kick a{color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.6)}
.sart{max-width:760px}
.sart p{margin:0 0 18px;font-size:1.05rem;line-height:1.85}
.sart .smeta{font-size:.92rem;color:var(--sub);margin:0 0 22px}
.sart .smeta a{color:var(--sub)}
.sart .sdek{font-size:1.25rem;line-height:1.6;color:var(--ink);font-weight:600;margin:0 0 28px}
.sfig{margin:30px 0}
.sfig img{display:block;width:100%;height:auto;border-radius:4px}
.sfig figcaption{margin-top:8px;font-size:.9rem;color:var(--sub)}
.sart .sback{margin-top:32px}
.tile.story .noimg{aspect-ratio:16/10;background:rgba(16,30,58,.06);display:flex;align-items:flex-end;padding:18px 22px}
.tile.story .noimg span{font-weight:700;color:var(--ink);font-size:.95rem}
@media (max-width:767.98px){.phero.story{min-height:360px}.phero.story h1{font-size:1.7rem}.sart p{font-size:1rem}.sart .sdek{font-size:1.1rem}}

/* 팝업 (페이지를 떠나지 않고 소개 글 보기) */
button.btn{font-family:inherit;cursor:pointer;line-height:inherit}
dialog.pop{border:0;border-radius:4px;padding:0;width:min(760px,calc(100vw - 32px));max-height:min(86vh,900px);color:var(--txt);box-shadow:0 20px 60px rgba(16,30,58,.3)}
dialog.pop::backdrop{background:rgba(16,30,58,.55)}
/* 열릴 때·닫힐 때 부드럽게 */
dialog.pop[open]{animation:popIn .28s cubic-bezier(.2,.7,.3,1)}
dialog.pop[open]::backdrop{animation:popFade .28s ease}
dialog.pop.closing{animation:popOut .18s ease forwards}
dialog.pop.closing::backdrop{animation:popFadeOut .18s ease forwards}
@keyframes popIn{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
@keyframes popOut{from{opacity:1;transform:none}to{opacity:0;transform:translateY(8px) scale(.99)}}
@keyframes popFade{from{opacity:0}to{opacity:1}}
@keyframes popFadeOut{from{opacity:1}to{opacity:0}}
@media (prefers-reduced-motion:reduce){dialog.pop[open],dialog.pop[open]::backdrop,dialog.pop.closing,dialog.pop.closing::backdrop{animation:none}}
.pop-in{position:relative;padding:44px 48px 48px}
.pop-x{position:sticky;top:12px;float:right;margin:-28px -32px 0 0;width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:#fff;font-size:1.5rem;line-height:1;color:var(--ink);cursor:pointer}
.pop-x:hover{border-color:var(--btn-line)}
.pop h2{font-family:'Archivo Black','Pretendard',sans-serif;font-weight:400;font-size:1.9rem;color:var(--ink);margin:0 0 16px;line-height:1.15}
.pop-lead{font-size:1.05rem;color:var(--ink);margin:0 0 20px}
.pop-facts{display:grid;grid-template-columns:110px 1fr;margin:0 0 8px;border-top:1px solid var(--line);font-size:.95rem}
.pop-facts dt,.pop-facts dd{margin:0;padding:9px 0;border-bottom:1px solid var(--line)}
.pop-facts dt{font-weight:700;color:var(--ink)}
.pop h3{font-size:1.1rem;font-weight:800;color:var(--ink);margin:28px 0 8px}
.pop p{margin:0 0 10px}
.pop ul{margin:0;padding-left:1.2em}
.pop li{padding:3px 0}
.pop-themes{list-style:none;padding:0 !important;display:grid;grid-template-columns:1fr 1fr;gap:12px 28px;font-size:.93rem;line-height:1.6}
.pop-themes li{padding:0}
.pop-themes b{display:block;color:var(--ink)}

/* 연락 · 하단 (랜딩과 같음) */
.contact{background:rgba(16,30,58,.06);padding:72px 0}
.contact .in{display:grid;grid-template-columns:1.2fr 1fr;gap:40px;align-items:center}
.contact h2{font-size:2rem;font-weight:800;color:var(--ink);margin:0 0 10px}
.contact p{margin:0 0 18px}
.contact dl{display:grid;grid-template-columns:90px 1fr;margin:0;gap:6px 12px}
.contact dt{font-weight:700;color:var(--ink)}.contact dd{margin:0}
footer{background:#2b2b2b;color:#bdbdbd;font-size:.85rem;padding:28px 0}
footer .in{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;align-items:flex-end}
footer .f1{display:flex;flex-direction:column;gap:4px}
footer .f1 b{color:#fff;font-size:.95rem}
footer .f2{display:flex;flex-direction:column;gap:10px;align-items:flex-end;text-align:right}
footer .sns{display:flex;gap:16px}
footer .sns a{color:#ddd;text-decoration:none}
footer .sns a:hover{color:#fff}
footer .fbrand{display:flex;align-items:center;gap:12px;margin-bottom:8px}
footer .fbrand img{height:38px;width:auto;display:block}
footer .fbrand b{font-size:1.15rem}

@media (max-width:991.98px){
  .intro{grid-template-columns:1fr;gap:40px}
  .item{grid-template-columns:1fr;gap:16px}
  .item .hd{position:static}
  .contact .in{grid-template-columns:1fr}
}
@media (max-width:767.98px){
  .in{padding:0 20px}
  .top img{height:36px}
  .phero{min-height:320px}
  .phero h1{font-size:2.2rem}
  .phero p{font-size:1rem}
  .sec{padding:64px 0}
  .sec h2{font-size:1.6rem}
  .items{gap:52px}
  .item h3{font-size:1.3rem}
  .item dl{grid-template-columns:110px 1fr}
  .contact{padding:56px 0}
  .pop-in{padding:36px 22px 32px}
  .pop-x{margin:-22px -8px 0 0}
  .pop h2{font-size:1.55rem}
  .pop-themes{grid-template-columns:1fr}
  footer .f2{align-items:flex-start;text-align:left}
}