/* /maintenance-history/ landing (2026-11-10). Every rule is scoped under .mh except the bottom-nav block at the end
 * (byte copy of faq/faq.css 36-46 = page/company.php 101-110).
 * Tone = the §04 panel (page/inc/nice_repair_panel.php tokens): navy #0A1929, cell #0E2137, accent #60A5FA,
 * button #1D4ED8. Red #FF3B30 only for the KOREA'S FIRST badge, number badges and the showcase boxes.
 * Fonts already on the site only: Georgia (serif titles, as .nr-title), ui-monospace stack (labels),
 * var(--ssc-ui) (body), Poppins 600/700 (buttons and numbers; only those weights are loaded).
 * The site bundle sets body letter-spacing:-0.1rem and h1{font-family:var(--ssc-brand)!important}; both are
 * undone inside .mh. default.css p{word-break:break-all} too. */
.mh{--mh-navy:#0A1929;--mh-cell:#0E2137;--mh-bd:rgba(96,165,250,.22);--mh-line:rgba(96,165,250,.14);--mh-acc:#60A5FA;
  --mh-tx:#DBEAFE;--mh-sub:#8FA8C2;--mh-dim:#63798F;--mh-cta:#1D4ED8;--mh-ctah:#2563EB;--mh-red:#FF3B30;
  --mh-ink:#13213a;--mh-muted:#4a5a72;--mh-rule:#e2e8f1;--mh-soft:#f3f6fb;
  --mh-serif:Georgia,'Times New Roman',serif;--mh-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  box-sizing:border-box;max-width:1020px;margin:0 auto;padding:4px 16px 24px;letter-spacing:normal;
  font-family:var(--ssc-ui);font-size:16px;line-height:1.6;color:var(--mh-ink);overflow-wrap:break-word}
.mh *{box-sizing:border-box;letter-spacing:inherit}
.mh p{word-break:normal}
.mh a{color:var(--mh-cta)}
.mh-crumbs{font-size:13px;color:var(--mh-muted);margin:4px 0 10px}
.mh-crumbs a{color:var(--mh-muted);text-decoration:underline}

/* hero */
.mh-hero{position:relative;margin:0 0 36px;padding:22px 18px 18px;border-radius:16px;border:1px solid var(--mh-bd);color:var(--mh-tx);
  background:radial-gradient(120% 90% at 100% 0%,rgba(59,130,246,.20),transparent 62%),var(--mh-navy)}
.mh-badge{display:inline-block;margin:0 0 14px;padding:6px 10px 5px;border-radius:999px;background:var(--mh-red);color:#fff;
  font:700 11px/1 var(--mh-mono);letter-spacing:.14em}
