/* ---- header: banner logo row + pill nav row (spec 6.1a) ---- */
/* 로고 줄은 흐르고, 알약 네비 줄만 sticky 로 붙습니다.
   (배너를 208px 로 키운 뒤 헤더 전체를 sticky 로 두면 화면을 너무 가립니다) */
header{border-bottom:1px solid var(--line);background:var(--paper)}
/* 로고 줄은 화면 폭 전체를 씁니다 (.wrap 의 max-width 를 덮어씀).
   양옆 .bandx 가 로고 안 색 띠를 화면 끝까지 이어 붙입니다. */
.wrap.hbar{--logo-h:208px;
  display:flex;align-items:center;justify-content:center;
  padding:26px 0 20px;max-width:none;margin:0}
.brandlk{display:inline-flex;align-items:center;flex:none}
.brandlk img{height:208px;width:auto;max-width:100%}
/* 띠 이어붙이기 — 원본 logo.png(1062x367) 기준 색 띠는 y=111..304.
   그래서 로고 표시 높이의 111/367 만큼 내리고 194/367 만큼의 높이를 줍니다.
   로고 이미지의 height 와 --logo-h 는 항상 같은 값이어야 합니다. */
.bandx{flex:1 1 0;min-width:0;align-self:flex-start;
  margin-top:calc(var(--logo-h) * 111 / 367);
  height:calc(var(--logo-h) * 194 / 367);
  background:linear-gradient(90deg,var(--logo-band-0) 0%,var(--logo-band) 100%)}
.navbar{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--wash);
  position:sticky;top:0;z-index:20}
.navrow{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:60px;padding-top:9px;padding-bottom:9px}
/* grid + 1fr: 모든 알약이 가장 넓은 항목("거래 실적")과 같은 폭이 됩니다 */
nav.main{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;align-items:center;gap:7px}
.pill{display:inline-flex;align-items:center;justify-content:center;gap:7px;border:1px solid var(--line);background:var(--paper);
  border-radius:999px;padding:9px 17px;font-size:14px;font-weight:600;color:var(--muted);
  white-space:nowrap;transition:.14s}
.pill:hover{border-color:var(--brand);color:var(--ink)}
.pill.on{background:var(--brand);border-color:var(--brand);color:var(--on-brand-txt)}
.pill .hico{flex:none}
.pill.home span{display:inline-block}
.hright{display:flex;align-items:center;gap:16px;flex-shrink:0}
@media(max-width:1180px){
  .pill{padding:8px 12px;font-size:13px}
  nav.main{gap:5px}
}
/* 네비가 한 줄에 안 들어가는 지점부터 메뉴 버튼으로 접습니다.
   기준은 영문("Track Record" 등 알약이 더 넓음)입니다. 파일 뒤쪽의
   .menubtn{display:inline-flex} 와 같은 1080px 을 써야 짝이 맞습니다. */
@media(max-width:1080px){
  .navrow{flex-wrap:wrap;justify-content:space-between}
  nav.main{display:none;order:3;width:100%;grid-auto-flow:row;grid-auto-columns:auto;gap:6px;padding:6px 0 10px}
  nav.main.open{display:grid}
  .pill{justify-content:flex-start;border-radius:var(--r);padding:12px 16px;font-size:16px}
}
@media(max-width:900px){
  .wrap.hbar{--logo-h:132px;padding:18px 0 14px}
  .brandlk img{height:132px}
}
@media(max-width:560px){
  .brandlk img{height:96px}
  .wrap.hbar{--logo-h:96px;padding:14px 0 10px}
}

