:root{
  --fw-body:500;          /* 원본 weight 실측 최다값 500 */
  --fw-head:700;
  --pri:#e37500;          /* 원본 주조색 실측 #e37500 (92회) */
  --pri-d:#c86700;        /* 원본 hover 실측 */
  --pri-soft:#fdf3e9;
  --pri-on-dark:#f58220;
  --on-pri:#ffffff;
  --navy:#002b57;         /* 원본 보조 주조색 실측 (13회) */
  --ink:#181a1f;          /* 원본 실측 */
  --ink-d:#002b57;        /* 다크 면 = 네이비 */
  --body:#41464f;         /* 원본 실측 */
  --sub:#68707e;          /* 원본 #6f7685(4.56:1)는 연배경 위 4.32:1 로 미달 → 한 단계 어둡게(4.99/4.73:1) */
  --sub-src:#6f7685;      /* 원본 실측 원값 (보더·아이콘 등 비텍스트에만) */
  --bg:#ffffff;
  --bg2:#f7f9fb;          /* 원본 실측 */
  --surface:#ffffff;
  --bd:#dfe3eb;           /* 원본 실측 (63회) */
  --bd-s:#c3cad6;
  --focus:#002b57;
  --r:4px;                /* 원본 radius 실측 : 4px 외에는 100% 뿐 */
  --r-btn:4px;
  --r-ic:50%;
  --cw:1280px;            /* 원본 컨테이너 실측 */
  --gut:32px;
  --gap:24px;
  --sec-pad:clamp(84px,8.4vw,132px);
  --hd-h:76px;
  --hd-bg:rgba(255,255,255,.94);
  --hd-bd:#dfe3eb;
  --hd-fg:#002b57;
  --hd-fg-2:#6f7685;
  --nav-gap:34px;
  --hero-h:640px;
  --hero-scrim:rgba(0,0,0,.55) 62%,rgba(0,26,52,.92) 100%);
  --h1-max:60px;
  --h2-max:38px;
  --phero-bg:#f7f9fb;
  --phero-fg:#181a1f;
  --phero-sub:#6f7685;
  --phero-bd:#dfe3eb;
  --sh:0 0 8px 0 rgba(0,0,0,.06);
  --ft-bg:#002b57;
  --ft-fg:rgba(255,255,255,.7);
  --ft-hd:#ffffff;
  --ft-bd:rgba(255,255,255,.2);
  --ft-note:rgba(255,255,255,.06);
}

/* =========================================================================
   골든브릿지 GOLDEN BRIDGE — 공통 스타일시트
   참고원본 실측 : www.miraeasset.com (미래에셋그룹)  (스펙 문서 : _스펙_sl2_miraeasset.md)
   이 파일 하나로 전 페이지의 헤더·푸터·타이포·컴포넌트를 담당한다.
   ========================================================================= */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);
  font-family:Pretendard,"Pretendard Variable",-apple-system,BlinkMacSystemFont,"Malgun Gothic","맑은 고딕",sans-serif;
  font-size:16px;font-weight:var(--fw-body);line-height:1.65;letter-spacing:-0.02em;
  overflow-x:hidden;-webkit-font-smoothing:antialiased}
