/* 사이트 공통 스타일 — 기준: docs/디자인규칙.md
   중단점: 모바일 < 768px, 태블릿 768–1023px, 데스크톱 ≥ 1024px
   글꼴: Pretendard 가변 글꼴 공식 분할본, 선언은 pretendard.css (SIL OFL 1.1) */

:root{
  --navy-950:#16144A;--navy-900:#221F72;--navy-800:#2F2B8C;--navy-050:#EEEEF7;
  --blue-600:#005DAA;--blue-700:#004A88;
  --green-500:#8DC63F;--sky-400:#42C4DD;
  --ink:#1B1E2B;--gray-700:#4A4F5E;--gray-600:#5C6170;
  --gray-300:#C9CDD6;--gray-200:#E4E7EC;--gray-050:#F4F5F8;--white:#FFFFFF;
  --font-sans:"Pretendard Variable",Pretendard,-apple-system,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  --radius-sm:6px;--radius-md:10px;--radius-lg:16px;--radius-full:999px
}
*,*::before,*::after{box-sizing:border-box}
body{margin:0}

/* ── 기본 ───────────────────────────── */
.pg{font-family:var(--font-sans);color:var(--ink);background:var(--white);font-size:16px;line-height:1.75;word-break:keep-all;overflow-wrap:break-word;-webkit-font-smoothing:antialiased}
.pg :where(h1,h2,h3,p,ul,ol,dl,dd,figure){margin:0}
.pg :where(ul,ol){padding:0;list-style:none}
.pg :where(img,svg){display:block}
.pg a{color:var(--blue-600);text-underline-offset:3px}
.pg a:hover{color:var(--blue-700)}
.pg a:focus-visible,.pg summary:focus-visible{outline:2px solid var(--blue-600);outline-offset:2px;border-radius:4px}
.pg .dark a:focus-visible,.pg .ftr a:focus-visible{outline-color:var(--green-500)}
.skip{position:absolute;left:16px;top:-80px;z-index:10;padding:12px 18px;border-radius:var(--radius-md);background:var(--navy-900);color:var(--white);font-weight:600;text-decoration:none}
.pg .skip{color:var(--white)}
.pg .skip:focus{top:12px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

/* ── 레이아웃 ───────────────────────── */
.wrap{max-width:1200px;margin:0 auto;padding:0 40px}
.sec{padding:128px 0}
.sec-alt{background:var(--gray-050)}
.sec-tint{background:var(--navy-050)}
.dark{background-color:var(--navy-900);color:var(--white)}
.dots{background-image:radial-gradient(circle,rgba(255,255,255,.2) 1.5px,transparent 1.6px);background-size:24px 24px}
.split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:64px;align-items:start}
[id]{scroll-margin-top:24px}

/* ── 글자 ───────────────────────────── */
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:13px;line-height:1.4;font-weight:600;letter-spacing:.08em;color:var(--blue-600)}
.dark .eyebrow{color:var(--green-500)}
.display-xl{font-size:56px;line-height:1.2;font-weight:700;letter-spacing:-.025em;color:var(--navy-900)}
.display-l{font-size:44px;line-height:1.25;font-weight:700;letter-spacing:-.02em;color:var(--navy-900)}
.h2{font-size:32px;line-height:1.35;font-weight:700;letter-spacing:-.02em;color:var(--navy-900)}
.h3{font-size:22px;line-height:1.45;font-weight:700;letter-spacing:-.01em;color:var(--navy-900)}
.dark .display-xl,.dark .display-l,.dark .h2,.dark .h3{color:var(--white)}
.lead{font-size:19px;line-height:1.75;color:var(--gray-700);max-width:680px}
.dark .lead{color:var(--gray-300)}
.muted{color:var(--gray-700)}
.dark .muted{color:var(--gray-300)}
.small{font-size:14px;line-height:1.6}
.sec-head{display:flex;flex-direction:column;gap:16px;max-width:680px;margin-bottom:56px}
.num{display:flex;align-items:center;gap:10px;font-size:13px;line-height:1.4;font-weight:600;letter-spacing:.08em;color:var(--blue-600)}
.num::after{content:"";flex:0 0 28px;height:2px;background:var(--green-500)}
.label{font-size:13px;line-height:1.4;font-weight:600;letter-spacing:.08em;color:var(--gray-600)}

