:root{
--navy:#14315A; --royal:#2A66B4; --lightblue:#AABEDC; --panel:#F2F5FA;
--ink:#1B1B1B; --gray:#5C6672; --line:#E4E9F1; --fill:#EAF0FA; --fill2:#F4F8FC;
--serif:"Pretendard","Pretendard Variable",-apple-system,'Apple SD Gothic Neo','Malgun Gothic','Noto Sans KR',sans-serif;
--logo:"NanumSquare","Pretendard",sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:"Pretendard","Pretendard Variable",-apple-system,'Apple SD Gothic Neo','Malgun Gothic','Noto Sans KR',sans-serif;color:var(--ink);background:#fff;line-height:1.7;font-size:18px;letter-spacing:-.01em;word-break:keep-all;overflow-wrap:break-word;text-wrap:pretty}
.wrap{max-width:1080px;margin:0 auto;padding:0 24px}
a{color:inherit}
img{max-width:100%}
.skip{position:absolute;left:-9999px;top:0;background:var(--navy);color:#fff;padding:10px 16px;border-radius:0 0 8px 0;z-index:60;font-weight:700}
.skip:focus{left:0}
/* ---------- header ---------- */
header{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.95);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.bar{display:flex;align-items:center;justify-content:space-between;height:70px;gap:16px}
.logo{display:flex;align-items:center;gap:10px;font-family:var(--logo);font-weight:800;color:var(--navy);font-size:21px;letter-spacing:-.02em;text-decoration:none;white-space:nowrap}
.logo .mk{width:26px;height:26px;flex:0 0 auto}
nav.menu{display:flex;gap:4px}
.navitem{position:relative}
.navitem>a{display:block;color:#33405a;text-decoration:none;font-size:16px;font-weight:700;padding:10px 14px;border-radius:9px;cursor:pointer;white-space:nowrap}
.navitem>a:hover,.navitem>a.active{color:var(--royal);background:var(--fill2)}
.dropdown{position:absolute;top:calc(100% + 6px);left:0;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 18px 40px rgba(20,49,90,.14);padding:10px;min-width:300px;opacity:0;visibility:hidden;transform:translateY(-6px);transition:.16s;z-index:50}
.navitem:hover .dropdown,.navitem:focus-within .dropdown,.navitem.open .dropdown{opacity:1;visibility:visible;transform:translateY(0)}
.dropdown a.dall{color:var(--royal);font-weight:700;border-bottom:1px solid var(--line);border-radius:0;margin-bottom:4px}
.dropdown.wide{min-width:560px;column-count:2;column-gap:8px}
.dropdown a{display:block;text-decoration:none;font-size:15px;font-weight:600;color:#33405a;padding:9px 12px;border-radius:9px;line-height:1.4;break-inside:avoid}
.dropdown a:hover{background:var(--fill2);color:var(--royal)}
.dropdown .dhead{font-size:12px;font-weight:800;color:var(--gray);padding:8px 12px 4px;letter-spacing:.02em}
.head-cta{display:flex;align-items:center;gap:10px}
.kkt{background:var(--royal);color:#fff;border:0;border-radius:10px;padding:11px 18px;font-size:15.5px;font-weight:700;cursor:pointer;text-decoration:none;white-space:nowrap}
.kkt:hover{background:#21548f}
.menu-toggle{display:none;background:none;border:1.5px solid var(--line);border-radius:8px;width:42px;height:42px;cursor:pointer;align-items:center;justify-content:center}
.menu-toggle svg{width:22px;height:22px;stroke:var(--navy)}
/* ---------- hero ---------- */
.hero{background:linear-gradient(180deg,#F4F8FC,#fff);padding:66px 0 36px}
.hero .eyebrow{display:inline-block;font-size:14.5px;font-weight:700;color:var(--royal);background:var(--fill);padding:6px 13px;border-radius:999px;margin-bottom:18px}
.hero h1{font-size:46px;line-height:1.25;color:var(--navy);font-weight:800;letter-spacing:-.025em;margin-bottom:18px}
.hero h1 .em{color:var(--royal)}
.hero .lead{font-size:19px;color:#3a4654;max-width:700px;margin-bottom:26px;line-height:1.75}
.hero .btns{display:flex;gap:18px;flex-wrap:wrap}
.btn-ghost{background:#fff;color:var(--navy);border:1.5px solid var(--lightblue);border-radius:10px;padding:13px 22px;font-size:16px;font-weight:700;text-decoration:none;cursor:pointer}
.btn-ghost:hover{border-color:var(--royal);color:var(--royal)}
.btn-fill{background:var(--royal);color:#fff;border-radius:10px;padding:14px 24px;font-size:16px;font-weight:700;text-decoration:none;cursor:pointer;border:0}
.btn-fill:hover{background:#21548f}
.creds{display:flex;flex-wrap:wrap;gap:0;margin-top:42px;border-top:1px solid var(--line);padding-top:24px}
.cred{flex:1;min-width:150px;padding:0 18px;border-right:1px solid var(--line)}
.cred:first-child{padding-left:0}
.cred:last-child{border-right:0}
.cred .n{font-size:27px;font-weight:800;color:var(--navy);letter-spacing:-.02em}
.cred .l{font-size:14.5px;color:var(--gray);margin-top:2px;line-height:1.45}
section{padding:60px 0;border-top:1px solid var(--line)}
.panel{background:var(--panel)}
.shead{margin-bottom:28px}
.accent-bar{width:46px;height:5px;background:var(--royal);border-radius:3px;margin-bottom:16px}
h2{font-size:29px;color:var(--navy);font-weight:800;letter-spacing:-.02em;line-height:1.35}
.shead .lead{font-size:17.5px;color:var(--gray);margin-top:10px;line-height:1.7}
/* service / property grids (home) */
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.svc{border:1px solid var(--line);border-radius:14px;padding:22px;background:#fff;transition:.15s;text-decoration:none;display:block;cursor:pointer}
.svc:hover{border-color:var(--lightblue);box-shadow:0 10px 26px rgba(20,49,90,.08);transform:translateY(-2px)}
.svc .tag{font-size:12.5px;font-weight:700;color:var(--royal)}
.svc h3{font-size:18.5px;color:var(--navy);font-weight:700;margin:7px 0 7px}
.svc p{font-size:15px;color:var(--gray);line-height:1.6}
.desig{margin-top:20px;padding:18px 20px;background:var(--fill2);border-radius:12px;font-size:15.5px;color:var(--gray);line-height:1.7}
.desig b{color:var(--navy)}
.prop-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.prop{display:flex;align-items:center;gap:12px;border:1px solid var(--line);border-radius:12px;padding:16px 18px;background:#fff;text-decoration:none;transition:.15s;cursor:pointer}
.prop:hover{border-color:var(--royal);background:var(--fill2)}
.prop .ico{width:34px;height:34px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;background:var(--fill);border-radius:9px}
.prop .ico svg{width:20px;height:20px;stroke:var(--royal);fill:none;stroke-width:1.8}
.prop .nm{font-size:16px;font-weight:700;color:var(--navy)}
/* responsive diagram: process flow */
.figbox{border:1px solid var(--line);border-radius:16px;background:#fff;padding:26px 24px 20px;margin-top:6px}
.figtitle{display:flex;align-items:center;gap:11px;margin-bottom:4px}
.figtitle .b{width:6px;height:26px;border-radius:3px;background:var(--royal);flex:0 0 auto}
.figtitle h3{font-size:21px;color:var(--navy);font-weight:800}
.figsub{font-size:15.5px;color:var(--gray);margin:0 0 20px 17px}
.figcap{font-size:14px;color:var(--gray);margin-top:16px;padding-top:13px;border-top:1px dashed var(--line);font-family:var(--serif)}
.flow{display:flex;align-items:stretch;gap:0;flex-wrap:nowrap}
.flow .step{flex:1 1 0;background:#fff;border:1.5px solid var(--line);border-radius:14px;padding:0;overflow:hidden;text-align:center;box-shadow:0 3px 10px rgba(20,49,90,.05)}
.flow .step .st-img{position:relative;background:#eef4fb}
.flow .step .st-img img{display:block;width:100%;height:auto}
.flow .step .st-no{position:absolute;top:10px;left:10px;width:36px;height:36px;border-radius:50%;background:var(--navy);color:#fff;font-weight:800;font-size:17px;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 7px rgba(20,49,90,.28)}
.flow .step:last-child .st-no{background:var(--royal)}
.flow .step .st-tx{padding:15px 14px 18px}
.flow .step .st-t{font-size:18px;font-weight:700;color:var(--navy);line-height:1.4}
.flow .step .st-s{font-size:15px;color:var(--gray);margin-top:7px;line-height:1.55}
.flow .arrow{flex:0 0 auto;align-self:center;width:34px;display:flex;align-items:center;justify-content:center;color:var(--royal)}
.flow .arrow svg{width:22px;height:22px}
.flow .arrow .down{display:none}
.flow-meta{display:flex;gap:0;margin-top:16px;background:var(--fill2);border-radius:12px;overflow:hidden}
.flow-meta .m{flex:1;padding:14px 18px;display:flex;align-items:center;gap:11px}
.flow-meta .m+.m{border-left:1px solid var(--line)}
.flow-meta .m .ic{width:30px;height:30px;flex:0 0 auto;border-radius:50%;border:2px solid var(--royal);display:flex;align-items:center;justify-content:center}
.flow-meta .m .ic svg{width:15px;height:15px;stroke:var(--royal);fill:none;stroke-width:2.2}
.flow-meta .m .mt{font-size:15.5px;font-weight:700;color:var(--navy)}
.flow-meta .m .ms{font-size:14.5px;color:var(--gray)}
/* period comparison */
.period-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.pcard{border:1.5px solid var(--line);border-radius:14px;padding:22px 22px 18px;background:#fff}
.pcard .ph{display:inline-block;background:var(--navy);color:#fff;font-size:15px;font-weight:700;padding:5px 14px;border-radius:8px;margin-bottom:18px}
.pcard .band{display:flex;align-items:center;gap:8px}
.pcard .seg{flex:1;text-align:center}
.pcard .seg .leg{height:14px;border-radius:7px;background:var(--lightblue)}
.pcard .seg .lab{font-size:15.5px;font-weight:700;color:var(--gray);margin-top:9px}
.pcard .pivot{flex:0 0 auto;width:18px;height:18px;border-radius:50%;background:var(--royal);border:3px solid #fff;box-shadow:0 0 0 2px var(--lightblue)}
.pcard .pivlab{text-align:center;font-size:15.5px;font-weight:700;color:var(--navy);margin-top:14px}
.period-note{font-size:14.5px;color:var(--gray);margin-top:16px;background:var(--fill2);border-left:4px solid var(--lightblue);padding:11px 15px;border-radius:0 8px 8px 0;line-height:1.7}
.callout{background:#fff;border-left:5px solid var(--royal);border-radius:0 14px 14px 0;padding:24px 26px;margin-top:24px}
.callout p{font-family:var(--serif);font-size:21px;line-height:1.65;color:var(--navy);margin:0}
.callout p b{color:var(--royal)}
.callout .src{font-family:"Pretendard",sans-serif;display:block;font-size:14px;color:var(--gray);margin-top:12px;line-height:1.6}
/* 세무 안내(고지) 콜아웃 — 조용한 톤, 보조 강조 서체(v5.3.5: Pretendard로 통일) */
.tax-note{background:var(--fill2);border-left:4px solid var(--navy);border-radius:0 12px 12px 0;padding:18px 22px;margin-top:28px}
.tax-note .th{font-family:"Pretendard",sans-serif;font-size:16px;font-weight:800;letter-spacing:.01em;color:var(--navy);margin-bottom:8px}
.tax-note p{font-family:var(--serif);font-size:16px;line-height:1.72;color:#3a4654;margin:0}
/* performance bars */
.perf{display:grid;grid-template-columns:1.1fr 1fr;gap:32px;align-items:center}
.perf .lead-n{font-size:54px;font-weight:800;color:var(--navy);letter-spacing:-.03em;line-height:1}
.perf .lead-l{font-size:17px;color:var(--gray);margin-top:8px}
.perf .desc{font-size:16.5px;color:#3a4654;margin-top:18px;line-height:1.75}
.bars{display:flex;flex-direction:column;gap:14px}
.brow{display:grid;grid-template-columns:140px 1fr 60px;align-items:center;gap:12px}
.brow .bl{font-size:15.5px;font-weight:700;color:var(--navy)}
.brow .track{height:22px;background:var(--fill);border-radius:11px;overflow:hidden}
.brow .fillb{display:block;height:100%;border-radius:11px;background:var(--royal)}
.brow .fillb.alt{background:var(--lightblue)}
.brow .bv{font-size:15px;font-weight:700;color:var(--gray);text-align:right}
/* trust cards */
.trust{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.rcard{border:1px solid var(--line);border-radius:14px;padding:24px;background:#fff}
.rcard .rhead{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.rcard .ti{width:40px;height:40px;flex:0 0 auto;border-radius:10px;background:var(--fill);display:flex;align-items:center;justify-content:center}
.rcard .ti svg{width:22px;height:22px;stroke:var(--royal);fill:none;stroke-width:1.8}
.rcard h3{font-size:18px;color:var(--navy);font-weight:700;line-height:1.35}
.rcard p{font-size:15.5px;color:var(--gray);line-height:1.7}
/* home column list uses shared .tgrid/.tcard (index-unified) */
.col-all{margin-top:20px;text-align:center}
/* FAQ */
.faq{display:flex;flex-direction:column;gap:0;border-top:1px solid var(--line)}
details.qa{border-bottom:1px solid var(--line)}
details.qa summary{list-style:none;cursor:pointer;padding:20px 4px;display:flex;justify-content:space-between;gap:16px;align-items:flex-start;font-size:18px;font-weight:700;color:var(--navy)}
details.qa summary::-webkit-details-marker{display:none}
details.qa summary .pm{flex:0 0 auto;width:24px;height:24px;color:var(--royal);transition:.2s;margin-top:3px}
details.qa[open] summary .pm{transform:rotate(45deg)}
details.qa .a{padding:0 4px 22px;font-size:16.5px;color:#3a4654;line-height:1.8}
/* stat band */
.band{background:var(--navy);color:#fff;border-top:0}
.band .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;text-align:center}
.band .n{font-size:34px;font-weight:800;letter-spacing:-.02em}
.band .l{font-size:14.5px;color:#c2d0e6;margin-top:4px;line-height:1.5}
/* cta */
.cta{background:#0F2647;color:#fff;text-align:center;padding:60px 24px;border-top:0}
.cta h2{color:#fff;margin-bottom:10px}
.cta p{color:#c2d0e6;font-size:18px;margin-bottom:26px;max-width:640px;margin-left:auto;margin-right:auto;line-height:1.7}
/* offices */
.office-sec{background:var(--panel)}
.office-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:8px}
.office{background:#fff;border:1px solid var(--line);border-radius:14px;padding:20px}
.office .on{font-size:16.5px;font-weight:800;color:var(--navy)}
.office .oa{font-size:14.5px;color:var(--gray);margin-top:8px;line-height:1.6}
.office .badge{display:inline-block;font-size:12px;font-weight:700;color:var(--royal);background:var(--fill);padding:3px 9px;border-radius:6px;margin-left:6px}
footer{background:#0B1E3A;color:#9fb2cf;font-size:14.5px;padding:34px 0}
footer .frow{display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px}
footer b{color:#fff}
footer .legal{margin-top:16px;padding-top:16px;border-top:1px solid rgba(255,255,255,.12);font-size:13.5px;color:#7e92b0;line-height:1.8}
/* ---------- ARTICLE (content pages) ---------- */
.article{padding:46px 0 64px}
.breadcrumb{font-size:14px;color:var(--gray);margin-bottom:14px}
.breadcrumb a{color:var(--royal);text-decoration:none;cursor:pointer}
.breadcrumb a:hover{text-decoration:underline}
.art-tag{display:inline-block;font-size:13px;font-weight:800;color:var(--royal);background:var(--fill);padding:5px 12px;border-radius:999px;margin-bottom:14px}
.art-tag.desig{color:#9a6b00;background:#FFF3D6}
.art-h1{font-size:36px;color:var(--navy);font-weight:800;letter-spacing:-.02em;line-height:1.3;margin-bottom:12px}
.art-meta{font-size:14px;color:var(--gray);margin-bottom:28px;padding-bottom:20px;border-bottom:2px solid var(--line)}
.art-body{font-size:17.5px;color:#27313f;line-height:1.85}
.art-body .keyfacts{position:relative;margin:14px 0 24px;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 6px 20px rgba(20,49,90,.05);padding:18px 22px 8px;overflow:hidden}
.art-body .keyfacts:before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:linear-gradient(var(--royal),var(--navy))}
.art-body .kf-title{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:800;color:var(--royal);letter-spacing:.02em;margin:0 0 10px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.art-body .kf-title i{width:8px;height:8px;border-radius:2px;background:var(--royal);display:inline-block;flex:0 0 auto}
.art-body .kf-list{margin:0}
.art-body .kf-row{display:grid;grid-template-columns:150px 1fr;gap:14px;padding:11px 0;border-bottom:1px dashed var(--line)}
.art-body .kf-row dt{margin:0;font-size:15px;font-weight:700;color:var(--gray);line-height:1.6}
.art-body .kf-row dd{margin:0;font-size:16.5px;color:#27313f;line-height:1.65}
.art-body .kf-links a{color:var(--royal);text-decoration:none;font-weight:600;border-bottom:1px solid var(--lightblue);cursor:pointer}
.art-body .kf-links a:hover{border-bottom-color:var(--royal)}
.art-body .kf-links span{color:var(--lightblue);margin:0 8px}
.art-body .kf-note{font-size:14px;color:var(--gray);line-height:1.6;padding:12px 0 6px;margin:0}
@media(max-width:560px){
.art-body .kf-row{grid-template-columns:1fr;gap:3px;padding:10px 0}
.art-body .kf-row dt{font-size:13.5px}
}
.art-body .defp{font-size:19px;color:var(--navy);font-weight:600;line-height:1.75;background:var(--fill2);border-left:4px solid var(--royal);padding:18px 22px;border-radius:0 12px 12px 0;margin:0 0 8px}
.art-body h2{font-size:24px;color:var(--navy);margin:38px 0 12px;line-height:1.4}
.art-body h2.faq-h{margin-top:46px;padding-top:8px}
.art-body p{margin:0 0 16px}
.art-body strong{color:var(--navy)}
.art-body a{color:var(--royal)}
.art-body .blist{margin:0 0 18px;padding-left:4px;list-style:none;display:flex;flex-direction:column;gap:8px}
.art-body .blist li{position:relative;padding-left:22px;line-height:1.75}
.art-body .blist li:before{content:"";position:absolute;left:4px;top:12px;width:7px;height:7px;border-radius:2px;background:var(--royal)}
.tablewrap{overflow-x:auto;margin:0 0 22px;border:1px solid var(--line);border-radius:12px}
.art-body table{width:100%;border-collapse:collapse;font-size:15.5px;min-width:420px}
.art-body th{background:var(--navy);color:#fff;font-weight:700;text-align:left;padding:12px 14px;line-height:1.5}
.art-body td{padding:11px 14px;border-top:1px solid var(--line);color:#27313f;line-height:1.6;vertical-align:top}
.art-body tbody tr:nth-child(even){background:var(--fill2)}
.photoph{margin:8px 0 24px;border:1.5px dashed var(--lightblue);background:var(--fill2);border-radius:14px;padding:26px 22px;display:flex;align-items:center;gap:16px}
.photoph .ph-ic{width:46px;height:46px;flex:0 0 auto;border-radius:12px;background:#fff;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--royal)}
.photoph .ph-ic svg{width:26px;height:26px}
.photoph figcaption{font-size:14.5px;color:var(--gray);line-height:1.65}
.photoph figcaption:before{content:"이미지 자리표시 · ";font-weight:700;color:var(--royal)}
.photo{margin:8px 0 24px}
.photo img{display:block;width:100%;height:auto;border-radius:14px;border:1px solid var(--line)}
.photo.portrait img{max-width:360px;margin:0 auto}
.photo figcaption{font-size:14px;color:var(--gray);line-height:1.6;margin-top:8px;text-align:center}
/* 미디어 2단 (텍스트 + 세로 폰 이미지) — consult 카톡 화면 */
.media-split{display:flex;flex-wrap:wrap;gap:32px;align-items:center;margin:10px 0 30px}
.media-split .ms-txt{flex:1 1 300px;min-width:0}
.media-split .ms-txt h2{margin-top:0}
.media-split .photo{flex:0 0 260px;margin:0 auto}
.media-split .photo.portrait img{max-width:260px}
@media(max-width:680px){ .media-split{flex-direction:column;gap:16px} .media-split .ms-txt{flex:1 1 auto} }
.hero-photo{position:relative;padding:62px 0;overflow:hidden;background:#14315A url('/assets/images/hero-office.jpg') center 30%/cover no-repeat;text-align:left}
.hero-photo:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(11,26,48,.9) 0%,rgba(11,26,48,.72) 46%,rgba(11,26,48,.42) 100%),linear-gradient(0deg,rgba(11,26,48,.5) 0%,rgba(11,26,48,0) 34%)}
.hero-photo .wrap{position:relative;z-index:2}
.hero-photo .eyebrow{color:#cfe0f5;background:rgba(255,255,255,.15)}
.hero-photo h1{color:#fff}
.hero-photo h1 .em{color:#9ec1ee}
.hero-photo .lead{color:#dbe3ee;max-width:680px}
.hero-photo .btns{justify-content:flex-start;margin-top:30px;gap:18px}
.hero-photo .btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.45)}
.hero-photo .creds{border-top-color:rgba(255,255,255,.2)}
.hero-photo .cred{border-right-color:rgba(255,255,255,.2)}
.hero-photo .cred .n{color:#fff}
.hero-photo .cred .l{color:#aebfd6}
@media(max-width:680px){.hero-photo{text-align:left}.hero-photo .btns{justify-content:flex-start}.hero-photo .lead{margin-left:0}}
@media(max-width:760px){.hero-photo{background-position:82% 26%}}
.col-hero{margin:4px 0 26px}
.col-hero img{display:block;width:100%;height:auto;border-radius:14px;border:1px solid var(--line)}
.photo-2up{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.photo-2up img{margin:0}
.photo-2up figcaption{grid-column:1 / -1}
@media(max-width:680px){.photo-2up{grid-template-columns:1fr}}
.mid-illust{margin:28px 0 30px}
.mid-illust img{display:block;width:100%;height:auto;border-radius:14px;border:1px solid var(--line)}
.ilinks{display:flex;flex-wrap:wrap;gap:10px;margin:4px 0 22px}
.ilink,.ilink-col{display:inline-flex;align-items:center;gap:6px;font-size:15px;font-weight:700;color:var(--royal);background:var(--fill);border:1px solid var(--line);border-radius:10px;padding:9px 14px;text-decoration:none;cursor:pointer}
.ilink:before{content:"→";font-weight:800}
.ilink-col:before{content:"✎";font-weight:800}
.ilink:hover,.ilink-col:hover{background:var(--royal);color:#fff;border-color:var(--royal)}
.art-cta{margin-top:40px;background:var(--navy);color:#fff;border-radius:16px;padding:30px 28px;text-align:center}
.art-cta.desig{background:#243B57}
.art-cta h3{font-size:21px;font-weight:800;margin-bottom:8px}
.art-cta p{font-size:15.5px;color:#c2d0e6;margin-bottom:20px;line-height:1.7}
.art-related{margin-top:40px}
.art-related .rh{font-size:14px;font-weight:800;color:var(--gray);margin-bottom:12px}
.art-related .rgrid{display:flex;flex-wrap:wrap;gap:10px}
.art-related a{font-size:15px;font-weight:700;color:var(--navy);background:#fff;border:1px solid var(--line);border-radius:10px;padding:10px 14px;text-decoration:none;cursor:pointer}
.art-related a:hover{border-color:var(--royal);color:var(--royal)}
/* listing pages */
.listing{padding:46px 0 64px}
.list-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:8px}
.list-card{border:1px solid var(--line);border-radius:14px;padding:24px;background:#fff;text-decoration:none;transition:.15s;cursor:pointer;display:block}
.list-card:hover{border-color:var(--lightblue);box-shadow:0 10px 26px rgba(20,49,90,.08);transform:translateY(-2px)}
.list-card .lt{font-size:12.5px;font-weight:800;color:var(--royal)}
.list-card .lt.desig{color:#9a6b00}
.list-card h3{font-size:19px;color:var(--navy);font-weight:800;margin:7px 0 8px}
.list-card p{font-size:15px;color:var(--gray);line-height:1.65}
/* members / location detail */
.member-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:8px}
.member-grid{grid-template-columns:repeat(5,1fr);gap:14px;margin:10px 0 26px}
.member-card{margin:0;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#fff}
.member-card img{display:block;width:100%;height:auto;aspect-ratio:3/4;object-fit:cover}
.member-card figcaption{padding:10px 12px 12px}
.member-card figcaption strong{display:block;font-size:15.5px;font-weight:800;color:var(--navy)}
.member-card figcaption span{display:block;font-size:13.5px;color:var(--gray);margin-top:3px;line-height:1.5}
.profile-block{display:grid;grid-template-columns:190px 1fr;gap:22px;align-items:start;border:1px solid var(--line);border-radius:16px;background:#fff;padding:22px;margin:14px 0 18px}
.profile-block .profile-photo{margin:0}
.profile-block .profile-photo img{display:block;width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;border-radius:12px}
.profile-body h3{font-size:19px;font-weight:800;color:var(--navy);margin:2px 0 10px}
.profile-body p{font-size:15.5px;color:var(--ink);line-height:1.75;margin-bottom:10px}
.profile-body ul{margin:0 0 12px 2px;padding:0;list-style:none}
.profile-body li{font-size:14.5px;color:var(--gray);line-height:1.7;padding-left:14px;position:relative}
.profile-body li::before{content:"";position:absolute;left:0;top:11px;width:5px;height:5px;border-radius:50%;background:var(--royal)}
.author-box{display:flex;gap:18px;align-items:flex-start;border:1px solid var(--line);border-radius:14px;background:var(--fill2);padding:20px 22px;margin:30px 0 6px}
.author-box img{width:74px;height:98px;object-fit:cover;border-radius:10px;flex-shrink:0}
.author-box .ab-name{font-size:15.5px;font-weight:800;color:var(--navy);margin-bottom:6px}
.author-box p{font-size:14.5px;color:var(--gray);line-height:1.7;margin-bottom:8px}
/* performance page */
.perf-kpis{display:flex;flex-wrap:wrap;gap:40px;margin:22px 0 6px}
.pkpi .n{font-family:var(--serif);font-size:33px;font-weight:700;color:var(--navy);line-height:1}
.pkpi .n small{font-size:15px;margin-left:2px;font-family:"Pretendard",sans-serif;color:var(--gray)}
.pkpi .l{font-size:14px;color:var(--gray);margin-top:8px}
.perf-chart{background:#fff;border:1px solid var(--line);border-radius:14px;padding:28px 30px;margin:18px 0 26px}
.perf-chart h3{font-size:16.5px;font-weight:800;color:var(--navy);margin-bottom:20px}
.barrow{display:grid;grid-template-columns:200px 1fr 150px;align-items:center;gap:14px;margin-bottom:12px}
.barlabel{font-size:14.5px;color:var(--ink);text-align:right}
.bartrack{background:var(--fill);border-radius:4px;height:26px;overflow:hidden}
.barfill{height:100%;background:var(--lightblue);border-radius:4px}
.barfill.hl{background:linear-gradient(90deg,var(--royal),var(--navy))}
.barval{font-size:14px;color:var(--gray)}
.barval span{color:var(--navy);font-weight:800;margin-left:3px}
.perf-chart .cap{font-size:14px;color:var(--gray);margin-top:16px;padding-top:14px;border-top:1px dashed var(--line)}
.perf-featured{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:18px 0}
.perf-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-bottom:14px}
.pcard{position:relative;background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;transition:transform .25s,box-shadow .25s,border-color .25s;display:flex}
.pcard:hover,.pcard:focus-within,.pcard:focus{transform:translateY(-4px);box-shadow:0 16px 36px rgba(20,49,90,.13);border-color:var(--lightblue);outline:none}
.pcard.feat{border-top:3px solid var(--royal)}
.pbg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .4s ease;z-index:0}
.pcard:hover .pbg,.pcard:focus-within .pbg,.pcard:focus .pbg{opacity:.16}
.pcard-in{position:relative;z-index:1;padding:20px 22px;display:flex;flex-direction:column;width:100%}
.pcard-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.pbadge{font-size:13px;font-weight:800;color:var(--royal);background:var(--fill2);border:1px solid var(--line);border-radius:99px;padding:4px 11px}
.pyear{font-size:13.5px;color:var(--gray)}
.pclient{font-size:13.5px;font-weight:700;color:var(--gray);margin-bottom:5px}
.ptitle{font-size:15.5px;font-weight:800;color:var(--navy);line-height:1.55;margin-bottom:12px}
.pamt{margin-top:auto;font-family:var(--serif);font-size:19px;font-weight:700;color:var(--navy)}
.ptable td:first-child{font-weight:600}
.perf-agg{margin:18px 0 8px;background:var(--fill2);border:1px solid var(--line);border-radius:14px;padding:20px 24px}
.perf-agg p{font-size:14.5px;color:var(--ink);line-height:1.8}
@media(hover:none){
.pcard{flex-direction:column}
.pcard .pbg{position:relative;inset:auto;width:100%;height:104px;opacity:1;transition:none}
}
@media(prefers-reduced-motion:reduce){.pcard,.pbg,.barfill{transition:none}}
/* fee calculator */
.calc{border:1px solid var(--line);border-radius:16px;background:#fff;padding:26px 24px;margin:8px 0 24px;box-shadow:0 6px 20px rgba(20,49,90,.06)}
.calc .ctitle{display:flex;align-items:center;gap:10px;font-size:20px;font-weight:800;color:var(--navy);margin-bottom:6px}
.calc .csub{font-size:14.5px;color:var(--gray);margin-bottom:20px;line-height:1.6}
.calc-row{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end}
.calc label{display:block;font-size:14px;font-weight:700;color:var(--navy);margin-bottom:7px}
.calc .inp{flex:1;min-width:200px}
.calc input[type=text]{width:100%;font-size:20px;font-weight:700;color:var(--navy);border:1.5px solid var(--line);border-radius:10px;padding:13px 14px;text-align:right;font-family:inherit}
.calc input[type=text]:focus{outline:none;border-color:var(--royal)}
.calc .unit{font-size:15px;color:var(--gray);font-weight:700;margin-left:4px}
.calc .presets{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.calc .preset{font-size:14px;font-weight:700;color:var(--royal);background:var(--fill);border:1px solid var(--line);border-radius:999px;padding:8px 14px;cursor:pointer}
.calc .preset:hover{background:var(--royal);color:#fff;border-color:var(--royal)}
.calc .opt{display:flex;align-items:center;gap:9px;margin-top:16px;font-size:15px;color:#27313f}
.calc .opt input{width:18px;height:18px;accent-color:var(--royal)}
.calc-out{margin-top:22px;display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.calc-out .oc{border:1px solid var(--line);border-radius:12px;padding:16px 16px;background:var(--fill2)}
.calc-out .oc.lead{background:var(--navy);border-color:var(--navy)}
.calc-out .oc .ol{font-size:13px;font-weight:700;color:var(--gray);line-height:1.4}
.calc-out .oc.lead .ol{color:#aebfd8}
.calc-out .oc .ov{font-size:23px;font-weight:800;color:var(--navy);margin-top:6px;letter-spacing:-.02em}
.calc-out .oc.lead .ov{color:#fff}
.calc-note{font-size:13.5px;color:var(--gray);margin-top:16px;line-height:1.75;background:var(--fill2);border-radius:10px;padding:14px 16px}
/* ---------- responsive ---------- */
@media(max-width:1040px){ nav.menu{gap:0} .navitem>a{padding:10px 10px;font-size:15px} }
@media(max-width:920px){
.svc-grid{grid-template-columns:1fr 1fr}
.prop-grid{grid-template-columns:1fr 1fr}
.trust{grid-template-columns:1fr}
.perf{grid-template-columns:1fr;gap:26px}
.office-grid{grid-template-columns:1fr 1fr}
.band .grid{grid-template-columns:1fr 1fr;gap:28px 20px}
.list-grid{grid-template-columns:1fr}
.member-grid{grid-template-columns:repeat(2,1fr)}
.perf-featured,.perf-cards{grid-template-columns:1fr}
.barrow{grid-template-columns:1fr;gap:5px;margin-bottom:16px}
.barlabel{text-align:left;font-size:14px}
.barval{text-align:right}
.perf-kpis{gap:24px}
.ptable{font-size:13.5px}
.ptable th:nth-child(3):nth-last-child(2),.ptable td:nth-child(3):nth-last-child(2){display:none}
}
.ptable tr.pf{display:none}
.tablewrap.pf-open tr.pf{display:table-row}
.perf-cards .pcard.pf{display:none}
.perf-cards.pf-open .pcard.pf{display:flex}
.perf-more-btn{display:inline-flex;align-items:center;gap:6px;margin:2px 0 22px;padding:9px 18px;font-family:"Pretendard",sans-serif;font-size:14px;font-weight:700;color:var(--royal);background:var(--fill);border:1px solid var(--line);border-radius:9px;cursor:pointer}
.perf-more-btn:hover{background:var(--fill2)}
@media(max-width:640px){
.profile-block{grid-template-columns:1fr}
.profile-block .profile-photo{max-width:220px}
}
@media(max-width:860px){
nav.menu{display:none}
nav.menu.open{display:flex;position:absolute;top:70px;left:0;right:0;flex-direction:column;gap:0;background:#fff;border-bottom:1px solid var(--line);padding:8px 16px 18px;box-shadow:0 12px 24px rgba(20,49,90,.12);max-height:78vh;overflow:auto}
.menu-toggle{display:flex}
.navitem{position:static}
.navitem>a{padding:14px 8px;border-bottom:1px solid var(--line);font-size:17px}
.dropdown{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;border-radius:0;padding:0 0 8px 12px;min-width:0;column-count:1!important;display:none}
.navitem.open-sub .dropdown{display:block}
.dropdown.wide{min-width:0}
}
@media(max-width:760px){
body{font-size:17px}
.hero{padding:46px 0 26px}
.hero h1{font-size:31px}
.hero .lead{font-size:17.5px}
.hero .btns{flex-direction:column;gap:10px;width:100%}
.hero .btns a{width:100%;min-width:0;max-width:none;display:flex;justify-content:center;align-items:center;text-align:center;white-space:normal}
h2{font-size:24px}
.art-h1{font-size:27px}
.art-body{font-size:17px}
.cred{min-width:50%;border-right:0;padding-left:0;margin-bottom:16px}
.flow{flex-direction:column}
.flow .step{width:100%;flex:0 0 auto}
.flow .step .st-img img{max-width:420px;margin:0 auto}
.flow .arrow{width:100%;height:30px}
.flow .arrow .right{display:none}
.flow .arrow .down{display:block}
.flow-meta{flex-direction:column}
.flow-meta .m+.m{border-left:0;border-top:1px solid var(--line)}
.period-grid{grid-template-columns:1fr}
.calc-out{grid-template-columns:1fr}
}
@media(max-width:480px){
.svc-grid{grid-template-columns:1fr}
.prop-grid{grid-template-columns:1fr}
.office-grid{grid-template-columns:1fr}
.band .grid{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto}}
:focus-visible{outline:3px solid var(--royal);outline-offset:2px;border-radius:4px}
/* SVG 도식 */
/* ===== 반응형 도식: 비교카드 / 디렉터리 (텍스트 유지·글씨 고정·모바일 세로 스택) ===== */
.dgm{margin:28px 0;font-family:Pretendard,'Noto Sans KR',sans-serif}
.dgm-head{margin:0 0 16px}
.dgm-head h3{font-size:20px;font-weight:800;color:#14315A;margin:0 0 6px;line-height:1.35;letter-spacing:-.01em}
.dgm-head p{font-size:16px;color:#33404e;margin:0;line-height:1.5}
.dgm-intro{font-size:17px;font-weight:700;color:#14315A;text-align:center;background:#EEF3FA;border-radius:10px;padding:10px 14px;margin:0 0 14px}
.dgm-cards{display:flex;flex-wrap:wrap;gap:14px}
.dgm-card{flex:1 1 200px;min-width:0;border:1px solid #E1E7F0;border-radius:12px;overflow:hidden;background:#fff;display:flex;flex-direction:column}
.dgm-card .ch{padding:12px 14px;font-size:18px;font-weight:800;color:#fff;text-align:center;letter-spacing:-.01em;line-height:1.3}
.dgm-card .cb{padding:14px 16px;display:flex;flex-direction:column;height:100%}
.dgm-card.ctr .cb{text-align:center}
.dgm-card .lead{font-size:17px;font-weight:700;color:#2A66B4;margin:0 0 8px;line-height:1.45}
.dgm-card .txt{font-size:17px;color:#1B1B1B;margin:0;line-height:1.55}
.dgm-card .eg{margin-top:auto;font-size:14px;color:#5C6672;line-height:1.5}
.dgm-card .eg.br{border-top:1px dashed #E1E7F0;margin-top:12px;padding-top:10px}
.ch-navy{background:#14315A}.ch-royal{background:#2A66B4}.ch-light{background:#AABEDC;color:#14315A}.ch-grey{background:#6B7684}
.dgm-result{margin-top:14px;background:#14315A;color:#fff;border-radius:12px;padding:14px 18px;text-align:center;font-size:17px;font-weight:700;line-height:1.45}
.dgm-cap{margin-top:12px;font-size:14px;line-height:1.55;color:#5C6672}
.dgm-dir{display:flex;flex-direction:column;gap:12px}
.dir-row{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;border:1px solid #E1E7F0;border-radius:12px;padding:14px 18px}
.dir-badge{flex:0 0 auto;min-width:104px;background:#14315A;color:#fff;font-size:16px;font-weight:800;text-align:center;border-radius:8px;padding:8px 10px;line-height:1.3}
.dir-badge small{display:block;font-size:13px;font-weight:600;color:#AABEDC;margin-top:2px}
.dir-addr{flex:1 1 260px;min-width:0;font-size:16px;color:#1B1B1B;line-height:1.5}
.dir-tel{flex:0 0 auto;font-size:16px;color:#2A66B4;font-weight:700;line-height:1.5}
.dir-tel small{display:block;font-size:13px;color:#5C6672;font-weight:600}
@media(max-width:640px){
.dgm-cards{flex-direction:column;gap:12px}
.dgm-card{flex:1 1 auto}
.dgm-head h3{font-size:19px}
.dir-row{flex-direction:column;align-items:flex-start}
.dir-addr{flex:0 0 auto}
.dir-badge{width:100%}
}
/* ===== 흐름도 도식 (.dgm-flow) — 홈 사진플로우(.flow)와 별개 ===== */
.dgm-flow{display:flex;flex-wrap:nowrap;gap:6px;align-items:stretch}
.dgm-flow .fstep{flex:1 1 0;min-width:0;border:1px solid var(--line);border-radius:12px;background:#fff;padding:15px 15px 16px;display:flex;flex-direction:column}
.dgm-flow .fno{width:32px;height:32px;flex:0 0 32px;box-sizing:border-box;border-radius:50%;background:var(--navy);color:#fff;font-weight:800;font-size:15px;display:flex;align-items:center;justify-content:center;margin-bottom:9px}
.dgm-flow .fstep h4{font-size:18px;font-weight:800;color:var(--navy);margin:0 0 5px;line-height:1.3}
.dgm-flow .fstep p{font-size:16px;color:var(--ink);margin:0;line-height:1.5}
.dgm-flow .fhd{display:flex;align-items:center;justify-content:space-between;margin-bottom:9px}
.dgm-flow .fhd .fno{margin-bottom:0}
.dgm-flow .fic{width:26px;height:26px;flex:0 0 auto;color:var(--royal)}
.dgm-flow .fic svg{width:100%;height:100%;display:block}
.dgm-flow .fstep.fin{background:var(--navy);border-color:var(--navy)}
.dgm-flow .fstep.fin .fno{background:#fff;color:var(--navy)}
.dgm-flow .fstep.fin h4{color:#fff}
.dgm-flow .fstep.fin p{color:#dbe6f5}
.dgm-flow .farw{flex:0 0 auto;align-self:center;color:var(--royal);font-size:20px;font-weight:800}
.dgm-flow .fop{flex:0 0 auto;align-self:center;color:var(--gray);font-size:26px;font-weight:800;line-height:1;padding:0 2px}
.dgm-flow-pills{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px;align-items:flex-start}
.dfpill{flex:1 1 220px;background:var(--fill);border-radius:10px;padding:10px 14px;font-size:14px;color:#33404e}
.dfpill b{color:var(--navy);font-weight:800}
.dgm-flow.vert{flex-direction:column;flex-wrap:wrap;gap:0}
.dgm-flow.vert .fstep{flex:1 1 auto;flex-direction:row;gap:14px;align-items:flex-start;border:none;border-radius:0;padding:0 0 22px;position:relative}
.dgm-flow.vert .fstep:last-child{padding-bottom:0}
.dgm-flow.vert .fstep::before{content:"";position:absolute;left:16px;top:32px;bottom:0;width:2px;background:#D3DCE8}
.dgm-flow.vert .fstep:last-child::before{display:none}
.dgm-flow.vert .fno{margin-bottom:0;position:relative;z-index:1}
.dgm-flow.vert .rc{flex:1 1 auto;min-width:0;padding-top:3px}
.dgm-flow.vert .fstep.fin{padding:0}
.dgm-flow.vert .fstep.fin .rc{background:var(--navy);border-radius:12px;padding:14px 16px;margin-top:-11px}
.dgm-flow.vert .fstep.fin .rc h4{color:#fff}
.dgm-flow.vert .fstep.fin .rc p{color:#dbe6f5}
@media(max-width:640px){
.dgm-flow{flex-direction:column;flex-wrap:wrap}
.dgm-flow .fstep{flex:1 1 auto}
.dgm-flow>.farw{transform:rotate(90deg)}
.dgm-flow-pills{flex-direction:column}
.dfpill{flex:0 0 auto}
.dgm-flow.vert .fstep{padding:0 0 22px}
}
/* ===== 대화 목업 (.dgm-chat) — 카카오톡 채널 상담 예시 ===== */
.dgm-chat{display:flex;flex-wrap:wrap;gap:14px}
.dgm-chat .kt{flex:1 1 250px;min-width:0;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#fff;display:flex;flex-direction:column}
.dgm-chat .kt-stage{background:var(--navy);color:#fff;padding:11px 15px}
.dgm-chat .kt-stage b{display:block;font-size:16px;font-weight:800;line-height:1.3;letter-spacing:-.01em}
.dgm-chat .kt-stage span{display:block;font-size:14px;color:var(--lightblue);font-weight:600;margin-top:2px}
.dgm-chat .kt-hd{display:flex;align-items:center;gap:8px;padding:10px 13px;border-bottom:1px solid var(--line);background:var(--fill2)}
.dgm-chat .kt-hd .mk{width:24px;height:24px;flex:0 0 auto;border-radius:7px;background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:center}
.dgm-chat .kt-hd .mk svg{width:14px;height:14px}
.dgm-chat .kt-hd .nm{font-size:15px;font-weight:700;color:var(--navy)}
.dgm-chat .kt-hd .tel{font-size:13px;color:var(--gray)}
.dgm-chat .kt-body{padding:14px 13px;display:flex;flex-direction:column;gap:10px;background:#EAECEF;flex:1 1 auto}
.dgm-chat .row{display:flex;flex-direction:column;max-width:88%}
.dgm-chat .row.l{align-self:flex-start;align-items:flex-start}
.dgm-chat .row.r{align-self:flex-end;align-items:flex-end}
.dgm-chat .who{font-size:13px;color:#6a7686;margin:0 5px 4px}
.dgm-chat .b{font-size:16px;line-height:1.55;padding:10px 13px;border-radius:13px}
.dgm-chat .b.l{background:#fff;border:1px solid var(--line);color:var(--ink);border-top-left-radius:5px}
.dgm-chat .b.r{background:#FEE500;color:#2A2000;border-top-right-radius:5px}
.dgm-chat .chip{display:inline-flex;align-items:center;gap:6px;margin-top:7px;font-size:14px;padding:6px 10px;border-radius:9px;background:#fff;border:1px solid var(--line);color:var(--gray)}
.dgm-chat .chip svg{width:15px;height:15px;flex:0 0 auto}
.dgm-chat .lchip{display:inline-flex;align-items:center;gap:6px;margin-top:7px;font-size:14px;font-weight:700;padding:6px 11px;border-radius:9px;background:var(--fill);color:var(--royal);border:1px solid #CDDAF0}
.dgm-chat .lchip svg{width:15px;height:15px;flex:0 0 auto}
@media(max-width:640px){ .dgm-chat{flex-direction:column} .dgm-chat .kt{flex:1 1 auto} .dgm-chat .kt-body{flex:0 1 auto} }
/* ===== 타임라인: 기간 막대형 (.dgm-period) — 3등분 균등 ===== */
.dgm-period{margin:4px 0 0}
.dgm-period .prow{margin:0 0 22px}
.dgm-period .prow:last-child{margin-bottom:0}
.dgm-period .plabel{font-size:16px;font-weight:800;color:var(--navy);margin:0 0 8px}
.dgm-period .track{position:relative;display:flex;align-items:stretch;border-radius:8px;overflow:hidden;min-height:56px}
.dgm-period .seg{flex:1 1 0;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:9px 10px;text-align:center;box-sizing:border-box}
.dgm-period .seg .st{font-size:16px;font-weight:700;line-height:1.3}
.dgm-period .seg .ss{font-size:14px;line-height:1.3;margin-top:2px}
.dgm-period .seg.before{background:var(--fill);color:var(--navy)}
.dgm-period .seg.after{background:#DCE6F5;color:var(--navy)}
.dgm-period .pivot{flex:1 1 0;display:flex;flex-direction:column;justify-content:center;align-items:center;background:var(--navy);color:#fff;padding:9px 12px;text-align:center;z-index:1}
.dgm-period .pivot .pt{font-size:15px;font-weight:800;line-height:1.25}
@media(max-width:640px){
.dgm-period .seg{padding:8px 6px}
.dgm-period .pivot{padding:8px 8px}
.dgm-period .pivot .pt{font-size:14px}
}
/* ===== 타임라인: 연혁 세로전환형 (.dgm-tl) ===== */
.dgm-tl{display:flex;gap:0;flex-wrap:nowrap}
.dgm-tl .node{flex:1 1 0;min-width:0;position:relative;padding:0 8px}
.dgm-tl .node::before{content:"";position:absolute;top:13px;left:0;right:0;height:2px;background:#D3DCE8;z-index:0}
.dgm-tl .node:first-child::before{left:50%}
.dgm-tl .node:last-child::before{right:50%}
.dgm-tl .dot{position:relative;z-index:1;width:14px;height:14px;border-radius:50%;background:var(--royal);margin:6px auto 12px}
.dgm-tl .yr{font-size:18px;font-weight:800;color:var(--navy);text-align:center;margin:0 0 6px}
.dgm-tl .nt{font-size:16px;color:var(--ink);text-align:center;line-height:1.4;margin:0}
.dgm-tl .ns{font-size:14px;color:var(--gray);text-align:center;line-height:1.35;margin:3px 0 0}
@media(max-width:640px){
.dgm-tl{flex-direction:column}
.dgm-tl .node{padding:0 0 20px 34px}
.dgm-tl .node:last-child{padding-bottom:0}
.dgm-tl .node::before{top:0;bottom:0;left:6px;right:auto;width:2px;height:auto}
.dgm-tl .node:first-child::before{top:7px;left:6px}
.dgm-tl .node:last-child::before{height:100%;left:6px}
.dgm-tl .dot{position:absolute;left:0;top:5px;margin:0}
.dgm-tl .yr,.dgm-tl .nt,.dgm-tl .ns{text-align:left}
}
/* ===== 체크리스트 (.dgm-check) ===== */
.dgm-check{display:flex;flex-direction:column;gap:0;margin:2px 0 0}
.dgm-check .ci{display:flex;gap:12px;align-items:flex-start;padding:12px 2px;border-bottom:1px solid #EEF1F5}
.dgm-check .ci:last-child{border-bottom:none}
.dgm-check .ck{flex:0 0 26px;width:26px;height:26px;box-sizing:border-box;border-radius:50%;background:var(--royal);color:#fff;display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:800;line-height:1}
.dgm-check .ct{flex:1 1 auto;font-size:17px;color:var(--ink);line-height:1.5;padding-top:2px}
/* ===== 막대차트: 가로막대형 (.dgm-bars) ===== */
.dgm-bars{display:flex;flex-direction:column;gap:14px;margin:4px 0 0}
.dgm-bars .brow{display:grid;grid-template-columns:120px 1fr auto;align-items:center;gap:12px}
.dgm-bars .blabel{font-size:16px;font-weight:700;color:var(--navy);text-align:right;line-height:1.3}
.dgm-bars .blabel .sub{display:block;font-size:14px;font-weight:600;color:var(--gray)}
.dgm-bars .btrack{background:var(--panel);border-radius:7px;height:36px}
.dgm-bars .bfill{height:100%;background:var(--royal);border-radius:7px;min-width:3px}
.dgm-bars .bfill.hl{background:var(--navy)}
.dgm-bars .bval{font-size:16px;font-weight:800;color:var(--navy);white-space:nowrap;min-width:56px}
@media(max-width:640px){
.dgm-bars .brow{grid-template-columns:1fr auto;grid-template-areas:"label val" "track track";row-gap:5px;column-gap:8px}
.dgm-bars .blabel{text-align:left;grid-area:label}
.dgm-bars .bval{grid-area:val}
.dgm-bars .btrack{grid-area:track}
}
/* ===== 관계도 (.dgm-rel) — 양방향 교환 ===== */
.dgm-rel{display:flex;align-items:stretch;gap:8px}
.dgm-rel .ent{flex:1 1 0;min-width:0;border:1px solid var(--line);border-radius:12px;background:#fff;padding:16px 14px;text-align:center;display:flex;flex-direction:column;justify-content:center}
.dgm-rel .ent h4{font-size:18px;font-weight:800;color:var(--navy);margin:0 0 5px;line-height:1.3}
.dgm-rel .ent p{font-size:16px;color:var(--ink);margin:0;line-height:1.45}
.dgm-rel .xchg{flex:0 0 132px;display:flex;flex-direction:column;justify-content:center;gap:12px}
.dgm-rel .ex{text-align:center}
.dgm-rel .ex .lab{font-size:14px;font-weight:700;color:var(--royal);line-height:1.25;display:block}
.dgm-rel .ex .ar{font-size:22px;font-weight:800;color:var(--royal);line-height:1;display:block}
.dgm-rel-info{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.dgm-rel-info .item{flex:1 1 220px;background:var(--fill);border-radius:10px;padding:11px 14px}
.dgm-rel-info .item b{display:block;font-size:14px;font-weight:800;color:var(--navy);margin-bottom:2px}
.dgm-rel-info .item span{font-size:16px;color:var(--ink)}
@media(max-width:640px){
.dgm-rel{flex-direction:column}
.dgm-rel .xchg{flex-basis:auto;flex-direction:row;justify-content:center;align-items:center;gap:36px;padding:8px 0}
.dgm-rel .ex .ar{transform:rotate(90deg)}
.dgm-rel-info{flex-direction:column}
.dgm-rel-info .item{flex:1 1 auto}
}
/* ===== 진입 블록 (v4.9.9) ===== */
.svc-entry{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:26px 28px;margin:8px 0 30px}
.svc-entry .se-head{display:flex;align-items:center;gap:22px;margin-bottom:6px}
.svc-entry .se-illust{flex:0 0 240px;max-width:240px;margin:0}
.svc-entry .se-illust img{width:100%;height:auto;display:block;border-radius:12px}
.svc-entry .se-title h2{font-size:23px;color:var(--navy);font-weight:800;line-height:1.4;letter-spacing:-.02em;margin:0;border:0;padding:0}
.svc-entry .se-sub{font-size:16px;color:var(--gray);margin:14px 0 12px}
.svc-entry .se-checks{list-style:none;display:flex;flex-direction:column;gap:11px;margin:0 0 20px;padding:0}
.svc-entry .se-checks li{position:relative;padding-left:34px;font-size:17px;line-height:1.6}
.svc-entry .se-checks li::before{content:"";position:absolute;left:0;top:2px;width:23px;height:23px;background:var(--royal);border-radius:6px;-webkit-mask:url("data:image/svg+xml;utf8,") center/16px no-repeat;mask:url("data:image/svg+xml;utf8,") center/16px no-repeat}
.svc-entry .se-close{font-size:16px;color:#28323c;background:#fff;border:1px solid var(--line);border-left:4px solid var(--lightblue);border-radius:8px;padding:13px 16px;margin-bottom:18px}
.svc-entry .se-cta{display:flex;gap:12px;flex-wrap:wrap}
.svc-entry .se-cta a.se-btn{display:inline-flex;align-items:center;gap:7px;font-size:16px;font-weight:700;text-decoration:none;border-radius:10px;padding:12px 20px;cursor:pointer}
.svc-entry .se-cta a.se-primary{background:var(--royal);color:#fff}
.svc-entry .se-cta a.se-ghost{background:#fff;color:var(--navy);border:1.5px solid var(--lightblue)}
@media (max-width:860px){.svc-entry .se-head{flex-direction:column;align-items:flex-start;gap:14px}.svc-entry .se-illust{flex:0 0 auto;max-width:200px;align-self:center}.svc-entry .se-title h2{font-size:21px}.svc-entry .se-cta a.se-btn{flex:1 1 100%;justify-content:center}}
/* ===== v5.1.0: 통일 카드(업무분야+물건별) ===== */
.svc-grid,.prop-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.ucard{display:flex;align-items:flex-start;gap:13px;border:1px solid var(--line);border-radius:12px;padding:15px 16px;background:#fff;text-decoration:none;transition:.15s;cursor:pointer}
.ucard:hover{border-color:var(--royal);box-shadow:0 3px 12px rgba(20,49,90,.07)}
.ucard .uico{width:38px;height:38px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;background:var(--fill);border-radius:9px}
.ucard .uico svg{width:22px;height:22px}
.ucard .utx{min-width:0;display:flex;flex-direction:column}
.ucard .ut{font-size:16px;font-weight:700;color:var(--navy);line-height:1.35}
.ucard .us{font-size:14px;color:var(--gray);line-height:1.45;margin-top:3px}
@media(max-width:820px){.svc-grid,.prop-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.svc-grid,.prop-grid{grid-template-columns:1fr}}
/* ===== v5.1.0: 진행 도식 반응형 (PC=사진flow / 모바일=텍스트도식) ===== */
.mflow{display:none}
.mstep{border:1px solid var(--line);border-radius:12px;padding:13px 15px;background:#fff;margin-bottom:9px}
.mstep .mhd{display:flex;align-items:center;gap:10px}
.mstep .mno{width:30px;height:30px;flex:0 0 auto;border-radius:50%;background:var(--navy);color:#fff;font-weight:800;font-size:13.5px;display:flex;align-items:center;justify-content:center}
.mstep .mt{font-size:16px;font-weight:700;color:var(--navy)}
.mstep .ms{font-size:13.5px;color:var(--gray);margin-top:7px;line-height:1.5}
@media(max-width:720px){
.figbox .flow{display:none}
.figbox .mflow{display:block}
.figbox .flow-meta{flex-direction:column}
.figbox .flow-meta .m+.m{border-left:0;border-top:1px solid var(--line)}
}
/* ===== v5.1.0: 빌라 도식 SVG 반응형 ===== */
.dgm-svg{border:1px solid var(--line);border-radius:16px;background:#fff;padding:20px 18px;margin:22px 0;text-align:center}
.dgm-svg svg{width:100%;height:auto;max-width:680px}
/* ===== v5.2: 홈 카드 모바일 4개+더보기 ===== */
.more-mobile{display:none}
@media(max-width:560px){
#svc .svc-grid .ucard:nth-child(n+5){display:none}
#prop .prop-grid .ucard:nth-child(n+5){display:none}
.more-mobile{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:12px;padding:13px;border:1.5px solid var(--lightblue);border-radius:11px;color:var(--royal);font-weight:700;font-size:15.5px;text-decoration:none;cursor:pointer}
.more-mobile:active{background:var(--fill)}
}
/* ===== v5.2: 인덱스 썸네일 카드(칼럼·사례) ===== */
.tgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:8px}
.tcard{display:flex;align-items:center;gap:14px;border:1px solid var(--line);border-radius:14px;padding:14px;background:#fff;text-decoration:none;transition:.15s;cursor:pointer}
.tcard:hover{border-color:var(--lightblue);box-shadow:0 8px 22px rgba(20,49,90,.08);transform:translateY(-2px)}
.tcard .th{width:86px;height:86px;flex:0 0 auto;border-radius:10px;overflow:hidden;background:var(--fill)}
.tcard .th img{width:100%;height:100%;object-fit:cover;display:block}
.tcard .tb{min-width:0;display:flex;flex-direction:column;gap:5px}
.tcard .lt{font-size:12px;font-weight:800;color:var(--navy)}
.tcard h3{font-size:16.5px;color:var(--navy);font-weight:800;line-height:1.4;margin:0}
.tcard .ts{font-size:13.5px;color:var(--gray);line-height:1.55;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
@media(max-width:640px){.tgrid{grid-template-columns:1fr}}
/* ⑤⑨ 섹션 인라인 링크 */
.sec-more{margin:14px 0 4px}
.sec-more a{display:inline-block;font-size:15px;color:var(--royal);text-decoration:none;font-weight:600;
padding:6px 0;line-height:1.5;cursor:pointer;margin-right:18px}
.sec-more a:hover{text-decoration:underline}
/* ④ 하단 작성주체 메타 */
.art-footmeta{margin-top:34px;padding-top:14px;border-top:1px solid var(--line);
font-size:13px;color:var(--gray)}
/* ⑧ 카카오톡 플로팅 버튼 */
.kkt-float{position:fixed;right:24px;bottom:24px;z-index:60;display:inline-flex;align-items:center;gap:10px;
background:#FEE500;color:#3C1E1E;padding:14px 20px 14px 16px;border-radius:999px;
box-shadow:0 8px 22px rgba(0,0,0,.18);cursor:pointer;text-decoration:none;font-weight:800;font-size:16px;
transition:transform .15s, box-shadow .15s;animation:kfIn .4s ease both}
.kkt-float:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(0,0,0,.24)}
.kkt-float .ico{width:26px;height:26px;flex:0 0 auto;display:block}
.kkt-float .lbl{white-space:nowrap;display:block}
.kkt-float .sub{display:block;font-size:11px;font-weight:600;opacity:.75;margin-top:1px}
.kkt-float::before{content:'';position:absolute;inset:-4px;border-radius:999px;border:2px solid #FEE500;opacity:.5;animation:kfPulse 2.4s ease-out infinite}
@keyframes kfPulse{0%{transform:scale(1);opacity:.5}70%{transform:scale(1.12);opacity:0}100%{opacity:0}}
@keyframes kfIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media(max-width:680px){.kkt-float{padding:0;width:60px;height:60px;justify-content:center;right:16px;bottom:16px}
.kkt-float .txt{display:none}.kkt-float .ico{width:30px;height:30px}}
/* ⑦ 평가기간 계산기 (pc- 네임스페이스) */
.pc-calc{background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 4px 20px rgba(20,49,90,.06);overflow:hidden;margin:22px 0 8px}
.pc-head{padding:22px 24px 16px;border-bottom:1px solid var(--line)}
.pc-head h3{margin:0 0 6px;font-size:20px;font-weight:800;color:var(--navy)}
.pc-head p{margin:0;font-size:15px;color:var(--gray)}
.pc-types{display:flex;gap:10px;padding:18px 24px 4px;flex-wrap:wrap}
.pc-tbtn{flex:1;min-width:150px;padding:13px 12px;border:1.5px solid var(--line);background:#fff;border-radius:12px;cursor:pointer;text-align:left;font-family:inherit}
.pc-tbtn:hover{border-color:var(--lblue)}
.pc-tbtn.on{border-color:var(--royal);background:#E9F0FA;box-shadow:0 0 0 2px rgba(42,102,180,.12) inset}
.pc-tbtn .t{display:block;font-size:16px;font-weight:700;color:var(--navy)}
.pc-tbtn .s{display:block;font-size:13px;color:var(--gray);margin-top:2px}
.pc-body{display:grid;grid-template-columns:1fr 1fr;gap:0}
@media(max-width:680px){.pc-body{grid-template-columns:1fr}}
.pc-cal{padding:20px 24px 24px}
.pc-nav{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.pc-nav button{width:40px;height:40px;border:1px solid var(--line);background:#fff;border-radius:10px;font-size:20px;color:var(--navy);cursor:pointer;line-height:1}
.pc-nav button:hover{background:#E9F0FA}
.pc-title{font-size:17px;font-weight:800;color:var(--navy)}
.pc-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.pc-dow{text-align:center;font-size:13px;font-weight:700;color:var(--gray);padding:6px 0}
.pc-dow.sun{color:#C0392B}.pc-dow.sat{color:#2A66B4}
.pc-day{position:relative;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;font-size:16px;border-radius:10px;cursor:pointer;color:var(--ink);user-select:none}
.pc-day.empty{cursor:default}
.pc-day:not(.empty):hover{background:#EDF2FA}
.pc-day.inrange{background:#E9F0FA}
.pc-day.rangestart,.pc-day.rangeend{background:var(--lblue);font-weight:700}
.pc-day.base{background:var(--navy);color:#fff;font-weight:800}
.pc-day.base:hover{background:var(--navy)}
.pc-day.today::after{content:'';position:absolute;bottom:6px;width:5px;height:5px;border-radius:50%;background:var(--royal)}
.pc-day.base.today::after{background:#fff}
.pc-res{padding:20px 24px 24px;background:#FBFCFE;border-left:1px solid var(--line)}
@media(max-width:680px){.pc-res{border-left:none;border-top:1px solid var(--line)}}
.pc-picked{font-size:14px;color:var(--gray);margin-bottom:4px}
.pc-picked b{color:var(--navy);font-size:16px}
.pc-rbox{background:#fff;border:1.5px solid var(--royal);border-radius:14px;padding:18px;margin:14px 0 16px;text-align:center}
.pc-lbl{font-size:13px;color:var(--gray);font-weight:600}
.pc-val{font-size:21px;font-weight:800;color:var(--navy);margin:6px 0}
.pc-val .pc-tilde{color:var(--lblue);margin:0 6px;font-weight:400}
.pc-span{font-size:14px;color:var(--royal);font-weight:700}
.pc-meta{font-size:14px;color:var(--ink)}
.pc-row{display:flex;gap:8px;padding:7px 0;border-bottom:1px dashed var(--line)}
.pc-row:last-child{border-bottom:none}
.pc-k{color:var(--gray);min-width:82px;font-weight:600}
.pc-v{flex:1}
.pc-empty{color:var(--gray);font-size:15px;padding:28px 0;text-align:center}
.pc-sub{font-size:13px;line-height:1.65;margin:12px 0 0;padding:10px 12px;border-radius:8px;background:#F3F6FB;color:var(--gray)}
.pc-sub.warn{background:#FFF6E9;color:#8A5A00;border:1px solid #F2DCB0}
.pc-foot{padding:14px 24px 20px}
.pc-note{background:#F3F6FB;border-radius:12px;padding:14px 16px;font-size:13px;color:var(--gray);line-height:1.7}
.pc-note b{color:var(--navy)}
/* ===== v5.2.5 C2 가독성 + v6 모바일 표시 (svc-sangsok 한정 파일럿) ===== */
.mockcta{display:none} /* 전역 기본 숨김 — svc-sangsok에서만 노출 */
/* ===== C2 가독성 컴포넌트 (v5.2.5) — 신규 클래스만, 기존 페이지 회귀 없음 ===== *//* 섹션 헤더(파란 바 + 큰 제목) */body[data-c2] .art-body .sec-head{margin:0 0 6px}body[data-c2] .art-body .sec-head .bar{display:block;width:46px;height:5px;border-radius:3px;background:var(--royal);margin:0 0 14px}body[data-c2] .art-body .sec-head h2{margin:0;font-size:27px;border:0}body[data-c2] .art-body .sec-sub{font-size:16.5px;color:var(--gray);margin:8px 0 18px;line-height:1.6}/* 핵심요약 카드 */body[data-c2] .art-body .kfcard{background:#fff;border:1px solid var(--line);border-left:5px solid var(--navy);border-radius:16px;padding:26px 28px;box-shadow:0 6px 22px rgba(20,49,90,.06);margin:0 0 12px}body[data-c2] .art-body .kfitem{padding:17px 0;border-bottom:1px dashed var(--line)}body[data-c2] .art-body .kfitem:first-child{padding-top:0}body[data-c2] .art-body .kfitem:last-child{border-bottom:0;padding-bottom:0}body[data-c2] .art-body .kfitem .k{font-size:17px;font-weight:800;color:var(--navy);margin:0 0 6px;line-height:1.4}body[data-c2] .art-body .kfitem .v{font-size:16.5px;color:#33404e;line-height:1.65;margin:0}body[data-c2] .art-body .kfitem .v a{color:var(--royal);text-decoration:none;font-weight:700;border-bottom:1px solid var(--lightblue);cursor:pointer}body[data-c2] .art-body .kfitem .v .dot{color:var(--lightblue);margin:0 8px}body[data-c2] .art-body .kf-note2{font-size:14.5px;color:var(--gray);line-height:1.6;margin:14px 2px 0}/* 핵심요약 숫자 강조 band (숫자+오해방지 캡션, 법령 kfitem은 하단 유지) */body[data-c2] .art-body .kfnums{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0;margin:0 0 4px;padding:0 0 18px;border-bottom:1px dashed var(--line)}body[data-c2] .art-body .kfnum{text-align:center;padding:2px 12px}body[data-c2] .art-body .kfnum+.kfnum{border-left:1px solid var(--line)}body[data-c2] .art-body .kfnum b{display:block;font-size:22px;font-weight:800;color:var(--navy);line-height:1.25;letter-spacing:-.01em}body[data-c2] .art-body .kfnum span{display:block;font-size:13.5px;color:var(--gray);line-height:1.45;margin-top:6px}/* 직답 콜아웃 */body[data-c2] .art-body .lead-a{font-size:18.5px;font-weight:600;color:#1f2b3d;background:var(--fill2);border-left:4px solid var(--royal);border-radius:0 10px 10px 0;padding:16px 20px;line-height:1.75;margin:0 0 16px}body[data-c2] .art-body .lead-a strong{color:var(--navy)}/* 상세 접기 */body[data-c2] .art-body details.more{margin:2px 0 20px;border:1px solid var(--line);border-radius:12px;background:var(--fill2);overflow:hidden}body[data-c2] .art-body details.more>summary{list-style:none;cursor:pointer;padding:13px 18px;display:flex;align-items:center;gap:9px;font-size:16px;font-weight:700;color:var(--royal)}body[data-c2] .art-body details.more>summary::-webkit-details-marker{display:none}body[data-c2] .art-body details.more>summary .pm{width:20px;height:20px;flex:0 0 auto;transition:.2s}body[data-c2] .art-body details.more[open]>summary .pm{transform:rotate(45deg)}body[data-c2] .art-body details.more[open]>summary{border-bottom:1px solid var(--line)}body[data-c2] .art-body details.more .mbody{padding:10px 18px 14px}body[data-c2] .art-body details.more .mbody>*:last-child{margin-bottom:0}body[data-c2] .art-body details.more .mbody .blist{margin-bottom:12px}/* 질문 목차 점프 내비 */body[data-c2] .art-body .qtoc{background:#fff;border:1px solid var(--line);border-radius:14px;padding:20px 22px;margin:6px 0 26px;box-shadow:0 6px 20px rgba(20,49,90,.05)}body[data-c2] .art-body .qtoc .qt-title{display:flex;align-items:center;gap:9px;font-size:15px;font-weight:800;color:var(--royal);letter-spacing:.02em;margin:0 0 14px;padding-bottom:12px;border-bottom:1px solid var(--line)}body[data-c2] .art-body .qtoc .qt-title i{width:9px;height:9px;border-radius:2px;background:var(--royal);display:inline-block;flex:0 0 auto}body[data-c2] .art-body .qtoc ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:10px}body[data-c2] .art-body .qtoc li a{display:flex;gap:11px;align-items:flex-start;text-decoration:none;background:var(--fill2);border:1px solid var(--line);border-radius:10px;padding:12px 14px;transition:.15s;cursor:pointer}body[data-c2] .art-body .qtoc li a:hover{background:var(--fill);border-color:var(--lightblue)}body[data-c2] .art-body .qtoc li .n{flex:0 0 24px;width:24px;height:24px;border-radius:50%;background:var(--navy);color:#fff;font-size:13.5px;font-weight:800;display:flex;align-items:center;justify-content:center}body[data-c2] .art-body .qtoc li .q{font-size:16px;font-weight:600;color:#27313f;line-height:1.5}body[data-c2] .art-body .qsec{scroll-margin-top:80px}/* 진입 체크 → 조건 체크카드 */body[data-c2] .art-body .cond-list{display:flex;flex-direction:column;gap:10px;margin:4px 0 0}body[data-c2] .art-body .cond{display:flex;gap:12px;align-items:flex-start;background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px 16px}body[data-c2] .art-body .cond .ck{flex:0 0 24px;width:24px;height:24px;border-radius:50%;background:var(--royal);color:#fff;display:flex;align-items:center;justify-content:center;margin-top:1px}body[data-c2] .art-body .cond .ck svg{width:14px;height:14px}body[data-c2] .art-body .cond .cc b{display:block;font-size:16.5px;font-weight:700;color:var(--navy);line-height:1.5}body[data-c2] .art-body .cond .cc span{font-size:15px;color:var(--gray);line-height:1.55}/* 아이콘 카드 그리드 (선택 컴포넌트) */body[data-c2] .art-body .icard-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:4px 0 0}body[data-c2] .art-body .icard{background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px 18px}body[data-c2] .art-body .icard .ih{display:flex;align-items:center;gap:10px;margin:0 0 7px}body[data-c2] .art-body .icard .ii{flex:0 0 34px;width:34px;height:34px;border-radius:9px;background:var(--fill);color:var(--royal);display:flex;align-items:center;justify-content:center}body[data-c2] .art-body .icard .ii svg{width:19px;height:19px}body[data-c2] .art-body .icard h4{margin:0;font-size:17px;font-weight:800;color:var(--navy);line-height:1.35}body[data-c2] .art-body .icard p{margin:0;font-size:15px;color:var(--gray);line-height:1.55}/* 요약 3카드 (선택 컴포넌트) */body[data-c2] .art-body .sumcards{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;margin:4px 0 0}body[data-c2] .art-body .sumcard{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff;display:flex;flex-direction:column}body[data-c2] .art-body .sumcard .sh{padding:10px 14px;font-size:14px;font-weight:800;color:#fff;background:var(--navy);letter-spacing:.01em}body[data-c2] .art-body .sumcard.hl .sh{background:var(--royal)}body[data-c2] .art-body .sumcard .sb{padding:13px 15px}body[data-c2] .art-body .sumcard .sb .big{font-size:18px;font-weight:800;color:var(--navy);margin:0 0 4px;line-height:1.3}body[data-c2] .art-body .sumcard .sb p{font-size:15px;color:#3a4654;margin:0;line-height:1.55}body[data-c2] .art-body details.more>summary .pm{stroke:var(--royal);stroke-width:2.4;fill:none;stroke-linecap:round}body[data-c2] .backtop{display:inline-flex;align-items:center;gap:5px;font-size:13.5px;color:var(--gray);text-decoration:none;margin:0 0 8px;cursor:pointer}body[data-c2] .backtop:hover{color:var(--royal)}/* 본문 카톡 버튼 제거 전역화(PC·모바일): 상시 카톡 접점은 PC=우하단 kkt-float / 모바일=하단 고정바가 담당. 본문 인라인 카톡은 중복 → 숨김(DOM 유지, 크롤링·데스크톱 kf-lnk 텍스트링크는 영향 없음) */body[data-c2] .art-body .ilink[data-label*="카카오"]{display:none}body[data-c2] .art-cta .kkt{display:none}body[data-c2] .art-cta p:last-child{margin-bottom:0}/* C2 모바일 (실사이트 모바일 전환 지점 760px에 통합) */
@media(max-width:760px){body[data-c2] .art-body .sec-head h2{font-size:24px}body[data-c2] .art-body .sec-sub{font-size:16.5px}body[data-c2] .art-body .lead-a{font-size:18px;padding:14px 16px}body[data-c2] .art-body .kfcard{padding:22px 20px}body[data-c2] .art-body .kfitem .k{font-size:17.5px}body[data-c2] .art-body .kfitem .v{font-size:17px}body[data-c2] .art-body .qtoc{padding:20px 18px}body[data-c2] .art-body .qtoc .qt-title{font-size:16px}body[data-c2] .art-body .qtoc ol{grid-template-columns:1fr}body[data-c2] .art-body .qtoc li .q{font-size:16.5px}body[data-c2] .art-body .icard-grid{grid-template-columns:1fr}body[data-c2] .art-body .sumcards{grid-template-columns:1fr}body[data-c2] .art-body .cond .cc b{font-size:17px}body[data-c2] .art-body .cond .cc span{font-size:15.5px}body[data-c2] .art-body details.more>summary{font-size:16.5px}body[data-c2] .art-body table{font-size:16px}/* 카드 남용 완화(리뷰 반영): 목차는 구분선 행, 조건은 단일 패널 */body[data-c2] .art-body .qtoc{padding:2px 0 0;border:0;box-shadow:none;background:transparent}body[data-c2] .art-body .qtoc ol{gap:0}body[data-c2] .art-body .qtoc li a{background:transparent;border:0;border-bottom:1px solid var(--line);border-radius:0;padding:14px 2px}body[data-c2] .art-body .qtoc li:last-child a{border-bottom:0}body[data-c2] .art-body .cond-list{gap:0;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff}body[data-c2] .art-body .cond{border:0;border-bottom:1px solid var(--line);border-radius:0}body[data-c2] .art-body .cond:last-child{border-bottom:0}body[data-c2] .art-body .kfnums{grid-template-columns:1fr;padding-bottom:4px}body[data-c2] .art-body .kfnum{text-align:left;padding:12px 2px;border-bottom:1px dashed var(--line)}body[data-c2] .art-body .kfnum+.kfnum{border-left:0}body[data-c2] .art-body .kfnum:last-child{border-bottom:0}body[data-c2] .art-body .kfnum b{font-size:19px;display:inline-block}body[data-c2] .art-body .kfnum span{display:inline;margin-left:8px;font-size:14.5px}
}/* ===== A안: 모바일 밀도 개선 (레이아웃 군살만 제거, 텍스트·법령·FAQ 전량 유지) ===== */
@media(max-width:760px){/* 콘텐츠 본문 밀도(줄간격 완만하게) */body[data-c2] .art-body{line-height:1.72}body[data-c2] .art-body p{margin:0 0 13px}body[data-c2] .art-body h2{margin:26px 0 10px}/* 진입 섹션: 박스 속 박스 제거 + 개념 일러스트 숨김 */body[data-c2] .svc-entry{background:transparent;border:0;border-radius:0;padding:0;margin:4px 0 22px}body[data-c2] .svc-entry .se-illust{display:none}body[data-c2] .svc-entry .se-title h2{font-size:20px}body[data-c2] .svc-entry .se-sub{margin:6px 0 12px}body[data-c2] .svc-entry .se-close{font-size:15.5px;padding:12px 14px;margin-bottom:14px}/* 카드 여백 축소 */body[data-c2] .art-body .kfcard{padding:18px 16px}body[data-c2] .art-body .lead-a{padding:12px 15px;margin-bottom:14px}body[data-c2] .art-body details.more{margin:2px 0 16px}body[data-c2] .art-body details.more>summary{padding:12px 14px}body[data-c2] .art-body details.more .mbody{padding:8px 14px 12px}body[data-c2] .art-body .cond{padding:12px 14px}body[data-c2] .art-body .cond .ck{width:22px;height:22px;flex:0 0 22px}/* 장식 사진 여백 축소(사진 자체는 유지) */body[data-c2] .mid-illust{margin:16px 0}/* 핵심요약 상단 여백 */body[data-c2] .art-body .sec-head{margin-top:2px}
}/* ===== 2안: 모바일 아코디언 + 칩 내비 (v5.2.5) ===== */body[data-c2] .art-body .chipnav{background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px 16px 14px;margin:6px 0 22px;box-shadow:0 6px 20px rgba(20,49,90,.05)}body[data-c2] .art-body .chipnav .cn-t{font-size:14px;font-weight:800;color:var(--royal);letter-spacing:.02em;margin:0 0 12px}body[data-c2] .art-body .chipnav .cn-row{display:flex;flex-wrap:wrap;gap:9px}body[data-c2] .art-body .chipnav .chip{display:inline-flex;align-items:center;font-size:15.5px;font-weight:700;color:var(--navy);background:var(--fill);border:1px solid var(--line);border-radius:999px;padding:10px 16px;text-decoration:none;line-height:1;cursor:pointer}body[data-c2] .art-body .chipnav .chip:hover,body[data-c2] .art-body .chipnav .chip:active{background:var(--royal);color:#fff;border-color:var(--royal)}body[data-c2] .art-body details.qacc,body[data-pg^="col-"] .art-body details.qacc{border:1px solid var(--line);border-radius:12px;margin:0 0 12px;overflow:hidden;background:#fff}body[data-c2] .art-body details.qacc>summary,body[data-pg^="col-"] .art-body details.qacc>summary{list-style:none;cursor:pointer;padding:15px 18px;display:flex;justify-content:space-between;gap:14px;align-items:flex-start}body[data-c2] .art-body details.qacc>summary::-webkit-details-marker,body[data-pg^="col-"] .art-body details.qacc>summary::-webkit-details-marker{display:none}body[data-c2] .art-body details.qacc>summary h2,body[data-pg^="col-"] .art-body details.qacc>summary h2{margin:0;border:0;padding:0;font-size:18px;line-height:1.4;color:var(--navy);font-weight:800}body[data-c2] .art-body details.qacc>summary .pl,body[data-pg^="col-"] .art-body details.qacc>summary .pl{flex:0 0 auto;width:24px;height:24px;color:var(--royal);transition:.2s;margin-top:2px}body[data-c2] .art-body details.qacc[open]>summary .pl,body[data-pg^="col-"] .art-body details.qacc[open]>summary .pl{transform:rotate(45deg)}body[data-c2] .art-body details.qacc[open]>summary,body[data-pg^="col-"] .art-body details.qacc[open]>summary{border-bottom:1px solid var(--line)}body[data-c2] .art-body details.qacc .qab,body[data-pg^="col-"] .art-body details.qacc .qab{padding:14px 18px 18px}body[data-c2] .art-body details.qacc .qab>*:first-child,body[data-pg^="col-"] .art-body details.qacc .qab>*:first-child{margin-top:0}body[data-c2] .art-body .entry-collapse{border:1px solid var(--line);border-radius:12px;background:#fff;margin:6px 0 22px;overflow:hidden}body[data-c2] .art-body .entry-collapse>summary{list-style:none;cursor:pointer;padding:15px 18px;display:flex;justify-content:space-between;align-items:center;gap:12px}body[data-c2] .art-body .entry-collapse>summary::-webkit-details-marker{display:none}body[data-c2] .art-body .entry-collapse>summary .ec-t{font-size:17px;font-weight:800;color:var(--navy)}body[data-c2] .art-body .entry-collapse>summary .pl{flex:0 0 auto;width:22px;height:22px;color:var(--royal);transition:.2s}body[data-c2] .art-body .entry-collapse[open]>summary .pl{transform:rotate(45deg)}body[data-c2] .art-body .entry-collapse[open]>summary{border-bottom:1px solid var(--line)}body[data-c2] .art-body .entry-collapse .ecb{padding:6px 16px 16px}body[data-c2] .art-body .entry-collapse .svc-entry{background:transparent;border:0;padding:0;margin:0}/* 데스크톱(761px+): 아코디언 강제 펼침 → 기존 확장 레이아웃 유지(접기는 모바일 전용) */
@media(min-width:761px){body[data-c2] .art-body details.qacc>.qab,body[data-pg^="col-"] .art-body details.qacc>.qab,body[data-c2] .art-body .entry-collapse .ecb{display:block!important}body[data-c2] .art-body details.qacc>summary,body[data-pg^="col-"] .art-body details.qacc>summary,body[data-c2] .art-body .entry-collapse>summary{cursor:default;pointer-events:none}body[data-c2] .art-body details.qacc>summary .pl,body[data-pg^="col-"] .art-body details.qacc>summary .pl,body[data-c2] .art-body .entry-collapse>summary .pl{display:none}/* [2] PC: 질문 아코디언 박스 제거 → 일반 H2 섹션처럼 */body[data-c2] .art-body details.qacc,body[data-pg^="col-"] .art-body details.qacc{border:0;border-radius:0;background:transparent;margin:0 0 8px;overflow:visible}body[data-c2] .art-body details.qacc>summary,body[data-pg^="col-"] .art-body details.qacc>summary{padding:0;border-bottom:0!important}body[data-c2] .art-body details.qacc[open]>summary,body[data-pg^="col-"] .art-body details.qacc[open]>summary{border-bottom:0}body[data-c2] .art-body details.qacc>summary h2,body[data-pg^="col-"] .art-body details.qacc>summary h2{font-size:22px;margin:26px 0 10px}body[data-c2] .art-body details.qacc .qab,body[data-pg^="col-"] .art-body details.qacc .qab{padding:0}/* [1] PC: 진입 체크 섹션(entry-collapse)도 박스 제거 → qacc와 통일 */body[data-c2] .art-body .entry-collapse{border:0;border-radius:0;background:transparent;margin:0 0 8px;overflow:visible}body[data-c2] .art-body .entry-collapse>summary{padding:0;border-bottom:0!important}body[data-c2] .art-body .entry-collapse[open]>summary{border-bottom:0}body[data-c2] .art-body .entry-collapse>summary .ec-t{font-size:22px;font-weight:800;color:var(--navy);display:block;margin:26px 0 10px}body[data-c2] .art-body .entry-collapse .ecb{padding:0}
}/* ===== [Claude 안 v6 · 최종] 모바일 표시 개선 — 콘텐츠·법령·수치·FAQ 무변경 ===== */
@media(max-width:760px){body[data-c2] .art-body section{padding:0;border-top:0}body[data-c2] .art-body .chipnav{position:sticky;top:70px;z-index:50;padding:9px 0 9px 14px;border-radius:14px;
margin:4px 0 18px;box-shadow:0 2px 8px rgba(20,49,90,.05)}body[data-c2] .art-body .chipnav .cn-t{margin:0 14px 7px 0;font-size:12.5px}body[data-c2] .art-body .chipnav .cn-row{flex-wrap:nowrap;overflow-x:auto;gap:8px;padding:0 30px 2px 0;
-webkit-overflow-scrolling:touch;scrollbar-width:none}body[data-c2] .art-body .chipnav .cn-row::-webkit-scrollbar{display:none}body[data-c2] .art-body .chipnav .chip{flex:0 0 auto;padding:9px 15px;font-size:14.5px}body[data-c2] .art-body .chipnav::after{content:"";position:absolute;top:0;right:0;bottom:0;width:36px;
border-radius:0 14px 14px 0;background:linear-gradient(90deg,rgba(255,255,255,0),#fff 72%);pointer-events:none}body[data-c2] .art-body .kfcard{padding:16px 16px 4px}body[data-c2] .art-body .kfnums{grid-template-columns:1fr 1fr 1fr;gap:0;background:var(--navy);border-radius:12px;
padding:15px 2px;margin:0 0 14px;border-bottom:0}body[data-c2] .art-body .kfnum{text-align:center;padding:2px 7px;border-bottom:0}body[data-c2] .art-body .kfnum+.kfnum{border-left:1px solid rgba(255,255,255,.16)}body[data-c2] .art-body .kfnum b{display:block;color:#fff;font-size:16.5px;line-height:1.2;margin:0}body[data-c2] .art-body .kfnum span{display:block;color:#bcccE4;font-size:11.5px;line-height:1.35;margin-top:6px}body[data-c2] .art-body .kfcard .kfitem:last-child{display:none}body[data-c2] .art-body details.qacc[open]>summary .pl,body[data-pg^="col-"] .art-body details.qacc[open]>summary .pl,body[data-c2] .art-body details.more[open]>summary .pm,body[data-c2] .faq details.qa[open] summary .pm{transform:none}body[data-c2] .art-body details.qacc[open]>summary .pl line:first-child,body[data-pg^="col-"] .art-body details.qacc[open]>summary .pl line:first-child,body[data-c2] .art-body details.more[open]>summary .pm line:first-child,body[data-c2] .faq details.qa[open] summary .pm line:first-child{opacity:0}body[data-c2] .art-body details.more{border:0;background:transparent;border-radius:0;margin:2px 0 14px}body[data-c2] .art-body details.more>summary{padding:9px 0;border-bottom:1px solid var(--line)}body[data-c2] .art-body details.more[open]>summary{border-bottom:1px solid var(--line)}body[data-c2] .art-body details.more .mbody{padding:12px 2px 2px}body[data-c2] .art-body .ilinks{flex-direction:column;gap:9px}body[data-c2] .art-body .ilink,body[data-c2] .art-body .ilink-col{width:100%;justify-content:center;padding:14px 16px;font-size:15.5px}body[data-c2] .art-body .ilink .ii{width:17px;height:17px;flex:0 0 auto}/* 카카오 포함 그룹: 2분할(회사소개 좌·업무실적 우) + 카카오 단독 강조 */body[data-c2] .art-body .ilinks--nav{display:grid;grid-template-columns:1fr 1fr;gap:9px}body[data-c2] .art-body .ilinks--nav .ilink{width:auto;padding:13px 8px;font-size:14.5px;
justify-content:center;min-height:52px}body[data-c2] .art-body .ilinks--nav .ilink::before{content:none}body[data-c2] .art-body .ilinks--nav .ilink:not([data-label*="카카오"]) .ii{stroke:var(--royal)}body[data-c2] .art-body .ilinks--nav .ilink[data-label*="회사소개"]{order:1}body[data-c2] .art-body .ilinks--nav .ilink[data-label*="업무실적"]{order:2}body[data-c2] .art-body .ilink[data-label*="카카오"]{order:3;grid-column:1 / -1;background:var(--royal);color:#fff;
border-color:var(--royal);padding:15px 16px;font-size:15.5px;box-shadow:0 8px 20px rgba(42,102,180,.18)}body[data-c2] .art-body .ilink[data-label*="카카오"]:hover{background:#21548f;color:#fff}body[data-c2] .art-body .ilink[data-label*="카카오"] .ii{stroke:#fff}body[data-c2] .art-body .sec-more{margin:16px 0 4px;padding:0}body[data-c2] .art-body .sec-more .sm-h{display:block;font-size:12px;font-weight:800;color:#78869a;letter-spacing:.02em;margin:0 0 9px}body[data-c2] .art-body .sec-more a{display:grid;grid-template-columns:44px 1fr 20px;align-items:center;gap:12px;width:100%;
margin:0 0 9px;padding:12px 14px;background:#f7faff;border:1px solid var(--line);border-radius:14px;color:var(--navy)}body[data-c2] .art-body .sec-more a:last-child{margin-bottom:0}body[data-c2] .art-body .sec-more a .rd-ic{width:44px;height:44px;box-sizing:border-box;padding:10px;border-radius:11px;
background:var(--fill);color:var(--royal);stroke:currentColor;fill:none}body[data-c2] .art-body .sec-more a .rd-t{font-size:14.5px;font-weight:700;line-height:1.45}body[data-c2] .art-body .sec-more a::after{content:"›";color:var(--royal);font-size:21px;font-weight:700;text-align:center}body[data-c2] .mockcta,body[data-pg^="col-"] .mockcta{position:fixed;left:0;right:0;bottom:0;z-index:70;display:flex;gap:8px;
padding:10px 14px calc(12px + env(safe-area-inset-bottom));background:rgba(255,255,255,.96);
backdrop-filter:blur(8px);border-top:1px solid var(--line)}body[data-c2] .mockcta a,body[data-pg^="col-"] .mockcta a{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;height:48px;border-radius:12px;
font-size:15px;font-weight:800;text-decoration:none;line-height:1}body[data-c2] .mockcta .fee,body[data-pg^="col-"] .mockcta .fee{background:#fff;color:var(--navy);border:1.5px solid var(--lightblue)}body[data-c2] .mockcta .kkt2,body[data-pg^="col-"] .mockcta .kkt2{background:#FEE500;color:#3C1E1E}body[data-c2] .kkt-float,body[data-pg^="col-"] .kkt-float{display:none!important}/* 최하단: 고정바(약 72px) 높이만큼 여백 → 푸터 가림 방지(art-body가 아니라 실제 최하단에) */body[data-c2] footer,body[data-pg^="col-"] footer{padding-bottom:calc(106px + env(safe-area-inset-bottom))}/* 칩 내비 점프 위치: 헤더(70)+스티키 칩내비 높이 보정 */body[data-c2] .art-body .qsec{scroll-margin-top:132px}/* 인라인 CTA 경량화(모바일): 네이비 풀배경→연배경 콜아웃, 하단 고정바와 중복감 완화. 데스크톱은 기존 네이비 유지 */body[data-c2] .art-cta{background:var(--fill2);color:var(--navy);padding:20px 20px;border:1px solid var(--line);border-left:3px solid var(--royal);border-radius:0 12px 12px 0;text-align:left;margin-top:26px}body[data-c2] .art-cta h3{color:var(--navy);font-size:18px;margin-bottom:8px}body[data-c2] .art-cta p{color:#3a4654;font-size:15px;margin-bottom:16px}/* 세무 안내(모바일): 패딩만 축소(서체는 v5.3.5 Pretendard 통일) */body[data-c2] .tax-note{padding:14px 16px}/* 본문 카톡 버튼 중복 제거(모바일): 하단 고정바가 카톡 접점 담당 → ilinks 카카오·CTA 버튼 숨김. 데스크톱은 유지 */body[data-c2] .art-body .ilink[data-label*="카카오"]{display:none}body[data-c2] .art-cta .kkt{display:none}body[data-c2] .art-cta p{margin-bottom:0}/* 작성정보·관련페이지 좌측 정렬: 위 안내 박스 텍스트선(약 40px)과 통일 */body[data-c2] .art-footmeta,body[data-c2] .art-related{padding-left:16px;padding-right:16px}/* 회사소개·업무실적 버튼 높이 축소(탭 느낌, 약 12%) */body[data-c2] .art-body .ilinks--nav .ilink{padding:10px 8px;min-height:46px}
/* ===== v5.3.3 홈페이지 개선 (모바일) ===== */
/* [1] 하단 고정바 전역 노출: 모든 페이지 표시 + consult(카카오톡 상담) 페이지만 예외 */
.mockcta{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:70;gap:8px;padding:10px 14px calc(12px + env(safe-area-inset-bottom));background:rgba(255,255,255,.96);backdrop-filter:blur(8px);border-top:1px solid var(--line)}
.mockcta a{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;height:48px;border-radius:12px;font-size:15px;font-weight:800;text-decoration:none;line-height:1}
.mockcta .fee{background:#fff;color:var(--navy);border:1.5px solid var(--lightblue)}
.mockcta .kkt2{background:#FEE500;color:#3C1E1E}
body[data-pg="consult"] .mockcta{display:none}
.kkt-float{display:none!important}
/* consult(카카오톡 상담) 페이지만 예외: 하단바 대신 우하단 kkt-float(채널 직결)를 모바일에서도 노출 */
body[data-pg="consult"] .kkt-float{display:inline-flex!important}
footer{padding-bottom:calc(106px + env(safe-area-inset-bottom))}
body[data-pg="consult"] footer{padding-bottom:0}
/* [5] 수수료 계산기 설명문(csub) 모바일 숨김 — DOM 유지(GEO·크롤링 무손실) */
.calc .csub{display:none}
/* [6] 기사 하단 CTA 카드·작성정보 모바일 숨김 — 전역(v5.3.4: 사례·지정업무 포함). 상시 카톡 접점은 하단 고정바가 담당. 작성자 박스는 칼럼 전용이라 C2·칼럼 스코프 유지 */
.art-cta{display:none}
.art-footmeta{display:none}
body[data-c2] .author-box,body[data-pg^="col-"] .author-box{display:none}
}
@media(min-width:761px){body[data-c2] .mockcta,body[data-pg^="col-"] .mockcta{display:none}body[data-c2] .art-body .ilink .ii,body[data-c2] .art-body .sec-more a .rd-ic{display:none}body[data-c2] .art-body .sec-more .sm-h{display:inline;font-weight:800;color:var(--gray);margin-right:8px;font-size:15px}body[data-c2] .art-body .sec-more a{display:inline;margin-right:18px}body[data-c2] .art-body .sec-more a::after{content:none}body[data-c2] .art-body .sec-more a .rd-t{font-size:15px}
}
/* C2 핵심요약 kfnum 2개 구성용 .two modifier (v5.2.26 · prop-store 적용, 재사용 가능 · 기존 3열 기본 규칙 불변) */
body[data-c2] .art-body .kfnums.two{
grid-template-columns:1fr 1fr;
}
@media(max-width:760px){
body[data-c2] .art-body .kfnums.two{
grid-template-columns:1fr;
}
}
/* ===== 디자인시스템 v1.0 (v5.2.8) — PC 시각 표준. 전부 DOM 유지/크롤 무관, GEO 영향 0 ===== */
.art-footmeta .fm-row{display:flex;gap:10px;margin:3px 0}
.art-footmeta .fm-k{flex:0 0 68px;color:#8a94a2;font-weight:700}
.art-footmeta .fm-v{color:var(--gray)}
@media(min-width:761px){
body[data-c2] .art-body .chipnav{background:transparent;border:0;box-shadow:none;border-radius:0;padding:11px 0;margin:2px 0 28px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);display:flex;align-items:baseline;gap:14px}
body[data-c2] .art-body .chipnav .cn-t{margin:0;font-size:12px;font-weight:800;letter-spacing:.03em;color:var(--gray);white-space:nowrap;flex:0 0 auto}
body[data-c2] .art-body .chipnav .cn-row{flex-wrap:wrap;gap:0}
body[data-c2] .art-body .chipnav .chip{background:transparent;border:0;border-radius:0;padding:2px 15px;font-size:15px;font-weight:600;color:var(--navy);position:relative;line-height:1.5}
body[data-c2] .art-body .chipnav .chip:first-child{padding-left:0}
body[data-c2] .art-body .chipnav .chip+.chip::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:1px;height:11px;background:var(--line)}
body[data-c2] .art-body .chipnav .chip:hover{background:transparent;color:var(--royal);text-decoration:underline;text-underline-offset:3px}
/* v5.3.5: C2 FAQ PC 강제펼침 제거 → 네이티브 아코디언(클릭 토글)으로 통일 */
body[data-c2] .art-cta{background:var(--fill2);color:var(--navy);border:1px solid var(--line);border-left:3px solid var(--royal);border-radius:0 12px 12px 0;text-align:left;padding:22px 26px;margin-top:36px}
body[data-c2] .art-cta h3{color:var(--navy);font-size:19px;margin-bottom:8px}
body[data-c2] .art-cta p{color:#3a4654;font-size:15.5px;margin-bottom:0}
body[data-c2] .art-footmeta{display:grid;grid-template-columns:repeat(3,auto);gap:2px 34px;justify-content:start;background:var(--fill2);border:1px solid var(--line);border-radius:12px;padding:15px 22px;margin-top:34px;font-size:13px}
body[data-c2] .art-footmeta .fm-row{flex-direction:column;gap:1px;margin:0}
body[data-c2] .art-footmeta .fm-k{flex:none;font-size:11.5px;letter-spacing:.03em;color:#8a94a2;font-weight:700}
body[data-c2] .art-footmeta .fm-v{font-size:14px;color:var(--navy);font-weight:600}
}
/* v5.3.1 mobile QA: numeric key cards stay compact; legal/exception caption remains in kfnum span and kf-note2. */
@media(max-width:760px){
body[data-c2] .art-body .kfcard:has(.kfnums) .kfitem{display:none}
body[data-c2] .art-body .kfcard:has(.kfnums){padding-bottom:14px}
}
/* ===== v5.3.5: 지정업무(공적·법적 절차) 질문 아코디언 — 모바일 접힘 / PC 평면. C2 qacc와 동작 통일 ===== */
body[data-desig] .art-body details.qacc{border:1px solid var(--line);border-radius:12px;margin:0 0 12px;overflow:hidden;background:#fff}
body[data-desig] .art-body details.qacc>summary{list-style:none;cursor:pointer;padding:15px 18px;display:flex;justify-content:space-between;gap:14px;align-items:flex-start}
body[data-desig] .art-body details.qacc>summary::-webkit-details-marker{display:none}
body[data-desig] .art-body details.qacc>summary h2{margin:0;border:0;padding:0;font-size:18px;line-height:1.4;color:var(--navy);font-weight:800}
body[data-desig] .art-body details.qacc>summary .pl{flex:0 0 auto;width:24px;height:24px;color:var(--royal);transition:.2s;margin-top:2px}
body[data-desig] .art-body details.qacc[open]>summary .pl{transform:rotate(45deg)}
body[data-desig] .art-body details.qacc[open]>summary{border-bottom:1px solid var(--line)}
body[data-desig] .art-body details.qacc .qab{padding:14px 18px 18px}
body[data-desig] .art-body details.qacc .qab>*:first-child{margin-top:0}
@media(min-width:761px){
body[data-desig] .art-body details.qacc>.qab{display:block!important}
body[data-desig] .art-body details.qacc>summary{cursor:default;pointer-events:none;padding:0;border-bottom:0!important}
body[data-desig] .art-body details.qacc>summary .pl{display:none}
body[data-desig] .art-body details.qacc{border:0;border-radius:0;background:transparent;margin:0 0 8px;overflow:visible}
body[data-desig] .art-body details.qacc[open]>summary{border-bottom:0}
body[data-desig] .art-body details.qacc>summary h2{font-size:22px;margin:26px 0 10px}
body[data-desig] .art-body details.qacc .qab{padding:0}
}
@media(max-width:760px){
body[data-desig] .art-body details.qacc[open]>summary .pl{transform:none}
body[data-desig] .art-body details.qacc[open]>summary .pl line:first-child{opacity:0}
}
/* ===== v5.3.8: 링크 버튼 통일 (TYPE01~04) — 토큰 변수만 사용, 하드코딩 색 없음 ===== */
/* TYPE01 · 허브 이동 링크 */
.menu-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.link-menu{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:52px;padding:12px 16px;border:1.5px solid var(--lightblue);border-radius:11px;background:var(--fill);color:var(--royal);font-weight:700;font-size:16px;line-height:1.3;text-decoration:none;cursor:pointer;transition:.15s;text-align:center}
.link-menu:hover{background:var(--royal);color:#fff;border-color:var(--royal)}
.link-menu svg{width:20px;height:20px;flex:0 0 auto;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.link-menu-label,.ucard .ut,.link-read .rt strong{word-break:keep-all;overflow-wrap:break-word}
@media(max-width:820px){.menu-grid{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.menu-grid{grid-template-columns:1fr 1fr}}
/* TYPE01 · 홈 모바일 전용 허브(업무분야·물건별 전체 보기): PC(≥561px) 미노출 유지 */
.more-menu{display:none}
@media(max-width:560px){.more-menu{display:block;margin-top:12px}.more-menu .link-menu{display:flex;width:100%}}
/* TYPE03 · 물건별 카드 변형(테두리 칩·네이비) */
.ucard.prop .uico{background:#fff;border:1.5px solid var(--lightblue);color:var(--navy)}
/* TYPE04(A) · 상세 크로스링크 경량형(아이콘+공식명, 설명문 없음) */
.ucard.lite{align-items:center;padding:11px 14px}
.ucard.lite .uico{width:34px;height:34px}
.ucard.lite .uico svg{width:20px;height:20px}
.ucard.lite .us{display:none}
/* TYPE04(B) · 사례·칼럼 크로스링크 */
.read-list{display:grid;gap:10px}
.link-read{display:grid;grid-template-columns:44px minmax(0,1fr) 22px;gap:13px;align-items:center;min-height:64px;padding:12px 15px;border:1px solid var(--line);border-radius:13px;background:#fff;transition:.15s;text-decoration:none;cursor:pointer}
.link-read:hover{background:var(--fill2);border-color:#9ebce4}
.link-read .ico{width:40px;height:40px;border-radius:10px;display:grid;place-items:center;background:var(--fill);color:var(--navy)}
.link-read.column .ico{color:var(--royal)}
.link-read .ico svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.link-read .rt{min-width:0}
.link-read .rt small{display:block;font-size:13px;color:var(--navy);font-weight:800;letter-spacing:.01em;margin-bottom:3px}
.link-read .rt strong{display:block;font-size:16px;font-weight:700;color:var(--navy);line-height:1.4}
.link-read .arw{color:var(--royal);font-size:19px;font-weight:800;text-align:center}
@media(max-width:480px){.link-read{grid-template-columns:40px minmax(0,1fr) 18px;gap:11px}}
/* fee 예상 견적 예시(.fee-quote) — v5.3.17부터 site-data(fee.html)에 직접 보관 */
.fee-quote{margin:8px 0 24px;background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:0 10px 30px rgba(20,49,90,.08)}
.fee-quote *{box-sizing:border-box}.fee-quote__head{padding:26px 28px 22px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;gap:22px;align-items:flex-end}.fee-quote__eyebrow{display:inline-block;font-size:13px;font-weight:800;color:var(--royal);background:var(--fill);padding:6px 12px;border-radius:999px;margin-bottom:11px}.fee-quote__bar{width:44px;height:5px;background:var(--royal);border-radius:3px;margin-bottom:13px}.fee-quote__head h3{margin:0;font-size:clamp(24px,3vw,34px);line-height:1.2;color:var(--navy);font-weight:800;letter-spacing:-.025em}.fee-quote__intro{margin:8px 0 0;font-size:14.5px;color:var(--gray)}.fee-quote__meta{min-width:180px;display:grid;grid-template-columns:auto auto;gap:6px 14px;font-size:13.5px}.fee-quote__meta dt{color:var(--gray)}.fee-quote__meta dd{margin:0;color:var(--navy);font-weight:800;text-align:right}.fee-quote__body{padding:26px 28px 30px}.fee-quote__summary{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-bottom:25px}.fee-quote__card{padding:20px 22px;border:1px solid var(--line);border-radius:14px;background:linear-gradient(145deg,var(--fill2),var(--fill))}.fee-quote__label{margin:0 0 7px;font-size:13.5px;font-weight:800;color:var(--royal)}.fee-quote__value{margin:0;font-size:clamp(23px,3vw,32px);font-weight:800;color:var(--navy);letter-spacing:-.03em;line-height:1.2}.fee-quote__sub{margin:7px 0 0;font-size:13.5px;color:var(--gray)}.fee-quote__title{display:flex;align-items:center;gap:9px;margin:25px 0 13px;color:var(--navy);font-size:19px;font-weight:800}.fee-quote__title:before{content:"";width:5px;height:22px;border-radius:999px;background:var(--royal);flex:0 0 auto}.fee-quote__object{display:grid;grid-template-columns:80px 1fr 120px;border:1px solid var(--line);border-radius:12px 12px 0 0;background:var(--fill2)}.fee-quote__object span{padding:12px 13px;border-right:1px solid var(--line);font-weight:800;color:var(--navy);text-align:center;font-size:14px}.fee-quote__object span:last-child{border-right:0}.fee-quote__table{width:100%;border-collapse:collapse;border:1px solid var(--line);border-top:0;font-size:14px}.fee-quote__table th{padding:12px 9px;background:var(--navy);color:#fff;font-weight:800}.fee-quote__table td{padding:12px 9px;border-top:1px solid var(--line);text-align:center}.fee-quote__table tbody tr:nth-child(even){background:var(--fill2)}.fee-quote__table tfoot td{background:var(--navy);color:#fff;font-weight:800}.fee-quote__notice{margin-top:23px;padding:18px 20px;border:1px solid var(--line);border-radius:13px;background:var(--panel);color:#3f4a58;font-size:14px}.fee-quote__notice strong{color:var(--navy)}.fee-quote__notice ul{margin:9px 0 0;padding-left:20px}.fee-quote__notice li+li{margin-top:7px}.fee-quote__fine{margin:16px 0 0;font-size:12.5px;color:var(--gray);line-height:1.65}.fee-quote figcaption{font-size:14px;color:var(--gray);line-height:1.6;margin:9px 18px 16px;text-align:center}
@media(max-width:600px){.fee-quote__head{flex-direction:column;align-items:flex-start;padding:22px 18px 17px}.fee-quote__meta{width:100%;padding-top:13px;border-top:1px solid var(--line)}.fee-quote__body{padding:21px 18px 24px}.fee-quote__summary{grid-template-columns:1fr}.fee-quote__object{grid-template-columns:70px 1fr}.fee-quote__object span:nth-child(3){display:none}.fee-quote__table,.fee-quote__table tbody,.fee-quote__table tr,.fee-quote__table td{display:block;width:100%}.fee-quote__table thead{display:none}.fee-quote__table tr{border-top:1px solid var(--line);padding:7px 0}.fee-quote__table td{display:grid;grid-template-columns:92px minmax(0,1fr);gap:10px;text-align:right;border:0;padding:7px 12px;white-space:normal;overflow-wrap:anywhere}.fee-quote__table td:before{content:attr(data-label);text-align:left;font-weight:800;color:var(--navy)}.fee-quote__table tfoot{display:block}.fee-quote__table tfoot tr{background:var(--navy);padding:5px 0}.fee-quote__table tfoot td{background:transparent}.fee-quote__table tfoot td:first-child{display:none}.fee-quote figcaption{margin-left:14px;margin-right:14px}}
/* ============================================================
[모바일 UI 일괄 v5.3.10] A1~A8 — CSS 전용 패치
원칙: 기존 body[data-c2] 규칙 무수정. 신규 병렬 규칙만 append.
스코프: body:not([data-c2]) → c2 20p에 구조적 매칭 불가(회귀 0).
정적빌드 convertLinks가 .ilink data-label을 제거 → 2열/카카오숨김/
order 규칙은 정적에서 inert(빌드세션 data-label 보존 훅 적용 시 활성).
============================================================ */
/* ---- A1: 비-c2 관련링크 버튼 세로 풀폭 통일 (≤760px) ---- */
@media(max-width:760px){
body:not([data-c2]) .art-body .ilinks{flex-direction:column;gap:9px}
body:not([data-c2]) .art-body .ilinks .ilink,
body:not([data-c2]) .art-body .ilinks .ilink-col{width:100%;justify-content:center;padding:14px 16px;font-size:15.5px}
body:not([data-c2]) .art-body .ilink .ii{width:17px;height:17px;flex:0 0 auto}
/* A3 가드: 문단(p·li) 내 인라인 ilink-col은 인라인 유지(풀폭 제외) */
body:not([data-c2]) .art-body :is(p,li)>.ilink-col{width:auto;justify-content:flex-start;padding:9px 14px}
/* [inert on static] data-label 의존 — 훅 적용 시 c2와 동형 활성 */
body:not([data-c2]) .art-body .ilinks--nav{display:grid;grid-template-columns:1fr 1fr;gap:9px}
body:not([data-c2]) .art-body .ilinks--nav .ilink{width:auto;padding:10px 8px;min-height:46px;font-size:14.5px;justify-content:center}
body:not([data-c2]) .art-body .ilinks--nav .ilink::before{content:none}
body:not([data-c2]) .art-body .ilinks--nav .ilink[data-label*="회사소개"]{order:1}
body:not([data-c2]) .art-body .ilinks--nav .ilink[data-label*="업무실적"]{order:2}
body:not([data-c2]) .art-body .ilink[data-label*="카카오"]{order:3;grid-column:1 / -1;background:var(--royal);color:#fff;border-color:var(--royal);padding:15px 16px;font-size:15.5px;box-shadow:0 8px 20px rgba(42,102,180,.18)}
body:not([data-c2]) .art-body .ilink[data-label*="카카오"] .ii{stroke:#fff}
}
/* ---- A2: 칼럼/사례 FAQ(details.qacc) 내부 관련링크 모바일 숨김 (≤760px) ----
details 밖 하단 통일버튼은 유지(A1 적용). */
@media(max-width:760px){
body[data-pg^="col-"] .art-body details.qacc .ilinks,
body[data-pg^="case-"] .art-body details.qacc .ilinks{display:none!important}
}
/* ---- A4: 비-c2 도식카드 제목-본문 여백 축소 (≤760px) ----
.dgm-card는 c2도 사용 → body:not([data-c2])로 스코프(회귀 0). */
@media(max-width:760px){
body:not([data-c2]) .art-body .dgm-card .ch{padding:11px 14px 6px}
body:not([data-c2]) .art-body .dgm-card .cb{padding:9px 16px 14px}
}
/* ---- A5: about-members 프로필 사진 세로늘어짐 완화 (≤760px) ----
데스크톱 5열 유지. 모바일 2열 유지. aspect 3/4→4/5로 세로 축소. */
@media(max-width:760px){
body:not([data-c2]) .member-card img{aspect-ratio:4/5}
}
/* ---- A5b: aspect-ratio 미지원 옛 엔진 폴백(카톡/네이버 인앱·구형) — 세로 늘어남 방지 ---- */
@supports not (aspect-ratio: 1 / 1){
.member-card img{height:auto}
@media(max-width:760px){
body:not([data-c2]) .member-card img{height:56vw;object-fit:cover}
}
.profile-block .profile-photo img{max-height:293px;object-fit:cover}
}
/* ---- A6: process 4단계 pill 2열 배치 (≤640px) ----
기존 single-column 오버라이드. .dfpill은 process 전용. */
@media(max-width:640px){
.dgm-flow-pills{flex-direction:row;flex-wrap:wrap}
.dfpill{flex:1 1 calc(50% - 5px);min-width:0}
}
/* ---- A7: 홈 업무실적·전문가칼럼 링크 풀폭 (≤560px) ----
오시는길·업무분야(desig)·더보기(more-menu 이미 풀폭) 제외.
정적(href)·SPA(data-nav) 이중 대응. */
@media(max-width:560px){
.col-all .link-menu,
.link-menu[href="/performance/"],
.link-menu[data-nav="performance"]{display:flex;width:100%}
}
/* ---- A8: 비-c2 details.more 렌더 정상화 (col-11 유일 대상) ----
c2 details.more 규칙 복제. 네이티브 마커 숨김 + .pm(+아이콘) 크기·회전
정의로 빈여백 해소. */
body:not([data-c2]) .art-body details.more{margin:2px 0 20px;border:1px solid var(--line);border-radius:12px;background:var(--fill2);overflow:hidden}
body:not([data-c2]) .art-body details.more>summary{list-style:none;cursor:pointer;padding:13px 18px;display:flex;align-items:center;gap:9px;font-size:16px;font-weight:700;color:var(--royal)}
body:not([data-c2]) .art-body details.more>summary::-webkit-details-marker{display:none}
body:not([data-c2]) .art-body details.more>summary .pm{width:20px;height:20px;flex:0 0 auto;transition:.2s;stroke:var(--royal);stroke-width:2.4;fill:none;stroke-linecap:round}
body:not([data-c2]) .art-body details.more[open]>summary .pm{transform:rotate(45deg)}
body:not([data-c2]) .art-body details.more[open]>summary{border-bottom:1px solid var(--line)}
body:not([data-c2]) .art-body details.more .mbody{padding:10px 18px 14px}
body:not([data-c2]) .art-body details.more .mbody>*:last-child{margin-bottom:0}
@media(max-width:760px){
body:not([data-c2]) .art-body details.more{border:0;background:transparent;border-radius:0;margin:2px 0 14px}
body:not([data-c2]) .art-body details.more>summary{padding:9px 0;border-bottom:1px solid var(--line)}
body:not([data-c2]) .art-body details.more .mbody{padding:12px 2px 2px}
}
/* ===== [모바일 UI 일괄 v5.3.10] A1~A8 끝 ===== */
/* ===== v5.3.10 모바일 UI 일괄 (B4·B12·B13) — 비-c2/스코프 한정, c2 20p 회귀 0 (svc-collateral .kfnums만 의도적 변경) ===== */
/* B4: svc-collateral 3열 kfnums 모바일 우측 잘림 → 1열 스택 (data-pg 스코프, 화이트리스트) */
@media(max-width:760px){
body[data-pg="svc-collateral"][data-c2] .art-body .kfnums{grid-template-columns:1fr}
body[data-pg="svc-collateral"][data-c2] .art-body .kfnum{padding:11px 12px}
body[data-pg="svc-collateral"][data-c2] .art-body .kfnum+.kfnum{border-left:0;border-top:1px solid rgba(255,255,255,.16)}
}
/* B12: fee 예시 견적서(.fee-quote) 모바일 숨김 */
@media(max-width:760px){ .fee-quote{display:none} }
/* B13: process 흐름도 카드 우측 아이콘(.dgm-flow .fic) 제거 — .fic은 process 전용 */
.dgm-flow .fic{display:none}
/* ---- A9 (v5.3.13): 본문 인라인 카카오 버튼 전역 숨김 ----
기존 body[data-c2] 규칙(PC·모바일 전역 숨김)을 비-c2까지 확대해 동형화.
카톡 접점: PC=우하단 .kkt-float / 모바일=하단 고정바 .mockcta 담당 → 본문 중복 제거.
DOM 유지 → GEO·크롤링 무손실. consult는 .mockcta 미노출 페이지라 예외. */
body:not([data-pg="consult"]) .art-body .ilink[data-label*="카카오"]{display:none}
/* ---- A10 (v5.3.14): 관련링크(.ilinks)를 CTA(.ilinks--nav)와 같은 버튼 문법으로 통일 (≤760px) ----
:not(.ilinks--nav) 로 CTA는 건드리지 않음 → 특정도 (0,4,1) > 기존 nav 규칙, 회귀 0.
auto-fit + minmax(150px,1fr): 버튼 1개면 빈 트랙이 접혀 자동 풀폭, 2개 이상이면 2열.
화살표 제거·중앙정렬·min-height 46px 로 CTA와 동일한 모양. 긴 라벨(최대 23자)은 칸 안에서 줄바꿈.
자식 선택자(>) 사용 → 문단 내 인라인 .ilink-col(A3 가드) 무영향. */
@media(max-width:760px){
body[data-pg] .art-body .ilinks:not(.ilinks--nav){display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:9px}
body[data-pg] .art-body .ilinks:not(.ilinks--nav) > .ilink,
body[data-pg] .art-body .ilinks:not(.ilinks--nav) > .ilink-col{width:auto;justify-content:center;text-align:center;
padding:10px 10px;min-height:46px;font-size:14.5px;line-height:1.35;white-space:normal;overflow-wrap:anywhere}
body[data-pg] .art-body .ilinks:not(.ilinks--nav) > .ilink::before{content:none}
}