/* ============================================================
   JL Real Estate Consulting — shared stylesheet
   Palette: deep teal on a cool near-white
   Type:    Spectral (latin display) + Nanum Myeongjo (hangul display)
            IBM Plex Sans KR (body) + IBM Plex Mono (labels, figures)
   ============================================================ */

:root{
  --ground:#F4F6F5; --surface:#FFFFFF; --surface-2:#E9EEEC; --deep:#0B1917;
  --ink:#101F1D; --ink-2:#3B4E4B; --muted:#6B7E7A;
  --line:#DBE3E0; --line-2:#C4D0CC;
  --teal:#0E5C55; --teal-2:#14766C; --teal-soft:#E1EEEB;
  --brass:#8A6410; --brass-soft:#F5EDDA;
  --ok:#2F6B45; --warn:#8A6410; --stop:#A93220; --stop-soft:#F7E7E3;
  --on-deep:#E8EFED; --on-deep-2:#9FB3AE;
  --serif:"Spectral","Nanum Myeongjo",Georgia,serif;
  --sans:"IBM Plex Sans KR","Malgun Gothic",system-ui,-apple-system,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ground:#0B1412; --surface:#121D1B; --surface-2:#192523; --deep:#070F0E;
    --ink:#E8EEEC; --ink-2:#C2CFCB; --muted:#8C9E9A;
    --line:#243230; --line-2:#31423E;
    --teal:#61BFB1; --teal-2:#7FD0C3; --teal-soft:#132926;
    --brass:#D3A94E; --brass-soft:#241E10;
    --ok:#7BBF95; --warn:#D3A94E; --stop:#E2836F; --stop-soft:#2A1A16;
  }
}
:root[data-theme="dark"]{
  --ground:#0B1412; --surface:#121D1B; --surface-2:#192523; --deep:#070F0E;
  --ink:#E8EEEC; --ink-2:#C2CFCB; --muted:#8C9E9A;
  --line:#243230; --line-2:#31423E;
  --teal:#61BFB1; --teal-2:#7FD0C3; --teal-soft:#132926;
  --brass:#D3A94E; --brass-soft:#241E10;
  --ok:#7BBF95; --warn:#D3A94E; --stop:#E2836F; --stop-soft:#2A1A16;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{
  margin:0; background:var(--ground); color:var(--ink);
  font-family:var(--sans); line-height:1.75; font-size:16px;
  -webkit-font-smoothing:antialiased;
}
body[lang="ko"]{word-break:keep-all}
body[lang="en"]{line-height:1.7}

