/* ============================================================
   우리전력(주) 회사소개 사이트 — 공용 스타일
   Layout: 기술도면/회로 느낌의 얇은 선과 번호 체계. 하나의 굵은
   제스처(히어로의 회로 트레이스 선)만 두고 나머지는 차분하게.
   ============================================================ */
:root{
  --ink:#0f1826;
  --ink-soft:#44566e;
  --paper:#f6f7fb;
  --surface:#ffffff;
  --line:#dde2ec;
  --blue:#1d4fa0;
  --blue-deep:#102c5c;
  --copper:#c97a3a;
  --copper-soft:#f3e2cf;
  --good:#1d7a4c;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
a:focus-visible,button:focus-visible{outline:3px solid var(--blue); outline-offset:4px}
.org-teams{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
@media(max-width:520px){.org-teams{grid-template-columns:repeat(2,minmax(0,1fr))}.header-row{gap:8px}.brand img{height:28px}.header-cta{padding:9px 12px;font-size:12px}.header-row .icon-cta{display:none}.contact-item dd{overflow-wrap:anywhere}}
@media(min-width:761px) and (max-width:1080px){nav.primary{gap:14px}nav.primary a{font-size:14px}.header-cta{padding:10px 12px;font-size:13px}.brand img{height:29px}.header-row{gap:10px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important;animation:none!important}}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:"Noto Sans KR","Pretendard",system-ui,sans-serif;
  font-size:16px; line-height:1.65;
}
h1,h2,h3{font-family:"Black Han Sans","Noto Sans KR",system-ui,sans-serif; font-weight:400; margin:0}
p{margin:0}
a{color:inherit}
img{max-width:100%}
.tnum{font-variant-numeric:tabular-nums}
.wrap{max-width:1080px; margin:0 auto; padding-inline:20px}

.eyebrow{font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--copper)}