.mh-eyebrow{margin:0 0 10px;font:600 10.5px/1.6 var(--mh-mono);letter-spacing:.12em;color:var(--mh-acc)}
.mh h1{margin:0 0 14px;font-family:var(--mh-serif)!important;font-weight:700;font-size:30px;line-height:1.16;color:#fff}
.mh-lead{margin:0 0 18px;font-size:15.5px;line-height:1.65;color:#C9D8EA}
.mh-me{padding:14px 16px;border-radius:12px;border:1px solid var(--mh-bd);background:var(--mh-cell)}
.mh-me-t{margin:0 0 6px;font-size:15px;font-weight:600;color:#fff}
.mh-me-t b{font:700 19px/1 'Poppins',var(--ssc-ui);color:#93C5FD}
.mh-me-s{margin:0 0 12px;font-size:14px;color:var(--mh-sub)}
.mh-me .mh-btn{margin-top:4px}

/* buttons */
.mh-btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:12px 18px;border-radius:8px;
  border:1px solid var(--mh-cta);background:var(--mh-cta);color:#fff!important;font:600 14px/1.1 'Poppins',var(--ssc-ui);
  text-decoration:none!important;text-align:center}
.mh-btn:hover{background:var(--mh-ctah);border-color:var(--mh-ctah)}
.mh-btn--alt{background:transparent;color:var(--mh-cta)!important}
.mh-btn--alt:hover{background:rgba(29,78,216,.08)}

/* sections */
.mh-sec{margin:0 0 40px}
.mh-label{margin:0 0 6px;font:600 11px/1.4 var(--mh-mono);letter-spacing:.14em;color:var(--mh-cta)}
.mh h2{margin:0 0 14px;font:700 25px/1.22 var(--mh-serif);color:var(--mh-navy)}
.mh-prose p{max-width:70ch;margin:0 0 12px}
.mh-advice{padding:12px 14px;border-left:3px solid var(--mh-cta);border-radius:0 10px 10px 0;background:var(--mh-soft)}

/* allowance table */
.mh-tablewrap{overflow-x:auto;border:1px solid var(--mh-rule);border-radius:12px}
.mh-table{width:100%;border-collapse:collapse;font-size:14px;line-height:1.45}
.mh-table thead th{padding:10px 12px;background:var(--mh-navy);color:var(--mh-tx);text-align:left;vertical-align:bottom;
  font:600 10.5px/1.4 var(--mh-mono);letter-spacing:.1em;text-transform:uppercase}
.mh-table tbody th,.mh-table td{padding:12px;border-top:1px solid var(--mh-rule);text-align:left;vertical-align:top}
.mh-table tbody th{font-weight:600;color:var(--mh-navy)}
.mh-table td:nth-child(2){font-weight:700;color:var(--mh-cta)}
.mh-table tbody tr:nth-child(even){background:#fafbfd}

/* 4 steps + small pre-lookup panel mock */
.mh-howgrid{display:grid;gap:22px}
.mh-steps{margin:0;padding:0;list-style:none}
.mh-steps li{display:flex;gap:12px;align-items:flex-start;margin:0 0 14px;list-style:none}
.mh-steps p{margin:1px 0 0}
.mh-num{display:inline-block;flex:0 0 26px;width:26px;height:26px;border-radius:50%;background:var(--mh-red);color:#fff;
  font:700 13px/26px 'Poppins',var(--ssc-ui);text-align:center;box-shadow:0 0 0 3px rgba(255,59,48,.18)}
.mh-num--abs{position:absolute;top:-11px;right:-11px;z-index:2}
.mh-mock{padding:18px 16px;border-radius:14px;background:var(--mh-soft)}
.mh-mock-tabs{position:relative;display:inline-flex;gap:8px;margin:0 0 14px}
.mh-mock-tabs a{padding:9px 14px;border-radius:999px;border:1px solid #d3dcea;background:#fff;color:var(--mh-ink)!important;
  font:600 13px/1 'Poppins',var(--ssc-ui);text-decoration:none!important}
.mh-mock-tabs a.on{border-color:var(--mh-cta);background:var(--mh-cta);color:#fff!important}
.mh-mock-panel{border:1px solid var(--mh-bd);border-radius:14px;background:var(--mh-navy)}
.mh-mock-head{position:relative;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;padding:14px 16px;border-bottom:1px solid var(--mh-line)}
.mh-mock-sec{font:700 11px/1 var(--mh-mono);letter-spacing:.12em;color:var(--mh-acc)}
.mh-mock-title{font:400 18px/1.2 var(--mh-serif);color:#fff}
.mh-mock-stamp{flex-basis:100%;font:600 9px/1.4 var(--mh-mono);letter-spacing:.09em;text-transform:uppercase;color:var(--mh-acc)}
.mh-mock-row{display:flex;flex-wrap:wrap;align-items:center;gap:14px;padding:18px 16px}
.mh-mock-cta{position:relative;padding:12px 18px;border-radius:8px;background:var(--mh-cta);color:#fff!important;
  font:600 13px/1 'Poppins',var(--ssc-ui);text-decoration:none!important}
.mh-mock-chip{position:relative;display:inline-flex;align-items:baseline;gap:5px;padding:8px 12px;border-radius:8px;
  background:rgba(96,165,250,.12);color:#93C5FD;font:600 11px/1 var(--mh-mono)}
.mh-mock-chip b{font:700 18px/1 'Poppins',var(--ssc-ui)}

/* FAQ */
.mh-qa{padding:14px 0;border-top:1px solid var(--mh-rule)}
.mh-qa:last-child{border-bottom:1px solid var(--mh-rule)}
.mh-qa h3{margin:0 0 6px;font:600 16px/1.4 var(--ssc-ui);color:var(--mh-navy)}
.mh-qa p{margin:0;color:#33415a}

/* closing CTA */
.mh-cta{margin:8px 0 28px;padding:30px 20px 24px;border-radius:16px;border:1px solid var(--mh-bd);text-align:center;color:var(--mh-tx);
  background:radial-gradient(120% 90% at 0% 100%,rgba(59,130,246,.18),transparent 60%),var(--mh-navy)}
.mh-cta h2{margin:0 0 18px;font-size:26px;color:#fff}
.mh-cta-btns{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.mh-cta .mh-btn--alt{border-color:var(--mh-acc);color:var(--mh-tx)!important}
.mh-cta .mh-btn--alt:hover{background:rgba(96,165,250,.12)}
.mh-slogan{margin:24px 0 6px;font:700 13px/1 'Poppins',var(--ssc-ui);letter-spacing:.28em;text-indent:.28em;text-transform:uppercase;color:#93C5FD}
.mh-updated{margin:0;font:11px/1.4 var(--mh-mono);letter-spacing:.06em;color:var(--mh-dim)}

@media (min-width:768px){
  .mh{padding:8px 0 32px}
  .mh-hero{padding:40px 44px 34px}
  .mh h1{font-size:44px;max-width:19ch}
  .mh-lead{font-size:17px;max-width:64ch}
  .mh-me{display:flex;flex-wrap:wrap;align-items:center;gap:6px 24px;padding:16px 20px}
  .mh-me-t,.mh-me-s{margin:0}
  .mh-me .mh-btn{margin:0 0 0 auto}
  .mh h2{font-size:31px}
  .mh-howgrid{grid-template-columns:1.05fr 1fr;align-items:center;gap:36px}
  .mh-cta{padding:40px 32px 30px}
  .mh-cta h2{font-size:32px}
}

/* showcase: the real §04 render (page/inc/nice_render.php + page/inc/nice_panel_css.php) on a fixed sample.
 * Inside .mh-stage the site's base context is restored (body 13px/1.1 #5c5c5c, letter-spacing -0.1rem, p break-all,
 * a #000) so the panel looks as it does on the auction and stock pages, where it inherits the same. */
.mh-intro{max-width:70ch;margin:0 0 16px}
.mh-show-grid{position:relative;display:grid;gap:18px}
.mh-shot{position:relative;margin:0;padding:12px;border-radius:18px;background:#e9eef6}
.mh-sample{margin:2px 4px 10px;text-align:right;font:600 10px/1.4 var(--mh-mono);letter-spacing:.12em;color:var(--mh-muted)}
.mh .mh-stage{position:relative;padding:14px 12px 16px;font-size:13px;line-height:1.1;color:#5c5c5c;letter-spacing:-0.1rem}
.mh .mh-stage p{word-break:break-all}
.mh .mh-stage a{color:#000}
.mh-stage #ssc-vhr{margin:0}
.mh-stage.is-short{max-height:1240px;overflow:hidden}
.mh-stage.is-short::after{content:"";position:absolute;left:0;right:0;bottom:0;z-index:3;height:140px;pointer-events:none;
  background:linear-gradient(rgba(233,238,246,0),#e9eef6 85%)}
/* the panel's own mono stack (nice_repair_panel.php); the shared CSS still names 'IBM Plex Mono', not loaded here */
.mh-stage #ssc-vhr .nr-sec,.mh-stage #ssc-vhr .nr-desc,.mh-stage #ssc-vhr .nr-stamp,.mh-stage #ssc-vhr .nr-qunit,
.mh-stage #ssc-vhr .nr-qsub,.mh-stage #ssc-vhr .nr-badge,.mh-stage #ssc-vhr .nr-vp-label,.mh-stage #ssc-vhr .nr-brc-hint,
.mh-stage #ssc-vhr .nr-card .sub,.mh-stage #ssc-vhr .nr-br-h,.mh-stage #ssc-vhr .nr-br-row,.mh-stage #ssc-vhr .nr-card .k,
.mh-stage #ssc-vhr .nr-card .v,.mh-stage #ssc-vhr .nr-chart-t,.mh-stage #ssc-vhr .nr-acc-head .y,.mh-stage #ssc-vhr .nr-acc-head .m,
.mh-stage #ssc-vhr .nr-when,.mh-stage #ssc-vhr .nr-work .prior,.mh-stage #ssc-vhr .nr-amt,.mh-stage #ssc-vhr .nr-sect-head,
.mh-stage #ssc-vhr .nr-more-o{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace}
.mh-marks{position:absolute;inset:0;z-index:2;pointer-events:none}
.mh-box{position:absolute;border:3px solid var(--mh-red);border-radius:12px;
  box-shadow:0 0 0 3px rgba(255,59,48,.14),0 0 18px rgba(255,59,48,.26)}
.mh-box i{position:absolute;top:-13px;right:-13px;width:26px;height:26px;border-radius:50%;background:var(--mh-red);color:#fff;
  font:700 13px/26px 'Poppins',var(--ssc-ui);font-style:normal;letter-spacing:normal;text-align:center;box-shadow:0 0 0 3px #e9eef6}
.mh-more{display:block;margin:12px auto 2px;min-height:40px;padding:10px 16px;border-radius:8px;border:1px solid var(--mh-cta);
  background:#fff;color:var(--mh-cta);font:600 13px/1 'Poppins',var(--ssc-ui);cursor:pointer}
.mh-more:hover{background:rgba(29,78,216,.06)}
.mh-shot figcaption{margin:10px 4px 2px;font-size:13px;line-height:1.5;color:var(--mh-muted)}
.mh-notes{display:grid;gap:10px;margin:0;padding:0;list-style:none}
.mh-notes li{display:flex;gap:12px;align-items:flex-start;padding:14px;border:1px solid var(--mh-rule);border-radius:12px;background:#fff;list-style:none}
.mh-notes h3{margin:0 0 4px;font:700 16px/1.3 var(--mh-serif);color:var(--mh-navy)}
.mh-notes p{margin:0;font-size:14.5px;line-height:1.55;color:#33415a}
.mh-lines{display:none}
.mh-show-end{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:18px 0 0}
@media (min-width:960px){
  .mh-show-grid{grid-template-columns:minmax(0,1fr) 290px;gap:48px;align-items:start}
  .mh-lines{display:block;position:absolute;left:0;top:0;z-index:4;overflow:visible;pointer-events:none;
    fill:var(--mh-red);stroke:var(--mh-red);stroke-width:1.5;stroke-opacity:.8}
  .mh-lines path{fill:none}
  .mh-lines path.h{stroke:#fff;stroke-width:4;stroke-opacity:.85}
  .mh-notes{padding-top:46px}
}

/* 하단 네비게이션 — page/company.php 101~110행 바이트 사본(다른 페이지들과 동일 .bottom-nav) */
body{padding-bottom:74px}
.bottom-nav{position:fixed;bottom:0;left:0;transform:none;width:100vw;max-width:none;background:rgba(255,255,255,.96);border:1px solid rgba(26,26,46,.08);border-radius:0;display:flex;justify-content:space-between;align-items:center;padding:10px 0 calc(12px + env(safe-area-inset-bottom));gap:4px;z-index:1000;box-shadow:0 14px 32px rgba(26,26,46,.14)}
.bottom-nav .nav-item{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:8px 4px;text-decoration:none;color:#5c5c7a;font-weight:500;transition:color .2s,transform .15s}
.bottom-nav .nav-item:hover,.bottom-nav .nav-item.active{color:#3f51ff}
.bottom-nav .nav-item:active{transform:scale(.97)}
.bottom-nav .nav-item .icon{width:28px;height:28px;display:flex;align-items:center;justify-content:center}
.bottom-nav .nav-item .icon svg{width:100%;height:100%;fill:currentColor}
.bottom-nav .nav-item .label{font-size:12px;letter-spacing:.2px;line-height:1.2}
@media(min-width:768px){.bottom-nav{left:50%;transform:translateX(-50%);width:min(100%,1100px);max-width:1100px;border-radius:8px 8px 0 0}.bottom-nav .nav-item .icon{width:30px;height:30px}.bottom-nav .nav-item .label{font-size:13px}}