/* SERVER_STAGE_33_RESPONSIVE_LAYOUT_CLIP_FIX
   Purpose: stop mobile/desktop clipping, stabilize page surfaces, and keep light/dark readable.
   This file is loaded last and intentionally avoids changing API/calculation logic. */
:root{
  --jg-viewport-pad:clamp(14px,3.6vw,24px);
  --jg-wrap:1180px;
  --jg-bg-light:#f4f7fb;
  --jg-surface-light:#ffffff;
  --jg-surface2-light:#f8fafc;
  --jg-text-light:#0f172a;
  --jg-muted-light:#475569;
  --jg-line-light:#dbe5ef;
  --jg-bg-dark:#07111f;
  --jg-bg2-dark:#0a1627;
  --jg-surface-dark:#101827;
  --jg-surface2-dark:#132137;
  --jg-text-dark:#eef6ff;
  --jg-muted-dark:#adc1d8;
  --jg-line-dark:rgba(148,163,184,.22);
  --jg-accent:#3b82f6;
  --jg-teal:#12c9a7;
}
html{width:100%;max-width:100%;overflow-x:hidden;text-size-adjust:100%;-webkit-text-size-adjust:100%;}
body{width:100%;max-width:100%;min-width:0;overflow-x:hidden;}
*,*::before,*::after{box-sizing:border-box;min-width:0;}
img,svg,canvas,video,iframe{max-width:100%;height:auto;}
table{max-width:100%;border-collapse:collapse;}
pre,code{max-width:100%;white-space:pre-wrap;word-break:break-word;}
body.jg-layout-stable{
  --jg-bg:var(--jg-bg-light);
  --jg-surface:var(--jg-surface-light);
  --jg-surface2:var(--jg-surface2-light);
  --jg-text:var(--jg-text-light);
  --jg-muted:var(--jg-muted-light);
  --jg-line:var(--jg-line-light);
}
html.dark body.jg-layout-stable,
html[data-theme="dark"] body.jg-layout-stable{
  --jg-bg:var(--jg-bg-dark);
  --jg-surface:var(--jg-surface-dark);
  --jg-surface2:var(--jg-surface2-dark);
  --jg-text:var(--jg-text-dark);
  --jg-muted:var(--jg-muted-dark);
  --jg-line:var(--jg-line-dark);
}
html.dark body.jg-layout-stable,
html[data-theme="dark"] body.jg-layout-stable{
  color:var(--jg-text)!important;
  background:
    radial-gradient(circle at 10% 0%,rgba(59,130,246,.16),transparent 30%),
    radial-gradient(circle at 90% 10%,rgba(18,201,167,.12),transparent 28%),
    linear-gradient(180deg,#07111f 0%,#071827 54%,#06111d 100%)!important;
}
html.light body.jg-layout-stable,
html[data-theme="light"] body.jg-layout-stable{
  color:var(--jg-text)!important;
  background:
    radial-gradient(circle at 12% 0%,rgba(56,189,248,.13),transparent 34%),
    radial-gradient(circle at 92% 8%,rgba(16,185,129,.10),transparent 28%),
    linear-gradient(180deg,#f8fbff 0%,#eef3f8 62%,#f8fafc 100%)!important;
}
/* Common page shells */
.premium-home,.page,.cf-page,.jh-page,.company-page,.tool-page,.guide-page,.companies-page,.landing-page,
main[class*="page"],main[class*="Page"],.wrap,.wrapper,.container,.content,.shell,.app-shell{
  max-width:min(var(--jg-wrap),calc(100vw - (var(--jg-viewport-pad) * 2)))!important;
  width:100%!important;
  margin-left:auto!important;margin-right:auto!important;
}
.premium-home,.page,.cf-page,.jh-page,.company-page,.tool-page,.guide-page,.companies-page,.landing-page{
  padding-left:var(--jg-viewport-pad)!important;
  padding-right:var(--jg-viewport-pad)!important;
}
.hero,.cf-hero,.jh-hero,.landing-hero,.tool-hero,.guide-hero,.company-hero,
.main-grid,.stage23-finance-grid,.identity-grid,.portal-grid,.process,.trust-row,.hero-cards,.card-grid,.fields,.scenario-grid,
.cf-grid,.cf-links,.tool-grid,.company-grid,.guide-grid,.result-top,.metric-grid,.standard-cards{
  max-width:100%!important;min-width:0!important;
}
.hero>*,.cf-hero>*,.main-grid>*,.tool-grid>*,.cf-grid>*,.company-grid>*,.guide-grid>*{min-width:0!important;}
.hero h1,.cf-hero h1,.jh-hero h1,.landing-hero h1,.tool-hero h1,.guide-hero h1,.company-hero h1{
  max-width:100%!important;white-space:normal!important;overflow-wrap:keep-all;word-break:keep-all;
}
.hero p,.cf-lead,.jh-lead,.tool-lead,.guide-lead,.company-lead{max-width:100%!important;}
/* Light mode readability */
html.light body.jg-layout-stable p,
html.light body.jg-layout-stable small,
html.light body.jg-layout-stable span,
html.light body.jg-layout-stable .muted,
html.light body.jg-layout-stable .cf-muted,
html.light body.jg-layout-stable .hero p,
html.light body.jg-layout-stable .section p,
html.light body.jg-layout-stable .tool-card small,
html.light body.jg-layout-stable .standard-card span,
html.light body.jg-layout-stable .field label,
html[data-theme="light"] body.jg-layout-stable p,
html[data-theme="light"] body.jg-layout-stable small,
html[data-theme="light"] body.jg-layout-stable span,
html[data-theme="light"] body.jg-layout-stable .muted,
html[data-theme="light"] body.jg-layout-stable .cf-muted,
html[data-theme="light"] body.jg-layout-stable .hero p,
html[data-theme="light"] body.jg-layout-stable .section p,
html[data-theme="light"] body.jg-layout-stable .tool-card small,
html[data-theme="light"] body.jg-layout-stable .standard-card span,
html[data-theme="light"] body.jg-layout-stable .field label{
  color:#475569!important;
}
html.light body.jg-layout-stable h1,html.light body.jg-layout-stable h2,html.light body.jg-layout-stable h3,
html[data-theme="light"] body.jg-layout-stable h1,html[data-theme="light"] body.jg-layout-stable h2,html[data-theme="light"] body.jg-layout-stable h3{color:#0f172a!important;}
/* Dark unified surfaces */
html.dark body.jg-layout-stable .hero,
html.dark body.jg-layout-stable .section,
html.dark body.jg-layout-stable .toolbar,
html.dark body.jg-layout-stable .workspace,
html.dark body.jg-layout-stable #workspace,
html.dark body.jg-layout-stable .side,
html.dark body.jg-layout-stable .tool-card,
html.dark body.jg-layout-stable .hero-card,
html.dark body.jg-layout-stable .trust-item,
html.dark body.jg-layout-stable .identity-wide-card,
html.dark body.jg-layout-stable .portal-card,
html.dark body.jg-layout-stable .process-step,
html.dark body.jg-layout-stable .cf-card,
html.dark body.jg-layout-stable .cf-mini,
html.dark body.jg-layout-stable .cf-link-card,
html.dark body.jg-layout-stable .company-card,
html.dark body.jg-layout-stable .guide-card,
html.dark body.jg-layout-stable .form-section,
html.dark body.jg-layout-stable .field,
html.dark body.jg-layout-stable .standard-card,
html.dark body.jg-layout-stable .scenario,
html.dark body.jg-layout-stable .result-panel,
html.dark body.jg-layout-stable .guide-box,
html.dark body.jg-layout-stable .metric,
html.dark body.jg-layout-stable .analysis-item,
html.dark body.jg-layout-stable .choice-card,
html.dark body.jg-layout-stable .sim-box,
html[data-theme="dark"] body.jg-layout-stable .hero,
html[data-theme="dark"] body.jg-layout-stable .section,
html[data-theme="dark"] body.jg-layout-stable .toolbar,
html[data-theme="dark"] body.jg-layout-stable .workspace,
html[data-theme="dark"] body.jg-layout-stable #workspace,
html[data-theme="dark"] body.jg-layout-stable .side,
html[data-theme="dark"] body.jg-layout-stable .tool-card,
html[data-theme="dark"] body.jg-layout-stable .hero-card,
html[data-theme="dark"] body.jg-layout-stable .trust-item,
html[data-theme="dark"] body.jg-layout-stable .identity-wide-card,
html[data-theme="dark"] body.jg-layout-stable .portal-card,
html[data-theme="dark"] body.jg-layout-stable .process-step,
html[data-theme="dark"] body.jg-layout-stable .cf-card,
html[data-theme="dark"] body.jg-layout-stable .cf-mini,
html[data-theme="dark"] body.jg-layout-stable .cf-link-card,
html[data-theme="dark"] body.jg-layout-stable .company-card,
html[data-theme="dark"] body.jg-layout-stable .guide-card,
html[data-theme="dark"] body.jg-layout-stable .form-section,
html[data-theme="dark"] body.jg-layout-stable .field,
html[data-theme="dark"] body.jg-layout-stable .standard-card,
html[data-theme="dark"] body.jg-layout-stable .scenario,
html[data-theme="dark"] body.jg-layout-stable .result-panel,
html[data-theme="dark"] body.jg-layout-stable .guide-box,
html[data-theme="dark"] body.jg-layout-stable .metric,
html[data-theme="dark"] body.jg-layout-stable .analysis-item,
html[data-theme="dark"] body.jg-layout-stable .choice-card,
html[data-theme="dark"] body.jg-layout-stable .sim-box{
  background:linear-gradient(180deg,rgba(17,29,48,.96),rgba(9,18,33,.96))!important;
  border-color:var(--jg-line)!important;
  color:var(--jg-text)!important;
  box-shadow:0 18px 48px rgba(0,0,0,.22)!important;
}
html.dark body.jg-layout-stable .hero,
html[data-theme="dark"] body.jg-layout-stable .hero{
  background:linear-gradient(155deg,rgba(14,28,48,.78),rgba(8,17,31,.62))!important;
  border:1px solid rgba(148,163,184,.16)!important;
  border-radius:28px!important;
}
html.dark body.jg-layout-stable .search,
html.dark body.jg-layout-stable input,
html.dark body.jg-layout-stable select,
html.dark body.jg-layout-stable textarea,
html[data-theme="dark"] body.jg-layout-stable .search,
html[data-theme="dark"] body.jg-layout-stable input,
html[data-theme="dark"] body.jg-layout-stable select,
html[data-theme="dark"] body.jg-layout-stable textarea{
  background:#0b1628!important;color:#f3f8ff!important;border-color:rgba(148,163,184,.30)!important;
}
html.dark body.jg-layout-stable h1,html.dark body.jg-layout-stable h2,html.dark body.jg-layout-stable h3,html.dark body.jg-layout-stable strong,
html[data-theme="dark"] body.jg-layout-stable h1,html[data-theme="dark"] body.jg-layout-stable h2,html[data-theme="dark"] body.jg-layout-stable h3,html[data-theme="dark"] body.jg-layout-stable strong{color:var(--jg-text)!important;}
html.dark body.jg-layout-stable p,html.dark body.jg-layout-stable small,html.dark body.jg-layout-stable span,html.dark body.jg-layout-stable .sub,
html[data-theme="dark"] body.jg-layout-stable p,html[data-theme="dark"] body.jg-layout-stable small,html[data-theme="dark"] body.jg-layout-stable span,html[data-theme="dark"] body.jg-layout-stable .sub{color:var(--jg-muted);}
/* Prevent fixed desktop grids from clipping at medium widths */
@media (max-width:1180px){
  .main-grid{grid-template-columns:1fr!important;gap:16px!important;}
  .side{position:relative!important;top:auto!important;width:100%!important;max-width:100%!important;}
  .workspace,#workspace{width:100%!important;max-width:920px!important;margin-left:auto!important;margin-right:auto!important;}
  .hero{grid-template-columns:1fr!important;}
  .visual-card{max-width:820px!important;margin-left:auto!important;margin-right:auto!important;}
  .portal-grid,.identity-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
}
@media (max-width:840px){
  .portal-grid,.identity-grid,.process,.hero-cards,.trust-row,.card-grid,.fields,.standard-cards,.scenario-grid,.metric-grid,.result-top,.cf-grid,.cf-links,.tool-grid,.company-grid,.guide-grid{
    grid-template-columns:1fr!important;
  }
  .hero,.cf-hero,.jh-hero,.landing-hero,.tool-hero,.guide-hero,.company-hero{
    display:grid!important;grid-template-columns:1fr!important;gap:18px!important;
    padding:22px var(--jg-viewport-pad)!important;border-radius:22px!important;
  }
  .hero h1,.cf-hero h1,.jh-hero h1,.landing-hero h1,.tool-hero h1,.guide-hero h1,.company-hero h1{
    font-size:clamp(2.05rem,11.5vw,3.15rem)!important;line-height:1.05!important;letter-spacing:-.07em!important;
  }
  .hero-actions,.report-actions,.cf-actions{display:grid!important;grid-template-columns:1fr!important;gap:10px!important;width:100%!important;}
  .hero-actions .btn,.cf-btn,.btn{width:100%;max-width:100%;}
  .visual-card{min-height:320px!important;border-radius:22px!important;}
  .floating-report{left:14px!important;right:14px!important;bottom:14px!important;padding:13px!important;border-radius:18px!important;}
  .report-line{grid-template-columns:1fr!important;gap:6px!important;}
  .toolbar{position:relative!important;top:auto!important;border-radius:18px!important;}
  .work-head{grid-template-columns:1fr!important;text-align:left!important;}
  .form,.result,.guide{padding-left:14px!important;padding-right:14px!important;}
  .page{padding-top:16px!important;}
}
@media (max-width:520px){
  :root{--jg-viewport-pad:max(13px,env(safe-area-inset-left));}
  .premium-home,.page,.cf-page,.jh-page,.tool-page,.guide-page,.company-page,.companies-page,.landing-page{padding-top:14px!important;padding-bottom:64px!important;}
  .top-row{justify-content:stretch!important;width:100%!important;}
  .lang-switch{width:100%!important;justify-content:space-between!important;overflow-x:auto;}
  .lang-switch button{flex:1 0 auto!important;}
  .hero,.cf-hero,.jh-hero,.landing-hero,.tool-hero,.guide-hero,.company-hero{margin:0!important;}
  .hero h1,.cf-hero h1,.jh-hero h1,.landing-hero h1,.tool-hero h1,.guide-hero h1,.company-hero h1{font-size:clamp(1.95rem,12.2vw,2.75rem)!important;line-height:1.08!important;}
  .eyebrow,.hero-badge{max-width:100%!important;white-space:normal!important;justify-content:flex-start!important;}
  .trust-item,.hero-card,.tool-card,.section,.cf-card,.company-card,.guide-card{border-radius:18px!important;}
  .tool-card{grid-template-columns:42px 1fr!important;min-height:auto!important;padding:13px!important;}
  .icon{width:42px!important;height:42px!important;}
  .field input,.field select,.search,.tool-input{min-height:46px!important;font-size:16px!important;}
  .sticky,.progress-tracker,.toolbar{max-width:calc(100vw - 26px)!important;}
}
@media (max-width:360px){
  .hero h1,.cf-hero h1,.jh-hero h1,.landing-hero h1,.tool-hero h1,.guide-hero h1,.company-hero h1{font-size:2rem!important;}
  .premium-home,.page,.cf-page,.jh-page,.tool-page,.guide-page,.company-page,.companies-page{padding-left:10px!important;padding-right:10px!important;}
}
/* Desktop polish: keep panels from stretching awkwardly */
@media (min-width:1181px){
  .main-grid{grid-template-columns:minmax(0,1fr) minmax(360px,420px)!important;}
  .workspace,#workspace{min-width:0!important;}
}
/* Hide accidental horizontal visual bleed, but never hide focused content. */
body.jg-layout-stable .premium-home,
body.jg-layout-stable .page,
body.jg-layout-stable .cf-page,
body.jg-layout-stable .jh-page{overflow:visible;}

/* ============================================================
   SERVER_STAGE_34_THEME_HARMONY (PATCH_20260707F)
   sprint170의 라이트 모드 전역 강제색(h1~h3=#0f172a, span/p=#475569)이
   '어두운 패널' 위 텍스트까지 어둡게 만들어 보이지 않던 문제의 예외 처리.
   sprint170과 같은 파일 끝에 두어 로드 순서를 구조적으로 보장합니다.
   ============================================================ */

/* 어두운 패널(두 모드 공통 다크 배경) 위 텍스트는 라이트 모드에서도 밝게 유지 */
html.light body.jg-layout-stable .trust-compact h1,
html.light body.jg-layout-stable .final-cta h1,
html.light body.jg-layout-stable .jg-dark-panel h1,
html[data-theme="light"] body.jg-layout-stable .trust-compact h1,
html[data-theme="light"] body.jg-layout-stable .final-cta h1,
html[data-theme="light"] body.jg-layout-stable .jg-dark-panel h1,
html.light body.jg-layout-stable .trust-compact h2,
html.light body.jg-layout-stable .final-cta h2,
html.light body.jg-layout-stable .jg-dark-panel h2,
html.light body.jg-layout-stable .jg-dark-panel h3,
html[data-theme="light"] body.jg-layout-stable .trust-compact h2,
html[data-theme="light"] body.jg-layout-stable .final-cta h2,
html[data-theme="light"] body.jg-layout-stable .jg-dark-panel h2,
html[data-theme="light"] body.jg-layout-stable .jg-dark-panel h3{color:#ffffff!important;}

html.light body.jg-layout-stable .trust-compact p,
html.light body.jg-layout-stable .final-cta p,
html.light body.jg-layout-stable .jg-dark-panel p,
html[data-theme="light"] body.jg-layout-stable .trust-compact p,
html[data-theme="light"] body.jg-layout-stable .final-cta p,
html[data-theme="light"] body.jg-layout-stable .jg-dark-panel p{color:#cbd5e1!important;}

html.light body.jg-layout-stable .trust-mini-grid article strong,
html.light body.jg-layout-stable .jg-dark-panel strong,
html[data-theme="light"] body.jg-layout-stable .trust-mini-grid article strong,
html[data-theme="light"] body.jg-layout-stable .jg-dark-panel strong{color:#ffffff!important;}

html.light body.jg-layout-stable .trust-mini-grid article span,
html.light body.jg-layout-stable .final-cta span,
html.light body.jg-layout-stable .premium-badge,
html.light body.jg-layout-stable .jg-dark-panel span,
html[data-theme="light"] body.jg-layout-stable .trust-mini-grid article span,
html[data-theme="light"] body.jg-layout-stable .final-cta span,
html[data-theme="light"] body.jg-layout-stable .premium-badge,
html[data-theme="light"] body.jg-layout-stable .jg-dark-panel span{color:#dbeafe!important;}

/* 패널 배경을 두 모드에서 동일하게 고정 (라이트에서 패널만 밝아져 흰 글자가 묻히는 반대 케이스 방지) */
body.jg-layout-stable .trust-compact{background:linear-gradient(135deg,#0b1220,#132033)!important;}
body.jg-layout-stable .final-cta{background:linear-gradient(135deg,#0f172a,#172638)!important;}
body.jg-layout-stable .final-cta .btn{background:#ffffff!important;color:#0f172a!important;}

/* ---- 상담형 계산기 입력 폴리시 (숫자 가림/겹침 정리) ---- */
/* 숫자 입력창의 브라우저 기본 스피너 제거 (값과 단위 '원' 이 가려지던 문제) */
#workspace input[type=number]::-webkit-outer-spin-button,
#workspace input[type=number]::-webkit-inner-spin-button,
.workspace input[type=number]::-webkit-outer-spin-button,
.workspace input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
#workspace input[type=number],.workspace input[type=number]{-moz-appearance:textfield;appearance:textfield;}

/* 환산 미리보기(읽기: …)가 좁은 카드에서 잘리지 않도록 */
#workspace .won-display,.workspace .won-display{white-space:normal!important;overflow:visible!important;word-break:keep-all;max-width:100%;}

/* 헬퍼 힌트: 래퍼 밖 블록으로만 표시 (겹침 방지) */
.jg-won-hint{display:block!important;width:100%!important;flex-basis:100%!important;margin:4px 0 0!important;line-height:1.3;}
.input-unit-wrap .jg-won-hint{display:none!important;} /* 안전망: 래퍼 내부에 남아있으면 숨김 */

/* ---- STAGE_34 BORDER_UNIFY: 박스 안팎 테두리 색 통일 ----
   다크에서 표면(rgba(148,163,184,.22)) / 입력창(#334155) / 이전 보정(#233044)
   세 계열로 갈라져 있던 테두리를 sprint170 라인 토큰 하나로 통일합니다. */
html.dark body.jg-layout-stable #workspace input,
html.dark body.jg-layout-stable #workspace select,
html.dark body.jg-layout-stable #workspace textarea,
html.dark body.jg-layout-stable .workspace input,
html.dark body.jg-layout-stable .workspace select,
html.dark body.jg-layout-stable .input-unit-wrap input,
html.dark body.jg-layout-stable .choice-card,
html.dark body.jg-layout-stable .quick-row button,
html.dark body.jg-layout-stable .quick-row a,
html[data-theme="dark"] body.jg-layout-stable #workspace input,
html[data-theme="dark"] body.jg-layout-stable #workspace select,
html[data-theme="dark"] body.jg-layout-stable #workspace textarea,
html[data-theme="dark"] body.jg-layout-stable .workspace input,
html[data-theme="dark"] body.jg-layout-stable .workspace select,
html[data-theme="dark"] body.jg-layout-stable .input-unit-wrap input,
html[data-theme="dark"] body.jg-layout-stable .choice-card,
html[data-theme="dark"] body.jg-layout-stable .quick-row button,
html[data-theme="dark"] body.jg-layout-stable .quick-row a{border-color:var(--jg-line)!important;}

/* 선택된 카테고리 카드는 포인트 색 유지 */
html.dark body.jg-layout-stable .choice-card.active,
html[data-theme="dark"] body.jg-layout-stable .choice-card.active{border-color:var(--jg-accent)!important;}

/* 이전 보정(#233044)으로 갈라졌던 메인 카드 테두리도 동일 토큰으로 */
html.dark body.jg-layout-stable .trust-item,
html.dark body.jg-layout-stable .process-step,
html.dark body.jg-layout-stable .course-card.premium-course,
html.dark body.jg-layout-stable .stage23-finance-card,
html[data-theme="dark"] body.jg-layout-stable .trust-item,
html[data-theme="dark"] body.jg-layout-stable .process-step,
html[data-theme="dark"] body.jg-layout-stable .course-card.premium-course,
html[data-theme="dark"] body.jg-layout-stable .stage23-finance-card{border-color:var(--jg-line)!important;}

/* 라이트: 입력창(#e2e8f0)과 카드 라인(#dbe5ef) 미세 불일치 통일 */
html.light body.jg-layout-stable #workspace input,
html.light body.jg-layout-stable .input-unit-wrap input,
html.light body.jg-layout-stable .choice-card,
html.light body.jg-layout-stable .quick-row button,
html[data-theme="light"] body.jg-layout-stable #workspace input,
html[data-theme="light"] body.jg-layout-stable .input-unit-wrap input,
html[data-theme="light"] body.jg-layout-stable .choice-card,
html[data-theme="light"] body.jg-layout-stable .quick-row button{border-color:var(--jg-line)!important;}

/* 모바일: 히어로 패널 안쪽 여백 확보 (글자가 패널 끝선에 붙던 문제) */
@media(max-width:640px){
  body.jg-layout-stable .hero{padding-left:16px!important;padding-right:16px!important;border-radius:22px;}
}

/* ---- STAGE_34 HOTFIX_A: 상황 시나리오 흰 패널 + 모바일 히어로 글자 잘림 ---- */

/* (1) 상담형 상세의 form/tabs 컨테이너가 다크에서 흰색으로 남던 문제.
   중간 시트 어느 것이 이기든 상관없도록 마지막 파일에서 확정합니다. */
html.dark body.jg-layout-stable .form,
html.dark body.jg-layout-stable .compact-form,
html.dark body.jg-layout-stable form.form,
html.dark body.jg-layout-stable .tabs,
html[data-theme="dark"] body.jg-layout-stable .form,
html[data-theme="dark"] body.jg-layout-stable .compact-form,
html[data-theme="dark"] body.jg-layout-stable form.form,
html[data-theme="dark"] body.jg-layout-stable .tabs{
  background:linear-gradient(180deg,rgba(17,29,48,.96),rgba(9,18,33,.96))!important;
  border-color:var(--jg-line)!important;
  color:var(--jg-text)!important;
}
html.dark body.jg-layout-stable .tab,
html[data-theme="dark"] body.jg-layout-stable .tab{
  background:var(--jg-surface2)!important;color:var(--jg-muted)!important;border:1px solid var(--jg-line)!important;
}
html.dark body.jg-layout-stable .tab.on,
html[data-theme="dark"] body.jg-layout-stable .tab.on{
  background:var(--jg-accent)!important;color:#ffffff!important;border-color:var(--jg-accent)!important;
}

/* (2) 모바일/좁은 창에서 히어로가 2열(오른쪽 최소 380px 강제)로 남아
   텍스트 열이 좁아지며 세로 끝선에 글자가 잘리던 문제 */
@media(max-width:960px){
  body.jg-layout-stable .hero{grid-template-columns:1fr!important;overflow:visible!important;}
  body.jg-layout-stable .hero .visual-card{min-height:300px;}
}
@media(max-width:640px){
  body.jg-layout-stable .hero h1{font-size:clamp(1.9rem,8.5vw,2.7rem)!important;letter-spacing:-.05em!important;}
}

/* ---- STAGE_34 HOTFIX_B: 모바일 히어로 — 세로 끝선 제거 + 글자 잘림 종결 ----
   960px 이하에서는 히어로를 1열 블록으로 완전 전환하고,
   패널 배경/테두리/그림자를 제거해 '선' 자체가 보이지 않게 합니다. */
@media(max-width:960px){
  body.jg-layout-stable .hero{
    display:block!important;
    grid-template-columns:none!important;
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
    overflow:visible!important;
    padding:18px 4px 8px!important;
  }
  body.jg-layout-stable .hero h1{
    font-size:clamp(1.9rem,8.5vw,2.9rem)!important;
    line-height:1.12!important;
    letter-spacing:-.05em!important;
    white-space:normal!important;
    max-width:100%!important;
  }
  body.jg-layout-stable .hero p{max-width:100%!important;}
  body.jg-layout-stable .hero .visual-card{margin-top:20px;min-height:280px;}
}

/* ---- STAGE_34 HOTFIX_C: 데스크탑 모드(가상 뷰포트) 대응 ----
   미디어쿼리는 '화면 폭'이 아니라 '보고된 뷰포트'를 보므로, 모바일 브라우저의
   데스크탑 보기에서는 걸리지 않습니다. 그리드 자체를 컨테이너 폭 기준
   auto-fit으로 바꿔 어떤 환경에서도 좁으면 1열, 넓으면 2열이 되게 합니다. */
body.jg-layout-stable .hero{
  grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr))!important;
  overflow:visible!important;
}
body.jg-layout-stable .hero h1{max-width:100%!important;overflow:visible!important;}

/* ---- STAGE_34 HOTFIX_D: 히어로 세로선 근본 제거 ----
   sprint170이 다크에서 .hero 를 '카드 표면'으로 취급해 배경+테두리를 입히면서
   좌측 테두리 선이 생기고, 히어로의 좌우 패딩이 0이라 글자가 선에 붙어 보였습니다.
   히어로는 원래 디자인대로 페이지 배경 위에 직접 놓이게(무배경·무테) 되돌립니다.
   화면 폭·뷰포트 모드와 무관하게 항상 적용됩니다. */
html.dark body.jg-layout-stable .hero,
html[data-theme="dark"] body.jg-layout-stable .hero{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
}
/* 하단 신뢰 카드 4개가 우측으로 넘치던 것: 컨테이너 폭 기준 자동 줄바꿈 */
body.jg-layout-stable .trust-row{
  grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr))!important;
  max-width:100%!important;
}

/* ---- STAGE_34 HOTFIX_E: 히어로 좌측 세로선 최종 차단 ----
   .hero 자체의 배경/테두리/그림자는 이미 제거했으나 선이 남는 것은
   히어로 '내부/직계 요소 또는 가상요소'가 그리는 것이므로,
   요소를 특정하지 않고 히어로 범위에서 세로선을 그릴 수 있는
   모든 수단(좌우 border, box-shadow, outline, 가상요소)을 차단합니다.
   배지(.eyebrow)와 신뢰 카드(.trust-item)의 원형 테두리는 유지합니다. */
html.dark body.jg-layout-stable .hero::before,
html.dark body.jg-layout-stable .hero::after,
html.dark body.jg-layout-stable .hero > div::before,
html.dark body.jg-layout-stable .hero > div::after,
html[data-theme="dark"] body.jg-layout-stable .hero::before,
html[data-theme="dark"] body.jg-layout-stable .hero::after,
html[data-theme="dark"] body.jg-layout-stable .hero > div::before,
html[data-theme="dark"] body.jg-layout-stable .hero > div::after{
  content:none!important;display:none!important;
}
html.dark body.jg-layout-stable .hero,
html.dark body.jg-layout-stable .hero > div,
html.dark body.jg-layout-stable .hero h1,
html.dark body.jg-layout-stable .hero .eyebrow,
html.dark body.jg-layout-stable .hero .hero-actions,
html.dark body.jg-layout-stable .hero .trust-row,
html[data-theme="dark"] body.jg-layout-stable .hero,
html[data-theme="dark"] body.jg-layout-stable .hero > div,
html[data-theme="dark"] body.jg-layout-stable .hero h1,
html[data-theme="dark"] body.jg-layout-stable .hero .eyebrow,
html[data-theme="dark"] body.jg-layout-stable .hero .hero-actions,
html[data-theme="dark"] body.jg-layout-stable .hero .trust-row{
  border-left:0!important;border-right:0!important;
  box-shadow:none!important;outline:0!important;
}

/* ---- STAGE_35_RESULT_POLISH (PATCH_20260707G): 상담형 결과 화면 가독성 고도화 ----
   계산 함수·마크업 무수정. 숫자 강조/정렬, 카드 리듬, 모바일 터치 크기만 다듬습니다. */
.result-panel .metric b,.result-panel .metric strong,.metric-grid .metric strong,
.standard-card strong,.result-top strong{
  font-variant-numeric:tabular-nums;letter-spacing:-.02em;font-size:1.14em;
}
.result-panel .metric,.metric-grid .metric{padding:12px 14px!important;border-radius:14px!important;}
.result-panel h3,.result-panel h4{letter-spacing:-.02em;}
#workspace .quick-row button{min-height:38px;padding:6px 12px;}
#workspace input,#workspace select{min-height:44px;font-variant-numeric:tabular-nums;}
@media(max-width:640px){
  .result-panel .metric b,.result-panel .metric strong,.standard-card strong{font-size:1.06em;}
  #workspace .field{padding:12px!important;}
}

/* ---- STAGE_35 HOTFIX_F: 히어로 세로선 차단을 라이트 모드까지 확장 ----
   HOTFIX_E가 다크 한정이어서 라이트에서 같은 선이 남고 버튼 첫 글자가
   잘려 보이던 문제. 동일한 차단을 테마 무관으로 적용합니다. */
body.jg-layout-stable .hero::before,
body.jg-layout-stable .hero::after,
body.jg-layout-stable .hero > div::before,
body.jg-layout-stable .hero > div::after{content:none!important;display:none!important;}
body.jg-layout-stable .hero,
body.jg-layout-stable .hero > div,
body.jg-layout-stable .hero h1,
body.jg-layout-stable .hero .eyebrow,
body.jg-layout-stable .hero .hero-actions,
body.jg-layout-stable .hero .trust-row{
  border-left:0!important;border-right:0!important;box-shadow:none!important;outline:0!important;
}
body.jg-layout-stable .hero{background:transparent!important;border:0!important;}
body.jg-layout-stable .hero .hero-actions{padding-left:2px;}

/* [EXEMPTION 20260712 v2.15.1] 모바일 상단 네비 복원 — company-finance.css 의 820px 이하 .cf-navlinks{display:none} 을 무력화하고 가로스크롤 필로 유지. ('부동산 시세' 등 메뉴가 모바일에서 안 보이던 문제) */
@media (max-width:820px){
  .cf-navlinks{display:flex !important;flex-wrap:nowrap;overflow-x:auto;max-width:100%;gap:8px;padding-bottom:4px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .cf-navlinks::-webkit-scrollbar{display:none}
  .cf-navlinks a{white-space:nowrap;flex:none}
}

/* [EXEMPTION 20260712 v2.16.1] 모바일 칩(pill) 압착 방어 — tools 미니네비 등 칩이 원형으로 찌그러져 글자가 겹치던 문제. 어떤 후순위/주입 규칙보다 우선하도록 고특이도+!important 로 고정. */
body .tool-mini-nav, body .pc-chips, body .gl-chips, body .cr-tabs, body .pc-repay-tabs, body .jg-quick-tools .row{
  display:flex!important;flex-wrap:nowrap!important;overflow-x:auto!important;max-width:100%!important;
  gap:8px!important;padding-bottom:4px;-webkit-overflow-scrolling:touch;scrollbar-width:none;
}
body .pc-chips, body .gl-chips{flex-wrap:wrap!important;overflow-x:visible!important}
body .tool-mini-nav a, body .pc-chips .pc-chip, body .gl-chips .gl-chip, body .cr-tabs .cr-tab, body .pc-repay-tabs .pc-repay-tab, body .jg-quick-tools .row a{
  display:inline-flex!important;align-items:center!important;justify-content:center!important;
  flex:0 0 auto!important;width:auto!important;min-width:max-content!important;max-width:none!important;
  height:auto!important;min-height:0!important;aspect-ratio:auto!important;
  white-space:nowrap!important;overflow:visible!important;text-overflow:clip!important;
  word-break:keep-all!important;overflow-wrap:normal!important;letter-spacing:-.01em!important;
  padding:8px 13px!important;border-radius:999px!important;line-height:1.2!important;
}
@media (max-width:640px){
  body .tool-mini-nav a, body .jg-quick-tools .row a{font-size:12.5px!important;padding:8px 12px!important}
}