/* ============================================================
   JL Property Consulting — shared stylesheet
   Palette: deep teal on a cool near-white
   Type:    Archivo (latin display) + Gothic A1 (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:"Archivo","Gothic A1","IBM Plex Sans KR",system-ui,sans-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:800;line-height:1.2;letter-spacing:-.03em;margin:0 0 24px;text-wrap:balance}
h1 em{font-style:normal;color:var(--teal)}
h2{font-family:var(--serif);font-weight:800;font-size:clamp(25px,3.6vw,39px);line-height:1.3;margin:0 0 20px;text-wrap:balance;letter-spacing:-.025em}
h3{font-family:var(--serif);font-weight:700;font-size:19.5px;margin:0 0 10px;line-height:1.45;letter-spacing:-.01em}
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;letter-spacing:-.015em;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:14px;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:800;line-height:1;color:var(--teal);font-variant-numeric:tabular-nums;letter-spacing:-.025em}
.stat .l{font-size:15px;font-weight:600;margin-top:8px}
.stat .s{font-size:13.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:12px;color:var(--teal);letter-spacing:.14em;font-weight:600}
.cell h3{margin:6px 0 0;font-size:19.5px}
.cell p{font-size:15.5px;color:var(--ink-2);margin:0;line-height:1.7}
.cell .t{font-size:16.5px;font-weight:600}
.cell .d{font-size:15px;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:800;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:15.5px;font-weight:600;color:var(--on-deep);margin-bottom:4px}
.rlist .d{font-size:15px;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:16px;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:13.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-2);font-weight:600;background:var(--surface-2);border-bottom:1px solid var(--line-2);padding-top:16px;padding-bottom:16px}
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:14px;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:12px;color:var(--teal);font-weight:600;letter-spacing:.12em}
.stp .t{font-size:16.5px;font-weight:600;line-height:1.4}
.stp .d{font-size:15px;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:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.price .v{font-family:var(--serif);font-size:34px;font-weight:800;line-height:1.1;color:var(--teal);font-variant-numeric:tabular-nums;margin:4px 0 2px;letter-spacing:-.02em}
.price .v small{font-size:17px;font-weight:600}
.price .d{font-size:15.5px;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:12px;letter-spacing:.12em;color:var(--muted);text-transform:uppercase}
.case-h .nm{font-size:19px;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:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;padding:7px 13px;border-radius:4px;white-space:nowrap;line-height:1.25}
.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:15.5px;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:14.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:146px 1fr 48px;gap:16px;align-items:center;padding:12px 0}
.gr .lab{font-family:var(--mono);font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;text-align:right}
.gr .track{display:block;height:30px;background:rgba(255,255,255,.07);border-radius:3px;overflow:hidden}
.gr .f{display:block;height:100%;border-radius:3px}
.gr .ct{font-family:var(--serif);font-size:23px;font-weight:800;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:22px;font-weight:700;line-height:1.32;letter-spacing:-.015em}
.p-name span{display:block;font-family:var(--mono);font-size:12px;letter-spacing:.12em;color:var(--muted);font-weight:400;margin-top:6px;text-transform:uppercase}
.p-role{font-size:15.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:14px;color:var(--muted);line-height:1.52}
.p-facts b{display:block;font-family:var(--mono);font-size:17px;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:16.5px;font-weight:600;font-family:var(--sans)}
.note p{margin:0;font-size:16px;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:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.cc .v{font-size:20px;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:14px;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:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.field input,.field select,.field textarea{
  font-family:var(--sans);font-size:16px;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:15px;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:14.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:11.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:13.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}
}

/* ---------------- image hero ---------------- */
.hero-img{
  position:relative;
  min-height:min(78vh,700px);
  display:flex;align-items:flex-end;
  background:var(--deep);
  overflow:hidden;
  isolation:isolate;
}
.hero-img .bg{
  position:absolute;inset:0;z-index:0;
  background-size:cover;background-position:center 58%;
  transform:scale(1.02);
}
.hero-img .bg::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(180deg, rgba(6,20,18,.30) 0%, rgba(6,20,18,.12) 34%, rgba(6,20,18,.72) 78%, rgba(6,20,18,.92) 100%),
    linear-gradient(96deg, rgba(6,26,24,.62) 0%, rgba(6,26,24,.16) 62%, rgba(6,26,24,0) 100%);
}
.hero-img .inner{position:relative;z-index:1;width:100%;padding:0 0 68px}
.hero-img .kicker{color:#8FD8CB;margin-bottom:22px}
.hero-img h1{
  color:#fff;max-width:15ch;margin-bottom:24px;
  font-size:clamp(34px,6vw,68px);
  text-shadow:0 2px 30px rgba(0,0,0,.32);
}
.hero-img h1 em{color:#8FD8CB}
.hero-img .hero-sub{
  color:rgba(255,255,255,.86);max-width:52ch;margin-bottom:34px;font-weight:300;
  text-shadow:0 1px 18px rgba(0,0,0,.4);
}
.hero-img .hero-acts{margin-bottom:0}
.hero-img .btn-s{border-color:rgba(255,255,255,.42);color:#fff;backdrop-filter:blur(2px)}
.hero-img .btn-s:hover{border-color:#fff;color:#fff;background:rgba(255,255,255,.10)}
.hero-cap{
  position:absolute;right:20px;bottom:12px;z-index:2;
  font-family:var(--mono);font-size:10px;letter-spacing:.08em;
  color:rgba(255,255,255,.42);
}
@media(max-width:640px){
  .hero-img{min-height:min(84vh,620px)}
  .hero-img .inner{padding-bottom:48px}
  .hero-cap{display:none}
}
.hero-img .bg{background-image:url("/assets/hero-australia-sm.jpg")}
@media(min-width:900px){.hero-img .bg{background-image:url("/assets/hero-australia.jpg")}}

/* ---------------- person portraits ---------------- */
.p-photo{
  position:relative;width:100%;aspect-ratio:4/5;
  border-radius:5px;overflow:hidden;background:var(--teal);
  display:flex;align-items:center;justify-content:center;
  margin-bottom:2px;
}
.p-photo .ini{
  font-family:var(--serif);font-size:36px;font-weight:800;color:#fff;
  letter-spacing:.02em;
}
.p-photo img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center 22%;
}

/* ---------------- nav dropdowns ---------------- */
.nav-group{position:relative}
.nav-trigger{
  font-family:var(--sans);font-size:14px;font-weight:500;color:var(--ink-2);
  background:none;border:0;padding:0;cursor:pointer;display:inline-flex;align-items:center;gap:5px;
  white-space:nowrap;
}
.nav-trigger::after{content:"";width:5px;height:5px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-1px);opacity:.55}
.nav-group:hover .nav-trigger,.nav-group:focus-within .nav-trigger{color:var(--teal)}
.nav-menu{
  position:absolute;top:calc(100% + 14px);left:-16px;min-width:216px;
  background:var(--surface);border:1px solid var(--line);border-radius:6px;
  box-shadow:0 12px 34px -14px rgba(16,31,29,.28);
  padding:8px;display:none;flex-direction:column;gap:1px;z-index:40;
}
.nav-group:hover .nav-menu,.nav-group:focus-within .nav-menu{display:flex}
.nav-menu::before{content:"";position:absolute;top:-14px;left:0;right:0;height:14px}
.nav-menu a{
  display:block;padding:9px 12px;border-radius:4px;font-size:14px;
  color:var(--ink-2);line-height:1.4;
}
.nav-menu a:hover{background:var(--surface-2);color:var(--teal)}
.nav-menu a span{display:block;font-size:12px;color:var(--muted);margin-top:2px}
.nav-menu a:hover span{color:var(--muted)}

/* mobile menu */
.nav-mob{display:none;margin-left:auto}
.nav-mob summary{
  list-style:none;cursor:pointer;font-family:var(--mono);font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);
  border:1px solid var(--line-2);border-radius:4px;padding:9px 13px;
}
.nav-mob summary::-webkit-details-marker{display:none}
.nav-mob[open] summary{color:var(--teal);border-color:var(--teal)}
.nav-mob-panel{
  position:absolute;left:0;right:0;top:100%;background:var(--surface);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:12px 20px 20px;display:flex;flex-direction:column;z-index:40;
  box-shadow:0 16px 30px -18px rgba(16,31,29,.3);
}
.nav-mob-panel a{padding:12px 0;border-bottom:1px solid var(--line);font-size:15.5px;color:var(--ink)}
.nav-mob-panel a:last-of-type{border-bottom:0}
.nav-mob-panel .grp{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);padding:16px 0 4px}
@media(max-width:980px){
  nav{position:sticky}
  .nav-links{display:none}
  .nav-mob{display:block}
}
@media(min-width:981px){.nav-mob{display:none}}