/* ── 버튼·링크 ──────────────────────── */
.btns{display:flex;flex-wrap:wrap;gap:12px}
.pg .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 22px;border-radius:var(--radius-md);font-size:16px;font-weight:600;line-height:1.2;text-decoration:none;border:1.5px solid transparent;white-space:nowrap}
.btn svg{width:18px;height:18px;flex:none}
.pg .btn-primary{background:var(--navy-900);color:var(--white)}
.pg .btn-primary:hover{background:var(--navy-800);color:var(--white)}
.pg .btn-secondary{background:var(--white);color:var(--blue-600);border-color:var(--blue-600)}
.pg .btn-secondary:hover{color:var(--blue-700);border-color:var(--blue-700)}
.pg .btn-light{background:var(--white);color:var(--navy-900)}
.pg .btn-light:hover{background:var(--gray-050);color:var(--navy-900)}
.pg .btn-ghost{background:transparent;color:var(--white);border-color:var(--gray-300)}
.pg .btn-ghost:hover{background:rgba(255,255,255,.08);color:var(--white)}
.pg .btn:focus-visible{outline:2px solid var(--blue-600);outline-offset:2px}
.pg .dark .btn:focus-visible{outline-color:var(--green-500)}
.pg .more{display:inline-flex;align-items:center;gap:6px;font-weight:600;font-size:15px}
.more svg{width:16px;height:16px;flex:none}

/* 분야 알약 (통합 그림·글 끝) */
.pg .fpill{display:inline-flex;align-items:center;gap:8px;min-height:40px;max-width:100%;padding:6px 14px;border:1px solid var(--gray-300);border-radius:var(--radius-full);background:var(--white);color:var(--navy-900);font-size:14px;line-height:1.4;font-weight:600;text-decoration:none}
.fpill b{font-size:13px;font-weight:600;color:var(--blue-600)}
.fpill svg{width:16px;height:16px;flex:none;color:var(--blue-600)}
.pg .fpill:hover{border-color:var(--blue-600);color:var(--navy-900)}

/* ── 머리글 ─────────────────────────── */
.hdr{background:var(--white);border-bottom:1px solid var(--gray-200)}
.hdr-in{display:flex;align-items:center;gap:28px;height:72px}
.pg .logo{display:block;flex:none;border-radius:4px}
.logo img{height:32px;width:auto}
.nav{margin-left:auto}
.nav ul{display:flex;align-items:center;gap:28px}
.pg .nav a{display:block;color:var(--ink);font-size:15px;font-weight:500;line-height:1.4;text-decoration:none;padding:8px 0}
.pg .nav a:hover{color:var(--navy-900)}
.pg .nav a[aria-current]{color:var(--navy-900);font-weight:700;box-shadow:inset 0 -2px 0 var(--green-500)}
.pg .hdr-cta{flex:none;display:inline-flex;align-items:center;min-height:38px;padding:0 16px;border-radius:var(--radius-md);background:var(--navy-900);color:var(--white);font-size:15px;font-weight:600;line-height:1.2;text-decoration:none}
.pg .hdr-cta:hover{background:var(--navy-800);color:var(--white)}
.pg .hdr-cta[aria-current]{box-shadow:inset 0 -3px 0 var(--green-500)}
.pg .lang{flex:none;display:inline-flex;align-items:center;min-height:32px;padding:0 10px;margin-left:-8px;border:1px solid var(--gray-300);border-radius:var(--radius-full);color:var(--gray-600);font-size:13px;font-weight:600;letter-spacing:.06em;text-decoration:none}
.pg .lang:hover{color:var(--navy-900);border-color:var(--navy-900)}

/* ── 첫 화면 (홈·영문) ─────────────── */
.hero{position:relative;overflow:hidden}
.hero .wrap{position:relative;padding-top:120px;padding-bottom:136px}
.hero-txt{position:relative;z-index:1;display:flex;flex-direction:column;gap:24px;max-width:720px}
.hero .btns{margin-top:16px}
.signal{position:absolute;right:40px;bottom:112px;width:400px;height:auto}