.wrap{max-width:1120px;margin:0 auto;padding:0 28px}
.narrow{max-width:820px;margin:0 auto}
.skip{position:absolute;left:-9999px}
.skip:focus{left:16px;top:12px;z-index:60;background:var(--teal);color:#fff;padding:10px 16px;border-radius:4px}

/* ---------------- nav ---------------- */
nav{border-bottom:1px solid var(--line);background:var(--ground);position:sticky;top:0;z-index:30}
.nav-in{max-width:1120px;margin:0 auto;padding:16px 28px;display:flex;align-items:center;gap:28px}
.logo{display:flex;align-items:center;gap:11px;flex:none;text-decoration:none;color:inherit}
.logo svg{display:block;height:34px;width:auto;color:var(--teal)}
.logo-txt{display:flex;flex-direction:column;line-height:1.15}
.logo-txt .a{font-family:var(--serif);font-weight:700;font-size:15px;letter-spacing:-.01em}
.logo-txt .b{font-family:var(--mono);font-size:9px;letter-spacing:.16em;color:var(--muted);text-transform:uppercase}
.nav-links{display:flex;gap:22px;margin-left:auto;align-items:center;flex-wrap:wrap}
.nav-links a{font-size:14px;color:var(--ink-2);text-decoration:none;font-weight:500;white-space:nowrap}
.nav-links a:hover,.nav-links a.on{color:var(--teal)}
.nav-cta{background:var(--teal);color:#fff !important;padding:8px 16px;border-radius:4px;font-size:13.5px}
.nav-cta:hover{background:var(--teal-2)}
.lang{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;color:var(--line-2);display:flex;gap:7px;align-items:center}
.lang a{font-size:11.5px;color:var(--muted)}
.lang a.on{color:var(--ink);font-weight:600}
a:focus-visible{outline:2px solid var(--teal);outline-offset:3px;border-radius:2px}
@media(max-width:980px){.nav-links a:not(.nav-cta){display:none}.lang{display:none}}

/* ---------------- headings & type ---------------- */
h1{font-family:var(--serif);font-weight:700;line-height:1.18;letter-spacing:-.025em;margin:0 0 24px;text-wrap:balance}
h1 em{font-style:normal;color:var(--teal)}
h2{font-family:var(--serif);font-weight:700;font-size:clamp(26px,3.8vw,41px);line-height:1.26;margin:0 0 20px;text-wrap:balance;letter-spacing:-.02em}
h3{font-family:var(--serif);font-weight:700;font-size:20px;margin:0 0 10px;line-height:1.4}
p{margin:0 0 17px;max-width:66ch}
strong{font-weight:600}
a{color:var(--teal)}
code{font-family:var(--mono);font-size:.9em;background:var(--surface-2);padding:1px 5px;border-radius:3px}
.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--teal);font-weight:500;margin-bottom:16px}
.lead{font-size:17.5px;color:var(--ink-2);font-weight:300;max-width:62ch;margin:0 0 44px;line-height:1.76}
.pull{font-family:var(--serif);font-weight:700;font-size:clamp(19px,2.4vw,26px);line-height:1.46;color:var(--ink);border-left:3px solid var(--teal);padding:4px 0 4px 20px;margin:26px 0}
.disclaim{font-size:13px;color:var(--muted);margin-top:18px;line-height:1.68;max-width:80ch}
ul.plain{margin:0 0 18px;padding-left:20px;max-width:66ch}
ul.plain li{margin-bottom:8px;color:var(--ink-2)}

/* ---------------- hero / page head ---------------- */
.hero{padding:96px 0 0}
.hero h1{font-size:clamp(36px,6.2vw,70px);max-width:16ch;margin-bottom:26px}
.kicker{font-family:var(--mono);font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--teal);font-weight:500;margin-bottom:26px}
.hero-sub{font-size:18.5px;font-weight:300;color:var(--ink-2);max-width:56ch;margin:0 0 40px;line-height:1.74}
.hero-acts{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:76px}
.phead{padding:84px 0 0}
.phead h1{font-size:clamp(32px,5.4vw,58px);max-width:20ch}
.phead .sub{font-size:18px;font-weight:300;color:var(--ink-2);max-width:56ch;margin:0 0 64px;line-height:1.78}
.crumb{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:22px}
.crumb a{color:var(--muted);text-decoration:none}
.crumb a:hover{color:var(--teal)}

/* ---------------- buttons ---------------- */
.btn{display:inline-flex;align-items:center;gap:8px;padding:14px 26px;border-radius:5px;font-size:15px;font-weight:600;text-decoration:none;border:1px solid transparent}
.btn-p{background:var(--teal);color:#fff}
.btn-p:hover{background:var(--teal-2)}
.btn-s{border-color:var(--line-2);color:var(--ink)}
.btn-s:hover{border-color:var(--teal);color:var(--teal)}
.cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:32px}

/* ---------------- sections ---------------- */
section{padding:92px 0}
section.alt{background:var(--surface)}
section.dark{background:var(--deep);color:var(--on-deep)}
section.dark h2,section.dark h3,section.dark strong{color:var(--on-deep)}
section.dark p,section.dark .lead{color:var(--on-deep-2)}
section.dark .eyebrow{color:var(--teal-2)}
section.tight{padding-bottom:0}

