/* 업무 분야(expertise.html) — 메인 '기술이 권리가 되기까지'를 펼친 페이지.
격자: 메인 다섯 열(240px씩)의 첫 열 = 단계 표시, 나머지 네 열(960px) = 단계 내용. 1~3단계 아이보리, 4·5단계 남색 + 금색 윗선(메인과 같은 뜻). */
html{scroll-padding-top:120px}
/* 다섯 단계 한눈에 — 공용 .steps를 줄여 쓴다 */
.ex-ov{padding-bottom:clamp(40px,4vw,64px)}
.ex-ov .caps{margin-top:0}
.ex-idx>li{min-height:0;padding:0}
.ex-idx>li>a{display:flex;flex-direction:column;height:100%;padding:33px 30px 30px}
.ex-idx h3{margin-top:44px;transition:color .25s}
.ex-idx p{margin-top:12px}
.ex-idx .go{margin-top:auto;padding-top:34px;display:inline-flex;align-items:center;gap:10px;font-family:var(--sans);font-size:13.5px;font-weight:600;letter-spacing:-.01em;color:var(--muted);transition:color .25s}
.ex-idx .go svg{width:10px;height:22px;transition:transform .35s var(--ease)}
.ex-idx a:hover h3{color:var(--gold-d)}
.ex-idx a:hover .go{color:var(--navy)}.ex-idx a:hover .go svg{transform:translateY(4px)}
.ex-idx>li.after .go{color:rgba(255,255,255,.6)}
.ex-idx>li.after a:hover h3{color:var(--gold)}.ex-idx>li.after a:hover .go{color:#fff}
/* 단계 본문: 왼쪽 단계 표시(따라옴) + 오른쪽 단계 */
.ex-body{display:grid;grid-template-columns:240px minmax(0,1fr);margin-top:clamp(72px,7vw,104px)}
.ex-rail{position:sticky;top:132px;align-self:start;display:flex;flex-direction:column;padding-right:30px}
.ex-rail p{font-family:var(--sans);font-size:13px;font-weight:600;letter-spacing:-.01em;color:var(--muted);margin:0 0 10px}
.ex-rail p.g{margin-top:30px;color:var(--gold-d)}
.ex-rail a{position:relative;display:flex;gap:12px;align-items:baseline;padding:9px 0 9px 18px;font-size:16px;line-height:1.4;color:var(--muted);letter-spacing:-.04em;transition:color .3s}
.ex-rail a::before{content:"";position:absolute;left:0;top:0;bottom:0;width:1px;background:var(--line);transition:width .3s var(--ease),background .3s}
.ex-rail a span{font-family:var(--lat);font-size:15px;letter-spacing:.01em;color:var(--gold-d);opacity:.7}
.ex-rail a:hover{color:var(--navy)}
.ex-rail a.on{color:var(--navy);font-weight:700}
.ex-rail a.on::before{width:3px;background:var(--navy)}
.ex-rail a.on span{opacity:1}
.ex-rail.dk p{color:rgba(255,255,255,.45)}.ex-rail.dk p.g{color:var(--gold)}
.ex-rail.dk a{color:rgba(255,255,255,.42)}
.ex-rail.dk a::before{background:var(--line-w)}
.ex-rail.dk a span{color:var(--gold)}
.ex-rail.dk a:hover{color:#fff}
.ex-rail.dk a.on{color:#fff}.ex-rail.dk a.on::before{background:var(--gold)}
/* 한 단계 = 카드 한 장: 윗선 · 번호와 이름 · 큰 문장 · 설명 · 하는 일 | 기록 */
.ex-step{position:relative;padding-top:34px}
.ex-step+.ex-step{margin-top:clamp(96px,9vw,136px)}
.ex-step::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--navy)}
.ex-step.after::before{background:var(--gold)}
.ex-no{display:flex;align-items:baseline;gap:14px;font-size:18px;font-weight:700;color:var(--navy);letter-spacing:-.04em}
.ex-no span{font-family:var(--lat);font-weight:400;font-size:22px;color:var(--gold-d);letter-spacing:.01em}
.ex-t{margin-top:30px;font-weight:400;font-size:clamp(28px,2.9vw,42px);line-height:1.34;letter-spacing:-.058em;color:var(--navy)}
.ex-t b{font-weight:700}
.ex-lead{margin-top:26px;max-width:40em;font-size:17px;line-height:1.9;color:var(--body)}
.ex-cols{display:grid;grid-template-columns:1fr 1fr;gap:56px;margin-top:56px}
.ex-cols h3,.ex-rec h3,.ex-certs h3{font-family:var(--sans);font-size:13.5px;font-weight:600;letter-spacing:-.01em;color:var(--muted);padding-bottom:14px;border-bottom:1px solid var(--navy)}
.ex-do ul li{padding:15px 0 14px;border-bottom:1px solid var(--line);font-size:17px;line-height:1.5;color:var(--ink);font-weight:500;letter-spacing:-.045em}
.ex-do ul li.g{padding:20px 0 6px;border-bottom:0;font-family:var(--sans);font-size:12.5px;font-weight:600;color:var(--gold-d);letter-spacing:-.01em}
.ex-do ul li.g:first-child{padding-top:16px}
.ex-p{margin-top:18px;font-size:16.5px;line-height:1.85}
.ex-link{display:inline-flex;align-items:center;gap:12px;margin-top:22px;font-size:16px;font-weight:600;color:var(--navy);letter-spacing:-.04em;border-bottom:1px solid currentColor;padding-bottom:3px;transition:gap .25s var(--ease),color .2s}
.ex-link svg{width:24px;height:10px}
.ex-link span{font-family:var(--lat);font-weight:700;font-size:17px;letter-spacing:.01em}
.ex-link:hover{gap:18px;color:var(--gold-d)}
.ex-rec ol li{display:grid;grid-template-columns:92px 1fr;gap:14px;padding:15px 0 14px;border-bottom:1px solid var(--line)}
.ex-rec time{font-family:var(--lat);font-size:17px;line-height:1.55;color:var(--gold-d);letter-spacing:.01em;white-space:nowrap}
.ex-rec p{font-size:16px;line-height:1.65;color:var(--body);letter-spacing:-.04em}
.ex-rec p b{font-weight:700;color:var(--navy)}
/* 인증: 메일에서 짚은 여섯 인증을 크게 */
.ex-certs{margin-top:56px}
.ex-certs ul{display:grid;grid-template-columns:repeat(3,1fr)}
.ex-certs li{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:26px 28px 26px 0;border-bottom:1px solid var(--line-w)}
.ex-certs li:not(:nth-child(3n+1)){padding-left:28px;border-left:1px solid var(--line-w)}
.ex-certs b{font-size:clamp(20px,1.7vw,24px);line-height:1.3;font-weight:600;color:#fff;letter-spacing:-.05em}
.ex-certs i{font-style:normal;font-family:var(--lat);font-size:17px;color:var(--gold);letter-spacing:.04em}
/* 남색 구역의 색 */
.navy .ex-step::before{background:var(--gold)}
.navy .ex-no{color:#fff}.navy .ex-no span{color:var(--gold)}
.navy .ex-t{color:#fff}
.navy .ex-lead,.navy .ex-p{color:rgba(255,255,255,.78)}
.navy .ex-cols h3,.navy .ex-rec h3,.navy .ex-certs h3{color:rgba(255,255,255,.55);border-bottom-color:rgba(255,255,255,.5)}
.navy .ex-do ul li{color:#fff;border-bottom-color:var(--line-w)}
.navy .ex-do ul li.g{color:var(--gold)}
.navy .ex-rec ol li{border-bottom-color:var(--line-w)}
.navy .ex-rec time{color:var(--gold)}
.navy .ex-rec p{color:rgba(255,255,255,.72)}.navy .ex-rec p b{color:#fff}
.navy .ex-link{color:#fff}.navy .ex-link:hover{color:var(--gold)}
/* 분쟁 대응 · 자문 */
.ex-two{display:grid;grid-template-columns:1fr 1fr;gap:48px;margin-top:clamp(56px,6vw,84px)}
.ex-q{margin:0;font-size:clamp(23px,2vw,28px);line-height:1.66;font-weight:400;color:var(--navy);letter-spacing:-.05em;padding-top:30px;border-top:3px solid var(--navy)}
.ex-q b{font-weight:700}
.ex-two .ex-rec h3{padding-top:0}
.ex-adv{margin-top:clamp(80px,8vw,120px);padding-top:30px;border-top:1px solid var(--line)}
.ex-h{font-size:clamp(24px,2.1vw,30px);line-height:1.3;font-weight:700;color:var(--navy);letter-spacing:-.055em}
.ex-adv-p{margin-top:24px;max-width:27em;font-size:clamp(17px,1.4vw,19px);line-height:1.9;color:var(--ink);letter-spacing:-.045em}
/* 상담(금색 = 상담) */
.ex-cta{background:var(--gold);color:var(--navy)}
.ex-cta .head{align-items:start}
.ex-cta .head .l1{color:var(--navy)}
.ex-cta .tel{display:block;margin-top:36px;font-family:var(--lat);font-weight:700;font-size:clamp(40px,3.8vw,54px);line-height:1;letter-spacing:.01em}
.ex-cta .tel small{display:block;font-family:var(--serif);font-size:16px;font-weight:600;letter-spacing:-.03em;margin-bottom:12px}
.ex-cta .btns{margin-top:30px;display:flex;gap:10px;flex-wrap:wrap}
/* 좁은 화면에서 붙는 단계 막대(데스크톱에서는 왼쪽 단계 표시가 대신한다) */
.ex-bar{display:none}
/* 모션은 공용 .rv(옅게 나타남)만 쓴다 */
@media (max-width:1240px){
.ex-body{grid-template-columns:200px minmax(0,1fr)}
.ex-certs ul{grid-template-columns:repeat(2,1fr)}
.ex-certs li:not(:nth-child(3n+1)){padding-left:0;border-left:0}
.ex-certs li:nth-child(2n){padding-left:24px;border-left:1px solid var(--line-w)}
}
@media (max-width:900px){
html{scroll-padding-top:116px}
/* 다섯 단계: 세로 다섯 줄(메인의 옆으로 넘기는 줄과 달리 한눈에 다 보이게) */
.ex-ov{padding-bottom:12px}
.ex-idx{display:block;margin-top:0}
.ex-idx>li{max-width:none;min-height:0;padding:0;margin:0 -24px}
.ex-idx>li::before{left:24px;right:24px}
.ex-idx>li.after::before{left:0;right:0}
.ex-idx>li+li{border-left:0}
.ex-idx>li>a{display:grid;grid-template-columns:46px 1fr auto;align-items:baseline;padding:18px 24px 19px}
.ex-idx .cap{grid-column:1/-1;margin-bottom:10px}
.ex-idx .n{grid-column:1;font-size:19px}
.ex-idx .n svg{display:none}
.ex-idx h3{grid-column:2;margin-top:0;font-size:21px}
.ex-idx p{grid-column:2;grid-row:auto;margin-top:4px;font-size:14.5px;line-height:1.6}
.ex-idx .go{grid-column:3;grid-row:1/3;padding:0;margin:0;align-self:center;font-size:0;gap:0}
.ex-idx .cap~.go{grid-row:2/4}
.ex-idx .go svg{width:10px;height:22px}
.ex-idx>li:first-child>a{padding-top:20px}
.ex-idx>li:nth-child(3)>a{padding-bottom:30px}
.ex-idx>li.after:nth-child(4)>a{padding-top:24px}
.ex-idx>li.after:last-child>a{padding-bottom:26px}
.ex-idx>li.after+li.after{border-top:1px solid var(--line-w)}
/* 본문 */
.ex-body{display:block;margin-top:52px}
.ex-rail{display:none}
.ex-step{padding-top:26px}
.ex-step+.ex-step{margin-top:76px}
.ex-no{font-size:17px}.ex-no span{font-size:20px}
.ex-t{margin-top:20px;font-size:clamp(25px,7vw,30px);line-height:1.38}
.ex-lead{margin-top:18px;font-size:16px;line-height:1.85}
.ex-cols{grid-template-columns:1fr;gap:40px;margin-top:38px}
.ex-do ul li{font-size:16px;padding:13px 0 12px}
.ex-rec ol li{grid-template-columns:1fr;gap:2px;padding:13px 0 12px}
.ex-rec time{font-size:15.5px}
.ex-rec p{font-size:15.5px}
.ex-certs{margin-top:40px}
.ex-certs li{padding:18px 14px 18px 0;flex-direction:column;gap:2px}
.ex-certs li:nth-child(2n){padding-left:16px}
.ex-certs b{font-size:18.5px}.ex-certs i{font-size:15px}
.ex-two{grid-template-columns:1fr;gap:44px;margin-top:44px}
.ex-q{font-size:21px;line-height:1.66;padding-top:24px;padding-right:0}
.ex-adv{margin-top:72px;padding-top:26px}
.ex-h{font-size:24px}
.ex-adv-p{margin-top:16px;font-size:16.5px}
.ex-cta .tel{font-size:42px;margin-top:30px}
.ex-cta .btns .btn{flex:1;justify-content:center;padding:0 12px}
/* 붙는 단계 막대 */
.ex-bar{display:block;position:fixed;left:0;right:0;top:60px;z-index:45;height:46px;background:rgba(247,246,243,.97);border-bottom:1px solid var(--line);transform:translateY(-100%);opacity:0;visibility:hidden;transition:transform .4s var(--ease),opacity .3s,visibility .4s,background .35s,border-color .35s}
.ex-bar.show{transform:none;opacity:1;visibility:visible}
.ex-bar .in{height:100%;display:flex;align-items:center;justify-content:space-between;padding:0 24px;gap:18px}
.ex-bar .lb{display:flex;align-items:baseline;gap:10px;font-size:15.5px;font-weight:700;color:var(--navy);letter-spacing:-.04em;white-space:nowrap}
.ex-bar .lb b{font-family:var(--lat);font-weight:400;font-size:17px;color:var(--gold-d)}
.ex-bar .tr{display:flex;gap:5px;flex:0 0 46%}
.ex-bar .tr i{flex:1;height:2px;background:var(--line);transition:background .3s}
.ex-bar .tr i.on{background:var(--navy)}
.ex-bar.dk{background:rgba(0,22,75,.97);border-bottom-color:var(--line-w)}
.ex-bar.dk .lb{color:#fff}.ex-bar.dk .lb b{color:var(--gold)}
.ex-bar.dk .tr i{background:var(--line-w)}
.ex-bar.dk .tr i.on{background:var(--gold)}
}