/* ── 페이지 머리 (하위 페이지) ─────── */
.phead{background:var(--navy-050);padding:96px 0 88px}
.phead-in{display:flex;flex-direction:column;gap:20px;max-width:760px}
.phead-split{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:64px;align-items:center}
.jump{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.pg .jump a{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 16px;border:1px solid var(--gray-300);border-radius:var(--radius-full);background:var(--white);color:var(--ink);font-size:14px;font-weight:600;text-decoration:none}
.jump a b{color:var(--blue-600);font-weight:600}
.pg .jump a:hover{border-color:var(--navy-900);color:var(--navy-900)}
.brand-panel{display:flex;flex-direction:column;gap:16px;padding:48px 40px;border-radius:var(--radius-lg);background:var(--white);border:1px solid var(--gray-200)}
.brand-panel img{height:48px;width:auto;align-self:flex-start}
.brand-panel span{font-size:14px;color:var(--gray-600);letter-spacing:.02em}

/* ── 목록 ───────────────────────────── */
.ticks{display:flex;flex-direction:column}
.ticks li{display:flex;gap:16px;padding:18px 0;border-bottom:1px solid var(--gray-200)}
.ticks li:first-child{border-top:1px solid var(--gray-200)}
.ticks li::before{content:"";flex:none;width:8px;height:8px;margin-top:10px;border-radius:50%;background:var(--blue-600)}
.pg .list-label{font-size:14px;font-weight:600;color:var(--gray-600);margin-bottom:12px}

/* ── 카드 ───────────────────────────── */
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.cards-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.card{display:flex;flex-direction:column;gap:12px;padding:32px;border:1px solid var(--gray-200);border-radius:var(--radius-lg);background:var(--white)}
.card p{color:var(--gray-700)}
.pg .card .more{margin-top:auto;padding-top:8px}
.points{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:48px}
.points li{display:flex;flex-direction:column;gap:12px;padding-top:28px;border-top:1px solid var(--gray-200)}
.points p{color:var(--gray-700)}

/* 개발 사례 카드 */
.case .kpi{align-self:flex-start;padding:6px 12px;border-radius:var(--radius-sm);background:var(--navy-050);color:var(--navy-900);font-size:14px;line-height:1.5;font-weight:600}
.ptags{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.ptags li{display:inline-flex;align-items:center;min-height:32px;padding:0 12px;border:1px solid var(--gray-300);border-radius:var(--radius-full);font-size:13px;line-height:1.3;font-weight:600;color:var(--gray-700)}
.more-exp{margin-top:40px;display:flex;flex-direction:column;gap:16px}

/* 번호 표지 (분야 연결 그림·근거) */
.nb{display:inline-flex;align-items:center;justify-content:center;flex:none;width:24px;height:24px;border-radius:50%;background:var(--navy-900);color:var(--white);font-size:13px;line-height:1;font-weight:700}

/* ── 키워드 표지 ────────────────────── */
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chips li{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border:1px solid var(--gray-300);border-radius:var(--radius-full);background:var(--white);font-size:15px;font-weight:600;color:var(--navy-900)}
.tags{display:flex;flex-wrap:wrap;gap:6px}
.tags li{padding:4px 10px;border-radius:var(--radius-sm);background:var(--navy-050);color:var(--navy-900);font-size:14px;font-weight:600;line-height:1.5}

/* 홈 기술 노트 입구 */
.tn-entry{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px;margin-top:40px;padding-top:32px;border-top:1px solid var(--gray-200)}
.tn-entry .eyebrow{flex:none}
.tn-entry ul{display:flex;flex-wrap:wrap;align-items:center;gap:8px 0}
.tn-entry li{display:flex;align-items:center}
.tn-entry li + li::before{content:"";width:1px;height:16px;margin:0 16px;background:var(--gray-300)}
.pg .tn-entry li a{font-size:16px;font-weight:600;color:var(--navy-900);text-decoration:underline}
.pg .tn-entry li a:hover{color:var(--blue-700)}
.pg .tn-entry .more{margin-left:auto}

/* ── 개발 분야 상세 ─────────────────── */
.svc-head{display:flex;flex-direction:column;gap:16px}
.svc-head p{color:var(--gray-700)}
.pg .callout{margin-top:32px;padding:28px 32px;border-radius:var(--radius-lg);background:var(--navy-050);font-size:20px;line-height:1.6;font-weight:700;letter-spacing:-.01em;color:var(--navy-900)}
.sub-h{margin-top:40px;font-size:19px;line-height:1.45;font-weight:700;color:var(--navy-900)}
.sub-p{margin:8px 0 16px;color:var(--gray-700)}
.rel{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin-top:24px;font-size:15px}
.rel .label{flex-basis:100%}
.pg .rel a{font-weight:600}

/* ── 홈 통합 그림 (디자인규칙 11-1) ── */
.intg-band{display:flex;align-items:center;justify-content:center;min-height:56px;padding:0 24px;border-radius:var(--radius-full);background:var(--navy-900);color:var(--white);font-size:18px;line-height:1.4;font-weight:700;text-align:center}
.pg .intg-steps{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:auto auto;column-gap:40px;padding-top:28px}
.intg-steps::before{content:"";position:absolute;top:13px;left:calc((100% - 120px) / 8);right:calc((100% - 120px) / 8);height:2px;background:var(--green-500)}
.intg-steps::after{content:"";position:absolute;top:0;left:50%;width:2px;height:14px;margin-left:-1px;background:var(--green-500)}
.intg-step{position:relative;display:grid;grid-row:span 2;grid-template-rows:subgrid}
.intg-step::before{content:"";position:absolute;top:-15px;left:50%;width:2px;height:15px;margin-left:-1px;background:var(--green-500)}
.intg-card{position:relative;display:flex;flex-direction:column;gap:6px;padding:24px;border:1px solid var(--gray-200);border-radius:var(--radius-lg);background:var(--white)}
.intg-step:last-child .intg-card{background:var(--navy-050)}
.intg-no{font-size:13px;line-height:1.4;font-weight:600;letter-spacing:.08em;color:var(--blue-600)}
.intg-name{font-size:22px;line-height:1.45;font-weight:700;letter-spacing:-.01em;color:var(--navy-900)}
.intg-key{font-size:15px;line-height:1.6;color:var(--gray-700)}
.intg-arr{position:absolute;top:50%;right:-30px;width:20px;height:20px;margin-top:-10px;color:var(--green-500)}
.pg .intg-pills{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;padding-top:16px}
.intg-pills::before{content:"";position:absolute;top:0;left:50%;height:16px;border-left:1.5px dashed var(--blue-600)}
.intg-pills .fpill{text-align:left}
.intg-after{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 16px;margin-top:32px;color:var(--gray-700)}

/* ── 분야 연결 그림 (디자인규칙 11-2) ─ */
.lnk{position:relative;padding:40px 0}
.lnk-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,2fr) minmax(0,5fr);gap:32px;align-items:stretch}
.lnk-grp{display:flex;flex-direction:column;justify-content:center;gap:12px;padding:24px;border:1px solid var(--gray-200);border-radius:var(--radius-lg);background:var(--white)}
.lnk-box{display:flex;flex-direction:column;gap:2px;padding:16px 20px;border-radius:var(--radius-md);background:var(--gray-050)}
.lnk-box .intg-no{font-size:13px}
.lnk-box strong{font-size:18px;line-height:1.45;font-weight:700;color:var(--navy-900)}
.lnk-box span:last-child{font-size:14px;line-height:1.6;color:var(--gray-700)}
.lnk-hist{padding:10px 16px;border:1px dashed var(--gray-300);border-radius:var(--radius-md);background:var(--white);font-size:14px;line-height:1.5;font-weight:600;color:var(--gray-700);text-align:center}
.lnk-axis{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:16px;border-radius:var(--radius-lg);background:var(--navy-900);color:var(--white);font-size:16px;line-height:1.5;font-weight:700;text-align:center}
.lnk-axis::before,.lnk-axis::after{content:"";position:absolute;left:50%;width:24px;height:2px;margin-left:-12px;background:var(--green-500)}
.lnk-axis::before{top:16px}
.lnk-axis::after{bottom:16px}
.lnk-up,.lnk-down{position:absolute;left:calc((100% - 64px) * 5 / 24);right:calc((100% - 64px) * 5 / 24);height:32px;border:2px solid var(--green-500)}
.lnk-up{top:8px;border-bottom:0;border-radius:16px 16px 0 0}
.lnk-down{bottom:8px;border-top:0;border-radius:0 0 16px 16px;border-color:var(--blue-600)}
.lnk-head{position:absolute;width:16px;height:16px}
.lnk-up .lnk-head{right:-9px;bottom:0;color:var(--green-500)}
.lnk-down .lnk-head{left:-9px;top:0;color:var(--blue-600)}
.lnk-tag{position:absolute;display:inline-flex;align-items:center;gap:8px;padding:0 8px;background:var(--navy-050);font-size:14px;line-height:24px;font-weight:600;color:var(--navy-900);white-space:nowrap;transform:translateX(-50%)}
.lnk-t1{top:-13px;left:25%}
.lnk-t2{top:-13px;left:75%}
.lnk-t3{bottom:-13px;left:50%}
.lnk-why{margin-top:48px}
.lnk-why li{gap:10px}
.lnk-why .nb{align-self:flex-start}