/* ---------------- stat band ---------------- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));gap:1px;background:var(--line);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.stat{background:var(--ground);padding:32px 24px 34px;display:flex;flex-direction:column;gap:3px}
.stat .v{font-family:var(--serif);font-size:clamp(33px,5vw,50px);font-weight:700;line-height:1;color:var(--teal);font-variant-numeric:tabular-nums;letter-spacing:-.025em}
.stat .l{font-size:14px;font-weight:600;margin-top:8px}
.stat .s{font-size:12.5px;color:var(--muted);line-height:1.52}
section.dark .stats{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.12)}
section.dark .stat{background:var(--deep)}
section.dark .stat .v{color:var(--teal-2)}
section.dark .stat .l{color:var(--on-deep)}
section.dark .stat .s{color:var(--on-deep-2)}

/* ---------------- cell grid ---------------- */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:7px;overflow:hidden}
.grid.g2{grid-template-columns:repeat(auto-fit,minmax(310px,1fr))}
.cell{background:var(--ground);padding:30px 26px 34px;display:flex;flex-direction:column;gap:9px}
section.alt .cell{background:var(--surface)}
.cell .n{font-family:var(--mono);font-size:11px;color:var(--teal);letter-spacing:.14em;font-weight:600}
.cell h3{margin:6px 0 0;font-size:18.5px}
.cell p{font-size:14.5px;color:var(--ink-2);margin:0;line-height:1.7}
.cell .t{font-size:15.5px;font-weight:600}
.cell .d{font-size:13.5px;color:var(--muted);line-height:1.66}

