/* =========================================================
   J-AUCTION Market Report — Design System v2
   Ink navy + J-Gold · warm paper · 2-column report layout
   ========================================================= */
:root {
  --ink: #0A1628;
  --ink-2: #12213A;
  --ink-3: #1C2E4D;
  --gold: #F2B705;
  --gold-2: #D99E00;
  --gold-pale: #FFF6D6;
  --paper: #F6F4EF;
  --surface: #FFFFFF;
  --line: #E6E1D6;
  --line-2: #EFEBE3;
  --text: #16202F;
  --body: #3A4556;
  --muted: #7A8494;
  --teal: #0E9384;
  --teal-bg: #E6F6F3;
  --coral: #E5484D;
  --coral-bg: #FDECEC;
  --amber: #B7791F;
  --amber-bg: #FDF3E1;
  --r-sm: 6px;
  --r: 10px;
  --r-lg: 14px;
  --shadow: 0 1px 2px rgba(10,22,40,.04), 0 6px 18px -8px rgba(10,22,40,.12);
  --mono: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  background: var(--paper);
  color: var(--body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "tnum";
}
a { color: inherit; text-decoration: none; }
.num, .mono { font-variant-numeric: tabular-nums; }
.container { max-width: 1180px; margin: 0 auto; padding: 0 20px; }

/* ---------- Top bar ---------- */
.jbar { background: var(--ink); color: #fff; border-bottom: 1px solid rgba(255,255,255,.06); position: sticky; top: 0; z-index: 50; }
.jbar .container { display: flex; align-items: center; justify-content: space-between; height: 58px; }
.jlogo { display: flex; align-items: center; gap: 10px; }
.jlogo img { width: 30px; height: 30px; border-radius: 8px; }
.jlogo b { font-size: 16px; font-weight: 800; letter-spacing: -.3px; }
.jlogo span { font-size: 11px; color: var(--gold); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; display: block; line-height: 1; margin-top: 2px; }
.jnav { display: flex; align-items: center; gap: 6px; }
.jnav a { font-size: 13px; font-weight: 600; color: #C9D2E0; padding: 8px 12px; border-radius: 8px; }
.jnav a:hover { color: #fff; background: rgba(255,255,255,.06); }
.jnav .jcall { background: var(--gold); color: var(--ink); font-weight: 800; }
.jnav .jcall:hover { background: #FFC81F; color: var(--ink); }
@media (max-width: 720px) { .jnav .hide-m { display: none; } }

/* ---------- Hero (dark report header) ---------- */
.jhero { background: radial-gradient(1200px 400px at 85% -10%, rgba(242,183,5,.16), transparent 60%), linear-gradient(180deg, var(--ink) 0%, var(--ink-2) 100%); color: #fff; padding: 26px 0 0; }
.jcrumb { font-size: 12.5px; color: #8E9BB0; margin-bottom: 18px; }
.jcrumb a:hover { color: var(--gold); }
.jcrumb b { color: #E3E8F0; font-weight: 600; }
.jhero-grid { display: grid; grid-template-columns: 1fr auto; gap: 28px; align-items: center; padding-bottom: 26px; }
.jeyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 11.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); margin-bottom: 10px; }
.jeyebrow::before { content: ""; width: 18px; height: 2px; background: var(--gold); }
.jhero h1 { font-size: clamp(26px, 4vw, 40px); font-weight: 900; letter-spacing: -1px; line-height: 1.2; }
.jhero h1 em { font-style: normal; color: var(--gold); }
.jhero .lead { margin-top: 12px; font-size: 15px; color: #B8C3D4; max-width: 640px; }
.jupdated { margin-top: 14px; font-size: 12px; color: #8E9BB0; display: flex; gap: 14px; flex-wrap: wrap; }
.jupdated span::before { content: "● "; color: var(--teal); }

/* Score ring */
.jscore { text-align: center; min-width: 168px; }
.jscore svg { width: 150px; height: 150px; display: block; margin: 0 auto; }
.jscore .lbl { font-size: 12px; color: #B8C3D4; margin-top: 6px; font-weight: 600; }
.jscore .state { display: inline-block; margin-top: 6px; font-size: 12px; font-weight: 800; padding: 4px 10px; border-radius: 999px; background: rgba(242,183,5,.14); color: var(--gold); }

/* KPI strip */
.jkpis { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid rgba(255,255,255,.08); }
.jkpi { padding: 16px 18px; border-right: 1px solid rgba(255,255,255,.08); }
.jkpi:last-child { border-right: none; }
.jkpi .k { font-size: 12px; color: #8E9BB0; font-weight: 600; }
.jkpi .v { font-size: 24px; font-weight: 900; color: #fff; letter-spacing: -.5px; margin-top: 2px; }
.jkpi .d { font-size: 12px; font-weight: 700; margin-top: 2px; color: #8E9BB0; }
.jkpi .d.up { color: #FF8A8E; }
.jkpi .d.down { color: #5FD4C4; }
@media (max-width: 820px) {
  .jhero-grid { grid-template-columns: minmax(0, 1fr); }
  .jscore { display: flex; align-items: center; gap: 14px; text-align: left; }
  .jscore svg { width: 96px; height: 96px; margin: 0; }
  .jkpis { grid-template-columns: repeat(2, 1fr); }
  .jkpi:nth-child(2) { border-right: none; }
  .jkpi:nth-child(-n+2) { border-bottom: 1px solid rgba(255,255,255,.08); }
}

/* ---------- Layout ---------- */
.jlayout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 28px; padding-top: 28px; padding-bottom: 60px; align-items: start; }
.jaside { position: sticky; top: 78px; display: flex; flex-direction: column; gap: 16px; }
@media (max-width: 980px) {
  .jlayout { grid-template-columns: minmax(0, 1fr); }
  .jaside { position: static; order: -1; }
  .jaside .jconsult { display: none; }
}

/* ---------- Sections ---------- */
.jsec { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 24px; margin-bottom: 20px; box-shadow: var(--shadow); }
.jsec-h { display: flex; align-items: baseline; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.jsec-h .no { font-family: var(--mono); font-size: 13px; font-weight: 700; color: var(--gold-2); }
.jsec-h h2 { font-size: 19px; font-weight: 800; color: var(--text); letter-spacing: -.4px; }
.jsec-h small { font-size: 12.5px; color: var(--muted); font-weight: 500; margin-left: auto; }
.jsec p.txt { font-size: 14.5px; color: var(--body); }

/* Diagnosis callout */
.jdiag { display: grid; grid-template-columns: auto 1fr; gap: 14px; background: var(--paper); border-left: 4px solid var(--gold); border-radius: var(--r); padding: 14px 16px; margin-top: 16px; }
.jdiag .ico { font-size: 22px; line-height: 1; }
.jdiag b { color: var(--text); display: block; font-size: 14.5px; }
.jdiag span { font-size: 13px; color: var(--body); }
.jscale { margin-top: 14px; }
.jscale .bar { position: relative; height: 8px; border-radius: 999px; background: linear-gradient(90deg, var(--teal) 0%, #8FC9A8 40%, #F2C94C 65%, var(--coral) 100%); }
.jscale .pin { position: absolute; top: 50%; width: 16px; height: 16px; border-radius: 50%; background: var(--ink); border: 3px solid #fff; box-shadow: 0 0 0 1px var(--ink); transform: translate(-50%, -50%); }
.jscale .ticks { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--muted); margin-top: 6px; }

/* Chart + month table */
.jchart { position: relative; height: 280px; }
.jmonths { width: 100%; border-collapse: collapse; margin-top: 16px; font-size: 13px; }
.jmonths th, .jmonths td { padding: 8px 6px; text-align: center; border-bottom: 1px solid var(--line-2); }
.jmonths th { color: var(--muted); font-weight: 600; font-size: 12px; }
.jmonths td:first-child, .jmonths th:first-child { white-space: nowrap; text-align: left; color: var(--muted); font-weight: 600; }
.jmonths tr td { color: var(--text); font-weight: 700; }

/* ---------- Lot toolbar & cards ---------- */
.jtool { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
.jchip { border: 1px solid var(--line); background: var(--surface); color: var(--body); font-size: 13px; font-weight: 700; padding: 7px 12px; border-radius: 999px; cursor: pointer; font-family: inherit; }
.jchip[aria-pressed="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }
.jchip .c { font-family: var(--mono); font-size: 11.5px; opacity: .7; margin-left: 4px; }
.jsort { margin-left: auto; border: 1px solid var(--line); background: var(--surface); border-radius: 8px; padding: 7px 10px; font-size: 13px; font-family: inherit; color: var(--body); }
.jlots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 640px) { .jlots { grid-template-columns: 1fr; } .jsort { margin-left: 0; } }
.jlot { border: 1px solid var(--line); border-radius: var(--r); padding: 14px; background: var(--surface); display: flex; flex-direction: column; gap: 10px; transition: border-color .15s, transform .15s; }
.jlot:hover { border-color: var(--gold-2); transform: translateY(-1px); }
.jlot-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.jst { font-size: 11.5px; font-weight: 800; padding: 3px 8px; border-radius: 6px; }
.jst.new { background: var(--teal-bg); color: var(--teal); }
.jst.fail { background: var(--amber-bg); color: var(--amber); }
.jst.other { background: var(--line-2); color: var(--body); }
.jdday { font-family: var(--mono); font-size: 12px; font-weight: 700; color: var(--text); }
.jdday.soon { color: var(--coral); }
.jlot h3 { font-size: 14.5px; font-weight: 700; color: var(--text); line-height: 1.45; }
.jlot h3 a.jlot-link { color: inherit; text-decoration: none; display: block; transition: color .15s; }
.jlot h3 a.jlot-link:hover { color: var(--gold-2); text-decoration: underline; text-underline-offset: 3px; }
.jcase { font-size: 12px; color: var(--muted); font-family: var(--mono); }
.jprice { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.jprice div { background: var(--paper); border-radius: 8px; padding: 8px 10px; }
.jprice .k { font-size: 11.5px; color: var(--muted); font-weight: 600; }
.jprice .v { font-size: 15px; font-weight: 800; color: var(--text); }
.jprice .v.hl { color: var(--coral); }
.jratio .track { height: 6px; background: var(--line-2); border-radius: 999px; overflow: hidden; }
.jratio .fill { height: 100%; background: linear-gradient(90deg, var(--coral), var(--gold)); border-radius: 999px; }
.jratio .meta { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--muted); margin-top: 4px; }
.jratio .meta b { color: var(--coral); }
.jsignal { font-size: 12px; padding: 7px 10px; border-radius: 8px; line-height: 1.45; }
.jsignal.ok { background: var(--teal-bg); color: #0B6B60; }
.jsignal.warn { background: var(--amber-bg); color: #8A5A12; }
.jsignal.risk { background: var(--coral-bg); color: #A12A2E; }
.jlot-act { display: flex; gap: 6px; margin-top: auto; }
.jlot-act a { flex: 1; text-align: center; font-size: 12.5px; font-weight: 700; padding: 8px 6px; border-radius: 8px; border: 1px solid var(--line); color: var(--text); }
.jlot-act a.pri { background: var(--ink); color: #fff; border-color: var(--ink); }
.jlot-act a:hover { border-color: var(--gold-2); }
.jempty { grid-column: 1 / -1; text-align: center; padding: 30px 10px; color: var(--muted); font-size: 14px; }
.jempty-box {
  grid-column: 1 / -1;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 24px 26px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 18px;
  align-items: start;
  margin: 10px 0;
}
.jempty-ico { font-size: 32px; line-height: 1; }
.jempty-body h3 { font-size: 17px; font-weight: 800; color: var(--text); margin: 0 0 8px; }
.jempty-body p { font-size: 13.5px; color: var(--body); line-height: 1.6; margin: 0 0 16px; }
.jempty-hints { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
.jempty-hints div { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 10px 14px; font-size: 13px; color: var(--body); line-height: 1.5; }
.jempty-hints b { color: var(--text); display: block; margin-bottom: 2px; }
.jempty-act { display: flex; gap: 10px; flex-wrap: wrap; }
.jempty-btn {
  background: var(--teal);
  color: #fff;
  font-weight: 800;
  font-size: 14px;
  padding: 12px 18px;
  border-radius: 8px;
  text-decoration: none;
}
.is-pc .jempty-btn { background: #FEE500; color: #191919; }
.jempty-btn:hover { opacity: 0.9; }
.jempty-link {
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text);
  font-weight: 700;
  font-size: 14px;
  padding: 12px 18px;
  border-radius: 8px;
  text-decoration: none;
}
.jempty-link:hover { border-color: var(--ink); }
@media (max-width: 600px) {
  .jempty-box { grid-template-columns: 1fr; padding: 18px; }
  .jempty-ico { display: none; }
}
.jmore { display: block; width: 100%; margin-top: 12px; padding: 11px; border: 1px dashed var(--line); background: transparent; border-radius: var(--r); font-weight: 700; color: var(--body); cursor: pointer; font-family: inherit; font-size: 13.5px; }
.jnote { font-size: 11.5px; color: var(--muted); margin-top: 12px; }

/* ---------- Calculator ---------- */
.jcalc { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 640px) { .jcalc { grid-template-columns: 1fr; } }
.jfield label { display: flex; justify-content: space-between; font-size: 13px; font-weight: 700; color: var(--text); margin-bottom: 6px; }
.jfield label output { font-family: var(--mono); color: var(--gold-2); }
.jfield input[type=number] { width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; font-size: 15px; font-family: inherit; font-weight: 700; }
.jfield input[type=range] { width: 100%; accent-color: var(--ink); }
.jfield + .jfield { margin-top: 14px; }
.jresult { background: var(--ink); color: #fff; border-radius: var(--r); padding: 18px; display: flex; flex-direction: column; gap: 10px; }
.jresult .row { display: flex; justify-content: space-between; font-size: 13.5px; color: #B8C3D4; }
.jresult .row b { color: #fff; font-family: var(--mono); }
.jresult .total { border-top: 1px solid rgba(255,255,255,.12); padding-top: 10px; font-size: 15px; color: #fff; font-weight: 700; }
.jresult .total b { color: var(--gold); font-size: 20px; }

/* ---------- FAQ ---------- */
.jfaq details { border-bottom: 1px solid var(--line-2); }
.jfaq summary { list-style: none; cursor: pointer; padding: 14px 28px 14px 0; font-size: 14.5px; font-weight: 700; color: var(--text); position: relative; }
.jfaq summary::-webkit-details-marker { display: none; }
.jfaq summary::after { content: "+"; position: absolute; right: 4px; top: 10px; font-size: 20px; color: var(--gold-2); font-weight: 400; }
.jfaq details[open] summary::after { content: "−"; }
.jfaq details p { padding: 0 0 14px; font-size: 14px; color: var(--body); }

/* ---------- Related tiles ---------- */
.jrel h3 { font-size: 13px; color: var(--muted); font-weight: 700; margin: 4px 0 10px; }
.jtiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; margin-bottom: 18px; }
.jtiles a { border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; font-size: 13.5px; font-weight: 700; color: var(--text); background: var(--surface); display: flex; justify-content: space-between; align-items: center; }
.jtiles a::after { content: "→"; color: var(--gold-2); }
.jtiles a:hover { border-color: var(--ink); }

/* ---------- Aside cards ---------- */
.jalert { background: var(--surface); border: 2px solid var(--ink); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow); }
.jalert-h { background: var(--ink); color: #C9D2E0; padding: 14px 18px; }
.jalert-h b { display: block; font-size: 16px; font-weight: 900; letter-spacing: -.3px; color: var(--gold); }
.jalert-h span { font-size: 12.5px; font-weight: 600; }
.jalert form { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 10px; }
.jopts { display: flex; flex-direction: column; gap: 6px; }
.jopts label { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; color: var(--text); padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; cursor: pointer; }
.jopts input { accent-color: var(--ink); width: 16px; height: 16px; }
.jalert input[type=tel] { padding: 12px; border: 1px solid var(--line); border-radius: 8px; font-size: 15px; font-family: inherit; font-weight: 700; }
.jalert input[type=tel]:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(242,183,5,.35); }
.jalert button { background: var(--ink); color: #fff; border: none; border-radius: 8px; padding: 13px; font-size: 15px; font-weight: 800; cursor: pointer; font-family: inherit; }
.jalert button:hover { background: var(--ink-3); }
.jalert button:disabled { opacity: .6; cursor: wait; }
.jconsent { font-size: 11.5px; color: var(--muted); display: flex; gap: 6px; align-items: flex-start; }
.jconsent input { margin-top: 2px; accent-color: var(--ink); }
.jdone { padding: 18px; text-align: center; }
.jdone b { display: block; font-size: 16px; color: var(--text); margin-bottom: 6px; }
.jdone p { font-size: 13px; color: var(--body); margin-bottom: 12px; }
.jdone.err b { color: var(--coral); }
.jsms-box { padding: 16px 18px 4px; }
.jsms { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; background: var(--teal); color: #fff; font-weight: 900; font-size: 16px; padding: 14px; border-radius: 10px; box-shadow: 0 2px 0 #0B6B60; }
.jsms:hover { background: #0FA898; color: #fff; }
.jsms::before { content: "✉"; font-size: 18px; line-height: 1; }
/* device-specific consult labels: mobile = SMS, PC = KakaoTalk */
.pc { display: none; }
.is-pc .m { display: none; }
.is-pc .pc { display: inline; }
.is-pc .jsms { background: #FEE500; color: #191919; box-shadow: 0 2px 0 #E5CE00; }
.is-pc .jsms:hover { background: #FFEB3B; color: #191919; }
.is-pc .jsms::before { content: ""; width: 20px; height: 20px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23191919' d='M12 3C6.5 3 2 6.6 2 11c0 2.8 1.9 5.3 4.7 6.7l-1 3.6c-.1.3.3.6.6.4l4.3-2.8c.5.1.9.1 1.4.1 5.5 0 10-3.6 10-8S17.5 3 12 3z'/%3E%3C/svg%3E") center/contain no-repeat; }
.is-pc .jlot-act a.jsl { background: #FEE500; border-color: #FEE500; color: #191919; }
.jhint { font-size: 12px; color: var(--muted); text-align: center; margin-top: 8px; }
.jhint b { color: var(--text); }
.jor { display: flex; align-items: center; gap: 10px; padding: 12px 18px 0; font-size: 12px; color: var(--muted); font-weight: 700; }
.jor::before, .jor::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.jtopics { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.jtopics label { cursor: pointer; }
.jtopics input { position: absolute; opacity: 0; pointer-events: none; }
.jtopics span { display: block; text-align: center; font-size: 13px; font-weight: 700; padding: 9px 6px; border: 1px solid var(--line); border-radius: 8px; color: var(--body); }
.jtopics input:checked + span { background: var(--ink); color: #fff; border-color: var(--ink); }
.jtopics input:focus-visible + span { box-shadow: 0 0 0 3px rgba(242,183,5,.45); }
.jlot-act a.jsl { background: var(--teal-bg); border-color: #BDE5DF; color: #0B6B60; }
.jtoast { position: fixed; left: 50%; bottom: 84px; transform: translate(-50%, 20px); opacity: 0; pointer-events: none; z-index: 80; background: var(--ink); color: #fff; padding: 12px 18px; border-radius: 12px; font-size: 13px; line-height: 1.5; text-align: center; box-shadow: 0 10px 30px rgba(10,22,40,.35); transition: opacity .2s, transform .2s; max-width: 92vw; }
.jtoast b { display: block; color: var(--gold); font-size: 14px; }
.jtoast.on { opacity: 1; transform: translate(-50%, 0); }
.jconsult { background: var(--ink); color: #fff; border-radius: var(--r-lg); padding: 18px; }
.jconsult b { font-size: 15px; display: block; margin-bottom: 4px; }
.jconsult p { font-size: 12.5px; color: #B8C3D4; margin-bottom: 12px; }
.jconsult .tel { display: block; font-family: var(--mono); font-size: 24px; font-weight: 800; color: var(--gold); margin-bottom: 10px; }
.jbtns { display: flex; gap: 8px; }
.jbtns a { flex: 1; text-align: center; padding: 10px; border-radius: 8px; font-weight: 800; font-size: 13px; }
.jbtns .y { background: var(--gold); color: var(--ink); }
.jbtns .o { border: 1px solid rgba(255,255,255,.25); color: #fff; }
.jtrust { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 14px 16px; font-size: 12.5px; color: var(--body); }
.jtrust li { list-style: none; padding: 4px 0; }
.jtrust li::before { content: "◆ "; color: var(--gold-2); font-size: 10px; }

/* ---------- Mobile bottom dock ---------- */
.jdock { display: none; }
@media (max-width: 980px) {
  body.has-dock { padding-bottom: 66px; }
  .jdock { display: grid; grid-template-columns: 1fr 1fr 1.3fr; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; background: var(--ink); border-top: 1px solid rgba(255,255,255,.1); }
  .jdock a { color: #fff; text-align: center; padding: 10px 4px 12px; font-size: 12px; font-weight: 700; }
  .jdock a i { display: block; font-style: normal; font-size: 18px; line-height: 1.2; }
  .jdock a.y { background: var(--gold); color: var(--ink); }
}

/* ---------- Hub / Home ---------- */
.jsearch { position: relative; margin-top: 20px; max-width: 640px; }
.jsearch input { width: 100%; padding: 16px 18px 16px 46px; border-radius: 12px; border: 2px solid transparent; font-size: 16px; font-family: inherit; background: #fff; color: var(--text); }
.jsearch input:focus { outline: none; border-color: var(--gold); }
.jsearch::before { content: "⌕"; position: absolute; left: 16px; top: 50%; transform: translateY(-50%); font-size: 22px; color: var(--muted); }
.jtypebar { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1px; background: rgba(255,255,255,.08); border-top: 1px solid rgba(255,255,255,.08); margin-top: 26px; }
.jtypebar > div, .jtypebar > a { background: var(--ink-2); padding: 14px 16px; text-decoration: none; color: inherit; display: block; transition: background .15s; }
.jtypebar > a:hover { background: #182b4a; }
.jtype-top { display: flex; align-items: center; gap: 7px; margin-bottom: 4px; }
.jtype-top .ico { display: inline-flex; width: 22px; height: 22px; align-items: center; justify-content: center; border-radius: 6px; background: rgba(242,183,5,.14); color: var(--gold); padding: 3px; }
.jtype-top .ico svg { width: 15px; height: 15px; }
.jtypebar .k { font-size: 12.5px; color: #A6B4C8; font-weight: 700; }
.jtypebar .v { font-size: 20px; font-weight: 900; color: #fff; }
.jtypebar a.jtype-fx .v { font-size: 15px; color: var(--gold); margin-top: 3px; }
.jtypebar .b { height: 4px; background: rgba(255,255,255,.08); border-radius: 999px; margin-top: 8px; overflow: hidden; }
.jtypebar .b i { display: block; height: 100%; background: var(--gold); }
@media (max-width: 900px) { .jtypebar { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px) { .jtypebar { grid-template-columns: repeat(2, 1fr); } }
.jwide { padding-top: 28px; padding-bottom: 60px; }
.jsido-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; margin-bottom: 26px; }
.jsido { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 14px 16px; display: flex; flex-direction: column; gap: 2px; transition: border-color .15s; }
.jsido:hover { border-color: var(--ink); }
.jsido b { font-size: 16px; color: var(--text); font-weight: 800; }
.jsido span { font-size: 12.5px; color: var(--muted); }
.jsido em { font-style: normal; font-family: var(--mono); font-weight: 700; color: var(--gold-2); font-size: 14px; }
.jfeatures-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 26px; }
.jfeatures-grid .jfeature { margin-bottom: 0; }
.jfeature { display: grid; grid-template-columns: 1fr auto; gap: 18px; align-items: center; background: var(--ink); color: #fff; border-radius: var(--r-lg); padding: 22px 24px; margin-bottom: 26px; border: 1px solid rgba(255,255,255,.07); }
.jfeature.fx { background: linear-gradient(135deg, #0D1F38 0%, #152C4F 100%); border-color: rgba(242,183,5,.32); }
.jfeature .t { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 800; color: var(--gold); letter-spacing: .1em; }
.jfeature .t svg { width: 15px; height: 15px; stroke: var(--gold); }
.jfeature h2 { font-size: 20px; font-weight: 900; margin: 4px 0 6px; }
.jfeature p { font-size: 13.5px; color: #B8C3D4; }
.jfeature a { background: var(--gold); color: var(--ink); font-weight: 800; padding: 12px 18px; border-radius: 10px; white-space: nowrap; font-size: 14px; }
@media (max-width: 880px) { .jfeatures-grid { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .jfeature { grid-template-columns: 1fr; } }

/* ---------- Hero Property Icon & Quick Switcher ---------- */
.jprop-ico { display: inline-flex; width: 18px; height: 18px; align-items: center; justify-content: center; color: var(--gold); }
.jprop-ico svg { width: 16px; height: 16px; }
.jprop-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
.jprop-tabs a { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 700; color: #C5D0E0; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); transition: all .15s; }
.jprop-tabs a svg { width: 14px; height: 14px; stroke: currentColor; }
.jprop-tabs a:hover { background: rgba(255,255,255,.15); color: #fff; }
.jprop-tabs a.on { background: var(--gold); color: var(--ink); border-color: var(--gold); font-weight: 800; }
.jprop-tabs a.fx { border-color: rgba(20,184,166,.5); color: #5EEAD4; background: rgba(14,147,132,.18); }
.jprop-tabs a.fx:hover { background: rgba(14,147,132,.32); color: #fff; }

/* ---------- 4-Step Consulting Process Infographic ---------- */
.jprocess { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.jp-step { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); padding: 16px; display: flex; flex-direction: column; gap: 8px; position: relative; }
.jp-top { display: flex; justify-content: space-between; align-items: center; }
.jp-no { font-family: var(--mono); font-size: 11.5px; font-weight: 800; color: var(--gold-2); background: var(--gold-pale); padding: 3px 8px; border-radius: 6px; letter-spacing: .04em; }
.jp-ico { width: 32px; height: 32px; border-radius: 8px; background: var(--ink); color: var(--gold); display: inline-flex; align-items: center; justify-content: center; }
.jp-ico svg { width: 17px; height: 17px; }
.jp-step b { font-size: 14.5px; font-weight: 800; color: var(--text); }
.jp-step p { font-size: 12.5px; color: var(--body); line-height: 1.5; margin: 0; }
@media (max-width: 820px) { .jprocess { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 500px) { .jprocess { grid-template-columns: 1fr; } }

.jgroup { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); margin-bottom: 10px; overflow: hidden; }
.jgroup > summary { list-style: none; cursor: pointer; padding: 16px 20px; display: flex; align-items: center; gap: 12px; }
.jgroup > summary::-webkit-details-marker { display: none; }
.jgroup > summary b { font-size: 16px; color: var(--text); font-weight: 800; }
.jgroup > summary span { font-size: 12.5px; color: var(--muted); }
.jgroup > summary a { margin-left: auto; font-size: 12.5px; font-weight: 700; color: var(--gold-2); }
.jgroup > summary::after { content: "▾"; color: var(--muted); }
.jgroup[open] > summary { border-bottom: 1px solid var(--line-2); }
.jregions { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; padding: 16px; }
.jregion { border: 1px solid var(--line-2); border-radius: var(--r); padding: 12px 14px; background: #FCFBF8; }
.jregion-h { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.jregion-h b { font-size: 15px; color: var(--text); }
.jregion-h span { font-family: var(--mono); font-size: 12.5px; color: var(--gold-2); font-weight: 700; }
.jregion-t { display: flex; flex-wrap: wrap; gap: 4px; }
.jregion-t a { font-size: 12px; font-weight: 600; padding: 4px 8px; border-radius: 6px; background: var(--surface); border: 1px solid var(--line); color: var(--body); }
.jregion-t a:hover { background: var(--ink); color: #fff; border-color: var(--ink); }

/* ---------- Footer ---------- */
.jfoot { background: var(--ink); color: #8E9BB0; font-size: 12.5px; padding: 28px 0 32px; }
.jfoot .container { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.jfoot b { color: #fff; }
.jfoot a { color: var(--gold); }
.jfoot .disc { max-width: 620px; margin-top: 6px; line-height: 1.6; }

/* ---------- Factory Page Specific ---------- */
.jfx-cta {
  background: var(--ink-2);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: var(--r-lg);
  padding: 20px 22px;
  min-width: 260px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.jfx-cta b { font-size: 17px; color: #fff; }
.jfx-cta p { font-size: 13px; color: #B8C3D4; margin: 0; line-height: 1.5; }
.jfx-cta .tel {
  text-align: center;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 8px;
  padding: 10px;
  color: #fff;
  font-weight: 700;
  font-size: 14px;
}
.jfx-cta .tel:hover { background: rgba(255,255,255,.08); }

.jcheck { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.jcheck li {
  background: var(--paper);
  border: 1px solid var(--line);
  border-left: 4px solid var(--gold);
  border-radius: var(--r);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.jcheck li b { font-size: 14.5px; color: var(--text); }
.jcheck li span { font-size: 13px; color: var(--body); line-height: 1.55; }

.jfx-types { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; margin-top: 14px; }
.jfx-type {
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 18px 20px;
  background: var(--surface);
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow);
}
.jfx-type-h { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.jfx-type-h .ico { width: 38px; height: 38px; border-radius: 10px; background: var(--ink); color: var(--gold); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.jfx-type-h .ico svg { width: 20px; height: 20px; }
.jfx-type h3 { font-size: 17px; font-weight: 800; color: var(--text); margin: 0; }
.jfx-type small { color: var(--gold-2); font-weight: 700; margin-top: 2px; display: block; font-size: 12.5px; }
.jfx-type ul { list-style: disc; padding-left: 18px; margin: 0 0 16px; flex: 1; }
.jfx-type li { font-size: 13px; color: var(--body); margin-bottom: 6px; line-height: 1.5; }
.jfx-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: var(--teal);
  color: #fff;
  font-weight: 800;
  font-size: 14px;
  padding: 12px;
  border-radius: 8px;
  text-decoration: none;
}
.is-pc .jfx-btn { background: #FEE500; color: #191919; }
.jfx-btn:hover { opacity: 0.9; }

.jfx-hub { font-size: 12px; color: var(--muted); margin: 4px 0 10px; line-height: 1.45; }
.jfx-sm {
  font-size: 12px;
  font-weight: 700;
  padding: 4px 8px;
  border-radius: 6px;
  background: var(--teal-bg);
  border: 1px solid #BDE5DF;
  color: #0B6B60;
  text-decoration: none;
}
.is-pc .jfx-sm { background: #FEE500; border-color: #FEE500; color: #191919; }

/* Netlify badge / drawer shield */
.netlify-badge, [class*="netlify-badge"], [id*="netlify-badge"], iframe[id*="netlify"], div[data-netlify-drawer] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}