/* ---------------- photo band ---------------- */
.photoband{
  position:relative;width:100%;aspect-ratio:3/2;max-height:420px;
  border-radius:8px;overflow:hidden;background:var(--surface-2);margin:0 0 44px;
}
.photoband img{width:100%;height:100%;object-fit:cover;object-position:center 38%;display:block}
.photoband figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:44px 26px 18px;
  background:linear-gradient(180deg,rgba(6,20,18,0),rgba(6,20,18,.78));
  color:rgba(255,255,255,.9);font-size:14px;line-height:1.5;
}
@media(max-width:640px){.photoband{aspect-ratio:4/3}}

/* ---------------- compact page hero (내부 페이지) ---------------- */
.phead-img{
  position:relative;min-height:min(48vh,400px);
  display:flex;align-items:flex-end;background:var(--deep);
  overflow:hidden;isolation:isolate;
}
.phead-img .bg{position:absolute;inset:0;z-index:0;background-size:cover;background-position:center 52%}
.phead-img .bg::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(6,20,18,.34) 0%,rgba(6,20,18,.16) 30%,rgba(6,20,18,.76) 80%,rgba(6,20,18,.92) 100%),
    linear-gradient(96deg,rgba(6,26,24,.60) 0%,rgba(6,26,24,.14) 60%,rgba(6,26,24,0) 100%);
}
.phead-img .inner{position:relative;z-index:1;width:100%;padding:0 0 44px}
.phead-img .crumb{color:rgba(255,255,255,.62)}
.phead-img .crumb a{color:rgba(255,255,255,.62)}
.phead-img .crumb a:hover{color:#8FD8CB}
.phead-img h1{
  color:#fff;max-width:19ch;margin-bottom:18px;
  font-size:clamp(30px,4.8vw,52px);text-shadow:0 2px 26px rgba(0,0,0,.34);
}
.phead-img h1 em{color:#8FD8CB}
.phead-img .sub{
  color:rgba(255,255,255,.86);max-width:56ch;margin-bottom:0;font-weight:300;
  text-shadow:0 1px 16px rgba(0,0,0,.4);
}
@media(max-width:640px){
  .phead-img{min-height:min(56vh,380px)}
  .phead-img .inner{padding-bottom:34px}
}
.bg-adelaide{background-image:url("/assets/hero-adelaide-street-sm.jpg")}
.bg-interior{background-image:url("/assets/hero-home-interior-sm.jpg")}
@media(min-width:900px){
  .bg-adelaide{background-image:url("/assets/hero-adelaide-street.jpg")}
  .bg-interior{background-image:url("/assets/hero-home-interior.jpg")}
}

/* ---------------- 인물 사진 카드 (상담 페이지) ---------------- */
.photo-card{
  max-width:430px;margin:0 0 40px;border-radius:8px;overflow:hidden;
  border:1px solid var(--line);background:var(--surface-2);
}
.photo-card img{width:100%;height:auto;display:block}
.photo-card figcaption{
  padding:14px 18px 16px;font-size:13.5px;color:var(--muted);line-height:1.6;
  background:var(--surface);
}
section.alt .photo-card figcaption{background:var(--ground)}

/* 긴 이메일 주소가 잘리지 않게 */
.cc .v{overflow-wrap:anywhere;word-break:break-word;line-height:1.35}
.cc .v a[href^="mailto:"]{font-size:16px;letter-spacing:-.01em}

/* 물건 사진 히어로 */
.bg-hallett-front{background-image:url("/assets/hero-hallett-front-sm.jpg")}
.bg-hallett-terrace{background-image:url("/assets/hero-hallett-terrace-sm.jpg")}
@media(min-width:900px){
  .bg-hallett-front{background-image:url("/assets/hero-hallett-front.jpg")}
  .bg-hallett-terrace{background-image:url("/assets/hero-hallett-terrace.jpg")}
}

/* ---------------- 데이터 차트 ---------------- */
.chart{display:flex;flex-direction:column;gap:3px;margin:30px 0 8px}
.chart .row{display:grid;grid-template-columns:minmax(96px,132px) 1fr minmax(72px,88px);gap:14px;align-items:center;padding:9px 0}
.chart .lb{font-size:15.5px;font-weight:600;text-align:right;line-height:1.3}
.chart .lb small{display:block;font-weight:400;font-size:13px;color:var(--muted);margin-top:1px}
.chart .track{display:block;height:26px;background:var(--surface-2);border-radius:3px;overflow:hidden}
.chart .fill{display:block;height:100%;border-radius:3px;background:var(--teal)}
.chart .fill.mut{background:var(--line-2)}
.chart .fill.hi{background:var(--brass)}
.chart .val{font-family:var(--mono);font-size:15.5px;font-weight:600;font-variant-numeric:tabular-nums;text-align:right}
section.dark .chart .track{background:rgba(255,255,255,.09)}
section.dark .chart .lb{color:var(--on-deep)}
section.dark .chart .lb small{color:var(--on-deep-2)}
section.dark .chart .val{color:var(--on-deep)}
section.dark .chart .fill{background:var(--teal-2)}
section.dark .chart .fill.mut{background:rgba(255,255,255,.34)}
.chart-note{font-size:14px;color:var(--muted);margin-top:14px;line-height:1.65;max-width:78ch}
section.dark .chart-note{color:var(--on-deep-2)}

/* 큰 숫자 세 개 */
.figs{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:7px;overflow:hidden;margin:28px 0}
.fig{background:var(--ground);padding:28px 24px 30px;display:flex;flex-direction:column;gap:4px}
section.alt .fig{background:var(--surface)}
.fig .v{font-family:var(--serif);font-size:clamp(30px,4.2vw,42px);font-weight:800;line-height:1.05;color:var(--teal);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.fig .l{font-size:16px;font-weight:600;margin-top:6px;line-height:1.4}
.fig .s{font-size:14px;color:var(--muted);line-height:1.6}
.bg-rooftops{background-image:url("/assets/hero-rooftops-sm.jpg")}
@media(min-width:900px){.bg-rooftops{background-image:url("/assets/hero-rooftops.jpg")}}

/* ---------------- 어두운 섹션 안의 컴포넌트 색 보정 ----------------
   밝은 배경 박스에 밝은 글씨가 되는 문제를 막는다. */
section.dark .stp,
section.dark .cell,
section.dark .fig,
section.dark .price{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.12)}
section.dark .steps,
section.dark .grid,
section.dark .figs{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.14)}
section.dark .stp .t,
section.dark .cell .t,
section.dark .cell h3,
section.dark .fig .l,
section.dark .price .v{color:var(--on-deep)}
section.dark .stp .d,
section.dark .cell .d,
section.dark .cell p,
section.dark .fig .s,
section.dark .price .d{color:var(--on-deep-2)}
section.dark .stp .n,
section.dark .cell .n,
section.dark .fig .v,
section.dark .price .lab{color:var(--teal-2)}
section.dark .note{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.12)}
section.dark .note h4{color:var(--on-deep)}
section.dark .note p{color:var(--on-deep-2)}
section.dark thead th{background:rgba(255,255,255,.07);color:var(--on-deep-2);border-bottom-color:rgba(255,255,255,.18)}
section.dark th,section.dark td{border-bottom-color:rgba(255,255,255,.12)}
section.dark .tw{border-color:rgba(255,255,255,.14)}
section.dark .pull{color:var(--on-deep);border-left-color:var(--teal-2)}
section.dark a{color:var(--teal-2)}