/* ---------------- dark feature block ---------------- */
.feature{background:var(--deep);border-radius:9px;padding:clamp(32px,5vw,62px);color:var(--on-deep)}
.feature .eyebrow{color:var(--teal-2)}
.feature h2{color:var(--on-deep);margin-bottom:22px}
.feature p{color:var(--on-deep-2);max-width:64ch}
.feature strong{color:var(--on-deep)}
.verdict{display:inline-block;font-family:var(--serif);font-weight:700;font-size:clamp(22px,3.6vw,35px);line-height:1.4;color:#fff;border-left:3px solid var(--teal-2);padding:6px 0 6px 22px;margin:30px 0 26px;letter-spacing:-.01em}
.rlist{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:24px;margin-top:38px;padding-top:34px;border-top:1px solid rgba(255,255,255,.13)}
.rlist .t{font-size:14.5px;font-weight:600;color:var(--on-deep);margin-bottom:4px}
.rlist .d{font-size:13.5px;color:var(--on-deep-2);line-height:1.64}

/* ---------------- tables ---------------- */
.tw{overflow-x:auto;border:1px solid var(--line);border-radius:7px;background:var(--surface)}
section.alt .tw{background:var(--ground)}
table{border-collapse:collapse;width:100%;font-size:15px;min-width:640px}
th,td{text-align:left;padding:15px 20px;border-bottom:1px solid var(--line);vertical-align:top}
thead th{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:500;background:var(--surface-2);border-bottom:1px solid var(--line-2)}
tbody tr:last-child td{border-bottom:0}
tfoot td{background:var(--teal-soft);font-weight:600;border-top:1px solid var(--line-2)}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.up{color:var(--ok);font-weight:600}
.addr{font-weight:600}
.addr span{display:block;font-weight:400;font-size:13px;color:var(--muted);margin-top:1px}
td.mid{vertical-align:middle}

/* ---------------- steps ---------------- */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(192px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:7px;overflow:hidden}
.stp{background:var(--ground);padding:24px 22px 28px;display:flex;flex-direction:column;gap:7px}
section.alt .stp{background:var(--surface)}
.stp .n{font-family:var(--mono);font-size:11px;color:var(--teal);font-weight:600;letter-spacing:.12em}
.stp .t{font-size:15.5px;font-weight:600;line-height:1.4}
.stp .d{font-size:13.5px;color:var(--muted);line-height:1.58}

/* ---------------- pricing ---------------- */
.prices{display:grid;grid-template-columns:repeat(auto-fit,minmax(252px,1fr));gap:14px}
.price{background:var(--surface);border:1px solid var(--line);border-radius:7px;padding:28px 26px 30px;display:flex;flex-direction:column;gap:8px}
section.alt .price{background:var(--ground)}
.price.hi{border-color:var(--teal);background:var(--teal-soft)}
.price .lab{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.price .v{font-family:var(--serif);font-size:34px;font-weight:700;line-height:1.1;color:var(--teal);font-variant-numeric:tabular-nums;margin:4px 0 2px;letter-spacing:-.02em}
.price .v small{font-size:16px;font-weight:600}
.price .d{font-size:14px;color:var(--ink-2);line-height:1.64}

/* ---------------- case cards ---------------- */
.case{background:var(--surface);border:1px solid var(--line);border-radius:8px;overflow:hidden;margin-bottom:22px}
section.alt .case{background:var(--ground)}
.case-h{padding:22px 30px;border-bottom:1px solid var(--line);display:flex;gap:14px;align-items:center;flex-wrap:wrap;background:var(--surface-2)}
.case-h .id{font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--muted);text-transform:uppercase}
.case-h .nm{font-size:18px;font-weight:600;flex:1 1 auto}
.case-b{padding:28px 30px 32px}
.case-b p{max-width:64ch}
.badge{font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;padding:5px 11px;border-radius:3px;white-space:nowrap}
.badge.stop{background:var(--stop-soft);color:var(--stop)}
.badge.warn{background:var(--brass-soft);color:var(--brass)}
.badge.ok{background:var(--teal-soft);color:var(--teal)}

/* ---------------- scenario bars ---------------- */
.scen{display:flex;flex-direction:column;gap:10px;margin:24px 0 6px}
.sc{display:grid;grid-template-columns:74px 1fr;gap:16px;align-items:center}
.sc .p{font-family:var(--mono);font-size:15px;font-weight:600;text-align:right;font-variant-numeric:tabular-nums}
.sc .bar{position:relative;height:38px;border-radius:4px;background:var(--surface-2);overflow:hidden;display:flex;align-items:center}
.sc .fill{position:absolute;left:0;top:0;bottom:0;border-radius:4px}
.sc .txt{position:relative;padding:0 14px;font-size:13.5px;font-weight:500;line-height:1.35}
.sc .txt b{font-family:var(--mono);font-weight:600}

/* ---------------- grading bars ---------------- */
.grade{display:flex;flex-direction:column;gap:2px;margin:34px 0 10px}
.gr{display:grid;grid-template-columns:130px 1fr 46px;gap:16px;align-items:center;padding:12px 0}
.gr .lab{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;text-align:right}
.gr .track{height:30px;background:rgba(255,255,255,.07);border-radius:3px;overflow:hidden}
.gr .f{height:100%;border-radius:3px}
.gr .ct{font-family:var(--serif);font-size:22px;font-weight:700;font-variant-numeric:tabular-nums}

/* ---------------- person cards ---------------- */
.person{display:grid;grid-template-columns:272px 1fr;background:var(--surface);border:1px solid var(--line);border-radius:8px;overflow:hidden;margin-bottom:20px}
section.alt .person{background:var(--ground)}
.p-side{background:var(--surface-2);padding:32px 28px;display:flex;flex-direction:column;gap:20px;border-right:1px solid var(--line)}
.p-mark{width:64px;height:64px;border-radius:50%;background:var(--teal);color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:25px;font-weight:700}
.p-name{font-family:var(--serif);font-size:23px;font-weight:700;line-height:1.28}
.p-name span{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--muted);font-weight:400;margin-top:6px;text-transform:uppercase}
.p-role{font-size:14.5px;color:var(--ink-2);font-weight:500;line-height:1.58}
.p-facts{display:flex;flex-direction:column;gap:9px;margin-top:auto;padding-top:20px;border-top:1px solid var(--line-2)}
.p-facts div{font-size:13px;color:var(--muted);line-height:1.52}
.p-facts b{display:block;font-family:var(--mono);font-size:16px;color:var(--teal);font-weight:600;font-variant-numeric:tabular-nums}
.p-body{padding:34px 36px 38px}
.p-body p{max-width:60ch}
.p-body p:last-child{margin-bottom:0}