/* ── 표 ─────────────────────────────── */
.tbl-box{overflow-x:auto;border:1px solid var(--gray-200);border-radius:var(--radius-lg);background:var(--white)}
.tbl{width:100%;border-collapse:collapse;font-size:16px}
.tbl th,.tbl td{padding:18px 24px;text-align:left;vertical-align:top;border-bottom:1px solid var(--gray-200)}
.tbl tr:last-child td,.tbl tr:last-child th{border-bottom:0}
.tbl thead th{background:var(--navy-050);font-size:14px;font-weight:600;color:var(--navy-900)}
.tbl tbody th{width:200px;font-weight:600;color:var(--navy-900)}
.tbl td{color:var(--gray-700)}

/* ── 개발 절차 6단계 ────────────────── */
.tl > li{position:relative;display:grid;grid-template-columns:56px minmax(0,1fr) minmax(0,320px);gap:32px;padding-bottom:56px}
.tl > li:last-child{padding-bottom:0}
.tl > li::before{content:"";position:absolute;left:27px;top:56px;bottom:0;width:2px;background:var(--green-500)}
.tl > li:last-child::before{display:none}
.tl .badge{display:flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:50%;background:var(--navy-900);color:var(--white);font-size:15px;font-weight:700;letter-spacing:.04em}
.tl .body{display:flex;flex-direction:column;gap:8px;padding-top:10px}
.tl .body p{color:var(--gray-700)}
.tl .out{padding:20px 24px;border-radius:var(--radius-lg);background:var(--gray-050)}