.rec{width:100%;border-collapse:collapse;font-size:16px}
.rec th{text-align:left;padding:10px 0;border-bottom:1px solid var(--line);
  font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.rec td{padding:14px 0;border-bottom:1px solid var(--line)}
.rec .price{text-align:right;font-weight:700;white-space:nowrap}
.rec th.price{text-align:right}

/* Total Commercial Inc — styles.css
   색상: 스펙 6.2 + 6.2a 보조 토큰. :root 밖에 날 색상값을 쓰지 마십시오.
   타이포: 스펙 6.3 스케일. 허용 크기는 56/34/40/28/30/23/22/19/17/16/14/13/12px 뿐입니다. */
:root{--on-brand-txt:#FFFFFF;
  /* 6.2 기본 팔레트 */
  --brand:#006699; --brand-deep:#004C73; --brand-ink:#003A57;
  --brand-tint:#9FC5D8; --wash:#EDF4F8;
  /* 로고 안 색 띠의 "실제 물감". 2026-07-29 로고 흰 배경을 걷어내고 보니
     이 띠는 별도의 하늘색이 아니라 --brand(#006699)를 알파 40% 로 칠한 것이었습니다
     (원본 알파값 102/255 = 정확히 0.4). 흰 배경 위에서는 #99C2D6 으로 보입니다.
     ⚠️ 불투명 #99C2D6 으로 되돌리지 마십시오. 로고는 반투명으로 칠해지는데 CSS 만
        불투명이면 접합부에서 합성 방식이 달라져 색이 미세하게 어긋납니다. */
  --logo-band:rgba(0,102,153,.4);
  /* 언어 토글 국기 (스펙 6.2b). 국기 고유색이므로 브랜드 팔레트와 별개로 둡니다 */
  --flag-white:#FFFFFF; --flag-black:#000000;
  --flag-kr-blue:#0047A0; --flag-kr-red:#CD2E3A;
  --flag-us-red:#B22234; --flag-us-blue:#3C3B6E;
  /* 같은 색의 알파 0. transparent 키워드를 쓰면 브라우저에 따라
     회색을 지나며 흐려지므로 같은 RGB 로 알파만 0 으로 둡니다 */
  --logo-band-0:rgba(0,102,153,0);
  --ink:#0A0A0A; --muted:#5A6B75; --line:#DCE6EC; --paper:#FFFFFF;
  /* 6.2a 보조 토큰 — 다크 표면(푸터·CTA 밴드) 위 텍스트 */
  --on-deep:#C6DAE6; --on-deep-dim:#9BBBCE; --on-deep-label:#7FA7BF;
  --on-deep-line:rgba(255,255,255,.14); --on-deep-line-2:rgba(255,255,255,.30);
  /* 6.2a 보조 토큰 — 히어로 사진 위 텍스트와 오버레이 */
  --on-photo:#D3E3ED; --on-photo-dim:#A9C6D6; --on-photo-line:rgba(255,255,255,.75);
  --hero-bg:#0A2431;
  --scrim-1:rgba(0,32,48,.72); --scrim-2:rgba(0,32,48,.60); --scrim-3:rgba(0,32,48,.80);
  --r:4px; --max:1200px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:"Pretendard Variable",Pretendard,Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  color:var(--ink);background:var(--paper);font-size:17px;line-height:1.7;-webkit-font-smoothing:antialiased}
@media(max-width:820px){body{font-size:16px}}
:lang(ko){word-break:keep-all;overflow-wrap:break-word}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--max);margin:0 auto;padding:0 48px}
@media(max-width:820px){.wrap{padding:0 24px}}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;z-index:99;background:var(--brand);color:var(--paper);padding:10px 16px;border-radius:var(--r)}
/* 6.3 Eyebrow / 라벨 — 12px / 700 / .18em / 대문자 */
.eyebrow{font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--brand);line-height:1.4}
.eyebrow.dim{color:var(--muted)}
h1,h2{letter-spacing:-.01em}
h3{letter-spacing:0;font-weight:600}

/* header */
/* 헤더 높이는 로고 주변 여백을 로고 높이의 50% 이상 확보하도록 잡습니다 (스펙 6.1).
   84px 헤더 - 42px 로고 = 상하 21px (= 50%) */
