@charset "UTF-8";
/* 에디토리얼 레이아웃 — 여백으로 구획, 그림자 없음, 카드·이미지 radius 0, 버튼만 20px.
   컬러는 이 프로젝트 전용(딥 틸 + 페이퍼) */
body,p,h1,h2,h3,h4,li,td,th,a,span,div,button,summary{word-break:keep-all;overflow-wrap:break-word}
:root{
 --ink:#12363d;--paper:#fff;--cream:#f1f6f5;--line:#d3e0de;--accent:#2b7f8c;
 --text:#1a2628;--muted:#546466;--on-dark:#fff;--muted-dark:#c6dcd9;
 --f-display:'Instrument Serif','Chosunilbo','Noto Serif KR','Times New Roman',serif;
 --f-ui:'Archivo','Wanted Sans Variable','Wanted Sans',system-ui,sans-serif;
 --f-mono:'DM Mono','Wanted Sans Variable',ui-monospace,Menlo,monospace;
 --wrap:1360px;--sec:132px;--gap:20px;--px:48px;--r:20px}
@font-face{font-family:'Chosunilbo';src:url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_one@1.0/Chosunilbo_myungjo.woff') format('woff');font-weight:400 500;font-display:swap}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--text);font-family:var(--f-ui);font-size:17px;line-height:1.75;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.skip{position:absolute;left:-9999px;background:var(--ink);color:#fff;padding:12px 20px;z-index:100}
.skip:focus{left:12px;top:12px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--px)}
.wrap.narrow{max-width:760px}
.kicker{margin:0 0 22px;font-size:11px;font-weight:500;font-stretch:112%;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.sec-ink .kicker{color:var(--muted-dark)}
.h-xl,.h-lg,.h-md{font-family:var(--f-display);font-weight:400;letter-spacing:-.02em;margin:0 0 40px;line-height:1.15}
.h-xl{font-size:clamp(46px,9vw,132px);line-height:1.02}
.h-lg{font-size:clamp(30px,4.6vw,52px)}
.h-md{font-size:clamp(22px,2.8vw,32px);margin:64px 0 24px}
.lead{font-size:20px;line-height:1.85;margin:0 0 8px;max-width:48ch}
.sec{padding:var(--sec) 0}
.sec p{margin:0 0 28px;max-width:66ch}
.sec-cream{background:var(--cream)}.sec-paper{background:var(--paper)}
.sec-ink{background:var(--ink);color:var(--on-dark)}.sec-ink a{color:var(--on-dark)}
.btn{display:inline-block;padding:10px 20px 9px;border:1px solid var(--ink);border-radius:var(--r);background:var(--ink);color:var(--on-dark);font-family:var(--f-mono);font-size:12px;letter-spacing:.3px;text-decoration:none;cursor:pointer;transition:opacity .2s}
.btn:hover{opacity:.8}
.btn-ghost{background:transparent;color:var(--text)}
.sec-ink .btn{background:#fff;color:var(--ink);border-color:#fff}
.sec-ink .btn-ghost{background:transparent;color:#fff}
.btn-row{display:flex;flex-wrap:wrap;gap:12px;margin:48px 0 0}
.sec .btn-row{max-width:none}
/* 헤더 */
.hdr{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.95);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.hdr-in{display:flex;align-items:center;justify-content:space-between;height:68px}
.hdr-logo{text-decoration:none;display:flex;flex-direction:column;line-height:1.2}
.hdr-logo b{font-family:var(--f-display);font-weight:400;font-size:20px}
.hdr-logo small{font-family:var(--f-mono);font-size:9px;letter-spacing:1px;color:var(--muted)}
.hdr-nav{display:flex;gap:26px}.hdr-nav a{text-decoration:none;font-size:15px}.hdr-nav a:hover{color:var(--accent)}
.hdr-burger{display:none;position:relative;width:40px;height:40px;border:0;cursor:pointer;color:var(--ink);background:linear-gradient(currentColor,currentColor) center/22px 2px no-repeat}
.hdr-burger::before,.hdr-burger::after{content:'';position:absolute;left:9px;width:22px;height:2px;background:currentColor}
.hdr-burger::before{top:12px}.hdr-burger::after{bottom:12px}
.mob-nav{display:none;flex-direction:column;background:var(--cream)}
.mob-nav a{padding:14px 24px;text-decoration:none;border-top:1px solid var(--line)}
.mob-nav.open{display:flex}
.crumb{padding-top:24px;font-size:13px;color:var(--muted)}.crumb a{text-decoration:none}.crumb span{margin:0 6px}
/* 히어로 */
.hero{position:relative;display:flex;align-items:flex-end;height:78svh;min-height:480px;overflow:hidden;background:var(--ink)}
.hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero::after{content:'';position:absolute;left:0;right:0;bottom:0;height:70%;background:linear-gradient(to top,rgba(10,30,34,.82),rgba(10,30,34,.4) 45%,rgba(10,30,34,0))}
.hero-in{position:relative;z-index:1;width:100%;padding-bottom:84px;color:#fff}
.hero .kicker{color:rgba(255,255,255,.8)}
.h-hero{margin:0 0 24px;font-family:var(--f-display);font-weight:400;font-size:clamp(54px,11vw,160px);line-height:.98;letter-spacing:-.04em;padding-bottom:.06em}
.hero-sub{font-size:17px;max-width:50ch;margin:0;color:rgba(255,255,255,.92)}
.hero-text{background:var(--cream);padding:112px 0 96px}
.hero-text .lead{max-width:60ch}
/* 그리드/카드 */
.g2{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin:0 0 48px}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;margin:0 0 48px}
.g4{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin:0 0 48px}
.card{background:var(--paper);border:1px solid var(--line);padding:32px 28px}
.sec-paper .card{background:var(--cream)}
.card h3{font-family:var(--f-display);font-size:22px;font-weight:400;margin:0 0 10px;line-height:1.3}
.card p{font-size:16px;margin:0;color:var(--muted)}
a.card{display:block;text-decoration:none;transition:border-color .2s}a.card:hover{border-color:var(--ink)}
.badge{display:inline-block;font-family:var(--f-mono);font-size:11px;padding:4px 10px;border:1px solid var(--line);border-radius:var(--r);color:var(--muted);margin:0 6px 6px 0}
.box{padding:30px 32px;border-left:2px solid var(--ink);background:var(--cream);margin:44px 0;max-width:74ch}
.sec-cream .box{background:var(--paper)}
.box h3{font-size:17px;margin:0 0 8px;font-weight:600}.box p{margin:0;font-size:16px}
.checks{list-style:none;margin:0 0 48px;padding:0;max-width:70ch}
.checks li{position:relative;padding:14px 0 14px 32px;border-bottom:1px solid var(--line);font-size:16px}
.checks li::before{content:'';position:absolute;left:0;top:22px;width:14px;height:14px;border:1.5px solid var(--ink)}
.table-wrap{overflow-x:auto;margin:0 0 52px}
table{border-collapse:collapse;width:100%;min-width:560px;font-size:16px}
th,td{text-align:left;padding:14px 16px;border-bottom:1px solid var(--line);vertical-align:top}
th{font-family:var(--f-mono);font-size:12px;font-weight:500;letter-spacing:.04em;color:var(--muted);border-bottom:1px solid var(--ink)}
caption{text-align:left;caption-side:top;padding:0 0 16px;font-family:var(--f-display);font-size:24px}
/* 사례 카드 (전/후 50:50) */
.case-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;margin:0 0 40px}
.case-card{display:block;text-decoration:none;background:var(--paper);border:1px solid var(--line);transition:border-color .2s}
.case-card:hover{border-color:var(--ink)}
.case-card[hidden]{display:none}
.cmp{display:grid;grid-template-columns:1fr 1fr;gap:2px;background:var(--line)}
.cmp figure{position:relative;margin:0;background:#dfe9e8}
.cmp img{width:100%;aspect-ratio:3/4;object-fit:cover}
.cmp figcaption{position:absolute;left:8px;top:8px;background:var(--ink);color:#fff;font-family:var(--f-mono);font-size:11px;padding:2px 9px;border-radius:var(--r)}
.case-body{padding:22px 24px 26px}
.case-body h3{font-family:var(--f-display);font-weight:400;font-size:22px;line-height:1.3;margin:10px 0 8px}
.case-body p{margin:0;font-size:15px;color:var(--muted)}
.more-row{text-align:center}
/* 사례 상세 */
.story{max-width:760px;margin:0 auto}
.story h2{font-family:var(--f-display);font-weight:400;font-size:clamp(26px,3.4vw,36px);margin:64px 0 20px;line-height:1.25}
.story p{margin:0 0 24px;max-width:none}
.story figure{margin:40px 0}
.story figure img{width:100%}
.story figcaption{margin-top:10px;font-size:14px;color:var(--muted);font-family:var(--f-mono)}
.quote{border-left:2px solid var(--ink);padding:6px 0 6px 28px;margin:56px 0;font-family:var(--f-display);font-size:24px;line-height:1.55}
.quote cite{display:block;margin-top:14px;font-family:var(--f-mono);font-size:12px;font-style:normal;color:var(--muted)}
.meta-table{margin:0 0 56px}
/* FAQ 토글 */
.faq details{border-top:1px solid var(--line)}.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:22px 44px 22px 0;position:relative;font-family:var(--f-display);font-size:22px;line-height:1.4}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';position:absolute;right:6px;top:18px;font-family:var(--f-mono);font-size:22px}
.faq details[open] summary::after{content:'−'}
.faq .ans{padding:0 0 26px;max-width:68ch;color:var(--text)}
.faq .ans p{margin:0 0 12px;max-width:none}
.upd{font-family:var(--f-mono);font-size:12px;color:var(--muted);margin-top:48px}
/* 관련 카드 */
.rel{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.rel a{display:block;text-decoration:none;border:1px solid var(--line);background:var(--paper);transition:border-color .2s}
.rel a:hover{border-color:var(--ink)}
.rel img{width:100%;aspect-ratio:4/3;object-fit:cover}
.rel div{padding:18px 20px 22px}.rel b{display:block;font-family:var(--f-display);font-weight:400;font-size:20px;line-height:1.3;margin-bottom:6px}
.rel span{font-size:14px;color:var(--muted)}
/* 상담 */
.cta-pair{display:flex;flex-wrap:wrap;gap:12px;margin-top:40px}
/* 푸터 */
.ft{background:var(--ink);color:var(--muted-dark);padding:72px 0 40px;font-size:14px;line-height:1.9}
.ft a{color:#fff;text-decoration:none}.ft a:hover{text-decoration:underline}
.ft-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:48px;margin-bottom:40px}
.ft h2{font-family:var(--f-display);font-weight:400;font-size:24px;color:#fff;margin:0 0 14px}
.ft h3{font-family:var(--f-mono);font-size:11px;font-weight:500;letter-spacing:.12em;color:#fff;margin:0 0 12px}
.ft ul{list-style:none;margin:0;padding:0}
.ft-biz{border-top:1px solid rgba(255,255,255,.18);padding-top:24px;font-size:13px}
.float-cta{position:fixed;right:20px;bottom:20px;z-index:40}
.float-cta .btn{background:var(--accent);border-color:var(--accent);padding:12px 22px}
@media(max-width:1024px){.g4,.steps{grid-template-columns:1fr 1fr}.case-grid,.g3,.rel{grid-template-columns:1fr 1fr}}
@media(max-width:720px){
 :root{--sec:72px;--px:20px}
 .hdr-nav{display:none}.hdr-burger{display:block}
 .g2,.g3,.g4,.steps,.rel,.ft-grid{grid-template-columns:1fr}
 .case-grid{grid-template-columns:1fr}
 .hero{height:70svh}.hero-in{padding-bottom:56px}
 .lead{font-size:18px}.hero-text{padding:72px 0 56px}
 .float-cta{right:12px;bottom:12px}
}

/* ── 개선: 섹션 헤드·위계·카드·모바일 ───────────────────── */
.steps{list-style:none;margin:0 0 24px;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.steps-3{grid-template-columns:repeat(3,1fr)}
.steps li{position:relative;background:var(--paper);border:1px solid var(--line);border-top:3px solid var(--accent);padding:26px 24px 28px}
.sec-paper .steps li{background:var(--cream)}
.steps h3{font-family:var(--f-display);font-weight:400;font-size:22px;line-height:1.3;margin:0 0 8px}
.steps span{display:block;font-size:15px;color:var(--muted)}
/* 섹션 헤드: 짧은 포인트 라인 + 라벨 + 제목 + 리드를 한 덩어리로 */
.sec-head{margin:0 0 56px;max-width:760px}
.sec-head .kicker{display:flex;align-items:center;gap:12px}
.sec-head .kicker::before,.hero-text .kicker::before{content:'';width:32px;height:2px;background:var(--accent)}
.sec-head .h-lg,.sec-head h2{margin-bottom:22px}
.sec-head .lead{margin:0;color:var(--muted);font-size:18px}
.sec-head h2:last-child{margin-bottom:0}
.hero-text .kicker{display:flex;align-items:center;gap:12px}
/* 제목 위계: h1 > h2 > h3 > 본문이 크기·굵기·여백으로 구분되게 */
.h-lg{position:relative;padding-bottom:0}
.story .sec-head{margin-bottom:36px}
.story h3,.card h3,.rel h3,.case-body h3{font-family:var(--f-display);font-weight:400;letter-spacing:-.01em}
.sec + .sec{border-top:1px solid var(--line)}
.sec-cream + .sec-paper,.sec-paper + .sec-cream{border-top:0}
.sec-ink{border-top:0!important}
/* 카드: 사진 확대, 화살표 단서로 클릭 가능함을 분명히 */
.rel a{display:flex;flex-direction:column;height:100%;overflow:hidden}
.rel a>img,.rel a picture{flex:none}
.rel img{transition:transform .5s ease}
.rel a:hover img{transform:scale(1.04)}
.rel a{overflow:hidden}
.rel div{display:flex;flex-direction:column;flex:1;gap:8px;padding:20px 22px 24px;background:var(--paper)}
.rel h3,.rel b{font-size:21px;line-height:1.35;margin:0}
.rel .eyebrow{font-family:var(--f-mono);font-size:11px;letter-spacing:.06em;color:var(--accent)}
.rel .go{margin-top:auto;padding-top:10px;font-style:normal;font-family:var(--f-mono);font-size:12px;color:var(--ink)}
.rel .go::after{content:' \2192';transition:margin .2s}
.rel a:hover .go::after{margin-left:6px}
.rel-3{grid-template-columns:repeat(3,1fr)}
.case-card{overflow:hidden}
.case-card .cmp img{transition:transform .5s ease}
.case-card:hover .cmp img{transform:scale(1.03)}
.cmp figure{overflow:hidden}
.card h3{font-size:22px}
.faq details{background:transparent;transition:background .2s}
.faq details[open]{background:rgba(43,127,140,.06)}
.faq summary{padding-left:4px}
.faq summary h3{display:inline;font:inherit;margin:0}
.faq .ans{padding-left:4px}
.btn{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
.story h2{padding-top:12px;border-top:1px solid var(--line)}
.story .sec-head h2{border-top:0;padding-top:0}
body{padding-bottom:0}
@media(max-width:1024px){.rel-3{grid-template-columns:1fr 1fr}.steps{grid-template-columns:1fr 1fr}.steps-3{grid-template-columns:1fr}}
@media(max-width:720px){
 body{font-size:16px;padding-bottom:76px}
 .rel-3,.steps,.steps-3{grid-template-columns:1fr}
 .sec-head{margin-bottom:36px}
 .sec-head .lead{font-size:16px}
 .h-md{margin-top:44px}
 /* 모바일 버튼: 가로 가득, 터치 영역 48px 이상 */
 .btn{min-height:50px;font-size:14px;padding:12px 20px;width:100%}
 .btn-row,.cta-pair{flex-direction:column;gap:10px}
 .btn-row{margin-top:32px}
 .more-row .btn{width:100%}
 .hdr-in{height:60px}
 .mob-nav a{padding:16px 24px;font-size:16px}
 .float-cta{left:0;right:0;bottom:0;padding:10px 14px calc(10px + env(safe-area-inset-bottom));background:rgba(255,255,255,.96);border-top:1px solid var(--line)}
 .float-cta .btn{width:100%}
 .faq summary{font-size:19px;padding:18px 40px 18px 0}
 .card,.steps li{padding:22px 20px}
 .rel div{padding:16px 18px 20px}
 .story h2{margin-top:44px}
 .quote{font-size:20px;padding-left:18px}
 .h-hero{font-size:clamp(44px,13vw,64px)}
 table{min-width:520px}
}
.sec .more-row{max-width:none;text-align:center;margin:0}
.sec-head-top{max-width:none}.sec-head-top .lead{max-width:60ch}.sec-head-top h1{margin-bottom:28px}
/* 모바일 표: 행을 카드로 재배치 (라벨: 값) */
@media(max-width:720px){
 .table-wrap{overflow:visible}
 table.stack{min-width:0}
 table.stack thead{position:absolute;left:-9999px}
 table.stack,table.stack tbody,table.stack tr,table.stack td{display:block;width:100%}
 table.stack tr{border:1px solid var(--line);background:var(--paper);margin:0 0 14px;padding:6px 0}
 .sec-paper table.stack tr{background:var(--cream)}
 table.stack td{border:0;padding:8px 16px;font-size:15px}
 table.stack td::before{content:attr(data-label);display:block;font-family:var(--f-mono);font-size:11px;color:var(--muted);margin-bottom:2px}
 table.stack caption{display:block;font-size:22px;padding:0 0 14px}
}
/* 세부 안내 페이지 */
.cmp-link{padding:0;margin:36px 0;display:block}
.story .cmp-link .case-body h3{margin:10px 0 8px}
.story .steps-flow{margin:36px 0}
.story .steps-flow{grid-template-columns:repeat(2,1fr)}
.h-sub{font-family:var(--f-display);font-weight:400;font-size:24px;margin:36px 0 12px}
.story .box{margin:36px 0}
@media(max-width:720px){.story .steps-flow{grid-template-columns:1fr}}