/* ── 회사 정보 ──────────────────────── */
.facts{display:grid;grid-template-columns:160px minmax(0,1fr);border-top:1px solid var(--gray-200)}
.facts dt,.facts dd{padding:18px 0;border-bottom:1px solid var(--gray-200)}
.facts dt{font-size:14px;font-weight:600;color:var(--gray-600);padding-top:20px}
.facts dd{color:var(--ink)}

/* ── 문의 페이지 ────────────────────── */
.ct-card{display:flex;flex-direction:column;gap:16px;padding:40px;border:1px solid var(--gray-200);border-radius:var(--radius-lg);background:var(--white)}
.ct-ico{display:flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:var(--radius-md);background:var(--navy-050);color:var(--blue-600)}
.ct-ico svg{width:24px;height:24px}
.ct-val{font-size:28px;line-height:1.35;font-weight:700;color:var(--navy-900);letter-spacing:-.01em;overflow-wrap:anywhere}
.ct-card .btns{margin-top:8px}
.ct-due{padding-top:16px;border-top:1px solid var(--gray-200);font-size:14px;color:var(--gray-600)}
.olist{display:flex;flex-direction:column;counter-reset:o}
.olist li{display:flex;gap:16px;padding:16px 0;border-bottom:1px solid var(--gray-200);counter-increment:o}
.olist li:first-child{border-top:1px solid var(--gray-200)}
.olist li::before{content:counter(o,decimal-leading-zero);flex:none;width:28px;font-size:13px;font-weight:600;letter-spacing:.08em;color:var(--blue-600);padding-top:4px}
.visit{display:flex;align-items:flex-start;gap:16px}
.visit svg{width:24px;height:24px;flex:none;color:var(--blue-600);margin-top:3px}

/* 자주 묻는 질문 */
.faq{max-width:800px;border-top:1px solid var(--gray-200)}
.faq details{border-bottom:1px solid var(--gray-200)}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:56px;padding:14px 0;font-size:17px;line-height:1.5;font-weight:600;color:var(--navy-900);cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary svg{width:20px;height:20px;flex:none;color:var(--blue-600);transition:none}
.faq details[open] summary svg{transform:rotate(180deg)}
.faq .faq-a{max-width:680px;padding-bottom:20px;color:var(--gray-700)}
.faq-group{margin:48px 0 16px}
.faq-group:first-child{margin-top:0}

/* ── 기술 노트 목록 (12-1) ──────────── */
.note-card .h3 a{color:var(--navy-900);text-decoration:none}
.pg .note-card .h3 a:hover{color:var(--navy-900);text-decoration:underline}
.note-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px;margin-top:auto;padding-top:12px;font-size:14px;color:var(--gray-600)}