/* 브랜드 로고 (스펙 6.1): 실제 로고 이미지.
   img 의 width/height 속성은 파일 크기(243x84)이고, 표시 크기는 여기서만 정합니다.
   width:auto 로 비율을 유지합니다 — 비율 왜곡·재색칠(filter 등) 금지.
   브래킷은 이 이미지 안에만 있습니다 (6.5 한 화면 1회). */
.hright{display:flex;align-items:center;gap:16px;flex-shrink:0}
/* 언어 토글은 어떤 폭에서도 헤더에 남습니다 (스펙 4.2) */
/* 언어 토글 — 글자 아래 국기. 세로 스택이라 글자가 그만큼 위로 올라갑니다. */
.lang{font-size:12px;font-weight:700;letter-spacing:.18em;display:flex;align-items:center;gap:6px;white-space:nowrap}
.lang .cur,.lang .oth{display:inline-flex;flex-direction:column;align-items:center;gap:3px}
.lang b{font-weight:inherit;line-height:1}
.lang .flag{width:19px;height:auto;display:block;border:1px solid var(--line);border-radius:1px}
.lang .cur{color:var(--brand)}
.lang .oth{color:var(--muted);font-weight:400}
.lang .oth:hover{color:var(--ink)}
.lang .oth .flag{opacity:.62;transition:opacity .14s}
.lang .oth:hover .flag{opacity:1}
.lang .bar{color:var(--muted);align-self:flex-start;line-height:1}
.menubtn{display:none;align-items:center;gap:9px;background:none;border:1px solid var(--line);border-radius:var(--r);padding:8px 12px;font:inherit;font-size:13px;font-weight:600;cursor:pointer;color:var(--ink)}
.menubtn .bars{display:none;width:16px;height:2px;background:var(--ink);position:relative}
.menubtn .bars:before,.menubtn .bars:after{content:"";position:absolute;left:0;width:16px;height:2px;background:var(--ink)}
.menubtn .bars:before{top:-5px}.menubtn .bars:after{top:5px}
@media(max-width:1080px){
  /* 네비 접힘 규칙은 파일 앞쪽 헤더 블록에 있습니다. 여기서는 버튼만 켭니다.
     (옛 68px 헤더용 absolute/top:68px 규칙은 2026-07-28 제거) */
  .menubtn{display:inline-flex}
}
@media(max-width:620px){
  /* 좁은 폭에서는 Contact 버튼만 메뉴로 내려보냅니다. 언어 토글은 항상 헤더에 남깁니다 (4.2) */
  .hright{gap:12px}
  .hcta{display:none}
  .menubtn{padding:0;width:40px;height:40px;justify-content:center}
  .menubtn .mtxt{display:none}
  .menubtn .bars{display:block}
}
@media(max-width:380px){
  .wrap{padding:0 16px}
  .hright{gap:9px}
  .lang{letter-spacing:.12em;gap:5px}
}
.btn{display:inline-block;border-radius:var(--r);font-weight:700;font-size:16px;padding:14px 28px;transition:.15s;border:1px solid transparent;cursor:pointer}
.btn-p{background:var(--brand);color:var(--paper)}.btn-p:hover{background:var(--brand-deep)}
.btn-s{border-color:var(--ink);color:var(--ink)}.btn-s:hover{background:var(--ink);color:var(--paper)}
.btn-sm{padding:9px 18px;font-size:14px}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px}


