/* (주)순신 하위 페이지 공통 스타일 — 대문 C v3(C_사진_v3.html)과 머리말·색·글꼴·꼬리말을 맞춤 */
:root{--graphite:#262b31; --steel:#6f8db3; --silver:#e9edf2; --gold:#b39a62; --ink:#22272d; --ink2:#55606c; --white:#fff; --line:#d6dbe1}
*{box-sizing:border-box}
html{font-size:18px}
body{margin:0;font-family:"Pretendard",sans-serif;color:var(--ink);background:var(--white);line-height:1.7;word-break:keep-all;overflow-wrap:break-word}
html[lang="en"] body{word-break:normal}
a{color:inherit}
a:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
img{max-width:100%}
.wrap{max-width:1180px;margin:0 auto;padding:0 28px}

h1,h2{font-family:"Nanum Myeongjo",serif}
html[lang="en"] h1,html[lang="en"] h2{font-family:"Source Serif 4",Georgia,serif}

/* ---------- header (대문과 같음) ---------- */
header{position:absolute;inset:0 0 auto 0;z-index:3;color:#fff;border-bottom:1px solid rgba(255,255,255,.18)}
header .wrap{display:flex;justify-content:space-between;align-items:center;min-height:84px}
.brand{display:flex;align-items:center;gap:9px;text-decoration:none;color:#fff;align-self:center;line-height:1}.brand .b-em{display:block;width:22px;height:22px}.brand .b-main{font-weight:700;font-size:1.25rem}.brand .b-sub{font-weight:400;font-size:.9rem;opacity:.8}
nav ul{display:flex;gap:28px;list-style:none;margin:0;padding:0;flex-wrap:wrap}
nav a{text-decoration:none;font-weight:600;text-shadow:0 1px 6px rgba(0,0,0,.5);white-space:nowrap}
nav a:hover{text-decoration:underline;text-underline-offset:6px}
nav a[aria-current="page"]{text-decoration:underline;text-decoration-color:var(--gold);text-decoration-thickness:3px;text-underline-offset:8px}

/* ---------- 사진 띠 (대문보다 낮게, 윗부분 전선만 약하게 흐림) ---------- */
.phead{position:relative;overflow:hidden;color:#fff;min-height:580px;
  background:#262b31 var(--img) var(--pos,center 50%)/cover no-repeat}
.phead .soft{position:absolute;inset:-24px;background:inherit;filter:blur(5px) saturate(.9);
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 var(--blur,50%),transparent calc(var(--blur,50%) + 8%));
          mask-image:linear-gradient(180deg,#000 0%,#000 var(--blur,50%),transparent calc(var(--blur,50%) + 8%))}
.phead::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(22,27,33,.76) 0%,rgba(22,27,33,.56) calc(var(--blur,50%) - 4%),rgba(22,27,33,.12) calc(var(--blur,50%) + 6%),rgba(22,27,33,0) calc(var(--blur,50%) + 12%),rgba(22,27,33,0) 86%,rgba(22,27,33,.42) 100%)}
.phead .wrap{position:relative;z-index:1;padding-top:112px;padding-bottom:36px}
.crumb{font-size:.88rem;color:#d9dee4;margin:0 0 10px;text-shadow:0 1px 6px rgba(0,0,0,.6)}
.crumb a{text-decoration:none}.crumb a:hover{text-decoration:underline}
.stripe{height:4px;width:96px;background:var(--gold);margin-bottom:16px}
.phead h1{font-weight:800;font-size:2.45rem;line-height:1.3;margin:0 0 10px;letter-spacing:-.01em;text-shadow:0 2px 14px rgba(0,0,0,.6)}
html[lang="en"] .phead h1{font-weight:700}
.phead .lead{font-size:1.08rem;max-width:46em;margin:0;color:#eef1f4;text-shadow:0 1px 8px rgba(0,0,0,.7)}
.photo-credit{position:absolute;z-index:1;right:12px;bottom:8px;font-size:.72rem;opacity:.85;color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.8)}

/* ---------- 본문 공통 ---------- */
section{padding:80px 0}
section.tight{padding-top:56px}
section.alt{background:#f5f7f9}
h2{font-size:2rem;margin:0 0 12px;line-height:1.4}
h3{font-size:1.3rem;margin:0 0 8px;line-height:1.45}
.sub{color:var(--ink2);max-width:40em;margin:0 0 40px;font-size:1.05rem}
.eyebrow{display:block;font-family:"Pretendard",sans-serif;font-size:.85rem;font-weight:700;letter-spacing:.06em;color:var(--steel);margin-bottom:6px}
p{margin:0 0 1em}
.muted{color:var(--ink2)}
.small{font-size:.9rem}

/* [확인 필요]·공개 범위 표시 */
.pending,.check{display:inline-block;font-size:.8rem;font-weight:600;border:1px dashed var(--ink2);padding:0 8px;color:var(--ink2);line-height:1.6;vertical-align:middle;white-space:nowrap}
.check{border-color:#a8873c;color:#7a6431;background:#fbf7ee}
.permit{display:block;font-size:.78rem;color:var(--ink2);margin-top:6px}

/* 두 칸 */
.two{display:grid;grid-template-columns:5fr 7fr;gap:56px;align-items:start}
.two.even{grid-template-columns:1fr 1fr}

/* 개요 표 */
.facts{display:grid;grid-template-columns:11em 1fr;border-top:2px solid var(--ink);margin:0}
.facts dt,.facts dd{margin:0;padding:14px 0;border-bottom:1px solid var(--line)}
.facts dt{font-weight:700;color:var(--ink);padding-right:16px}
.facts dd{color:var(--ink)}

/* 카드 격자 */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:2px solid var(--ink)}
.cards.c2{grid-template-columns:repeat(2,1fr)}
.cards>div{padding:26px 28px 24px 0;border-bottom:1px solid var(--line)}
.cards>div:not(:nth-child(3n+1)){padding-left:28px;border-left:1px solid var(--line)}
.cards.c2>div:not(:nth-child(3n+1)){padding-left:0;border-left:0}
.cards.c2>div:nth-child(2n){padding-left:28px;border-left:1px solid var(--line)}
.cards h3{font-size:1.15rem;margin:0 0 6px}
.cards p{margin:0;color:var(--ink2);font-size:.98rem}
.num{display:block;font-family:"Nanum Myeongjo",serif;font-weight:800;color:var(--gold);font-size:1.5rem;line-height:1;margin-bottom:10px}
html[lang="en"] .num{font-family:"Source Serif 4",Georgia,serif}

/* 짙은 띠 (대문 '순신이 하는 일'과 같은 모양) */
.band{background:var(--graphite);color:#e7eaee}
.band h2{color:#fff}
.band .sub{color:#b8c1cb}
.cols{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid #4a525c}
.cols>div{padding:28px 28px 8px 0}
.cols>div+div{padding-left:28px;border-left:1px solid #4a525c}
.cols h3{color:var(--gold);font-size:1.15rem;margin:0 0 10px}
.cols p,.cols ul{margin:0}
.cols ul{padding-left:1.1em}.cols li{margin:4px 0}

/* 브리지 그림: 제조사 → 순신 → 고객 */
.bridge{display:grid;grid-template-columns:1fr auto 1.15fr auto 1fr;align-items:stretch;gap:0;margin:8px 0 0}
.bridge .node{border:1px solid var(--line);background:#fff;padding:22px 24px}
.bridge .node.mid{background:var(--graphite);color:#fff;border-color:var(--graphite);border-top:4px solid var(--gold)}
.bridge .node h3{font-size:1.1rem;margin:0 0 8px}
.bridge .node.mid h3{color:var(--gold)}
.bridge ul{margin:0;padding-left:1.1em;font-size:.98rem}
.bridge li{margin:3px 0}
.bridge .arrow{display:flex;align-items:center;justify-content:center;width:56px;color:var(--gold);font-size:1.6rem;font-weight:700}

/* 표 (좁은 화면에서는 가로 스크롤) */
.tbl{overflow-x:auto;-webkit-overflow-scrolling:touch;border-top:2px solid var(--ink)}
table{border-collapse:collapse;width:100%;font-size:.98rem}
th,td{text-align:left;vertical-align:top;padding:14px 16px 14px 0;border-bottom:1px solid var(--line)}
th{font-weight:700;white-space:nowrap}
thead th{color:var(--ink2);font-size:.9rem;font-weight:700}
td+td,th+th{padding-left:16px}

/* 단계 */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,1fr);gap:0;counter-reset:s;border-top:4px solid var(--gold)}
.steps li{padding:22px 18px 18px 0;counter-increment:s}
.steps li+li{padding-left:18px;border-left:1px solid var(--line)}
.steps li::before{content:counter(s,decimal-leading-zero);display:block;font-family:"Nanum Myeongjo",serif;font-weight:800;color:var(--gold);font-size:1.4rem;line-height:1;margin-bottom:10px}
html[lang="en"] .steps li::before{font-family:"Source Serif 4",Georgia,serif}
.steps b{display:block;font-size:1.05rem;margin-bottom:4px}
.steps span{color:var(--ink2);font-size:.92rem;display:block}

/* 파트너 하위 메뉴 */
.subnav{position:sticky;top:0;z-index:2;background:#fff;border-bottom:1px solid var(--line)}
.subnav ul{display:flex;gap:6px 32px;list-style:none;margin:0;padding:0;flex-wrap:wrap}
.subnav a{display:block;padding:16px 0;font-weight:700;text-decoration:none;white-space:nowrap}
.subnav a:hover{text-decoration:underline;text-decoration-color:var(--gold);text-decoration-thickness:3px;text-underline-offset:8px}

/* 파트너 머리 */
.phead2{display:grid;grid-template-columns:7fr 5fr;gap:56px;align-items:start;margin-bottom:48px}
.phead2 h2{font-size:2.3rem;margin:0}
.phead2 .meta{color:var(--steel);font-weight:700;margin:6px 0 18px}
.pfig{margin:0;background:var(--silver);display:flex;flex-direction:column}
.pfig .ph{aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;overflow:hidden;gap:18px;padding:18px}
.pfig .ph img{max-height:100%;object-fit:contain;min-width:0}
.pfig.cover .ph{padding:0}
.pfig.cover .ph img{width:100%;height:100%;object-fit:cover}
.pfig figcaption{font-size:.8rem;color:var(--ink2);background:#fff;padding:8px 0 0}

/* 제품 목록 */
.prod{list-style:none;margin:0;padding:0;border-top:2px solid var(--ink)}
.prod li{display:grid;grid-template-columns:15em 1fr;gap:16px;padding:14px 0;border-bottom:1px solid var(--line)}
.prod b{font-weight:700}
.prod span{color:var(--ink2)}

/* 분야 */
.area{display:grid;grid-template-columns:4fr 8fr;gap:56px;padding:48px 0;border-top:1px solid var(--line)}
.area:first-of-type{border-top:0;padding-top:0}
.area h2{font-size:1.8rem;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.tag-main{font-family:"Pretendard",sans-serif;font-size:.8rem;font-weight:700;color:var(--graphite);background:var(--silver);padding:1px 8px}
.tag-new{font-family:"Pretendard",sans-serif;font-size:.8rem;font-weight:700;color:#7a6431;border:1.5px solid var(--gold);padding:0 8px}

/* 대차 그림 */
.diagram{background:#f5f7f9;border:1px solid var(--line);padding:24px 28px 14px;margin:8px 0 0}
.diagram svg{display:block;width:100%;height:auto}
.diagram figcaption{font-size:.85rem;color:var(--ink2);margin-top:8px}
.legend{display:grid;grid-template-columns:1fr 1fr;gap:4px 28px;margin:0;padding:0;list-style:none;font-size:.95rem}
.legend li{display:flex;gap:10px;align-items:baseline}
.legend i{font-style:normal;flex:none;display:inline-flex;align-items:center;justify-content:center;width:1.6em;height:1.6em;border-radius:50%;background:var(--graphite);color:#fff;font-size:.8rem;font-weight:700}
.legend i.s{background:var(--gold);color:var(--graphite)}

/* 고객 */
.group{display:grid;grid-template-columns:4fr 8fr;gap:56px;padding:48px 0;border-top:1px solid var(--line)}
.group:first-of-type{border-top:0;padding-top:0}
.group figure{margin:0}
.group figure img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.group figcaption{font-size:.78rem;color:var(--ink2);margin-top:6px}
.co{border-top:2px solid var(--ink)}
.co>div{display:grid;grid-template-columns:13em 1fr;gap:20px;padding:18px 0;border-bottom:1px solid var(--line)}
.co b{font-size:1.15rem;display:block;line-height:1.4}
.co small{display:block;color:var(--ink2);font-size:.85rem;font-weight:400}
.co p{margin:0}

/* 문의 */
.contact-main{display:grid;grid-template-columns:1fr 1fr 1fr;border-top:4px solid var(--gold);background:#fff;box-shadow:0 24px 48px -30px rgba(20,24,29,.45)}
.contact-main>div{padding:28px 30px}
.contact-main>div+div{border-left:1px solid #e1e5ea}
.contact-main b{display:block;font-size:1.3rem;line-height:1.35;margin:4px 0 6px;white-space:nowrap}
.contact-main b .check{white-space:nowrap}
.contact-main span{color:var(--ink2);font-size:.92rem}
.ask{display:grid;grid-template-columns:repeat(2,1fr);gap:0;border-top:2px solid var(--ink)}
.ask a{display:flex;justify-content:space-between;gap:16px;align-items:center;padding:20px 24px 20px 0;border-bottom:1px solid var(--line);text-decoration:none}
.ask a:nth-child(2n){padding-left:24px;border-left:1px solid var(--line)}
.ask a b{display:block;font-size:1.1rem}
.ask a span{display:block;color:var(--ink2);font-size:.92rem}
.ask a::after{content:"→";color:var(--gold);font-weight:700;font-size:1.3rem}
.ask a:hover b{text-decoration:underline;text-decoration-color:var(--gold);text-decoration-thickness:2px;text-underline-offset:5px}
.checklist{margin:0;padding-left:1.2em}
.checklist li{margin:6px 0}
.mapbox{background:var(--silver);aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;color:var(--ink2);text-align:center;padding:20px}

.btn{display:inline-block;padding:12px 26px;font-weight:700;text-decoration:none;background:var(--gold);color:var(--graphite);margin:0 10px 10px 0}
.btn.o{background:transparent;color:var(--graphite);border:2px solid var(--graphite);padding:10px 24px}
.band .btn.o{color:#fff;border-color:rgba(255,255,255,.85)}
.more{font-weight:700;color:var(--graphite);text-decoration:underline;text-decoration-color:var(--gold);text-decoration-thickness:2px;text-underline-offset:6px}

/* ---------- footer (대문과 같음) ---------- */
footer{background:var(--silver);padding:44px 0;font-size:.95rem;color:var(--ink2)}
footer .wrap{display:grid;grid-template-columns:2fr 1fr 1fr;gap:20px}
footer b{color:var(--ink);display:block;font-size:1.1rem}
.credits{grid-column:1/-1;font-size:.75rem;border-top:1px solid #cdd3da;padding-top:14px}
.credits a{color:inherit}

/* ---------- 900px 이하 ---------- */
@media (max-width:900px){
  nav ul{gap:6px 14px}
  header{position:absolute;background:rgba(20,24,29,.55)}
  .phead{min-height:580px}
  .phead .wrap{padding-top:130px}
  .phead h1{font-size:2.1rem}
  .two,.two.even,.phead2,.area,.group{grid-template-columns:1fr;gap:28px}
  .cards{grid-template-columns:1fr 1fr}
  .cards>div,.cards>div:not(:nth-child(3n+1)){padding:22px 22px 20px 0;border-left:0}
  .cards>div:nth-child(2n){padding-left:22px;border-left:1px solid var(--line)}
  .cols{grid-template-columns:1fr}.cols>div+div{padding-left:0;border-left:0;border-top:1px solid #4a525c}
  .bridge{grid-template-columns:1fr}
  .bridge .arrow{width:auto;height:44px;transform:rotate(90deg)}
  .steps{grid-template-columns:1fr 1fr 1fr}
  .steps li:nth-child(3n+1){padding-left:0;border-left:0}
  .steps li:nth-child(n+4){border-top:1px solid var(--line)}
  .contact-main{grid-template-columns:1fr}
  .contact-main>div+div{border-left:0;border-top:1px solid #e1e5ea}
  footer .wrap{grid-template-columns:1fr}
}

/* ---------- 700px 이하 (휴대폰): 글은 짙은 바탕, 사진은 그 아래 ---------- */
@media (max-width:700px){
  header,header .wrap{flex-wrap:wrap;row-gap:8px;padding-top:10px;padding-bottom:10px}
  nav ul{gap:6px 16px;font-size:.92rem}
  .wrap{padding:0 16px}
  .phead{min-height:0;background-image:none;padding-bottom:var(--mh,210px)}
  .phead::before{content:"";position:absolute;left:0;right:0;bottom:0;height:var(--mh,210px);background:var(--img) var(--mpos,center)/cover no-repeat}
  .phead .soft{display:none}
  .phead::after{background:linear-gradient(180deg,rgba(38,43,49,0) calc(100% - var(--mh,210px)),rgba(38,43,49,0) 100%)}
  .phead .wrap{padding-top:172px;padding-bottom:28px}
  .phead h1{font-size:1.85rem}
  .phead .lead{font-size:1rem}
  section{padding:56px 0}
  h2{font-size:1.65rem}
  .phead2 h2{font-size:1.9rem}
  .facts{grid-template-columns:1fr}
  .facts dt{border-bottom:0;padding-bottom:0}
  .facts dd{padding-top:2px}
  .cards,.cards.c2{grid-template-columns:1fr}
  .cards>div,.cards>div:not(:nth-child(3n+1)),.cards>div:nth-child(2n),.cards.c2>div:nth-child(2n){padding:20px 0;border-left:0}
  .steps{grid-template-columns:1fr}
  .steps li,.steps li+li,.steps li:nth-child(3n+1){padding:16px 0;border-left:0;border-top:1px solid var(--line)}
  .steps li:first-child{border-top:0}
  .prod li{grid-template-columns:1fr;gap:2px}
  .co>div{grid-template-columns:1fr;gap:6px}
  .legend{grid-template-columns:1fr}
  /* 표는 휴대폰에서 세로 목록으로 */
  .tbl{overflow:visible}
  .tbl table,.tbl tbody,.tbl tr,.tbl th,.tbl td{display:block;width:auto}
  .tbl thead{display:none}
  .tbl tr{padding:14px 0;border-bottom:1px solid var(--line)}
  .tbl th,.tbl td,.tbl td+td{border:0;padding:2px 0;white-space:normal}
  .tbl th{font-size:1.05rem;margin-bottom:4px}
  .tbl td::before{color:var(--ink2);font-size:.85rem;margin-right:8px}
  .tbl td:nth-of-type(1)::before{content:"품목"}
  .tbl td:nth-of-type(2)::before{content:"내용"}
  .tbl td:nth-of-type(3)::before{content:"세부"}
  html[lang="en"] .tbl td:nth-of-type(1)::before{content:"Product"}
  html[lang="en"] .tbl td:nth-of-type(2)::before{content:"Scope"}
  html[lang="en"] .tbl td:nth-of-type(3)::before{content:"Details"}
  .diagram{padding:16px 12px 10px;overflow-x:auto}
  .diagram svg{min-width:560px}
  .ask{grid-template-columns:1fr}
  .ask a,.ask a:nth-child(2n){padding:18px 0;border-left:0}
  .contact-main>div{padding:22px 20px}
  .subnav ul{gap:0 22px}
  .subnav a{padding:12px 0}
  .photo-credit{font-size:.66rem;left:12px;text-align:right}
}

/* 설명 그림 (순신 자체 제작) */
.ill{margin:40px 0 8px;background:#fff;border:1px solid var(--line)}
.ill a{display:block;cursor:zoom-in}
.ill img{display:block;width:100%;height:auto}
.ill figcaption{font-size:.85rem;color:var(--ink2);padding:10px 16px 12px;border-top:1px solid var(--line)}
.group + .ill, .area + .ill{margin-top:8px;margin-bottom:48px}
.pfig.ill{border:0;background:#fff}
.pfig.ill .ph{padding:0;aspect-ratio:auto;background:#fff;display:block}
.pfig.ill .ph img{width:100%;height:auto;max-height:none}
.pfig.ill figcaption{border-top:0;padding:8px 0 0}
@media (max-width:700px){.ill figcaption{padding:8px 10px 10px}}
.legend.dots i{width:.7em;height:.7em;transform:translateY(-1px)}

/* 제조사 로고 */
.plogo{display:block;height:44px;width:auto;max-width:240px;object-fit:contain;object-position:left center;margin:0 0 18px}
.pfig.cover .ph{display:block}
.pfig.cover a.ph{cursor:zoom-in}
@media (max-width:700px){.plogo{height:36px}}

/* 제조사 사진 (설명 그림 대신) */
.ill.photo img{height:440px;object-fit:cover}
.ill.trio .row{display:flex;justify-content:center;gap:48px;padding:28px 16px;background:#fff}
.ill.trio .row img{width:auto;height:300px;max-width:30%;object-fit:contain}
@media (max-width:700px){.ill.photo img{height:240px}.ill.trio .row{gap:16px}.ill.trio .row img{height:200px}}

/* 머리 사진: 흐림 없이 기차가 보이게, 글씨 쪽(왼쪽 위)만 어둡게 */
@media (min-width:701px){
  .phead .soft{display:none}
  .phead::after{background:
    linear-gradient(180deg,rgba(22,27,33,.62) 0%,rgba(22,27,33,0) 24%),
    linear-gradient(90deg,rgba(22,27,33,.78) 0%,rgba(22,27,33,.55) 38%,rgba(22,27,33,.12) 62%,rgba(22,27,33,0) 75%)}
}

/* 두 장 나란히 (조선·해양), 자동차 그림 */
.ill.pair .row{display:grid;grid-template-columns:1fr 1fr;gap:2px;background:var(--line)}
.ill.pair .row a{display:block}
.ill.pair .row img{width:100%;height:380px;object-fit:cover}
.ill.photo.fit img{object-fit:contain;background:#e6e6e6}
@media (max-width:700px){.ill.pair .row{grid-template-columns:1fr}.ill.pair .row img{height:220px}}