/* ── 기술 노트 글 (12-2~12-5) ───────── */
.art-head{background:var(--navy-050);padding:80px 0 64px}
.art-head-in{display:flex;flex-direction:column;gap:16px;max-width:760px}
.pg .art-kicker{align-self:flex-start;text-decoration:none}
.pg .art-kicker:hover{text-decoration:underline}
.art-time{font-size:14px;color:var(--gray-600)}
.art-body{padding:64px 0 96px}
.art-grid{display:grid;grid-template-columns:minmax(0,680px) 240px;column-gap:80px;align-items:start}
.toc{grid-column:2;grid-row:1;position:sticky;top:24px}
.art-main{grid-column:1;grid-row:1;min-width:0}
.toc-t{margin-bottom:12px}
.toc ol{display:flex;flex-direction:column;gap:10px;counter-reset:t}
.toc li{display:flex;gap:8px;counter-increment:t;font-size:15px;line-height:1.5;font-weight:500}
.toc li::before{content:counter(t);flex:none;width:16px;color:var(--blue-600);font-weight:600}
.pg .toc a{color:var(--gray-700);text-decoration:none}
.pg .toc a:hover{color:var(--navy-900);text-decoration:underline}
.prose{font-size:17px;line-height:1.8;color:var(--ink)}
.prose > * + *{margin-top:20px}
.prose h2{display:flex;gap:10px;margin-top:64px;margin-bottom:-4px;font-size:24px;line-height:1.4;font-weight:700;letter-spacing:-.01em;color:var(--navy-900);scroll-margin-top:24px}
.prose > h2:first-child{margin-top:0}
.prose h2 .n{color:var(--blue-600)}
.prose h3{margin-top:28px;font-size:18px;line-height:1.5;font-weight:700;color:var(--navy-900)}
.prose strong{color:var(--navy-900);font-weight:700}
.prose code{font-family:Consolas,"Courier New",monospace;font-size:.92em;padding:1px 5px;border-radius:4px;background:var(--gray-050)}
.prose ul{display:flex;flex-direction:column;gap:8px}
.prose ul li{position:relative;padding-left:22px}
.prose ul li::before{content:"";position:absolute;left:0;top:11px;width:8px;height:8px;border-radius:50%;background:var(--blue-600)}
.prose ol.steps{display:flex;flex-direction:column;gap:8px;counter-reset:s}
.prose ol.steps li{position:relative;padding-left:26px;counter-increment:s}
.prose ol.steps li::before{content:counter(s) ".";position:absolute;left:0;font-weight:600;color:var(--blue-600)}
.prose .tbl-box{margin:32px 0}
.prose .tbl{font-size:15px;line-height:1.65}
.prose .tbl th,.prose .tbl td{padding:14px 18px}
.prose .tbl tbody th{width:auto;white-space:nowrap}
.prose .tbl-pick tbody th{width:58%;white-space:normal}
.pg .prose a{text-decoration:underline}
.rule{margin:28px 0;padding:20px 24px;border-left:4px solid var(--green-500);border-radius:0 var(--radius-md) var(--radius-md) 0;background:var(--navy-050);font-size:16px;line-height:1.75}
.rule-t{margin-bottom:6px;font-size:13px;line-height:1.4;font-weight:600;letter-spacing:.08em;color:var(--blue-600)}
.afig{margin:40px 0;padding:24px;border:1px solid var(--gray-200);border-radius:var(--radius-lg);background:var(--white)}
.afig svg{width:100%;height:auto}
.afig svg text{font-family:inherit}
.afig .fv{display:none;max-width:400px;margin:0 auto}
.afig figcaption{margin-top:16px;font-size:14px;line-height:1.6;color:var(--gray-600)}
.afig figcaption b{color:var(--navy-900);font-weight:600}
.art-end{margin-top:64px;padding-top:40px;border-top:1px solid var(--gray-200);font-size:16px}
.art-end > * + *{margin-top:0}
.art-rel{display:flex;flex-direction:column;gap:12px}
.art-rel ul{display:flex;flex-wrap:wrap;gap:8px}
.art-ask{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-top:32px;padding:32px;border-radius:var(--radius-lg);background:var(--gray-050)}
.art-ask p{max-width:560px;font-size:17px;line-height:1.75;color:var(--ink)}
.art-back{margin-top:32px}

/* ── 404 ────────────────────────────── */
.nf{padding:160px 0 176px;background:var(--navy-050)}

/* ── 문의 띠 ────────────────────────── */
.band{position:relative;overflow:hidden;padding:80px 0}
.band-in{position:relative;display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:32px}
.band-txt{max-width:640px;display:flex;flex-direction:column;gap:14px}
.band-txt p{font-size:17px;line-height:1.75;color:var(--gray-300)}
.band .sig{position:absolute;right:40px;top:32px;width:90px;height:60px}

/* ── 바닥글 ─────────────────────────── */
.ftr{background:var(--navy-950);color:var(--gray-300);padding:56px 0 40px;font-size:14px;line-height:1.7}
.ftr-in{display:flex;flex-direction:column;gap:28px}
.ftr-top{display:flex;flex-wrap:wrap;justify-content:space-between;gap:28px}
.ftr-brand{display:flex;flex-direction:column;gap:12px}
.ftr-brand img{height:30px;width:auto;align-self:flex-start}
.ftr-brand span{font-size:13px}
.ftr-menu{display:flex;flex-wrap:wrap;gap:8px 24px}
.pg .ftr a{color:var(--white);text-decoration:none}
.pg .ftr a:hover{text-decoration:underline;color:var(--white)}
.ftr-info{display:flex;flex-direction:column;gap:2px}
.pg .ftr .ext{display:inline-block;width:14px;height:14px;margin-left:4px;vertical-align:-2px}
.ftr-legal{display:flex;flex-direction:column;gap:6px;padding-top:20px;border-top:1px solid rgba(255,255,255,.14);font-size:13px}