/* ---------- header / nav ---------- */
header{position:sticky; top:0; z-index:20; background:#fffffff0; backdrop-filter:blur(10px); border-bottom:1px solid var(--line)}
.header-row{display:flex; align-items:center; justify-content:space-between; gap:16px; padding-block:12px}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; min-width:0}
.brand img{height:36px; width:auto; display:block}
nav.primary{display:flex; gap:24px; align-items:center}
nav.primary a{font-size:16px; font-weight:700; color:var(--ink-soft); text-decoration:none; white-space:nowrap; padding-bottom:3px; border-bottom:2px solid transparent}
nav.primary a:hover{color:var(--blue)}
nav.primary a[aria-current="page"]{color:var(--blue); border-color:var(--blue)}
.header-cta{display:inline-flex; align-items:center; gap:8px; white-space:nowrap; background:var(--blue); color:#fff; border-radius:999px; padding:11px 20px; font-size:15px; font-weight:700; text-decoration:none; flex:0 0 auto}
.icon-cta{display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:50%; border:1px solid var(--line); background:var(--surface); color:var(--blue); flex:0 0 auto}
.icon-cta svg{width:19px; height:19px; stroke:currentColor; fill:none; stroke-width:1.7}
.icon-cta:hover{border-color:var(--blue)}
.menu-toggle{display:none; border:1px solid var(--line); background:var(--surface); border-radius:9px; width:40px; height:40px; align-items:center; justify-content:center}
.menu-toggle svg{width:20px; height:20px; stroke:var(--ink); fill:none; stroke-width:1.8}
@media (max-width:760px){
  nav.primary{
    position:absolute; left:0; right:0; top:100%; background:var(--surface);
    border-bottom:1px solid var(--line); flex-direction:column; align-items:stretch;
    gap:0; padding:6px 0; display:none;
  }
  nav.primary.open{display:flex}
  nav.primary a{padding:13px 20px; border-bottom:1px solid var(--line)}
  nav.primary a[aria-current="page"]{background:var(--paper); border-bottom:1px solid var(--line)}
  .menu-toggle{display:inline-flex}
}

/* ---------- hero (home) ---------- */
.hero{position:relative; overflow:hidden; background:var(--blue-deep); color:#fff}
.hero .wrap{position:relative; z-index:2; padding-block:76px 64px; display:grid; gap:28px}
.hero-trace{position:absolute; inset:0; z-index:1; opacity:.5}
.hero-trace path{fill:none; stroke:color-mix(in srgb, var(--copper) 70%, white 10%); stroke-width:1.4; stroke-dasharray:6 7}
.hero-trace circle{fill:var(--copper)}
.hero .eyebrow{color:var(--copper)}
.hero h1{font-size:clamp(34px,6vw,58px); line-height:1.18; color:#fff; margin-top:10px}
.hero p.lede{max-width:46ch; color:#cbd8f0; font-size:17px; margin-top:4px}
.hero-actions{display:flex; gap:12px; flex-wrap:wrap; margin-top:6px}
.btn{display:inline-flex; align-items:center; gap:8px; border-radius:999px; padding:13px 22px; font-size:14px; font-weight:700; text-decoration:none; border:1px solid transparent}
.btn-primary{background:var(--copper); color:#271604}
.btn-ghost{border-color:#ffffff59; color:#fff}
.btn-blue{background:var(--blue); color:#fff}
.hero-stats{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px; background:#ffffff24; border:1px solid #ffffff2a; border-radius:14px; overflow:hidden; margin-top:12px}
.hero-stats div{background:#0b1b3c66; padding:16px 14px}
.hero-stats strong{display:block; font-size:20px; color:#fff}
.hero-stats span{display:block; font-size:12px; color:#9fb0d2; margin-top:3px}
@media (max-width:640px){ .hero-stats{grid-template-columns:repeat(2,minmax(0,1fr))} }

/* ---------- page header (sub pages) ---------- */
.page-hero{background:var(--blue-deep); color:#fff}
.page-hero .wrap{padding-block:46px 40px; display:grid; gap:8px}
.page-hero h1{font-size:clamp(28px,4.5vw,40px); color:#fff}
.page-hero p{color:#c7d4ee; font-size:15.5px; max-width:60ch}

section{padding-block:64px}
section.tight{padding-block:48px}
.section-head{display:grid; gap:10px; max-width:640px; margin-bottom:36px}
.section-head h2{font-size:clamp(24px,3.4vw,32px)}
.section-head p{color:var(--ink-soft)}

/* ---------- teaser cards (home) ---------- */
.teaser-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px}
@media (max-width:700px){ .teaser-grid{grid-template-columns:1fr} }
.teaser-card{background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:26px; text-decoration:none; display:grid; gap:10px; transition:transform .15s,border-color .15s}
.teaser-card:hover{transform:translateY(-2px); border-color:var(--blue)}
.teaser-card .eyebrow{color:var(--blue)}
.teaser-card h3{font-size:19px; font-weight:800}
.teaser-card p{font-size:14px; color:var(--ink-soft)}
.teaser-card .go{font-size:13px; font-weight:800; color:var(--blue); margin-top:4px}

/* ---------- about ---------- */
.about-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:40px; align-items:start}
@media (max-width:820px){ .about-grid{grid-template-columns:1fr} }
blockquote{margin:0; padding:26px 26px 26px 24px; border-left:3px solid var(--copper); background:var(--surface); border-radius:0 14px 14px 0; font-size:19px; line-height:1.6}
blockquote footer{margin-top:16px; font-size:14px; color:var(--ink-soft); font-style:normal}
.fact-table{width:100%; border-collapse:collapse; font-size:14px}
.fact-table tr{border-bottom:1px solid var(--line)}
.fact-table tr:last-child{border-bottom:0}
.fact-table th,.fact-table td{text-align:left; padding:12px 6px; vertical-align:top}
.fact-table th{width:92px; color:var(--ink-soft); font-weight:700; white-space:nowrap}

/* ---------- business areas ---------- */
.biz-grid{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px}
@media (max-width:900px){ .biz-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:460px){ .biz-grid{grid-template-columns:1fr} }
.biz-card{background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:20px; display:grid; gap:12px; position:relative}
.biz-num{position:absolute; top:16px; right:18px; font-size:12px; color:var(--line); font-weight:700}
.biz-icon{width:40px; height:40px; border-radius:10px; background:var(--blue); color:#fff; display:grid; place-items:center}
.biz-icon svg{width:22px; height:22px; stroke:#fff; fill:none; stroke-width:1.6}
.biz-card h3{font-family:inherit; font-size:16px; font-weight:800}
.biz-card p{font-size:13.5px; color:var(--ink-soft)}

/* ---------- history ---------- */
.timeline{position:relative; padding-left:28px}
.timeline::before{content:""; position:absolute; left:5px; top:6px; bottom:6px; width:2px; background:var(--line)}
.tl-item{position:relative; padding-bottom:30px}
.tl-item:last-child{padding-bottom:0}
.tl-item::before{content:""; position:absolute; left:-28px; top:4px; width:12px; height:12px; border-radius:50%; background:var(--surface); border:2px solid var(--blue)}
.tl-year{font-weight:800; color:var(--blue); font-size:14px}
.tl-item p{margin-top:4px; color:var(--ink-soft); font-size:14.5px}

/* ---------- trust / certs ---------- */
.trust-stats{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin-bottom:34px}
@media (max-width:640px){ .trust-stats{grid-template-columns:1fr} }
.trust-stat{background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:22px}
.trust-stat strong{display:block; font-size:30px; color:var(--blue)}
.trust-stat span{display:block; margin-top:4px; font-size:13.5px; color:var(--ink-soft)}
.badges{display:flex; flex-wrap:wrap; gap:9px; margin-top:4px}
.badge{font-size:12.5px; font-weight:700; padding:8px 13px; border-radius:999px; background:var(--copper-soft); color:var(--copper); border:1px solid #c97a3a59}
.callout{margin-top:28px; display:grid; gap:10px; background:var(--blue-deep); color:#fff; border-radius:16px; padding:26px 28px}
.callout h3{font-size:19px; color:#fff}
.callout p{color:#c7d4ee; font-size:14.5px; max-width:62ch}
.callout .tag{color:var(--copper); font-weight:800; font-size:13px; letter-spacing:.04em}
.cert-section{background:var(--surface); border-top:1px solid var(--line)}
.cert-grid{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px}
.cert-card{min-width:0; overflow:hidden; display:grid; grid-template-rows:280px auto; background:#fff; border:1px solid var(--line); border-radius:14px; color:var(--ink); text-decoration:none; box-shadow:0 8px 24px #10254d0a; transition:transform .18s,border-color .18s,box-shadow .18s}
.cert-card:hover,.cert-card:focus-visible{transform:translateY(-3px); border-color:var(--blue); box-shadow:0 12px 30px #10254d18}
.cert-card:focus-visible{outline:3px solid color-mix(in srgb,var(--blue) 30%,transparent); outline-offset:2px}
.cert-card img{width:100%; height:100%; object-fit:contain; background:#f3f5f8; padding:10px}
.cert-card strong{display:flex; align-items:center; min-height:62px; padding:13px 15px; font-size:13.5px; line-height:1.45}
@media (max-width:1000px){.cert-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:720px){.cert-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.cert-card{grid-template-rows:230px auto}}
@media (max-width:440px){.cert-grid{grid-template-columns:1fr}.cert-card{grid-template-rows:360px auto}}

/* ---------- projects ---------- */
.proj-list{display:grid; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:14px; overflow:hidden}
.proj-row{background:var(--surface); padding:20px 22px; display:grid; grid-template-columns:1fr auto; gap:14px; align-items:center}
.proj-row .tag{font-size:11.5px; font-weight:800; letter-spacing:.04em; color:var(--good); background:#1d7a4c24; padding:4px 9px; border-radius:999px; justify-self:start; display:inline-block; margin-bottom:8px}
.proj-row .tag.ongoing{color:var(--copper); background:var(--copper-soft)}
.proj-row h3{font-family:inherit; font-size:15.5px; font-weight:800; margin-bottom:4px}
.proj-row p{font-size:13.5px; color:var(--ink-soft)}
.proj-date{font-size:12.5px; color:var(--ink-soft); white-space:nowrap; text-align:right}
@media (max-width:620px){ .proj-row{grid-template-columns:1fr} .proj-date{text-align:left} }

/* ---------- contact ---------- */
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:40px}
@media (max-width:820px){ .contact-grid{grid-template-columns:1fr} }
.contact-list{display:grid; gap:18px}
.contact-item{display:grid; grid-template-columns:76px 1fr; gap:14px; font-size:14.5px}
.contact-item dt{color:var(--ink-soft); font-weight:700}
.contact-item dd{margin:0}
.map-card{background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:24px; display:grid; gap:14px; align-content:start}
.map-mark{width:34px; height:34px; border-radius:50%; background:var(--copper-soft); color:var(--copper); display:grid; place-items:center}
.map-mark svg{width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:1.8}
.address-copy{display:inline-flex;align-items:center;justify-content:center;width:fit-content;min-height:44px;padding:9px 14px;border:1px solid var(--line);border-radius:10px;background:white;color:var(--blue);font:inherit;font-size:13px;font-weight:700;text-decoration:none;cursor:pointer}
.address-copy:hover{background:var(--paper);border-color:var(--blue)}
.factory-directions{border-top:1px solid var(--line);margin-top:8px;padding-top:20px;display:grid;gap:12px}
.factory-directions h2{font-family:inherit;font-size:16px;font-weight:800}
.factory-directions p{font-size:14px;color:var(--ink-soft)}
.contact-actions{display:flex;flex-wrap:wrap;gap:8px}
.copy-status{min-height:22px;font-size:13px;color:var(--blue);overflow-wrap:anywhere}

/* Refined company presentation */
.hero{background:radial-gradient(ellipse at 90% 15%,#285da655,transparent 55%),linear-gradient(130deg,#0c2146,#173d76)}
.hero .wrap{padding-block:68px 48px;gap:24px}
.hero h1{letter-spacing:-.035em;max-width:850px}
.hero-capabilities{display:flex;flex-wrap:wrap;gap:10px}
.hero-capabilities span{display:flex;gap:12px;align-items:center;padding:9px 16px;border:1px solid #ffffff30;border-radius:8px;color:#e6edfa;font-size:14px;background:#ffffff08}
.hero-capabilities b{font-size:11px;color:#e6ad7e;letter-spacing:.08em}
.hero-stats{margin-top:14px;background:#ffffff12;border-radius:12px}
.hero-stats div{padding:20px;background:#071b3540}
.hero-stats strong{font-size:26px}
.page-hero .wrap{padding-block:52px 46px}
.page-hero h1{letter-spacing:-.025em}
.teaser-card{padding:30px;box-shadow:0 4px 18px #102c5c05}
.teaser-card .go{padding-top:12px;border-top:1px solid var(--line)}
.about-grid{gap:32px}
.about-grid blockquote{border-radius:4px 18px 18px 4px;padding:32px;background:linear-gradient(135deg,#fff,#edf2fa);font-size:23px}
.fact-table{background:white;border:1px solid var(--line);border-radius:14px;border-collapse:separate;border-spacing:0;overflow:hidden}
.fact-table th,.fact-table td{padding:14px 16px;border-bottom:1px solid var(--line)}
.fact-table th{background:#f0f4fa}
.fact-table tr:last-child>*{border-bottom:0}
.org-chart{border:1px solid var(--line);border-radius:20px;padding:36px 28px;background:var(--paper);text-align:center}
.org-leader,.org-management{position:relative;width:210px;margin:auto;padding:14px;border-radius:10px;font-weight:800}
.org-leader{background:var(--blue-deep);color:white;margin-bottom:28px;box-shadow:0 5px 16px #102c5c20}
.org-management{background:white;border:1px solid var(--line);margin-bottom:48px;color:var(--ink-soft)}
.org-leader::after,.org-management::after{content:'';position:absolute;width:1px;height:28px;background:#9aacc5;left:50%;top:100%}
.org-teams{position:relative;gap:16px}
.org-teams::before{content:'';position:absolute;top:-20px;left:calc(12.5% - 6px);right:calc(12.5% - 6px);height:1px;background:#9aacc5}
.org-teams>div{position:relative}
.org-teams>div::before{content:'';position:absolute;top:-21px;left:50%;height:20px;width:1px;background:#9aacc5}
.cert-card{grid-template-rows:300px auto}
.cert-card img{padding:18px;background:#edf1f7}
.cert-card strong{min-height:76px;font-size:14px;padding:16px 18px}
.cert-viewer{padding:0;border:0;border-radius:16px;width:min(940px,94vw);max-width:94vw;max-height:92vh;background:#eef1f6;box-shadow:0 24px 90px #0005}
.cert-viewer::backdrop{background:#07162bd9;backdrop-filter:blur(5px)}
.cert-toolbar{position:sticky;top:0;display:flex;align-items:center;gap:14px;background:white;padding:16px 22px;border-bottom:1px solid var(--line);z-index:2}
.cert-toolbar h2{font-family:inherit;font-size:16px;font-weight:700;margin-right:auto;min-width:0}
.cert-count{flex-shrink:0;font-size:13px;color:var(--ink-soft);font-variant-numeric:tabular-nums}
.cert-zoom,.cert-close{flex-shrink:0;white-space:nowrap;cursor:pointer;padding:10px 15px;border:1px solid var(--line);border-radius:8px;background:white;color:var(--ink);font:inherit;font-size:14px}
.cert-preview{position:relative;padding:24px;text-align:center;overflow:hidden}
.cert-preview img{display:block;margin:auto;width:100%;height:auto;box-shadow:0 4px 20px #102c5c18;cursor:zoom-in}
.cert-preview.zoomed{overflow:auto;max-height:76vh}
.cert-preview.zoomed img{width:auto;max-width:none;height:auto;min-height:100%;cursor:zoom-out}
.cert-nav{position:absolute;top:50%;translate:0 -50%;z-index:1;width:44px;height:44px;border-radius:50%;border:0;background:#07162bb3;color:#fff;font-size:24px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}
.cert-nav:hover,.cert-nav:focus-visible{background:#07162be0}
.cert-prev{left:10px}
.cert-next{right:10px}
@media(max-width:720px){.cert-card{grid-template-rows:240px auto}.hero .wrap{padding-block:44px 32px}.hero-capabilities span{font-size:12px;padding:7px 10px}.hero-stats div{padding:16px}.about-grid blockquote{padding:24px;font-size:21px}.cert-preview{padding:10px}.cert-toolbar{padding:12px;gap:8px}.cert-toolbar h2{font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cert-count{font-size:12px}.cert-zoom,.cert-close{padding:8px 10px;font-size:13px}.cert-nav{width:36px;height:36px;font-size:20px}}
@media(max-width:520px){
  .org-chart{padding:28px 16px}
  .org-leader,.org-management{width:180px}
  .org-management{margin-bottom:28px}
  .org-management::after{display:none}
  .org-teams{grid-template-columns:1fr;gap:12px;padding-left:28px;margin-left:24px}
  .org-teams::before{left:0;right:auto;top:0;bottom:26px;width:1px;height:auto}
  .org-teams>div::before,.org-teams>div:nth-child(n+3)::before{left:-29px;top:50%;width:28px;height:1px}
}
@media(max-width:440px){.cert-card{grid-template-rows:340px auto}}

footer.site{border-top:1px solid var(--line); padding-block:30px; margin-top:10px}
.foot-row{display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap; font-size:12.5px; color:var(--ink-soft)}
.foot-row strong{color:var(--ink)}
/* 프레임 구조에서는 header+footer가 항상 떠있고 iframe이 남는 높이만 쓰므로,
   짧은 모바일 화면에서 footer가 줄 수(=높이)를 너무 먹지 않게 한 줄로 줄인다. */
@media (max-width:640px){
  footer.site{padding-block:14px}
  .foot-row{font-size:11px; gap:4px 14px}
  .foot-row span:nth-child(2){display:none}
}
@media(max-width:520px){
  .header-row{gap:8px}
  .brand img{height:28px}
  .header-cta{padding:9px 12px;font-size:12px}
  .header-row .icon-cta{display:none}
}
@media(min-width:761px) and (max-width:1080px){
  nav.primary{gap:14px}
  nav.primary a{font-size:14px}
  .header-cta{padding:10px 12px;font-size:13px}
  .brand img{height:29px}
  .header-row{gap:10px}
}