/* 하위 페이지 공통(about · attorney · advisors · insights) — 2026-10-21
   메인(index.html)의 김·장식 메뉴 패널 · 하단 · ↑↓ 버튼을 그대로 옮기고, 김·장 하위 페이지처럼
   흰 상단 띠 + 회색 제목 띠 + 본문으로 짰다. 메뉴 · 하단 모양을 고치면 index.html 쪽도 같이 고친다 */
:root{--red:#BA2E12;--gray:#f3f3f3;--line:#e4e4e4;--t1:#222;--t2:#333;--t3:#555;--t4:#888;--ink:#1C1A19;--kr:'Noto Sans KR',sans-serif;--en:'Lato',sans-serif;--serif:'Noto Serif KR',serif}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--kr);font-size:15px;font-weight:300;line-height:1.7;letter-spacing:-.03em;color:var(--t2);background:#fff;-webkit-font-smoothing:antialiased;word-break:keep-all;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
.wrap{width:min(1180px,90vw);margin:0 auto}

/* 상단 띠: 왼쪽 메뉴, 가운데 로고, 오른쪽 상담 문의 */
.sh{position:relative;height:100px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:center;background:#fff}
.sh .logo{width:150px}
.sh .logo img{width:100%;height:auto}
.btn-menu{position:absolute;top:38px;left:32px;width:30px;height:24px;display:flex;flex-direction:column;justify-content:space-between;cursor:pointer}
.btn-menu i{display:block;height:2px;background:var(--t1)}
.btn-menu i:nth-child(2){width:24px}
.sh .cta{position:absolute;right:32px;top:50%;transform:translateY(-50%);height:40px;padding:0 18px;display:flex;align-items:center;background:#1a2436;color:#fff;font-size:14px;font-weight:500}

/* 제목 띠 */
.pt{background:var(--gray);padding:72px 0 64px}
.pt .bc{font-size:13px;color:var(--t4);letter-spacing:0}
.pt .bc a:hover{color:var(--red)}
.pt h1{position:relative;margin-top:30px;padding-top:26px;font-family:var(--en);font-weight:700;font-size:54px;line-height:1.05;letter-spacing:0;color:var(--t1)}
.pt h1:before{content:'';position:absolute;left:0;top:0;width:60px;height:4px;background:var(--red)}
.pt p{margin-top:14px;font-size:18px;color:var(--t3)}

/* 본문 공통 */
.sec{padding:90px 0}
.sec + .sec{padding-top:0}
.ey{font-size:14px;font-weight:500;color:var(--red);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.h2{margin-top:14px;font-weight:500;font-size:32px;line-height:1.4;color:var(--t1);letter-spacing:-.05em;text-wrap:balance}
.lead{margin-top:18px;font-size:17px;color:var(--t3);max-width:62ch}
.btn{display:inline-flex;align-items:center;justify-content:center;width:160px;height:48px;border:1px solid var(--t2);font-size:13px;font-weight:400;color:var(--t2)}
.btn:hover{background:var(--t1);color:#fff}
.ph-empty{background:linear-gradient(180deg,#ececec,#e2e2e2);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;color:var(--t4);font-size:13px}
.ph-empty img{width:40%;opacity:.35}

/* 연락 띠 (메인과 같은 모양) */
.band{display:grid;grid-template-columns:1fr 1fr;height:120px;border-top:1px solid var(--line)}
.band a{display:flex;align-items:center;justify-content:center;gap:12px;font-size:28px;font-weight:500;color:var(--t1);letter-spacing:-.04em}

/* 왼쪽 메뉴 패널 (index.html과 같음) */
.dim{position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:60;opacity:0;pointer-events:none;transition:opacity .4s}
.panel{position:fixed;top:0;left:0;bottom:0;width:430px;max-width:88vw;background:#fff;z-index:70;transform:translateX(-102%);transition:transform .5s cubic-bezier(.2,.7,.2,1);padding:40px 40px 36px 76px;display:flex;flex-direction:column;letter-spacing:-.04em}
.menu-open .panel{transform:none}.menu-open .dim{opacity:1;pointer-events:auto}
.panel .x{position:absolute;top:36px;right:34px;width:28px;height:28px}
.panel .x:before,.panel .x:after{content:'';position:absolute;left:-3px;right:-3px;top:13px;height:2px;background:#333;transform:rotate(45deg)}
.panel .x:after{transform:rotate(-45deg)}
.panel .top{display:block;width:150px;margin-top:-6px}
.panel .top img{display:block;width:100%;height:auto}
.panel .main{margin-top:40px}
.panel .main>a{display:block;font-family:var(--kr);font-weight:300;font-size:24px;color:var(--t2);letter-spacing:0;line-height:43px}
.panel .main a:hover,.panel .main a.cur{color:var(--red)}
.panel .main .tog{cursor:pointer}
.panel .main .tog:after{content:'';display:inline-block;width:8px;height:8px;margin:0 0 6px 14px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);transition:transform .3s,margin .3s;vertical-align:middle}
.panel .main .tog.open:after{transform:rotate(-135deg);margin-bottom:0}
.panel .main .kids{margin:0 0 0 2px;max-height:0;overflow:hidden;transition:max-height .35s ease,margin .35s ease}
.panel .main .kids.open{max-height:80px;margin-bottom:6px}
.panel .main .kids a{display:block;font-size:16px;font-weight:300;color:#666;letter-spacing:-.02em;line-height:30px}
.panel .main .kids a:before{content:'-';margin-right:8px;color:#aaa}
.panel .sub{margin-top:66px}
.panel .sub a{display:block;color:var(--red);font-size:16px;line-height:33px}
.panel .sub a.ask{margin-top:44px;padding-top:18px;border-top:1px solid #e3e3e3;width:120px}

.qb{position:fixed;right:25px;bottom:20px;z-index:50;display:flex;flex-direction:column;gap:5px}
.qb a{width:50px;height:50px;background:rgba(242,242,242,.95);border:1px solid #ddd;display:flex;align-items:center;justify-content:center}

/* 하단 (index.html과 같음) */
footer{background:#333;color:#bbb;padding:34px max(5vw,calc((100vw - 1240px)/2)) 38px;font-size:14px;font-weight:400;letter-spacing:-.04em}
footer .l{display:flex}
footer .l a{padding:0 15px;position:relative}
footer .l a:first-child{padding-left:0}
footer .l a + a:before{content:'';position:absolute;left:0;top:4px;height:13px;border-left:1px solid #555}
footer .l a.on{color:#fff;font-weight:700}
footer .if{margin-top:20px;display:flex;flex-wrap:wrap;gap:6px 0;font-size:13px;color:#999;font-weight:300;letter-spacing:0}
footer .if span{padding:0 14px;position:relative}footer .if span:first-child{padding-left:0}
footer .if span + span:before{content:'';position:absolute;left:0;top:4px;height:11px;border-left:1px solid #555}
footer .if b{font-weight:400;color:#bbb;margin-right:6px}footer .if .nm b{margin-right:0}
footer .c{margin-top:14px;font-size:13px;color:#777;font-weight:300;letter-spacing:0}

/* ── About ── */
.ab-intro{display:grid;grid-template-columns:480px 1fr;gap:70px;align-items:center}
.ab-intro .im{aspect-ratio:4/5;overflow:hidden}
.ab-intro .im img{width:100%;height:100%;object-fit:cover}
.ab-intro .tx .q{margin-top:18px;font-family:var(--serif);font-weight:500;font-size:36px;line-height:1.5;color:var(--t1);letter-spacing:-.03em;text-wrap:balance}
.ab-intro .tx p{margin-top:22px;font-size:17px;color:var(--t3)}
.ab-intro .tx p + p{margin-top:12px}
.ways{margin-top:44px;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.ways .k{background:var(--gray);padding:44px 44px 48px}
.ways .k b{display:block;font-size:14px;font-weight:500;color:var(--red)}
.ways .k h3{margin-top:12px;font-weight:500;font-size:24px;line-height:1.4;color:var(--t1);letter-spacing:-.05em}
.ways .k p{margin-top:16px;font-size:16px;color:var(--t3)}
.areas{margin-top:44px;display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.areas div{border-top:2px solid var(--t1);padding-top:20px}
.areas h3{font-size:20px;font-weight:500;color:var(--t1)}
.areas li{list-style:none;margin-top:8px;font-size:15px;color:var(--t3)}
.areas li:first-child{margin-top:14px}

/* ── 변호사 ── */
.pf{display:grid;grid-template-columns:400px 1fr;gap:80px;align-items:start}
.pf .ph-empty{aspect-ratio:4/5}
.ph{aspect-ratio:4/5;overflow:hidden;background:#F6F8FA}
.ph img{width:100%;height:100%;object-fit:cover;object-position:50% 0}
.pf .nm{font-size:44px;font-weight:500;color:var(--t1);letter-spacing:-.04em;line-height:1.2}
.pf .nm small{margin-left:14px;font-size:18px;font-weight:400;color:var(--t3);letter-spacing:-.02em}
.pf .en{margin-top:6px;font-family:var(--en);font-size:15px;letter-spacing:.06em;color:var(--t4)}
.pf .intro{margin-top:26px;padding-top:26px;border-top:1px solid var(--line);font-size:17px;color:var(--t3)}
.pf dl{margin-top:34px;display:grid;grid-template-columns:90px 1fr;gap:22px 24px}
.pf dt{font-size:15px;font-weight:500;color:var(--t1)}
.pf dd{font-size:16px;color:var(--t3)}
.pf dd li{list-style:none}
.pf .ct{margin-top:40px;display:flex;gap:28px;flex-wrap:wrap;font-size:15px;color:var(--t2)}
.pf .ct b{font-weight:500;margin-right:8px;color:var(--t1)}

/* 변호사 — 주요 업무 경험 (이력서 「5. 주요 수행업무」) */
.exp{margin-top:40px;border-top:2px solid var(--t1)}
.exp .g{display:grid;grid-template-columns:240px 1fr;gap:40px;padding:30px 0;border-bottom:1px solid var(--line)}
.exp h3{font-size:19px;font-weight:500;color:var(--t1)}
.exp h3 small{display:block;margin-top:4px;font-size:14px;font-weight:400;color:var(--t4)}
.exp ul{list-style:none}
.exp li{position:relative;padding-left:16px;font-size:15.5px;line-height:1.75;color:var(--t3)}
.exp li + li{margin-top:8px}
.exp li:before{content:'';position:absolute;left:0;top:.8em;width:5px;height:5px;background:var(--red)}
.exp-n{margin-top:18px;font-size:13px;color:var(--t4)}

/* ── 고문 · 전문위원 ── */
.adv{margin-top:44px;display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.adv .c .ph-empty{aspect-ratio:4/5}
.adv .c ul li + li{margin-top:4px}
.adv .c .rl{margin-top:22px;font-size:14px;font-weight:500;color:var(--red)}
.adv .c h3{margin-top:6px;font-size:24px;font-weight:500;color:var(--t1)}
.adv .c ul{margin-top:12px;list-style:none;font-size:15px;color:var(--t3)}
@media (max-width:1100px){.adv{grid-template-columns:repeat(2,1fr);gap:28px}}
.todo{display:inline-block;margin-top:6px;padding:2px 8px;background:#fff3c4;color:#6b5600;font-size:12px;font-weight:500;letter-spacing:0}

/* ── Insights (메인 PRACTICES 카드와 같은 모양) ── */
.flt{margin-top:40px;display:flex;gap:8px;flex-wrap:wrap}
.flt button{height:40px;padding:0 18px;border:1px solid #ccc;background:#fff;font:400 14px var(--kr);color:var(--t2);cursor:pointer}
.flt button.on{background:var(--t1);border-color:var(--t1);color:#fff}
.grid{margin-top:24px;display:grid;grid-template-columns:repeat(3,1fr);gap:20px 11px}
.card{background:var(--gray);padding:40px 42px 42px;min-height:286px;display:flex;flex-direction:column;transition:background .3s}
.card:hover{background:#ececec}
.card[hidden]{display:none}  /* 분야 버튼이 hidden을 붙인다 — 위 display:flex가 hidden을 덮어써서 필터가 안 먹던 것 */
.card .tg{font-size:14px;font-weight:500;color:var(--red);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.card h3{font-weight:500;font-size:24px;line-height:1.36;color:var(--t1);margin:14px 0 13px;letter-spacing:-.05em}
.card p{font-size:15px;line-height:1.72;color:var(--t3)}
.card .dt{margin-top:auto;padding-top:20px;font-size:12.5px;font-weight:400;color:var(--t3);letter-spacing:0}

/* ── 칼럼 본문 ── */
.post{width:min(760px,90vw);margin:0 auto;padding:80px 0 100px}
.post .meta{display:flex;gap:14px;align-items:center;font-size:14px;color:var(--t4)}
.post h1{margin-top:16px;font-weight:500;font-size:38px;line-height:1.35;color:var(--t1);letter-spacing:-.05em;text-wrap:balance}
.post .by{margin-top:22px;padding-bottom:30px;border-bottom:1px solid var(--line);font-size:14px;color:var(--t3)}
.post .body{margin-top:40px;font-size:17px;line-height:1.95;color:var(--t2)}
.post .body h2{margin:48px 0 14px;font-size:23px;font-weight:500;color:var(--t1);letter-spacing:-.04em}
.post .body p + p{margin-top:18px}
.post .note{margin-top:56px;padding:22px 26px;background:var(--gray);font-size:13.5px;line-height:1.8;color:var(--t3)}
.post .back{margin-top:44px}
/* 칼럼 본문 요소 (tools\gen_columns.py가 만든다) */
.post .sum{margin-top:30px;padding:24px 28px;background:var(--gray);border-left:3px solid var(--red);font-size:16.5px;line-height:1.85;color:var(--t1)}
.post .body ul,.post .body ol{margin:14px 0 0;padding-left:22px}
.post .body li{margin-top:6px}
.post .body li::marker{color:var(--red)}
.post .body .tb{margin-top:20px;overflow-x:auto}
.post .body table{width:100%;border-collapse:collapse;font-size:15px;line-height:1.6}
.post .body th{background:var(--gray);font-weight:500;color:var(--t1);text-align:left}
.post .body th,.post .body td{padding:10px 14px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);vertical-align:top}
.post .body thead th{border-top:2px solid var(--t1)}
.post .body .basis{margin-top:10px;font-size:13px;color:var(--t4)}
.post .body .q{margin-top:26px;font-weight:500;color:var(--t1)}
.post .body .q + p{margin-top:8px}
.post .body .disc{margin-top:48px;padding-top:20px;border-top:1px solid var(--line);font-size:14px;color:var(--t4)}
.post mark.need{background:#fff3c4;color:#6b5600;padding:0 3px;font-weight:500}
.post .rel-a{margin-top:36px;font-size:15px;color:var(--t3)}
.post .rel-a a{margin-left:10px;color:var(--red);text-decoration:underline;text-underline-offset:4px}

/* ── 업무분야 페이지 (startup · corporate · civil · criminal · administrative) — 2026-10-21, copy\06 2절
   소분야 하나 = 앵커 붙은 절. 왼쪽 분야명 + 한 줄, 오른쪽 소개 → 이런 일을 합니다 → 자주 받는 질문 */
.pa-lead{padding-bottom:40px}.pa-lead .lead{margin-top:0}
.pa-nav{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.96);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.pa-nav .wrap{display:flex;gap:6px 30px;flex-wrap:wrap;padding:16px 0}
.pa-nav a{font-size:15px;font-weight:400;color:var(--t3)}.pa-nav a:hover{color:var(--red)}
.pa{padding:80px 0;border-bottom:1px solid var(--line);scroll-margin-top:60px}
.pa-in{display:grid;grid-template-columns:340px 1fr;gap:70px}
.pa-h h2{position:relative;padding-top:20px;font-size:30px;font-weight:500;line-height:1.35;color:var(--t1);letter-spacing:-.05em}
.pa-h h2:before{content:'';position:absolute;left:0;top:0;width:36px;height:3px;background:var(--red)}
.pa-h p{margin-top:12px;font-size:16px;color:var(--t3)}
.pa-b .intro{font-size:17px;color:var(--t2)}
.pa-b h3{margin-top:40px;font-size:18px;font-weight:500;color:var(--t1)}
.pa-b .note-s{margin-top:14px;font-size:15px;color:var(--t3)}
.dots{margin-top:14px;list-style:none}
.dots li{position:relative;padding-left:16px;font-size:16px;color:var(--t3);line-height:1.9}
.dots li:before{content:'';position:absolute;left:0;top:.85em;width:5px;height:5px;background:var(--red)}
.faq{margin-top:14px;border-top:1px solid var(--t1)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:18px 36px 18px 0;position:relative;font-size:16px;font-weight:400;color:var(--t1)}
.faq summary::-webkit-details-marker{display:none}
.faq summary:before{content:'Q';margin-right:12px;font-family:var(--en);color:var(--red)}
.faq summary:after{content:'';position:absolute;right:6px;top:24px;width:8px;height:8px;border-right:1.5px solid #666;border-bottom:1.5px solid #666;transform:rotate(45deg);transition:transform .3s}
.faq details[open] summary:after{transform:rotate(-135deg);top:28px}
.faq details p{padding:0 0 22px 26px;font-size:15.5px;color:var(--t3)}
.chk{list-style:none;counter-reset:c;border-top:1px solid var(--t1)}
.chk li{counter-increment:c;position:relative;padding:18px 0 18px 52px;border-bottom:1px solid var(--line)}
.chk li:before{content:counter(c,decimal-leading-zero);position:absolute;left:0;top:18px;font-family:var(--en);font-size:15px;color:var(--red)}
.chk b{display:block;font-size:17px;font-weight:500;color:var(--t1)}
.chk span{display:block;margin-top:4px;font-size:15px;color:var(--t3)}
.rel{padding-top:80px}.rel .grid{margin-top:20px}
.areas h3 a:hover,.areas li a:hover{color:var(--red)}
/* 법적고지 */
.legal{max-width:760px}
.legal h2{margin-top:44px;font-size:20px;font-weight:500;color:var(--t1)}
.legal h2:first-of-type{margin-top:22px}
.legal p{margin-top:10px;font-size:16px;color:var(--t3)}
.legal ul{margin-top:10px;padding-left:20px;font-size:16px;color:var(--t3)}.legal li{margin-top:4px}
.legal table{margin-top:14px;width:100%;border-collapse:collapse;font-size:14.5px;color:var(--t3)}.legal th,.legal td{border:1px solid #ddd;padding:10px 12px;text-align:left;vertical-align:top}.legal th{width:22%;background:#f5f5f5;font-weight:500;color:var(--t1)}
@media(max-width:600px){.legal table{font-size:13px}.legal th,.legal td{padding:8px}}


@media (max-width:900px){
 .exp .g{grid-template-columns:1fr;gap:14px;padding:24px 0}
 .pa{padding:56px 0}.pa-in{grid-template-columns:1fr;gap:24px}.pa-h h2{font-size:25px}
 .pa-nav .wrap{flex-wrap:nowrap;overflow-x:auto;white-space:nowrap;gap:22px;padding:14px 0}
 .sh{height:76px}.sh .logo{width:118px}.btn-menu{top:26px;left:20px}.sh .cta{right:16px;height:36px;padding:0 12px;font-size:13px}
 .pt{padding:52px 0 46px}.pt h1{font-size:40px}.pt p{font-size:16px}
 .sec{padding:60px 0}
 .ab-intro,.pf{grid-template-columns:1fr;gap:36px}
 .ab-intro .q{font-size:27px}
 .ways,.grid,.adv{grid-template-columns:1fr}
 .areas{grid-template-columns:1fr 1fr;gap:28px 16px}
 .card{min-height:220px;padding:32px 28px}
 .pf .nm{font-size:36px}.pf dl{grid-template-columns:64px 1fr;gap:18px 16px}
 .band{grid-template-columns:1fr;height:auto}.band a{padding:26px 0;font-size:22px}
 .post{padding:56px 0 80px}.post h1{font-size:29px}.post .body{font-size:16px}
 footer{padding:28px 16px 32px}footer .l{flex-wrap:wrap;row-gap:6px}footer .if{flex-direction:column}footer .if span{padding:0}footer .if span:before{display:none}
}
@media (max-width:560px){.sh .cta{display:none}}
@media (prefers-reduced-motion:reduce){.panel,.dim,.panel .main .kids{transition:none}}