/* ── 영문 페이지 ────────────────────── */
.note-line{display:flex;align-items:flex-start;gap:16px;margin-top:40px;color:var(--gray-700)}
.note-line::before{content:"";flex:0 0 40px;height:2px;margin-top:13px;background:var(--green-500)}
.en-scope{margin-top:16px;padding-left:56px;color:var(--gray-700)}
.en-proj{margin-top:56px}
.en-proj h3{margin-bottom:16px}
.en-proj li strong{color:var(--navy-900)}
.en-steps li{display:flex;flex-direction:column;gap:8px;padding:28px;border:1px solid var(--gray-200);border-radius:var(--radius-lg);background:var(--white)}
.en-steps p{color:var(--gray-700)}
.ct-rows{display:flex;flex-direction:column;border-top:1px solid rgba(255,255,255,.18)}
.ct-row{display:grid;grid-template-columns:120px minmax(0,1fr);gap:24px;align-items:center;padding:20px 0;border-bottom:1px solid rgba(255,255,255,.18)}
.ct-row dt{font-size:13px;font-weight:600;letter-spacing:.08em;color:var(--green-500)}
.ct-row dd{font-size:18px;color:var(--white);overflow-wrap:anywhere}
.ct-row .small{color:var(--gray-300)}
.pg .dark .ct-row a{color:var(--white)}

/* 1024–1199px: 글 본문 폭 확보 (그림 글자 13px 이상) */
@media (max-width:1199px){
  .art-grid{column-gap:48px}
}

/* ── 태블릿 (768–1023px) ────────────── */
@media (max-width:1023px){
  .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .points{gap:32px}
  .signal{opacity:.5}
  .split,.phead-split{gap:40px}
  .tl > li{grid-template-columns:56px minmax(0,1fr)}
  .tl .out{grid-column:2}
  .hdr-in{gap:20px}
  .nav ul{gap:20px}

  /* 통합 그림: 2×2, 괄호선·화살표 숨김, 알약은 카드 안 */
  .pg .intg-steps{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:none;gap:24px;padding-top:24px}
  .intg-steps::before,.intg-steps::after,.intg-step::before,.pg .intg-arr,.pg .intg-pills::before{display:none}
  .intg-step{display:flex;flex-direction:column;grid-row:auto;padding:24px;border:1px solid var(--gray-200);border-radius:var(--radius-lg);background:var(--white)}
  .intg-step:last-child{background:var(--navy-050)}
  .intg-card,.intg-step:last-child .intg-card{padding:0;border:0;border-radius:0;background:none}
  .pg .intg-pills{align-items:flex-start;margin-top:16px;padding-top:16px;border-top:1px solid var(--gray-200)}

  /* 분야 연결 그림 */
  .lnk-grid{gap:20px}
  .lnk-up,.lnk-down{left:calc((100% - 40px) * 5 / 24);right:calc((100% - 40px) * 5 / 24)}
  .lnk-axis{padding:16px 8px;font-size:14px}
  .lnk-txt{display:none}
  .lnk-tag{padding:0 4px}

  /* 글 페이지: 1단, 목차 상자 */
  .art-grid{display:block;max-width:760px}
  .toc{position:static;margin-bottom:40px;padding:24px;border-radius:var(--radius-lg);background:var(--gray-050)}
}