/* hero — 6.3 Display 56/34 */
.hero{padding:108px 0 92px;text-align:center}
.heroinner{max-width:880px;margin:0 auto}
.hero h1{font-size:56px;line-height:1.28;letter-spacing:-.02em;font-weight:700}
.hero .eyebrow{margin-bottom:20px}
.hero .lede{margin:30px auto 0;max-width:640px;color:var(--muted)}
.hero .lede strong{color:var(--ink);font-weight:600}
.hero .cta{margin-top:36px;display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.hero .fine{margin-top:20px;font-size:14px;color:var(--muted)}
@media(max-width:820px){.hero{padding:52px 0 46px}.hero h1{font-size:34px}}

/* page head — 6.3 H1 40/28 */
.phead{padding:72px 0 0}
.phead h1{font-size:40px;line-height:1.24;font-weight:700;margin-top:14px;max-width:min(740px,100%)}
.phead .lede{margin-top:20px;color:var(--muted);max-width:62ch;font-size:17px}
.phead+section{padding-top:48px}
.phead+section>.wrap>:first-child{margin-top:0}
@media(max-width:820px){.phead{padding:44px 0 0}.phead h1{font-size:28px}.phead .lede{font-size:16px}
  .phead+section{padding-top:32px}}

/* proof strip */
.proof{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--wash)}
.proof .cap{text-align:center;padding-top:28px;font-size:13px;color:var(--muted)}
.proof .cap strong{color:var(--ink);font-weight:600}
.pgrid{display:grid;grid-template-columns:repeat(4,1fr)}
.pcell{padding:34px 28px;text-align:center}
.pcell+.pcell{border-left:1px solid var(--line)}
.pcell .n{font-size:40px;font-weight:700;letter-spacing:-.02em;line-height:1.1;font-variant-numeric:tabular-nums}
.pcell .n small{font-size:19px;font-weight:600;color:var(--muted);margin-left:2px}
.pcell .l{margin-top:7px;font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.proof .more{text-align:center;padding:0}
.proof .pastperf{text-align:center;padding:14px 0 32px}
@media(max-width:1000px){.pgrid{grid-template-columns:repeat(2,1fr)}
  .pcell:nth-child(3){border-left:none}
  .pcell:nth-child(n+3){border-top:1px solid var(--line)}}
@media(max-width:560px){.pgrid{grid-template-columns:1fr}.pcell{padding:24px 20px}
  .pcell+.pcell{border-left:none;border-top:1px solid var(--line)}.pcell .n{font-size:28px}}

/* doors */
.doors{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.door{padding:76px 60px 68px;display:flex;transition:.18s}
.door+.door{border-left:1px solid var(--line)}
.door.a{background:var(--paper)}.door.b{background:var(--wash)}
.door:hover,.door:focus-visible{background:var(--brand-ink)}
.door:hover *,.door:focus-visible *{color:var(--paper)!important}
.door:hover .dline,.door:focus-visible .dline{background:var(--on-deep-line-2)}
.door .inner{max-width:520px;margin-left:auto;width:100%}
.door.b .inner{margin-left:0;margin-right:auto}
.door h2{font-size:30px;font-weight:700;margin-top:14px;line-height:1.26}
.door p{margin-top:15px;color:var(--muted);font-size:16px}
.dline{height:1px;background:var(--line);margin:24px 0}
.door ul{list-style:none;font-size:16px;color:var(--muted)}
.door li{position:relative;padding-left:16px;margin-top:8px}
.door li:before{content:"";position:absolute;left:0;top:11px;width:6px;height:1px;background:var(--brand-tint)}
.door .go{margin-top:32px;font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--brand);display:block}
@media(max-width:900px){.doors{grid-template-columns:1fr}.door{padding:42px 24px}
  .door+.door{border-left:none;border-top:1px solid var(--line)}
  .door .inner,.door.b .inner{margin:0;max-width:none}.door h2{font-size:23px}}

section{padding:88px 0}
section.tight{padding:56px 0}
section.wash{background:var(--wash);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
@media(max-width:820px){section{padding:52px 0}section.tight{padding:40px 0}}
.split{display:grid;grid-template-columns:320px 1fr;gap:72px;align-items:start}
.split h2{font-size:30px;line-height:1.26;font-weight:700;margin-top:14px}
/* 2026-07-29: .split 좌측 제목의 position:sticky 를 사이트 전체에서 제거했습니다.
   스크롤할 때 제목이 따라 내려오는 것이 읽기에 방해된다는 판단입니다 (스펙 6.7).
   다시 넣지 마십시오. */
@media(max-width:900px){.split{grid-template-columns:1fr;gap:28px}
  .split h2{font-size:23px}}
.prose p{margin-top:20px;max-width:64ch}
.prose p:first-child{margin-top:0}
.prose h2,.prose h3{font-size:22px;font-weight:600;margin-top:38px}
.prose ul,.prose ol{margin-top:16px;padding-left:20px;max-width:62ch;color:var(--muted)}
.prose li{margin-top:8px}
.prose .lead{font-size:22px;font-weight:600;line-height:1.6;color:var(--ink)}
.q,.prose .q{margin-top:30px;padding:24px 28px;background:var(--wash);border-left:3px solid var(--brand);
  border-radius:0 var(--r) var(--r) 0;font-size:17px;font-weight:500}
.src{font-size:13px;color:var(--muted)}
.pastperf{font-size:13px;color:var(--muted);margin-top:18px}
.caveat{margin-top:30px;padding-top:20px;border-top:1px solid var(--line);font-size:14px;color:var(--muted)}
.caveat b{color:var(--ink);font-weight:600;display:block;margin-bottom:8px;font-size:12px;letter-spacing:.18em;text-transform:uppercase}
.caveat ul{padding-left:18px;margin-top:6px}
.caveat li{margin-top:8px}

/* generic cards */
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:36px}
.cards.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.card{border:1px solid var(--line);border-radius:var(--r);padding:28px 26px;background:var(--paper);transition:.15s}
.card:hover{border-color:var(--brand)}
.card h2,.card h3{font-size:19px;font-weight:600;margin-top:12px}
.card p{margin-top:11px;font-size:16px;color:var(--muted)}
.card .num{font-size:12px;font-weight:700;letter-spacing:.18em;color:var(--brand)}
/* 시장 요약 카드의 수치 + 출처·기준 시점 (스펙 5.1 / 8.1-1) */
.card .stat{font-size:30px;font-weight:700;letter-spacing:-.02em;line-height:1.2;
  font-variant-numeric:tabular-nums;margin-top:14px}
.card .statsrc{display:block;font-size:13px;line-height:1.5;color:var(--muted);margin-top:6px;
  padding-bottom:14px;border-bottom:1px solid var(--line)}
@media(max-width:900px){.cards,.cards.two{grid-template-columns:1fr}}

/* comparison table */
.tblwrap{margin-top:32px;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
table{width:100%;border-collapse:collapse;font-size:16px}
th,td{padding:16px 22px;text-align:left;vertical-align:top}
thead th{background:var(--wash);font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
tbody tr+tr{border-top:1px solid var(--line)}
tbody th{font-weight:600;width:22%}
td.price{text-align:right;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
th.price{text-align:right}
.sub{display:block;font-size:13px;color:var(--muted);margin-top:2px}
@media(max-width:760px){
  table,thead,tbody,tr,th,td{display:block}
  thead{display:none}
  tbody tr{padding:14px 18px}
  th,td{padding:2px 0}
  tbody th{width:auto}
  td.price{text-align:left}
}

/* steps */
.steps{margin-top:36px;border-top:1px solid var(--line)}
.step{display:grid;grid-template-columns:80px 1fr;gap:24px;padding:26px 0;border-bottom:1px solid var(--line)}
.step .n{font-size:12px;font-weight:700;letter-spacing:.18em;color:var(--brand);padding-top:4px}
.step h2,.step h3{font-size:19px;font-weight:600}
.step p{margin-top:9px;color:var(--muted);font-size:16px;max-width:60ch}
.step .q{margin-top:18px;max-width:60ch}
@media(max-width:700px){.step{grid-template-columns:1fr;gap:6px;padding:20px 0}}
/* 가이드 각 섹션 말미의 세무·법률 면책 (스펙 5.3) */
.secdisc{margin-top:14px;padding-top:10px;border-top:1px dashed var(--line);
  font-size:13px;color:var(--muted);max-width:60ch}

/* faq */
.faq{margin-top:32px;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{padding:20px 0;font-size:17px;font-weight:600;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:20px}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:"+";color:var(--brand);font-weight:400;font-size:22px;line-height:1}
.faq details[open] summary:after{content:"\2212"}
.faq .a{padding:0 0 22px;color:var(--muted);max-width:66ch}

.disc{margin-top:40px;padding-top:20px;border-top:1px solid var(--line);font-size:14px;color:var(--muted);max-width:920px}
.center{text-align:center}
.mt{margin-top:32px}

/* 404 */
.nflist{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:8px}
.nflist a{display:block;border:1px solid var(--line);border-radius:var(--r);padding:18px 20px;font-weight:600;transition:.15s}
.nflist a:hover{border-color:var(--brand);color:var(--brand)}
@media(max-width:820px){.nflist{grid-template-columns:1fr}}

/* cta band */
.ctaband{background:var(--brand-ink);color:var(--paper);padding:76px 0;text-align:center}
.ctaband h2{font-size:30px;font-weight:700;line-height:1.3}
.ctaband p{margin-top:16px;color:var(--on-deep);max-width:56ch;margin-left:auto;margin-right:auto}
.ctaband .btn-p{background:var(--paper);color:var(--brand-ink);margin-top:30px}
.ctaband .btn-p:hover{background:var(--brand-tint)}
@media(max-width:820px){.ctaband{padding:48px 0}.ctaband h2{font-size:23px}}

/* footer */
footer{background:var(--brand-ink);color:var(--on-deep);padding:64px 0 34px;font-size:16px}
footer a:hover{color:var(--paper)}
.fgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:36px}
.fgrid h3{font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--on-deep-label);margin-bottom:14px}
.fgrid h3.ft2{margin-top:22px}
.fgrid ul{list-style:none}
.fgrid li{margin-top:9px}
/* 푸터 워드마크 — 브래킷 모티프는 헤더에만 (스펙 6.5 · 17절) */
.fwm{font-size:13px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;line-height:1.3;
  color:var(--paper);border-left:4px solid var(--brand-tint);padding-left:10px}
.fwm span{display:block}
.fbrand p{margin-top:14px;max-width:34ch;font-size:14px;color:var(--on-deep-dim)}
.fbrand p b{color:var(--paper);font-weight:600}
.fdisc{border-top-color:var(--on-deep-line);color:var(--on-deep-dim);max-width:none}
.fbot{margin-top:44px;padding-top:22px;border-top:1px solid var(--on-deep-line);font-size:13px;color:var(--on-deep-dim);
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
.kko{font-weight:700;color:inherit}
.eho{display:flex;align-items:center;gap:9px;margin-top:16px;font-size:12px;color:var(--on-deep-dim)}
.eho svg{flex-shrink:0}
@media(max-width:900px){.fgrid{grid-template-columns:1fr 1fr;gap:28px}}
@media(max-width:560px){.fgrid{grid-template-columns:1fr}}

/* photo hero (home) */
.hero.photo{position:relative;color:var(--paper);padding:132px 0 116px;
  background:var(--hero-bg) url("/assets/properties/247-s-normandie-wide.webp") center 62% / cover no-repeat}
.hero.photo:before{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,var(--scrim-1) 0%,var(--scrim-2) 45%,var(--scrim-3) 100%)}
.hero.photo .wrap{position:relative;z-index:1}
.hero.photo .eyebrow{color:var(--brand-tint)}
.hero.photo .lede{color:var(--on-photo)}
.hero.photo .lede strong{color:var(--paper)}
.hero.photo .fine{color:var(--on-photo-dim)}
.hero.photo .btn-s{border-color:var(--on-photo-line);color:var(--paper)}
.hero.photo .btn-s:hover{background:var(--paper);color:var(--brand-ink)}
@media(max-width:820px){.hero.photo{padding:64px 0 56px;background-position:center 60%}}

/* property photo grid (track record) */
.pgal{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:34px}
.pgal figure{margin:0;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--wash)}
.pgal img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;display:block}
.pgal figcaption{padding:11px 14px;font-size:13px;font-weight:600;line-height:1.4}
.pgal figcaption span{display:block;font-weight:400;color:var(--muted);font-variant-numeric:tabular-nums;margin-top:2px}
@media(max-width:1000px){.pgal{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}}
@media(max-width:720px){.pgal{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}}
@media(max-width:420px){.pgal{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .pgal figcaption{padding:9px 10px;font-size:12px}}

/* ---- utility classes (생성기의 인라인 style= 을 대체합니다. 인라인 스타일 금지) ---- */
.h2s{font-size:30px;font-weight:700;line-height:1.26;margin-top:14px;letter-spacing:-.01em}
.h2s.flush{margin-top:0}
@media(max-width:820px){.h2s{font-size:23px}}
.secp{margin-top:16px;color:var(--muted);max-width:64ch}
.secp.narrow{max-width:62ch}
.ruled{background:var(--paper);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.mt-l{margin-top:44px}
.mt-m{margin-top:32px}
.mt-s{margin-top:18px}
.mt-xs{margin-top:14px}
.mt-x{margin-top:10px}
.mt-lg{margin-top:32px}
.pt0{padding-top:0}
.minw0{min-width:0}
.tblwrap.inv{margin-top:14px;background:var(--paper)}
.tot{margin-top:22px;text-align:right;font-weight:600;font-variant-numeric:tabular-nums}
.alt{font-weight:400;color:var(--muted);font-size:16px}
.mail{color:var(--brand)}
.split.splitgap{margin-top:72px}
@media(max-width:900px){.split.splitgap{margin-top:44px}}

/* contact */
.chgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:32px}
.chcard{border:1px solid var(--line);border-radius:var(--r);padding:26px 24px;background:var(--paper);display:block;transition:.15s}
a.chcard:hover{border-color:var(--brand)}
.chcard .lbl{font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.chcard .val{font-size:22px;font-weight:700;margin-top:10px;letter-spacing:0;word-break:break-all}
.chcard .sub{font-size:14px;color:var(--muted);margin-top:8px;display:block}
.chgrid.two{grid-template-columns:repeat(2,1fr)}
.chcard.kakao{background:var(--wash);border-color:var(--brand-tint)}
.chcard.kakao .val{color:var(--brand)}
@media(max-width:820px){.chgrid{grid-template-columns:1fr;gap:12px}}

.tips{list-style:none;margin-top:14px;padding:0}
.tips li{position:relative;padding-left:17px;margin-top:9px;font-size:16px;color:var(--muted)}
.tips li:before{content:"";position:absolute;left:0;top:11px;width:7px;height:1px;background:var(--brand-tint)}
.licbox{margin-top:34px;border:1px solid var(--line);border-radius:var(--r);padding:26px 28px}
.licbox .num{font-size:23px;font-weight:700;margin-top:12px;font-variant-numeric:tabular-nums}

/* principal card (About) */
.person{margin-top:52px;border:1px solid var(--line);border-radius:var(--r);
  display:grid;grid-template-columns:132px 1fr;gap:38px;align-items:start;padding:34px 38px}
.person .ph{width:132px;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--wash)}
.person .ph img{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;display:block}
.person .pbody{min-width:0}
.person .pbody h3{font-size:22px;font-weight:700;line-height:1.3}
.person .role{margin-top:8px;font-size:12px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--muted)}
.person .pbody p{margin-top:17px;color:var(--muted);max-width:58ch}
.person .lic{margin-top:22px;padding-top:15px;border-top:1px solid var(--line);
  font-size:13px;color:var(--muted)}
@media(max-width:760px){
  .person{grid-template-columns:1fr;gap:24px;padding:26px 24px}
  .person .ph{width:112px}
  .person .pbody h3{font-size:19px}
}