/* Original stylesheet sources (cascade order):
/static/mobile-polish.css?v=20261020a
/static/ui-polish.css?v=20260930ux
/static/visual-cleanup.css?v=20261023visual1
*/
/* Presentation only: shared navigation, editorial reading and mobile previews. */
.tool-grid .tool-media:has(img.image-load-failed)::after {
  content: "예시 이미지를 불러오지 못했습니다. 도구는 열 수 있어요.";
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  padding: 16px;
  background: #101914;
  color: #bdcfc3;
  font-size: 14px;
  line-height: 1.6;
  text-align: center;
  pointer-events: none;
}
@media (max-width: 820px) {
  .bm-site-header .bm-site-nav::after { content: none; }
  .bm-site-header .bm-site-nav {
    mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
  }
  .bm-site-header .bm-site-nav[data-overflow-left="false"][data-overflow-right="false"] {
    mask-image: none; -webkit-mask-image: none;
  }
  .bm-site-header .bm-site-nav[data-overflow-left="true"][data-overflow-right="false"] {
    mask-image: linear-gradient(to right, transparent, #000 24px);
    -webkit-mask-image: linear-gradient(to right, transparent, #000 24px);
  }
  .bm-site-header .bm-site-nav[data-overflow-left="true"][data-overflow-right="true"] {
    mask-image: linear-gradient(to right, transparent, #000 24px, #000 calc(100% - 28px), transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, #000 24px, #000 calc(100% - 28px), transparent);
  }}
@media (max-width: 680px) {
  .tool-grid > .tool-card .tool-media {
    height: clamp(112px, 36vw, 168px);
    min-height: 0;
    aspect-ratio: auto;
  }
  .tool-grid > .tool-card .tool-media img { object-fit: contain; }
  main.bm-guide-page p:not(.guide-meta):not(.wdg-edition):not(.vest-eyebrow) {
    font-size: 16px;
    line-height: 1.8;
  }
  main.bm-guide-page :is(.guide-data-table, .wdg-table, .vest-table) :is(th, td),
  main.bm-guide-page figcaption,
  main.bm-guide-page .guide-toc nav a {
    font-size: 15px;
    line-height: 1.7;
  }
  main.bm-guide-page :is(.wdg-confidence, .wdg-metric-definitions, .vest-source-links) {
    font-size: 16px;
    line-height: 1.8;
  }}

/* Presentation only. Scoped to established components; no canvas sizing. */
.guide-tool-cta{display:inline-flex;align-items:center;gap:12px;min-height:44px;padding:0 16px;border:1px solid #3b5e4a;border-radius:6px;background:#14271d;color:#a1edc8;text-decoration:none!important;font-size:14px;font-weight:600}
.guide-tool-cta:hover{background:#203d2c;border-color:#79dca8}
.guide-toc{margin:22px 0;padding:14px 18px;border:1px solid #33473c;border-radius:8px;background:#111c16}
.guide-toc summary{cursor:pointer;color:#d9e8df;font-size:14px;font-weight:600;min-height:30px}
.guide-toc nav{display:grid;gap:2px;margin-top:10px}.guide-toc nav a{display:block;padding:8px 0;font-size:14px;line-height:1.5;color:#b1d4bf;text-decoration:none}.guide-toc nav a:hover{text-decoration:underline}
@media(max-width:600px){.guide-toc nav a{min-height:44px;box-sizing:border-box}.guide-tool-cta{justify-content:center}}
.tool-card:focus-visible,.data-tool-card:focus-visible,.guide-card:focus-visible{outline:2px solid #54dbab;outline-offset:4px}
.tool-card:is(:hover,:focus-visible) .tool-action{color:#fff}
.tool-card .tool-copy{min-height:112px}
@media(prefers-reduced-motion:reduce){.tool-card .tool-media img{transition:none}.tool-card:hover .tool-media img{transform:none}}
.bm-quiet-action,.bm-distance-preset{font:inherit;color:inherit;border:1px solid #466257;border-radius:6px;background:transparent;padding:8px 12px;cursor:pointer;min-height:38px}
.bm-quiet-action:hover,.bm-distance-preset:hover{background:#183128;border-color:#71b49a}
.bm-quiet-action:focus-visible,.bm-distance-preset:focus-visible{outline:2px solid #54dbab;outline-offset:3px}
.bm-distance-preset[aria-pressed=true]{background:#1b4938;border-color:#54dbab;color:#dcfff0}
.bm-distance-presets{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.bm-quick-exit{margin-right:auto}
/* Rankings: preserve all metrics, expose secondary ones on demand. */
body:has(#rankings) .metric-strip{border:0;border-block:1px solid var(--line);background:none;margin-bottom:0}
body:has(#rankings) .metric{padding:12px 16px;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
body:has(#rankings) .metric strong{font-size:20px;line-height:1.3;margin:0}
body:has(#rankings) .metric small{font-size:11px}
body:has(#rankings) #rankings{margin-top:20px}
body:has(#rankings) #rankings .panel__header{min-height:72px;padding-block:16px}
#rankings .filters{align-items:end;flex-wrap:wrap}
#rankings .table-wrap{overflow:auto;max-height:72vh;scrollbar-gutter:stable}
#rankings thead th{position:sticky;top:0;z-index:2}
#rankings.bm-ui-ready:not(.bm-details-on) :is(th,td,col):is(:nth-child(4),:nth-child(5),:nth-child(7),:nth-child(8)){display:none}
#rankings.bm-ui-ready:not(.bm-details-on) .ranking-table{min-width:700px;table-layout:auto}
#rankings.bm-ui-ready:not(.bm-details-on) .ranking-col{width:auto}
.bm-distance-control label{display:flex;flex-direction:column;gap:10px}
.bm-explainer-head .bm-quick-exit{margin-left:auto;margin-right:10px;font-size:13px;white-space:nowrap}
#rankings .ranking-table td{font-variant-numeric:tabular-nums}
@media(max-width:760px){#rankingDetailToggle{display:none}body:has(#rankings) .metric{padding:10px 6px}body:has(#rankings) .metric small{display:none}}
/* Keep complete input controls within ordinary laptop-height screens. */
@media(min-width:1000px) and (max-height:850px){
 body:is(.mode-drop,.mode-mortar,.mode-zone):not(.has-analysis-image):not([data-input-mode=manual]){
  & .dropzone{padding:20px 26px}
  & .empty-onboarding{gap:8px}
  & .empty-title{font-size:32px}
  & .empty-flow{margin-top:14px;gap:20px}
  & .empty-actions{margin-top:12px;gap:8px}
  & .drop-step-heading{min-height:98px;padding-bottom:10px}
  & .drop-monitor-screen{max-height:142px}
  & .drop-step-heading h3{font-size:18px}
  & .drop-save-note{margin:0}
 }
 .bm-explainer .bm-explainer-body{padding-top:20px;padding-bottom:20px}
 .bm-explainer .bm-brief-title{margin-bottom:18px}
}
/* Comparison: give controls priority over framing and repeated metadata. */
body:has(#simulatorTitle) .page-intro{margin-bottom:22px;padding-top:24px}
body:has(#simulatorTitle) .page-intro .lead{max-width:760px}
body:has(#simulatorTitle) .simulator-head{padding-block:14px}
body:has(#simulatorTitle) .global-controls{padding-block:18px}
body:has(#simulatorTitle) .data-source-strip{padding-block:10px}
body:has(#simulatorTitle) .intro-data-note{color:#bdc9c3}
/* Guides: browse first, proof after the shortlist. */
body:has(.guide-featured) .guide-proof{margin-top:32px}
body:has(.guide-featured) .guide-proof-image{max-height:190px;object-fit:cover}
body:has(.guide-featured) .guide-section-head p{max-width:660px}
@media(prefers-reduced-motion:reduce){.bm-distance-preset,.bm-quiet-action{transition:none}}

/* Presentation only. Keep tool inputs, analysis canvas geometry and data charts owned by their existing styles. */
:root {
  --bm-card-surface: #101714;
  --bm-card-border: #2c3932;
  --bm-rule: #29372f;
}
body a:is(.tool-card, .data-tool-card, .latest-guide-card), body a.stats-preview.tool-card {
  border-color: var(--bm-card-border);
  background-color: var(--bm-card-surface);
  border-radius: 8px;
  box-shadow: none;
}
body a:is(.tool-card, .data-tool-card, .latest-guide-card):is(:hover, :focus-visible),
body a.stats-preview.tool-card:is(:hover, :focus-visible) {
  border-color: #60957a;
  background-color: #132019;
}
body a:focus-visible, body button:focus-visible, body summary:focus-visible {
  outline: 2px solid #78dcb0;
  outline-offset: 4px;
}
a[target="_blank"] { text-decoration: underline; text-underline-offset: .2em; }
.data-tool-visual { background: transparent !important; }
.data-tool-vs { border: 0 !important; box-shadow: none !important; background: transparent !important; }

/* Explain with headings and paragraphs, not a stack of nested cards. */
.bm-content-pack { gap: 0; }
body .bm-content-pack > :is(section, nav) {
  display: block;
  border: 0;
  border-top: 1px solid var(--bm-rule);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 26px 0;
  margin: 0;
}
.bm-content-pack .bm-info-cards { display: block; margin-top: 18px; }
.bm-content-pack .bm-info-card {
  border: 0; border-radius: 0; padding: 0; margin: 20px 0 0; background: transparent; box-shadow: none;
}
.bm-content-pack .bm-info-card:first-child { margin-top: 0; }
.bm-content-pack .bm-info-card h3 { margin-bottom: 7px; font-size: 16px; }
.bm-content-pack :is(p, li) { line-height: 1.75; }
.bm-content-pack .bm-methodology p + p { margin-top: 6px; }
.bm-case-date { display: block; margin-bottom: 7px; color: #a5b8ad; font-size: 12px; }
.bm-content-pack .bm-tool-case-metrics .case-metric,
.case-metrics .case-metric {
  border: 0; border-radius: 0; border-bottom: 1px solid var(--bm-rule);
  background: transparent; box-shadow: none; padding: 12px 4px;
}
.bm-content-pack .bm-accordion-item {
  border: 0; border-radius: 0; border-bottom: 1px solid var(--bm-rule); background: transparent;
}
.bm-content-pack .bm-accordion-trigger { padding: 14px 0; font-weight: 650; }
.bm-content-pack .bm-accordion-panel { padding: 0 0 18px; }
.bm-content-pack .bm-related-list { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.bm-content-pack a.bm-related-link {
  display: inline-flex; border: 0; border-radius: 0; background: transparent;
  padding: 5px 0; min-height: 34px; text-decoration: underline; text-underline-offset: .2em;
}

/* A guide index, not accordion cards enclosing more cards. */
.guide-category-section {
  scroll-margin-top: calc(var(--bm-header-height, 90px) + 24px);
  margin: 36px 0 0; padding: 24px 0 0; border-top: 1px solid var(--bm-rule);
}
.guide-category-section:first-child { margin-top: 24px; }
.guide-category-section .guide-category-heading { display: block; margin: 0 0 18px; }
.guide-category-section .guide-category-title { display: block; font-size: 22px; color: var(--text, #e7f5ef); }
.guide-category-section .guide-category-desc { display: block; margin-top: 6px; line-height: 1.7; }
.guide-category-section .guide-category-body { padding: 0; }
.guide-category-section .guide-grid { border: 0; margin: 0; gap: 0 28px; }
.guide-category-section a.guide-card {
  border: 0; border-bottom: 1px solid var(--bm-rule); background: transparent; border-radius: 0;
  padding: 20px 0; min-height: 0; box-shadow: none; overflow: visible;
}
.guide-category-section a.guide-card:hover h3 { color: #78dcb0; text-decoration: underline; text-underline-offset: .2em; }
.guide-category-section .guide-card h3 { line-height: 1.55; }
.guide-category-section .guide-card .guide-desc { line-height: 1.7; }
.guide-help-list { list-style: none; padding: 0; margin: 0; }
.guide-help-list li { padding: 15px 0; border-bottom: 1px solid var(--bm-rule); }
.guide-help-list a { display: inline-block; font-size: 15px; font-weight: 650; text-decoration: underline; text-underline-offset: .2em; }
.guide-help-list .guide-desc { display: block; margin-top: 5px; font-size: 13px; color: var(--muted, #a8b9b2); }
.guide-help-list .guide-card-date { margin-top: 5px; }
.guide-proof-link::after { content: none !important; }

/* Keep the help content and links; give the disclosure a restrained custom marker. */
body .home-help { border: 0; border-top: 1px solid var(--bm-rule); border-radius: 0; padding: 18px 0 0; }
.home-help > summary { display: flex; align-items: center; gap: 10px; list-style: none; }
.home-help > summary::-webkit-details-marker { display: none; }
.home-help > summary::before {
  content: ''; width: 7px; height: 7px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor;
  transform: rotate(-45deg); flex: 0 0 7px; margin-right: 2px;
}
.home-help[open] > summary::before { transform: rotate(45deg); }
body .home-info > :is(section, details) {
  border: 0; border-radius: 0; background: transparent; box-shadow: none;
}
body .home-reading > section { border-top: 1px solid var(--bm-rule); padding: 20px 0; }
.bm-guide-page :is(.guide-lead, .guide-related, .guide-review-notes),
.bm-guide-page .wdg-confidence {
  border: 0; border-top: 1px solid var(--bm-rule); border-radius: 0; background: transparent; padding: 20px 0; box-shadow: none;
}
.bm-guide-page .wdg-answer { border: 0; border-left: 2px solid #58c99a; border-radius: 0; background: transparent; padding: 4px 0 4px 20px; }
.wd-page .wd-analysis { border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.wd-page .wd-chart-section { border: 0; border-top: 1px solid var(--bm-rule); border-radius: 0; background: transparent; padding-inline: 0; }
.wd-page .wd-body-grid { border-top: 1px solid var(--bm-rule); border-bottom: 1px solid var(--bm-rule); }
.wd-page .bm-wseo { border: 0; border-top: 1px solid var(--bm-rule); border-radius: 0; background: transparent; padding: 24px 0; box-shadow: none; }

/* Step illustrations have a predictable minimum height; no keycap can escape its own screen. */
.drop-guide-step { align-content: start; grid-template-rows: minmax(112px, auto) auto; gap: 14px; }
.drop-step-heading { padding-bottom: 0; min-width: 0; }
.drop-monitor { min-width: 0; }
.drop-monitor-screen { aspect-ratio: 16 / 10; min-height: 172px; box-shadow: none; border-radius: 6px; }
.drop-monitor-screen > img { object-fit: cover; }
.drop-monitor-screen:has(.drop-capture-overlay) > .drop-pin-label { display: none; }
.drop-capture-overlay { gap: 9px; padding: 12px; box-sizing: border-box; font-size: 12px; }
.drop-capture-overlay kbd { min-width: 0; height: 42px; padding: 0 12px; font-size: 18px; border-radius: 5px; }
.drop-site-demo { box-sizing: border-box; width: 100%; height: 100%; min-width: 0; padding: 10px; gap: 8px; overflow: hidden; }
.drop-demo-brand { flex: 0 0 auto; min-width: 0; white-space: nowrap; font-size: 11px; gap: 6px; }
.drop-demo-brand .bm-site-brand__mark { box-sizing: border-box; width: 14px; height: 14px; flex: 0 0 14px; }
.drop-demo-paste { padding: 8px; gap: 8px; box-sizing: border-box; min-width: 0; font-size: 11px; }
.drop-demo-paste > svg { display: none; }
.drop-key-combination { gap: 6px; max-width: 100%; }
.drop-key-combination kbd { min-width: 0; height: 38px; padding: 0 9px; font-size: 16px; border-radius: 5px; }
.drop-key-combination > span { font-size: 13px; }
@media (max-width: 1100px) and (min-width: 801px) {
  .drop-guide-step { grid-template-rows: minmax(148px, auto) auto; }
  .drop-monitor-screen { min-height: 164px; }
  .drop-capture-overlay kbd { font-size: 16px; height: 38px; padding-inline: 9px; }
  .drop-site-demo { padding: 8px; }
  .drop-key-combination kbd { font-size: 14px; height: 34px; padding-inline: 7px; }}
@media (max-width: 800px) {
  .drop-guide-step { grid-template-rows: auto auto; gap: 14px; }
  .drop-monitor-screen { min-height: 0; aspect-ratio: 16 / 9; }
  .drop-site-demo { padding: 16px; gap: 12px; }
  .drop-demo-brand { font-size: 13px; }
  .drop-demo-paste { gap: 12px; }
  .drop-key-combination kbd { font-size: 20px; height: 46px; padding: 0 14px; }
  .bm-content-pack .bm-info-card { margin-top: 20px; }}
@media (max-width: 520px) {
  .guide-category-section { margin-top: 30px; padding-top: 22px; }
  .guide-category-section .guide-category-title { font-size: 21px; }
  .guide-category-section .guide-grid { grid-template-columns: minmax(0, 1fr); }
  .guide-category-section .guide-card h3 { font-size: 17px; }
  .guide-help-list li { padding: 15px 0; }
  .bm-content-pack > :is(section, nav) { padding-block: 24px; }}