/* ---------------- callouts ---------------- */
.note{background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--teal);border-radius:5px;padding:22px 26px;margin:26px 0}
section.alt .note{background:var(--ground)}
.note.warn{border-left-color:var(--brass)}
.note.stop{border-left-color:var(--stop)}
.note h4{margin:0 0 8px;font-size:15.5px;font-weight:600;font-family:var(--sans)}
.note p{margin:0;font-size:15px;color:var(--ink-2)}
.note p + p{margin-top:12px}

/* ---------------- faq ---------------- */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{padding:20px 0;font-size:16.5px;font-weight:600;cursor:pointer;list-style:none;display:flex;gap:16px;align-items:flex-start}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"+";font-family:var(--mono);color:var(--teal);font-weight:600;flex:none;font-size:18px;line-height:1.5}
.faq details[open] summary::before{content:"–"}
.faq .a{padding:0 0 22px 32px;color:var(--ink-2);font-size:15.5px;max-width:70ch}
.faq .a p{margin:0 0 12px}
.faq .a p:last-child{margin-bottom:0}

/* ---------------- contact ---------------- */
.contact{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:7px;overflow:hidden}
.cc{background:var(--ground);padding:28px 26px 30px;display:flex;flex-direction:column;gap:6px}
section.alt .cc{background:var(--surface)}
.cc .lab{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.cc .v{font-size:19px;font-weight:600;font-variant-numeric:tabular-nums}
.cc .v a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line-2)}
.cc .v a:hover{color:var(--teal);border-color:var(--teal)}
.cc .s{font-size:13px;color:var(--muted);line-height:1.55}

/* form */
.form{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px;margin-top:8px}
.field{display:flex;flex-direction:column;gap:7px}
.field.full{grid-column:1/-1}
.field label{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.field input,.field select,.field textarea{
  font-family:var(--sans);font-size:15px;color:var(--ink);
  background:var(--surface);border:1px solid var(--line-2);border-radius:5px;
  padding:12px 14px;width:100%;
}
.field textarea{min-height:130px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--teal);outline-offset:1px;border-color:var(--teal)}
.consent{grid-column:1/-1;display:flex;gap:11px;align-items:flex-start;font-size:14px;color:var(--ink-2)}
.consent input{margin-top:5px;flex:none;width:16px;height:16px;accent-color:var(--teal)}

/* ---------------- footer ---------------- */
footer{background:var(--deep);color:var(--on-deep-2);padding:64px 0 44px;font-size:13.5px;line-height:1.82}
footer .fgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:36px;padding-bottom:34px;border-bottom:1px solid rgba(255,255,255,.11)}
footer .ft{font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--on-deep);margin-bottom:10px}
footer a{color:var(--on-deep-2);text-decoration:none;border-bottom:1px solid rgba(255,255,255,.16)}
footer a:hover{color:#fff;border-color:rgba(255,255,255,.5)}
.legal{padding-top:26px;font-size:12.5px;color:rgba(255,255,255,.42);line-height:1.82}

/* ---------------- responsive ---------------- */
@media(max-width:760px){
  .person{grid-template-columns:1fr}
  .p-side{border-right:0;border-bottom:1px solid var(--line)}
  .p-body{padding:28px 24px 30px}
}
@media(max-width:640px){
  .wrap{padding:0 20px}
  .nav-in{padding:14px 20px}
  .hero{padding:62px 0 0}
  .phead{padding:54px 0 0}
  section{padding:64px 0}
  .hero-acts{margin-bottom:54px}
  .case-h,.case-b{padding-left:20px;padding-right:20px}
  .gr{grid-template-columns:100px 1fr 38px;gap:10px}
  .sc{grid-template-columns:60px 1fr;gap:10px}
}