img,svg,video{max-width:100%;height:auto}
img{display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
h1,h2,h3,h4{margin:0;font-weight:var(--fw-head);letter-spacing:-0.03em;line-height:1.22}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
table{border-collapse:collapse;width:100%}
.tnum{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.skip{position:absolute;left:-9999px;top:0;z-index:99;background:var(--pri);color:var(--on-pri);
  padding:12px 20px;font-weight:700}
.skip:focus{left:0}

.wrap{width:100%;max-width:var(--cw);margin:0 auto;padding:0 var(--gut)}

/* ---------- 헤더 ---------- */
.hd{position:sticky;top:0;z-index:60;background:var(--hd-bg);border-bottom:1px solid var(--hd-bd);
  backdrop-filter:saturate(1.4) blur(8px)}
.hd-in{width:100%;max-width:var(--cw);margin:0 auto;padding:0 var(--gut);
  display:flex;align-items:center;gap:28px;height:var(--hd-h)}
.logo{display:flex;flex-direction:column;justify-content:center;line-height:1;flex:0 0 auto}
.logo .lk{font-size:21px;font-weight:800;letter-spacing:-.04em;color:var(--hd-fg)}
.logo .le{margin-top:5px;font-size:10px;font-weight:600;letter-spacing:.16em;color:var(--hd-fg-2)}
.gnb{flex:1 1 auto;min-width:0}
.gnb-l{display:flex;gap:var(--nav-gap)}
.gi{position:relative}
.gi>a{display:flex;align-items:center;height:var(--hd-h);font-size:16px;font-weight:600;color:var(--hd-fg);
  white-space:nowrap;border-bottom:2px solid transparent}
.gi>a:hover,.gi>a.on{color:var(--pri);border-bottom-color:var(--pri)}
.dd{position:absolute;left:50%;transform:translateX(-50%) translateY(6px);top:var(--hd-h);min-width:216px;
  background:var(--surface);border:1px solid var(--bd);border-radius:var(--r);padding:12px 0;
  box-shadow:var(--sh);opacity:0;visibility:hidden;transition:.18s}
.gi:hover .dd,.gi:focus-within .dd{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.dd a{display:block;padding:9px 20px;font-size:14.5px;color:var(--sub);white-space:nowrap}
.dd a:hover{background:var(--bg2);color:var(--pri)}
.hd-r{display:flex;align-items:center;gap:14px;flex:0 0 auto}
.tel{display:inline-flex;align-items:center;gap:7px;font-size:15px;font-weight:700;color:var(--hd-fg)}
.tel svg{width:17px;height:17px;fill:none;stroke:var(--pri);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.mtog{display:none;width:44px;height:44px;background:none;border:0;padding:10px;cursor:pointer}
.mtog span{display:block;height:2px;background:var(--hd-fg);margin:5px 0;border-radius:2px;transition:.2s}
.mtog[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.mtog[aria-expanded="true"] span:nth-child(2){opacity:0}
.mtog[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mmenu{display:none;background:var(--surface);border-bottom:1px solid var(--bd);padding:8px var(--gut) 26px}
.mmenu[hidden]{display:none}
.mmenu .mg{display:block;padding:14px 0;font-size:17px;font-weight:700;border-bottom:1px solid var(--bd)}
.mmenu ul ul{padding:8px 0 14px}
.mmenu ul ul a{display:block;padding:8px 0 8px 14px;font-size:15px;color:var(--sub)}

/* ---------- 버튼 ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:15px 30px;border-radius:var(--r-btn);font-size:16px;font-weight:700;
  border:1px solid transparent;transition:background .2s,color .2s,border-color .2s;cursor:pointer}
.btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.btn.p{background:var(--pri);color:var(--on-pri);border-color:var(--pri)}
.btn.p:hover{background:var(--pri-d);border-color:var(--pri-d)}
.btn.s{background:transparent;color:var(--ink);border-color:var(--bd-s)}
.btn.s:hover{background:var(--bg2)}
.btn.g{background:transparent;color:#fff;border-color:rgba(255,255,255,.75)}
.btn.g:hover{background:rgba(255,255,255,.14)}
.btn.sm{padding:11px 20px;font-size:14.5px}

/* ---------- 히어로 ---------- */
.hero{position:relative;min-height:var(--hero-h);display:flex;align-items:flex-end;
  background:var(--ink-d);color:#fff;overflow:hidden;isolation:isolate}
.hero .hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;background:var(--hero-scrim)}
.hero .wrap{padding-top:120px;padding-bottom:96px}
.hero .eyebrow{color:var(--pri-on-dark);}
.hero h1{font-size:clamp(38px,5.6vw,var(--h1-max));max-width:17em}
.hero .hlead{margin-top:26px;max-width:44em;font-size:clamp(16px,1.35vw,19px);line-height:1.72;color:rgba(255,255,255,.9)}
.hbtn{display:flex;flex-wrap:wrap;gap:12px;margin-top:40px}

.phero{position:relative;isolation:isolate;overflow:hidden;
  background:var(--phero-bg);color:var(--phero-fg);border-bottom:1px solid var(--phero-bd)}
.phero .wrap{padding-top:64px;padding-bottom:64px}
.phero.has-img{background:var(--ink-d);color:#fff;border-bottom:0}
.phero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.phero.has-img::after{content:"";position:absolute;inset:0;z-index:-1;background:var(--hero-scrim)}
.phero.has-img .wrap{padding-top:104px;padding-bottom:92px}
.phero.has-img h1{color:#fff}
.phero.has-img .hlead{color:rgba(255,255,255,.88)}
.phero.has-img .bc ol{color:rgba(255,255,255,.74)}
.phero.has-img .bc a:hover{color:#fff}
.phero h1{margin-top:20px;font-size:clamp(30px,3.6vw,48px)}
.phero .hlead{margin-top:20px;max-width:52em;font-size:17.5px;line-height:1.75;color:var(--phero-sub)}
.eyebrow{margin:0;font-size:12.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--pri)}

.bc ol{display:flex;flex-wrap:wrap;gap:8px;font-size:13px;color:var(--phero-sub)}
.bc li+li::before{content:"/";margin-right:8px;opacity:.5}
.bc a:hover{color:var(--pri);text-decoration:underline}

/* ---------- 섹션 ---------- */
.sec{padding:var(--sec-pad) 0}
.sec.alt{background:var(--bg2)}
.sec.dark{background:var(--ink-d);color:#fff}
.sec.dark h2,.sec.dark h3{color:#fff}
.sec.dark .lead,.sec.dark p{color:rgba(255,255,255,.82)}
.sec.dark .card{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.16)}
.sec.dark .eyebrow{color:var(--pri-on-dark)}
.sec.dark table th,.sec.dark table td{border-color:rgba(255,255,255,.18)}
.sec.dark thead th{background:rgba(255,255,255,.07);color:#fff}
.sec.dark .ticks li{color:rgba(255,255,255,.85)}
.sec.tight{padding:calc(var(--sec-pad) * .58) 0}
.sec+.sec{border-top:0}
h2{font-size:clamp(25px,2.8vw,var(--h2-max))}
h3{font-size:19px}
.lead{margin-top:18px;max-width:56em;font-size:17.5px;line-height:1.8;color:var(--sub)}
.blk>h2+.lead,.prose>h2+.lead{margin-top:20px}
.prose p{margin-top:18px;font-size:16.5px;line-height:1.9;color:var(--body)}
.prose h2+p{margin-top:22px}
.note{margin-top:14px;font-size:14px;line-height:1.7;color:var(--sub)}
.blk>h2,.prose>h2{position:relative;padding-top:22px}
.blk>h2::before,.prose>h2::before{content:"";position:absolute;top:0;left:0;width:44px;height:3px;background:var(--pri)}

/* ---------- 카드 ---------- */
.cards{display:grid;gap:var(--gap);margin-top:44px}
.cards.c2{grid-template-columns:repeat(2,1fr)}
.cards.c3{grid-template-columns:repeat(3,1fr)}
.cards.c4{grid-template-columns:repeat(4,1fr)}
.card{background:var(--surface);border:1px solid var(--bd);border-radius:var(--r);padding:34px 30px 32px}
.card .ic{display:flex;align-items:center;justify-content:center;width:46px;height:46px;margin-bottom:20px;
  border-radius:var(--r-ic);background:var(--pri-soft)}
.card .ic svg{width:23px;height:23px;fill:none;stroke:var(--pri);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.card .num{display:block;margin-bottom:16px;font-size:13px;font-weight:800;letter-spacing:.12em;color:var(--pri)}
.card h3{font-size:19px}
.card p{margin-top:13px;font-size:15.5px;line-height:1.8;color:var(--body)}
.card .meta{margin-top:14px;padding-top:14px;border-top:1px solid var(--bd);font-size:13.5px;color:var(--sub)}
.card.pf{padding:0;overflow:hidden}
.card.pf .pfi img{width:100%;aspect-ratio:4/3;object-fit:cover}
.card.pf h3{padding:26px 28px 0}
.card.pf .role{padding:0 28px;margin-top:7px;font-size:14px;font-weight:700;color:var(--pri)}
.card.pf p{padding:0 28px 28px}

/* ---------- 링크 그리드(허브) ---------- */
.lgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap);margin-top:44px}
.lcard{display:block;padding:32px 30px;background:var(--surface);border:1px solid var(--bd);
  border-radius:var(--r);transition:border-color .2s,transform .2s}
.lcard:hover{border-color:var(--pri);transform:translateY(-3px)}
.lcard h3{font-size:19px}
.lcard p{margin-top:12px;font-size:15px;line-height:1.78;color:var(--body)}
.go{display:inline-flex;align-items:center;gap:7px;margin-top:20px;font-size:14px;font-weight:700;color:var(--pri)}
.go svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ---------- 지표 ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap);margin-top:46px;
  border-top:1px solid var(--bd)}
.stat{padding:36px 4px 0;border-right:1px solid var(--bd)}
.stat:last-child{border-right:0}
.stat .v{display:block;font-size:clamp(34px,3.8vw,50px);font-weight:800;letter-spacing:-.04em;color:var(--ink);line-height:1}
.stat .v i{font-style:normal;font-size:.42em;font-weight:700;margin-left:5px;color:var(--pri)}
.stat .k{display:block;margin-top:14px;font-size:15px;font-weight:700}
.stat .d{display:block;margin-top:7px;font-size:13.5px;line-height:1.65;color:var(--sub)}
.sec.dark .stat .v{color:#fff}
.sec.dark .stats,.sec.dark .stat{border-color:rgba(255,255,255,.2)}

/* ---------- 좌우 분할 ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,5vw,84px);align-items:center}
.split.left .split-t{order:2}
.split.left .split-i{order:1}
.split-i{margin:0}
.split-i img{width:100%;border-radius:var(--r);aspect-ratio:4/3;object-fit:cover}
.split-i figcaption{margin-top:14px;font-size:13.5px;color:var(--sub)}

/* ---------- 체크리스트 ---------- */
.ticks{margin-top:26px;display:grid;gap:14px}
.ticks.two{grid-template-columns:repeat(2,1fr);margin-top:38px;gap:16px 40px}
.ticks li{display:flex;gap:12px;font-size:16px;line-height:1.72;color:var(--body)}
.ticks svg{flex:0 0 20px;width:20px;height:20px;margin-top:3px;fill:none;stroke:var(--pri);stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round}

/* ---------- 스텝 ---------- */
.steps{margin-top:44px;display:grid;gap:0;border-top:1px solid var(--bd)}
.steps li{display:grid;grid-template-columns:96px 1fr;gap:28px;padding:30px 0;border-bottom:1px solid var(--bd)}
.sn{font-size:30px;font-weight:800;letter-spacing:-.03em;color:var(--pri);line-height:1}
.steps h3{font-size:19px}
.steps p{margin-top:11px;font-size:16px;line-height:1.82;color:var(--body)}
.steps .meta{margin-top:10px;font-size:13.5px;color:var(--sub)}

/* ---------- 연혁 ---------- */
.tl{margin-top:44px;border-left:2px solid var(--bd);padding-left:34px;display:grid;gap:34px}
.tl li{position:relative;display:grid;grid-template-columns:88px 1fr;gap:24px}
.tl li::before{content:"";position:absolute;left:-42px;top:6px;width:11px;height:11px;border-radius:50%;
  background:var(--pri);box-shadow:0 0 0 4px var(--bg)}
.tl .y{font-size:20px;font-weight:800;color:var(--pri);line-height:1.4}
.tl h3{font-size:17.5px}
.tl p{margin-top:9px;font-size:15.5px;line-height:1.8;color:var(--body)}

/* ---------- 표 ---------- */
.tw{margin-top:40px;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
table{min-width:560px;font-size:15.5px}
caption{text-align:left}
th,td{padding:16px 18px;border-bottom:1px solid var(--bd);text-align:left;vertical-align:top;line-height:1.7}
thead th{background:var(--bg2);font-weight:700;font-size:14.5px;color:var(--ink);border-bottom:2px solid var(--bd-s);
  white-space:nowrap}
tbody th{font-weight:700;color:var(--ink);white-space:nowrap}
tbody td{color:var(--body)}
tbody tr:hover{background:var(--bg2)}

/* ---------- FAQ ---------- */
.faq{margin-top:40px;border-top:1px solid var(--bd)}
.faq details{border-bottom:1px solid var(--bd)}
.faq summary{position:relative;padding:24px 46px 24px 0;font-size:17px;font-weight:700;cursor:pointer;
  list-style:none;line-height:1.6}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:12px;top:31px;width:11px;height:11px;
  border-right:2px solid var(--pri);border-bottom:2px solid var(--pri);transform:rotate(45deg);transition:.2s}
.faq details[open] summary::after{transform:rotate(-135deg);top:34px}
.faq details>div{padding:0 0 26px}
.faq p{font-size:16px;line-height:1.86;color:var(--body)}

/* ---------- 인용 ---------- */
.pull{margin:0;padding:44px 0 0;border-top:3px solid var(--pri)}
.pull blockquote{margin:0}
.pull p{font-size:clamp(21px,2.3vw,29px);font-weight:700;line-height:1.55;letter-spacing:-.03em}
.pull figcaption{margin-top:22px;font-size:14.5px;font-weight:700;color:var(--sub)}

/* ---------- 갤러리 ---------- */
.gal{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap);margin-top:44px}
.gal figure{margin:0}
.gal img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r)}
.gal figcaption{margin-top:13px;font-size:14px;line-height:1.7;color:var(--sub)}

/* ---------- 콜아웃 ---------- */
.callout{display:flex;gap:20px;padding:30px 32px;background:var(--pri-soft);
  border-left:3px solid var(--pri);border-radius:0 var(--r) var(--r) 0}
.callout .ic{flex:0 0 26px}
.callout svg{width:26px;height:26px;fill:none;stroke:var(--pri);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.callout h3{font-size:17px}
.callout p{margin-top:10px;font-size:15.5px;line-height:1.82;color:var(--body)}

/* ---------- CTA ---------- */
.cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:32px;
  padding:52px 54px;background:var(--ink-d);color:#fff;border-radius:var(--r)}
.cta h2{font-size:clamp(23px,2.4vw,32px);color:#fff}
.cta h2::before{display:none}
.cta p{margin-top:14px;font-size:16.5px;line-height:1.8;color:rgba(255,255,255,.82);max-width:46em}
.cta-b{display:flex;flex-wrap:wrap;gap:12px}
.cta .btn.s{color:#fff;border-color:rgba(255,255,255,.6)}
.cta .btn.s:hover{background:rgba(255,255,255,.13)}

/* ---------- 푸터 ---------- */
.ft{background:var(--ft-bg);color:var(--ft-fg);border-top:1px solid var(--ft-bd)}
.ft-in{width:100%;max-width:var(--cw);margin:0 auto;padding:78px var(--gut) 46px}
.ft-top{display:grid;grid-template-columns:minmax(260px,1fr) 2.1fr;gap:56px}
.ft-b .lk{font-size:22px;font-weight:800;letter-spacing:-.04em;color:var(--ft-hd)}
.ft-b .le{display:block;margin-top:6px;font-size:10.5px;font-weight:600;letter-spacing:.18em;color:var(--ft-fg)}
.ft-tag{margin-top:20px;font-size:15px;line-height:1.8;color:var(--ft-fg)}
.ft-cc{margin-top:26px;display:grid;gap:11px}
.ft-cc li{display:flex;align-items:flex-start;gap:10px;font-size:14.5px;line-height:1.6;color:var(--ft-hd)}
.ft-cc svg{flex:0 0 17px;width:17px;height:17px;margin-top:2px;fill:none;stroke:var(--pri-on-dark);stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.ft-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:34px}
.fc h2{font-size:14.5px;font-weight:700;color:var(--ft-hd)}
.fc h2::before{display:none}
.fc ul{margin-top:16px;display:grid;gap:10px}
.fc a{font-size:14px;line-height:1.6;color:var(--ft-fg)}
.fc a:hover{color:var(--pri-on-dark);text-decoration:underline}
.ft-bot{margin-top:52px;padding-top:28px;border-top:1px solid var(--ft-bd)}
.ft-pol{display:flex;flex-wrap:wrap;gap:22px}
.ft-pol a{font-size:13.5px;color:var(--ft-hd)}
.ft-pol a:hover{text-decoration:underline}
.ft-addr{margin-top:18px;font-size:13.5px;line-height:1.75;color:var(--ft-fg)}
.sample-notice{margin-top:14px;padding:13px 16px;border:1px dashed var(--ft-bd);border-radius:var(--r);
  font-size:13px;line-height:1.7;color:var(--ft-hd);background:var(--ft-note)}
.ft-copy{margin-top:16px;font-size:12.5px;color:var(--ft-fg)}

/* ---------- 반응형 ---------- */
@media (max-width:1180px){
  .cards.c4{grid-template-columns:repeat(2,1fr)}
  .stats{grid-template-columns:repeat(2,1fr);gap:0}
  .stat{padding:32px 4px;border-bottom:1px solid var(--bd)}
  .stat:nth-child(2n){border-right:0}
}
@media (max-width:1024px){
  .gnb,.hd-r .tel,.hd-r .btn{display:none}
  .mtog{display:block}
  .mmenu.open{display:block}
  .cards.c3,.lgrid,.gal{grid-template-columns:repeat(2,1fr)}
  .split{grid-template-columns:1fr}
  .split.left .split-t,.split.left .split-i{order:initial}
  .ft-top{grid-template-columns:1fr;gap:44px}
}
@media (max-width:720px){
  .hero .wrap{padding-top:88px;padding-bottom:66px}
  .cards.c2,.cards.c3,.cards.c4,.lgrid,.gal,.ticks.two{grid-template-columns:1fr}
  .steps li{grid-template-columns:1fr;gap:10px}
  .tl li{grid-template-columns:1fr;gap:6px}
  .cta{padding:38px 26px}
  .card{padding:28px 24px}
  .stats{grid-template-columns:1fr}
  .stat{border-right:0}
  .ft-cols{grid-template-columns:1fr 1fr}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* 미래에셋 문법 : 카드 라운드를 거의 쓰지 않고 선으로 구분한다 */
/* 주 CTA 는 원본과 같이 네이비 면으로 간다 — 오렌지(#e37500) 위 흰 글자는 3.08:1 로 본문 크기에서 미달한다.
   오렌지는 원본처럼 활성 표시·아이콘·강조선에만 쓴다. */
.btn.p{background:var(--navy);border-color:var(--navy);color:#fff}
.btn.p:hover{background:#043b72;border-color:#043b72}
.btn.s{border-color:var(--navy);color:var(--navy)}
.lcard:hover{border-color:var(--pri)}
.stat .v{color:var(--navy)}
.phero .eyebrow{color:var(--pri-d)}


/* ===== 참고사 문법 v1 — KCC 실측 (2026-08-16) =========================
   컨테이너 1240 · 히어로 44 : 섹션제목 32 : 본문 16 · 섹션패딩 90/100 · 라운드 6px
   주색 #00713C (hue 152 · 흰 배경 AA 통과) · 오버레이는 rgba(0,0,0,.55) 단색
   되돌리려면 이 블록만 지운다. */
:root{
  --pri:#00713C; --pri-d:#00582E; --pri-soft:#EAF3EF; --acc:#00713C; --focus:#00713C;
  --cw:1240px; --gut:24px; --bd:#dddddd; --bg2:#F5F5F5;
  --r:6px; --r-btn:6px;
  --hero-scrim:rgba(0,0,0,.55);
  --h1-max:44px; --h2-max:32px;
}
.wrap{max-width:var(--cw);padding:0 var(--gut)}

/* LNB 탭바 */
.lnb{position:sticky;top:64px;z-index:50;background:#fff;border-bottom:1px solid #e5e5e5}
.lnb-in{max-width:var(--cw);margin:0 auto;padding:0 var(--gut);display:flex;align-items:center;
  gap:28px;height:56px;overflow-x:auto;scrollbar-width:none}
.lnb-in::-webkit-scrollbar{display:none}
.lnb .ttl{flex:0 0 auto;font-size:15px;font-weight:700;letter-spacing:-.02em;color:#111;
  padding-right:28px;border-right:1px solid #e5e5e5;white-space:nowrap}
.lnb a{flex:0 0 auto;display:inline-flex;align-items:center;height:56px;font-size:14px;
  font-weight:500;color:#666;white-space:nowrap;border-bottom:2px solid transparent}
.lnb a:hover{color:#111}
.lnb a.on{color:#111;font-weight:700;border-bottom-color:#111}

/* 히어로 : 다크 이미지 + 단색 오버레이 */
.phero.has-img,.hero{min-height:520px;display:flex;align-items:center}
.phero.has-img .wrap,.hero .wrap{padding-top:0;padding-bottom:0;width:100%}
.phero .wrap{padding-top:72px;padding-bottom:72px}
.phero h1,.hero h1{margin-top:16px;font-size:clamp(28px,3.2vw,44px);line-height:1.28;
  font-weight:700;letter-spacing:-.02em}
.phero .hlead,.hero .hlead{margin-top:14px;max-width:44em;font-size:clamp(16px,1.5vw,21px);
  line-height:1.55;font-weight:600;letter-spacing:-.02em}
.phero.has-img .hlead,.hero .hlead{color:rgba(255,255,255,.94)}

/* 섹션 리듬 */
.sec{padding:90px 0 100px}
.sec.alt{background:var(--bg2);padding:90px 0 100px}
.sec.tight{padding:64px 0 72px}
.sec+.sec{border-top:0}

/* 제목 2단계 */
h2{font-size:clamp(22px,2.4vw,32px);line-height:1.4;letter-spacing:-.02em}
.blk>h2,.prose>h2{padding-top:0}
.blk>h2::before,.prose>h2::before{display:none}
.eyebrow{margin:0 0 12px;font-size:18px;line-height:1.2;font-weight:700;letter-spacing:-.02em;
  text-transform:none;color:#111}
.phero .eyebrow,.hero .eyebrow,.sec.dark .eyebrow{color:#fff;opacity:.86;font-size:13px;
  letter-spacing:.14em;text-transform:uppercase}
.lead{margin-top:16px;font-size:16px;line-height:1.8;color:#555}
.prose p{font-size:16px;line-height:1.85;color:#333}

/* 카드 */
.card,.lcard{border-radius:6px;border:1px solid var(--bd);background:#fff;padding:30px 28px}
.card:hover,.lcard:hover{border-color:#111}
.card h3{font-size:18px;line-height:1.2;letter-spacing:-.02em}
.card p{margin-top:12px;font-size:16px;line-height:1.75;color:#555}
.card .meta{margin-top:14px;padding-top:14px;font-size:13px;color:#6F7378}
.card .ic{border-radius:6px;width:50px;height:50px;margin-bottom:16px;background:var(--pri-soft)}
.cards{gap:20px;margin-top:34px}
.gal img,.split-i img,.card.pf .pfi img{border-radius:6px}
.tw{margin-top:30px}
.tw table{border-top:2px solid #111}
.pull{border-top:2px solid #111;padding-top:34px}
.stat .v{font-size:clamp(30px,3.2vw,44px);font-weight:700;color:var(--pri)}

/* 하단 CTA */
.cta{border-radius:0;padding:54px 56px;background:#262A2E}
.cta h2{font-size:clamp(20px,2vw,26px);line-height:1.6;font-weight:700}
.cta p{font-size:15px;line-height:1.8}

@media (max-width:1024px){
  .sec,.sec.alt{padding:60px 0 68px}
  .phero.has-img,.hero{min-height:360px}
  .cta{padding:38px 26px}
}
@media (max-width:720px){
  .sec,.sec.alt{padding:46px 0 52px}
  .lnb-in{gap:20px}.lnb .ttl{padding-right:20px}
}


/* ===== 미래에셋 서브 문법 (2026-08-16 실측) ==========================
   주황 띠 148 · 탭바 56 · 좌제목(38)/우내용 2단 · 컨테이너 1200 · 라운드 0
   되돌리려면 이 블록만 지운다. */
:root{
  --pri:#043B72; --pri-d:#032B52; --pri-soft:#EAF0F7;
  --band:#D96F00; --acct:#A85300; --deco:#F58220;
  --cw:1232px; --gut:16px; --bd:#E3E6EA; --bg2:#F5F6F8;
  --r:0px; --r-btn:0px; --focus:#043B72;
}
.wrap{max-width:var(--cw);padding:0 var(--gut)}

/* ---- 주황 띠 히어로 : 사진을 쓰지 않는다 ---- */
.phero{position:relative;background:var(--band);color:#fff;min-height:148px;
  display:flex;align-items:center;overflow:hidden;border-bottom:0}
.phero::before{content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(0,0,0,.18),rgba(255,255,255,.16));pointer-events:none}
.phero-img,.phero.has-img::after{display:none!important}
.phero.has-img{background:var(--band);color:#fff}
.phero .wrap{position:relative;z-index:1;padding-top:0;padding-bottom:0;width:100%}
.phero h1{margin:0;font-size:clamp(24px,2.6vw,38px);line-height:1.4;font-weight:700;
  letter-spacing:-.03em;color:#fff}
.phero .hlead{margin:8px 0 0;max-width:60em;font-size:15px;line-height:1.7;font-weight:400;
  color:rgba(255,255,255,.94)}
.phero .eyebrow{display:none}
.phero .bc,.phero .bc ol,.phero .bc a{color:rgba(255,255,255,.88);font-size:13px}

/* ---- 탭바 : 선택 탭에 주황 밑줄 ---- */
.lnb{position:sticky;top:64px;z-index:50;background:#fff;border-bottom:1px solid var(--bd)}
.lnb-in{max-width:var(--cw);margin:0 auto;padding:0 var(--gut);display:flex;align-items:center;
  gap:30px;height:56px;overflow-x:auto;scrollbar-width:none}
.lnb-in::-webkit-scrollbar{display:none}
.lnb .ttl{flex:0 0 auto;font-size:15px;font-weight:700;color:#181A1F;padding-right:26px;
  border-right:1px solid var(--bd);white-space:nowrap}
.lnb a{flex:0 0 auto;display:inline-flex;align-items:center;height:56px;font-size:15px;
  font-weight:500;color:#5A616B;white-space:nowrap;border-bottom:3px solid transparent}
.lnb a:hover{color:#181A1F}
.lnb a.on{color:#181A1F;font-weight:700;border-bottom-color:var(--deco)}

/* ---- 섹션 : 흰/회색 교대 ---- */
.sec{padding:76px 0 88px}
.sec.alt{background:var(--bg2)}
.sec.tight{padding:56px 0 64px}
.sec+.sec{border-top:0}

/* ---- ★좌 제목 / 우 내용 2단 : HTML 을 안 고치고 CSS 그리드로 ---- */
.sec .blk,.sec .prose{display:grid;grid-template-columns:minmax(0,330px) minmax(0,1fr);
  gap:28px 40px;align-items:start}
.sec .blk>h2,.sec .prose>h2{grid-column:1;grid-row:1;margin:0;padding-top:0;
  font-size:clamp(22px,2.4vw,38px);line-height:1.4;font-weight:700;letter-spacing:-.03em;color:#181A1F}
.sec .blk>h2::before,.sec .prose>h2::before{display:none}
.sec .blk>*:not(h2),.sec .prose>*:not(h2){grid-column:2}
.sec .blk>*:nth-child(2),.sec .prose>*:nth-child(2){grid-row:1}
@media (max-width:900px){
  .sec .blk,.sec .prose{grid-template-columns:1fr;gap:16px}
  .sec .blk>*,.sec .prose>*{grid-column:1!important;grid-row:auto!important}
}

.lead{margin-top:0;font-size:16px;line-height:1.85;color:#3C424B}
.prose p{font-size:16px;line-height:1.9;color:#3C424B}
.eyebrow{margin:0 0 10px;font-size:14px;font-weight:700;letter-spacing:.06em;
  text-transform:none;color:var(--acct)}

/* ---- 카드 : 라운드 0 · 1px 테두리 ---- */
.card,.lcard{border-radius:0;border:1px solid var(--bd);background:#fff;padding:30px 28px}
.card:hover,.lcard:hover{border-color:var(--pri)}
.card h3{font-size:18px;line-height:1.35;font-weight:700;letter-spacing:-.03em}
.card p{margin-top:11px;font-size:15px;line-height:1.75;color:#5A616B}
.card .meta{margin-top:14px;padding-top:13px;font-size:13px;font-weight:700;color:var(--acct)}
.card .ic{border-radius:0;width:44px;height:44px;margin-bottom:16px;background:transparent}
.card .ic svg{width:44px;height:44px;stroke:var(--pri);stroke-width:1.4}
.cards{gap:1px;margin-top:0;background:var(--bd);border:1px solid var(--bd)}
.cards .card{border:0}
.gal img,.split-i img,.card.pf .pfi img{border-radius:0}
.tw{margin-top:0}
.tw table{border-top:2px solid #181A1F}
.tw thead th{background:var(--bg2)}
.pull{border-top:0;background:var(--pri);color:#fff;padding:52px 48px}
.pull p{font-size:clamp(18px,1.9vw,25px);line-height:1.6;font-weight:400;letter-spacing:-.03em}
.pull figcaption{color:rgba(255,255,255,.8);font-weight:400}
.stat .v{font-size:clamp(30px,3.4vw,48px);font-weight:400;letter-spacing:-.04em;color:var(--pri)}
.stat .v i{font-size:.3em;font-weight:700;color:var(--pri)}
.steps{border-top:1px solid #181A1F;margin-top:0}
.steps .sn{color:var(--acct);font-weight:700}
.ticks li::marker{color:var(--deco)}
.callout{border:1px solid var(--bd);border-left:3px solid var(--deco);border-radius:0}

/* ---- 하단 CTA ---- */
.cta{border-radius:0;padding:56px 52px;background:#181A1F}
.cta h2{font-size:clamp(20px,2vw,28px);line-height:1.45;font-weight:400}
.cta p{font-size:15px;line-height:1.8}
.btn{border-radius:0}
.btn.p{background:#fff;color:#181A1F;border-color:#fff}
.btn.p:hover{background:var(--deco);color:#fff;border-color:var(--deco)}

@media (max-width:1024px){
  .sec{padding:52px 0 60px}
  .phero{min-height:112px}
  .cta{padding:38px 26px}
}
@media (max-width:720px){
  .sec{padding:42px 0 48px}
  .lnb-in{gap:20px}.lnb .ttl{padding-right:18px}
}



/* ---- 서브 보정 v2 (원인 확정 후) ------------------------------------
   ① 주황 띠가 529px 이었다. 범인은 build10 의 «.phero.has-img .wrap{padding:104/92}».
      내 «.phero .wrap» 은 특정도에서 진다 → 같은 특정도로 다시 쓴다
   ② 「앞으로의 20년」 우측 칸이 좁았던 건 .prose 가 «.split-t 안»에 있는데
      내가 모든 .prose 에 2단 그리드를 걸었기 때문 → «직계 자식»에만 건다 */
.phero.has-img{min-height:148px;background:var(--band);color:#fff}
.phero.has-img .wrap{padding-top:24px;padding-bottom:24px}
.phero.has-img::after{display:none}

/* 2단은 .sec > .wrap 의 «직계» blk/prose 에만 */
.sec .blk,.sec .prose{display:block}
.sec>.wrap>.blk,.sec>.wrap>.prose{display:grid;
  grid-template-columns:minmax(0,330px) minmax(0,1fr);gap:26px 40px;align-items:start}
.sec>.wrap>.blk>h2,.sec>.wrap>.prose>h2{grid-column:1;grid-row:1;margin:0;max-width:14em}
.sec>.wrap>.blk>*:not(h2),.sec>.wrap>.prose>*:not(h2){grid-column:2}
.sec>.wrap>.blk>*:nth-child(2),.sec>.wrap>.prose>*:nth-child(2){grid-row:1}
/* 표·갤러리처럼 넓어야 하는 블록은 다시 한 단으로 */
.sec>.wrap>.blk:has(.tw),.sec>.wrap>.blk:has(.gal),
.sec>.wrap>.blk:has(table),.sec>.wrap>.blk:has(.cards){display:block}
.sec>.wrap>.blk:has(.tw)>h2,.sec>.wrap>.blk:has(.gal)>h2,
.sec>.wrap>.blk:has(table)>h2,.sec>.wrap>.blk:has(.cards)>h2{margin:0 0 24px;max-width:24em}
@media (max-width:900px){
  .sec>.wrap>.blk,.sec>.wrap>.prose{display:block}
  .sec>.wrap>.blk>h2,.sec>.wrap>.prose>h2{margin:0 0 16px;max-width:none}
}


/* ---- 서브 보정 v3 (2026-08-16 · 라이브 5쪽 실캡처 육안검수 뒤) ---------
   ① 어절 중간 끊김 — word-break 가 normal 이라 「현금흐름이」가 「현 / 금흐름이」로,
      「먼저입니다」가 「먼저입니 / 다」로 잘렸다(biz-wm·about-ceo·about-history·careers)
   ② LNB 탭바가 헤더 밑에 12px 잠겨 있었다 — .lnb{top:64px} 인데 헤더는 76+1px
   ③ 좌제목 2단에서 우측 첫 요소를 grid-row:1 로 못박아 두어, 제목이 3줄이 되면
      우측 첫 문단 뒤에 130px 빈칸이 생겼다 → 제목을 전 행에 걸치고 우측은 흐르게
   ④ .lgrid(허브 카드)와 h2 없는 .blk 이 우측 800px 칸에 갇혀 있었다 → 전폭
   ⑤ 주황 띠에 검증 안 된 linear-gradient 가 걸려 있었다(연한 블랙 단색 규칙 위반)
      → 제거해 실측색 #D96F00 단색 · 높이 156 → 148
   ⑥ 띠 안 브레드크럼이 rgba(255,255,255,.74)=2.51:1 이었다 — 내 규칙이
      「.phero.has-img .bc ol」(0,3,1) 에 특정도로 지고 있었다 → 흰색
   ⑦ keep-all 이 min-content 를 넓히므로 격자 1fr 을 minmax(0,1fr) 로 굳힌다
   되돌리려면 이 블록만 지운다. */

/* ① 한국어 줄바꿈 — 어절 중간에서 끊지 않는다 */
html,body{word-break:keep-all;overflow-wrap:break-word}
h1,h2,h3,h4,p,li,dt,dd,th,td,a,span,button,summary,figcaption,caption,blockquote{
  word-break:keep-all}
.ft-cc li,.ft-addr,.sample-notice,code,.tel{overflow-wrap:anywhere}

/* ② 탭바 sticky 기준 = 헤더 높이(76) + 경계선(1) */
.lnb{top:calc(var(--hd-h) + 1px)}

/* ③ 좌 제목 / 우 내용 — 제목이 전 행을 차지하고 우측은 이어 흐른다 */
.sec>.wrap>.blk,.sec>.wrap>.prose{column-gap:40px;row-gap:0}
.sec>.wrap>.blk>h2,.sec>.wrap>.prose>h2{grid-row:1 / span 30;align-self:start}
.sec>.wrap>.blk>*:not(h2),.sec>.wrap>.prose>*:not(h2){grid-row:auto;margin-top:24px}
.sec>.wrap>.blk>*:nth-child(2),.sec>.wrap>.prose>*:nth-child(2){grid-row:auto;margin-top:0}

/* ④ 전폭이어야 하는 블록 — .prose 쪽과 .lgrid, h2 없는 blk 까지 */
.sec>.wrap>.blk:has(.lgrid),.sec>.wrap>.prose:has(.lgrid),
.sec>.wrap>.prose:has(.tw),.sec>.wrap>.prose:has(table),
.sec>.wrap>.prose:has(.gal),.sec>.wrap>.prose:has(.cards),
.sec>.wrap>.blk:not(:has(>h2)),.sec>.wrap>.prose:not(:has(>h2)){display:block}
.sec>.wrap>.blk:has(.lgrid)>h2,.sec>.wrap>.prose:has(.lgrid)>h2,
.sec>.wrap>.prose:has(.tw)>h2,.sec>.wrap>.prose:has(table)>h2,
.sec>.wrap>.prose:has(.gal)>h2,.sec>.wrap>.prose:has(.cards)>h2{margin:0 0 24px;max-width:24em}

/* ⑤⑥ 주황 띠 : 단색 · 148px · 띠 안 글자는 순백 */
.phero::before{display:none}
.phero,.phero.has-img{background:var(--band);min-height:148px}
.phero .wrap,.phero.has-img .wrap{padding-top:20px;padding-bottom:20px}
.phero.has-img .bc,.phero.has-img .bc ol,.phero.has-img .bc a,
.phero.has-img .bc li,.phero .bc,.phero .bc ol,.phero .bc a{color:#fff}
.phero.has-img .hlead,.phero .hlead{color:#fff}

/* ⑦ 격자 굳히기 — 어절 보존 뒤 min-content 로 밀리지 않게 */
.cards.c2{grid-template-columns:repeat(2,minmax(0,1fr))}
.cards.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
.cards.c4{grid-template-columns:repeat(4,minmax(0,1fr))}
.lgrid,.gal{grid-template-columns:repeat(3,minmax(0,1fr))}
.ticks.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.stats{grid-template-columns:repeat(4,minmax(0,1fr))}
.steps li{grid-template-columns:96px minmax(0,1fr)}
.tl li{grid-template-columns:88px minmax(0,1fr)}
.split{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.ft-top{grid-template-columns:minmax(260px,1fr) minmax(0,2.1fr)}
@media (min-width:1025px){
  /* 카드가 4장뿐이면 3+1 고아줄이 생긴다 → 4열 */
  .lgrid:has(>:nth-child(4):last-child){grid-template-columns:repeat(4,minmax(0,1fr))}
  .lgrid:has(>:nth-child(2):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:1180px){
  .cards.c4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:1024px){
  .cards.c3,.lgrid,.gal{grid-template-columns:repeat(2,minmax(0,1fr))}
  .split{grid-template-columns:minmax(0,1fr)}
  .ft-top{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:720px){
  .cards.c2,.cards.c3,.cards.c4,.lgrid,.gal,.ticks.two,.stats{
    grid-template-columns:minmax(0,1fr)}
  .steps li,.tl li{grid-template-columns:minmax(0,1fr)}
}

/* ⑧ 다크 섹션 안의 인용이 「네이비 위 네이비」 이중 판이 되어 이음매처럼 보였다
      (#002b57 위 #043B72) → 다크 안에서는 판을 없애고 한 면으로 */
.sec.dark .pull{background:transparent;padding:0}

/* ⑨ ⑤에서 min-height 를 다시 쓰는 바람에 모바일 112px 규칙이 묻혔다 */
@media (max-width:1024px){
  .phero,.phero.has-img{min-height:112px}
  .phero .wrap,.phero.has-img .wrap{padding-top:18px;padding-bottom:18px}
}


/* ---- 팀장 판정 : 주황 띠 대비 (2026-08-16) --------------------------
   팀2 보고 : 띠 안 작은 글자(브레드크럼13·리드문15)가 흰색으로 3.37:1 — AA 미달.
   판정 : 상시 규칙(AA 4.5:1)이 「실측색 유지」보다 우선한다.
          같은 hue 에서 «명도만» 낮춘다 — #D96F00 → #B65D00
          182,93,0 → L=0.1795 → 흰 글자 4.58:1 (13px 작은 글자도 통과)
   ★미래에셋 원색 #E37500 은 참고값이고, 우리는 띠 안에 리드문을 넣으므로 더 어두워야 한다 */
:root{--band:#B65D00}
.phero,.phero.has-img{background:#B65D00}
.phero .hlead,.phero.has-img .hlead{color:#fff}
.phero .bc,.phero .bc ol,.phero .bc a,.phero.has-img .bc ol{color:#fff;opacity:.95}


/* ---- 본문 사진 (미래에셋 서브 문법) ---------------------------------
   미래에셋 서브는 «주황 띠에 사진이 없는 대신 본문 첫 블록에 큰 사진»이 있다.
   배너에서 뺀 사진을 본문 우측 칸 맨 위로 옮겼다(.mfig).
   ★배너에 숨겨 두면 안 보이는데 다운로드는 된다 — 그래서 옮긴 것이지 지운 게 아니다 */
.mfig{margin:0 0 26px;overflow:hidden;background:#eef1f4}
.mfig img{display:block;width:100%;height:auto;aspect-ratio:16/7;object-fit:cover}
.sec>.wrap>.blk>.mfig,.sec>.wrap>.prose>.mfig{grid-column:2;grid-row:1}
@media (max-width:900px){ .mfig{margin-bottom:18px} .mfig img{aspect-ratio:16/9} }


/* ---- 서브 띠 : 주황 단색 → 사진 + 옅은 블랙 (사장님 지적 08-16) --------
   「배경 띠가 너무 강한데 내용이 없다. 배경에 이미지 넣고 오버레이 연하게」
   · 사진 = img/hero-kv.jpg (유리 타워 로우앵글 · 인물 0 · 글자 0)
   · 오버레이 = rgba(0,0,0,.58) «단색» (그라데이션 금지 규칙)
     α 계산 : 순백 최악 가정에서 흰 글자 4.5:1 을 넘기는 최소값이 0.535 → 0.58 채택
   · 주황은 «아래 3px 선» 으로만 남긴다 — 면으로 쓰면 강해진다 */
.phero,.phero.has-img{
  background-image:url('../img/p09.jpg');
  background-size:cover; background-position:center 45%;
  background-color:#12161C;
  border-bottom:3px solid var(--deco);
  position:relative; isolation:isolate}
.phero::before{content:"";position:absolute;inset:0;z-index:-1;
  background:rgba(0,0,0,.42)}
.phero .wrap{position:relative;z-index:1}
.phero h1{color:#fff}
.phero .hlead,.phero.has-img .hlead{color:rgba(255,255,255,.94)}
.phero .bc,.phero .bc ol,.phero .bc a,.phero.has-img .bc ol{color:rgba(255,255,255,.9)}

/* ---- 띠 사진 교체 + α 재계산 (사장님 「색상을 연하게」) ------------------
   hero-kv(유리타워)는 «밝은10% 휘도 0.634» 라 α .58 로도 글자가 묻혔다(캡처 확인).
   p09(야간 사무실)는 «0.465» → 흰 글자 4.5:1 을 넘기는 최소 α = 0.322
   → 0.42 채택. 앞보다 훨씬 «옅다» */
.phero,.phero.has-img{background-image:url('../img/p09.jpg');background-position:center 45%}
.phero::before{background:rgba(0,0,0,.42)}

/* ---- 리드문이 밝은 창가로 넘어가 묻혔다 → «오버레이는 옅게 두고» 글자 폭만 줄인다
   α 를 올리면 사장님 지시(연하게)에 어긋난다. 폭 제한이 옳은 해법이다. */
.phero .hlead,.phero.has-img .hlead{max-width:46em}
.phero::before{background:rgba(0,0,0,.46)}