/* ---------------- 히어로 높이: 사진 비율에 맞춘다 ----------------
   박스가 사진보다 훨씬 납작하면 위아래가 잘려 사진이 안 보인다. */
.hero-img{min-height:clamp(430px,54vw,740px)}
.phead-img{min-height:clamp(300px,46vw,560px)}
@media(max-width:900px){
  .hero-img .bg,.phead-img .bg{background-position:center 46%}
}
/* 좁은 화면에서는 히어로를 낮춰 사진이 옆으로 잘리는 정도를 줄인다 */
@media(max-width:700px){
  .hero-img{min-height:clamp(340px,90vw,460px)}
  .phead-img{min-height:clamp(260px,74vw,360px)}
}
section.dark tfoot td{background:rgba(255,255,255,.10);color:var(--on-deep);border-top-color:rgba(255,255,255,.2)}
section.dark .chart-note,section.dark .disclaim{color:var(--on-deep-2)}
section.dark ul.plain li{color:var(--on-deep-2)}
section.dark .addr span{color:var(--on-deep-2)}
.bg-heritage{background-image:url("/assets/hero-heritage-sm.jpg")}
@media(min-width:900px){.bg-heritage{background-image:url("/assets/hero-heritage.jpg")}}
a.nav-trigger{text-decoration:none}
a.nav-trigger:hover{color:var(--teal)}