/* ── 모바일 (< 768px) ───────────────── */
@media (max-width:767px){
  .wrap{padding:0 20px}
  .sec{padding:72px 0}
  .sec-head{margin-bottom:32px}
  .display-xl{font-size:36px}
  .display-l{font-size:30px}
  .h2{font-size:24px}
  .h3{font-size:19px}
  .lead{font-size:17px}
  .split,.phead-split{grid-template-columns:minmax(0,1fr);gap:32px}
  .btns .btn{flex:1 1 100%}

  /* 머리글: 1줄 로고·문의·EN / 2줄 글자 메뉴 4개 */
  .hdr-in{flex-wrap:wrap;height:auto;gap:0 12px;padding-top:12px}
  .logo img{height:28px}
  .pg .hdr-cta{order:1;margin-left:auto;min-height:36px;padding:0 14px;font-size:14px}
  .pg .lang{order:2;margin-left:0}
  .nav{order:3;width:100%;margin-left:0;overflow-x:auto}
  .nav ul{gap:16px;height:48px}
  .pg .nav a{font-size:14px;white-space:nowrap}

  .hero .wrap{padding-top:64px;padding-bottom:72px}
  .hero-txt{gap:20px}
  .signal{position:static;width:220px;margin:48px 0 0 auto;opacity:1}

  .phead{padding:56px 0 48px}
  .brand-panel{padding:32px 24px}
  .brand-panel img{height:40px}

  .cards,.cards-2{grid-template-columns:minmax(0,1fr);gap:16px}
  .card{padding:24px}
  .points{grid-template-columns:minmax(0,1fr);gap:28px}
  .chips li{min-height:40px;padding:0 14px;font-size:14px}
  .pg .callout{padding:24px;font-size:18px}
  .tn-entry{flex-direction:column;align-items:flex-start;gap:12px}
  .tn-entry ul{flex-direction:column;align-items:flex-start;gap:8px}
  .tn-entry li + li::before{display:none}
  .pg .tn-entry .more{margin-left:0}

  /* 통합 그림: 세로, 왼쪽 세로선 */
  .intg-band{min-height:0;padding:14px 20px;border-radius:var(--radius-lg);font-size:16px}
  .pg .intg-steps{grid-template-columns:minmax(0,1fr);gap:16px;padding:16px 0 0 28px}
  .intg-step::before{display:block;top:-16px;left:-16px;width:2px;height:calc(100% + 16px);margin-left:0}
  .intg-step:last-child::before{height:calc(50% + 16px)}
  .intg-step::after{content:"";position:absolute;top:50%;left:-16px;width:16px;height:2px;background:var(--green-500)}

  /* 분야 연결 그림: 세로, 좌(연두)·우(파랑) 세로선 */
  .lnk{padding:0 28px}
  .lnk-grid{grid-template-columns:minmax(0,1fr);gap:16px}
  .lnk-grp{padding:20px}
  .lnk-axis{flex-direction:row;flex-wrap:wrap;gap:0 6px;padding:14px 16px;font-size:15px}
  .lnk-axis span + span::before{content:"· ";}
  .lnk-axis::before,.lnk-axis::after{display:none}
  .lnk-up,.lnk-down{top:22%;bottom:20%;height:auto;width:2px;border-radius:0}
  .lnk-up{left:13px;right:auto;border:0;border-left:2px solid var(--green-500)}
  .lnk-down{left:auto;right:13px;border:0;border-right:2px solid var(--blue-600)}
  .lnk-up .lnk-head{left:-9px;right:auto;bottom:-6px;top:auto}
  .lnk-down .lnk-head{right:-9px;left:auto;top:-6px}
  .lnk-tag{padding:0;background:none;transform:none}
  .lnk-t1{top:30%;left:-13px}
  .lnk-t2{top:60%;left:-13px}
  .lnk-t3{top:45%;bottom:auto;left:auto;right:-13px}

  .tbl th,.tbl td{padding:14px 16px}
  .tbl tbody th{width:96px}
  .tbl{font-size:15px}

  .tl > li{grid-template-columns:44px minmax(0,1fr);gap:16px;padding-bottom:40px}
  .tl > li::before{left:21px;top:44px}
  .tl .badge{width:44px;height:44px;font-size:13px}
  .tl .body{padding-top:6px}
  .tl .out{padding:16px 18px}

  .facts{grid-template-columns:104px minmax(0,1fr)}
  .facts dd{padding-left:8px}

  .ct-card{padding:28px 24px}
  .ct-val{font-size:22px}

  /* 글 페이지 */
  .art-head{padding:48px 0 40px}
  .art-body{padding:40px 0 64px}
  .prose{font-size:16px}
  .prose h2{font-size:21px}
  .afig{padding:16px 8px}
  .afig figcaption{padding:0 8px}
  .afig .fh{display:none}
  .afig .fv{display:block}
  .art-ask{flex-direction:column;align-items:stretch;padding:24px}
  .art-ask .btn{width:100%}

  .nf{padding:88px 0 96px}

  .band{padding:64px 0}
  .band .sig{right:20px;top:20px;width:60px;height:40px}
  .band-txt{padding-top:24px}
  .band-in{flex-direction:column;align-items:stretch}

  .ftr{padding:48px 0 32px}
  .ct-row{grid-template-columns:minmax(0,1fr);gap:4px}
  .ct-row dd{font-size:16px}
  .en-scope{padding-left:0}
}