/* 계산기·비교 도구 공통 카드. 페이지별 배치는 common/pages/에서 관리합니다. */
:where(.nf-tool-page) .sailor-card, :where(.nf-tool-page) .gun-range-card, :where(.nf-tool-page) .veteran-card, :where(.nf-tool-page) .catalog-card, :where(.nf-tool-page) .comparator-card { border: var(--nf-card-border); box-shadow: var(--nf-card-shadow); }
:where(.nf-tool-page) .sailor-card .card-header, :where(.nf-tool-page) .gun-range-card .card-header, :where(.nf-tool-page) .veteran-card .card-header, :where(.nf-tool-page) .catalog-card .card-header, :where(.nf-tool-page) .comparator-card .card-header { background: var(--nf-card-header-background); color: #fff; font-weight: 700; }
:where(.nf-tool-page) .step-number, :where(.nf-tool-page) .gun-range-number, :where(.nf-tool-page) .veteran-step-number { color: var(--nf-step-color); margin-right: .35rem; }

/* 연사상한·음탐상한 공통 UI. */
.nf-cap-calculator { --cap-navy: #142b3d; --cap-border: #c8d1d9; --cap-muted: #64717d; }
:where(.nf-cap-calculator) .cap-page { max-width:1540px; margin:0 auto; }
:where(.nf-cap-calculator) .cap-hero { display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:.75rem; margin:1rem 0 .75rem; }
:where(.nf-cap-calculator) .cap-hero h1 { margin:0; color:var(--cap-navy); font-size:clamp(1.45rem,2.5vw,2rem); }
:where(.nf-cap-calculator) .cap-hero p { max-width:var(--cap-hero-description-width); margin:.3rem 0 0; color:var(--cap-muted); }
:where(.nf-cap-calculator) .cap-server-badge { padding:.4rem .7rem; border:1px solid #9eb7c8; border-radius:999px; background:#eaf3f8; color:#194d6e; font-size:.82rem; font-weight:700; }
:where(.nf-cap-calculator) .cap-card { border:var(--nf-card-border); box-shadow:var(--nf-card-shadow-soft); }
:where(.nf-cap-calculator) .cap-card > .card-header { background:var(--nf-card-header-background); color:#fff; font-weight:700; }
:where(.nf-cap-calculator) .cap-setup-header { display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; }
:where(.nf-cap-calculator) .cap-language-switch { display:flex; margin-left:auto; }
:where(.nf-cap-calculator) .cap-language-switch .btn { padding:.18rem .5rem; font-size:.75rem; line-height:1.2; }
:where(.nf-cap-calculator) .cap-config-grid { display:grid; grid-template-columns:minmax(130px,.55fr) minmax(165px,.75fr) minmax(300px,1.8fr) minmax(230px,1.2fr) minmax(210px,1fr); gap:.65rem; align-items:end; }
:where(.nf-cap-calculator) .cap-field label { display:block; margin-bottom:.25rem; color:#43515d; font-size:.79rem; font-weight:700; }
:where(.nf-cap-calculator) .cap-field > .form-select { min-height:2.125rem; padding-top:.25rem; padding-bottom:.25rem; font-size:.875rem; line-height:1.4; }
:where(.nf-cap-calculator) .preset-custom-toggle { min-height:2.125rem; padding-top:.25rem; padding-bottom:.25rem; font-size:.875rem; line-height:1.4; }
:where(.nf-cap-calculator) #nation.selection-required { border-color:#e5a5b5; background-color:#fce4ec; }
:where(.nf-cap-calculator) .path-preset-heading { display:flex; min-height:1.25rem; align-items:center; justify-content:space-between; gap:.35rem; margin-bottom:.25rem; }
:where(.nf-cap-calculator) .path-preset-heading label { margin:0; }
:where(.nf-cap-calculator) .path-filter-buttons .btn { padding:.08rem .35rem; font-size:.68rem; line-height:1.2; }
:where(.nf-cap-calculator) .preset-custom-toggle { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.65fr); align-items:center; gap:.35rem; width:100%; overflow:hidden; text-align:left; }
:where(.nf-cap-calculator) .preset-custom-menu { width:max-content; min-width:100%; max-width:min(72rem,calc(100vw - 2rem)); max-height:24rem; overflow:auto; }
:where(.nf-cap-calculator) .preset-custom-menu.show { display:grid; grid-template-columns:max-content max-content; column-gap:.35rem; }
:where(.nf-cap-calculator) .preset-path-option { display:grid; grid-column:1 / -1; grid-template-columns:subgrid; align-items:center; min-width:100%; padding-right:.55rem; padding-left:.55rem; text-align:left; white-space:nowrap; }
:where(.nf-cap-calculator) .preset-path-class { overflow:hidden; text-overflow:ellipsis; font-size:.875rem; font-weight:400; }
:where(.nf-cap-calculator) .preset-path-route { overflow:hidden; color:#6c757d; font-size:.72rem; font-weight:400; text-overflow:ellipsis; white-space:nowrap; }
:where(.nf-cap-calculator) .preset-custom-placeholder { grid-column:1 / -1; color:#6c757d; }
:where(.nf-cap-calculator) .preset-path-option.active .preset-path-route { color:rgba(255,255,255,.82); }
:where(.nf-cap-calculator) .cap-status { margin:.65rem 0 0; padding:.42rem .65rem; font-size:.8rem; }
:where(.nf-cap-calculator) .class-change-flow { display:flex; align-items:stretch; gap:1.55rem; overflow-x:auto; margin-bottom:.7rem; padding:.15rem .05rem .45rem; }
:where(.nf-cap-calculator) .class-change-node { position:relative; display:flex; flex:0 0 172px; min-height:72px; flex-direction:column; justify-content:center; padding:.55rem .65rem; border:1px solid #aebbc6; border-radius:.45rem; background:#f7fafc; box-shadow:0 .15rem .35rem rgba(20,43,61,.08); }
:where(.nf-cap-calculator) .class-change-node:not(:last-child)::after { position:absolute; top:50%; left:calc(100% + .3rem); width:.95rem; height:2px; background:#8799a7; content:""; }
:where(.nf-cap-calculator) .class-change-node:not(:last-child)::before { position:absolute; z-index:1; top:calc(50% - 4px); left:calc(100% + 1.13rem); border-width:5px 0 5px 7px; border-style:solid; border-color:transparent transparent transparent #8799a7; content:""; }
:where(.nf-cap-calculator) .class-change-node.is-late { border-color:#d5b45c; background:#fff8d6; }
:where(.nf-cap-calculator) .class-change-name { color:#20394c; font-size:.8rem; font-weight:700; line-height:1.25; }
:where(.nf-cap-calculator) .class-change-level { margin-top:.28rem; color:#64717d; font-size:.7rem; line-height:1.2; }
:where(.nf-cap-calculator) .path-table-wrap { overflow:auto; border:1px solid var(--cap-border); border-radius:.35rem; }
:where(.nf-cap-calculator) .path-table { min-width:1470px; margin:0; font-size:.76rem; }
:where(.nf-cap-calculator) .path-table th { padding:.3rem .4rem!important; text-align:center; vertical-align:middle; white-space:nowrap; }
:where(.nf-cap-calculator) .path-table td { padding:.3rem .4rem!important; text-align:center; vertical-align:middle; white-space:nowrap; }
:where(.nf-cap-calculator) .path-table th:nth-child(2) { min-width:160px; text-align:left; }
:where(.nf-cap-calculator) .path-table td:nth-child(2) { min-width:160px; text-align:left; }
:where(.nf-cap-calculator) .path-table .form-check-input { width:1.05rem; height:1.05rem; margin:0; }
:where(.nf-cap-calculator) .path-stage-late > * { --bs-table-accent-bg:#fff8d6; background-color:#fff8d6!important; }
:where(.nf-cap-calculator) .matrix-wrap { overflow:auto; border:1px solid var(--cap-border); border-radius:.35rem; }
:where(.nf-cap-calculator) .cap-matrix { min-width:1180px; margin:0; table-layout:fixed; }
:where(.nf-cap-calculator) .cap-matrix th { border-color:#bcc6ce; vertical-align:middle; }
:where(.nf-cap-calculator) .cap-matrix td { border-color:#bcc6ce; vertical-align:middle; }
:where(.nf-cap-calculator) .cap-matrix thead th { padding:.3rem; background:#eef3f6; text-align:center; }
:where(.nf-cap-calculator) .cap-matrix thead th:first-child { width:190px; }
:where(.nf-cap-calculator) .cap-matrix tbody th { position:sticky; left:0; z-index:1; width:190px; padding:.35rem; background:#f5f7f8; text-align:left; }
:where(.nf-cap-calculator) .axis-title { display:block; color:#21394a; font-size:.74rem; font-weight:700; }
:where(.nf-cap-calculator) .axis-control { display:flex; align-items:center; justify-content:center; gap:.25rem; margin-top:.25rem; }
:where(.nf-cap-calculator) .axis-control .form-control { width:72px; min-height:1.8rem; padding:.1rem .3rem; text-align:center; font-size:.8rem; }
:where(.nf-cap-calculator) .matrix-details-toggle { display:inline-flex; align-items:center; gap:.25rem; margin-top:.3rem; color:#53636f; font-size:.68rem; font-weight:600; cursor:pointer; }
:where(.nf-cap-calculator) .matrix-details-toggle .form-check-input { width:.9rem; height:.9rem; margin:0; }
:where(.nf-cap-calculator) .matrix-corner-title { display:block; color:#21394a; font-size:.8rem; font-weight:800; line-height:1.3; }
:where(.nf-cap-calculator) .cap-cell { height:64px; padding:.15rem .3rem!important; text-align:center; transition:background-color .18s ease,height .18s ease; }
:where(.nf-cap-calculator) .show-cell-details .cap-cell { height:108px; }
:where(.nf-cap-calculator) .cap-progress { display:block; color:#142f40; font-size:.95rem; font-weight:800; font-variant-numeric:tabular-nums; }
:where(.nf-cap-calculator) .cap-progress.cap-reached { color:#156235; }
:where(.nf-cap-calculator) .cap-detail { display:block; margin-top:.15rem; color:#3f4d57; font-size:.72rem; line-height:1.3; font-variant-numeric:tabular-nums; }
:where(.nf-cap-calculator) .cap-extra-detail { display:none; }
:where(.nf-cap-calculator) .show-cell-details .cap-extra-detail { display:block; }
:where(.nf-cap-calculator) .cap-repair-speed { margin-top:.35rem; color:#3f4d57; font-size:.82rem; font-weight:800; }
:where(.nf-cap-calculator) .target-matrix-section { margin-top:1.5rem; padding-top:1.15rem; border-top:1px solid #d5dce2; }
:where(.nf-cap-calculator) .target-matrix-title { margin:0 0 .55rem; color:#20394c; font-size:1rem; font-weight:800; }
:where(.nf-cap-calculator) .target-cell { background:#eef6fb; }
:where(.nf-cap-calculator) .target-cell .cap-progress { color:#156235; }
:where(.nf-cap-calculator) .cap-unavailable { background:#e3e6e8!important; color:#69737b; }
:where(.nf-cap-calculator) .cap-unavailable .cap-progress { color:#69737b; }
:where(.nf-cap-calculator) .color-legend { display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; margin-top:.6rem; color:#66727d; font-size:.74rem; }
:where(.nf-cap-calculator) .legend-bar { width:180px; height:.7rem; border:1px solid #b9c1c8; border-radius:999px; background:linear-gradient(90deg,#f8d4d4 0%,#fff0b8 50%,#d4f2d9 100%); }
:where(.nf-cap-calculator) .matrix-summary { display:grid; grid-template-columns:repeat(var(--cap-summary-columns),minmax(105px,1fr)); gap:.4rem; margin-bottom:.65rem; }
:where(.nf-cap-calculator) .matrix-summary-item { min-width:0; padding:.45rem .55rem; border:1px solid #d2dae1; border-radius:.4rem; background:#f8fafb; }
:where(.nf-cap-calculator) .matrix-summary-label { display:block; margin-bottom:.12rem; color:#71808b; font-size:.63rem; font-weight:700; letter-spacing:.035em; line-height:1.15; text-transform:uppercase; }
:where(.nf-cap-calculator) .matrix-summary-value { display:block; overflow:hidden; color:#263f51; font-size:.78rem; font-weight:700; line-height:1.25; text-overflow:ellipsis; white-space:nowrap; }
:where(.nf-cap-calculator) .matrix-controls { display:flex; flex-wrap:wrap; align-items:end; gap:.55rem 1rem; margin-bottom:.65rem; padding:.55rem .65rem; border:1px solid #d5dce2; border-radius:.35rem; background:#f7f9fa; }
:where(.nf-cap-calculator) .matrix-controls label { display:block; margin-bottom:.2rem; color:#43515d; font-size:.76rem; font-weight:700; }
:where(.nf-cap-calculator) .matrix-controls .form-control { width:110px; }
:where(.nf-cap-calculator) .matrix-controls .form-text { margin:0 0 .25rem; font-size:.72rem; }
:where(.nf-cap-calculator) .veteran-preset-heading { display:flex; align-items:center; justify-content:space-between; gap:.5rem; margin-bottom:.2rem; }
:where(.nf-cap-calculator) .veteran-preset-heading label { margin:0; }
@media (max-width:991.98px) {
:where(.nf-cap-calculator) .cap-config-grid { grid-template-columns:1fr 1fr; }
:where(.nf-cap-calculator) .matrix-summary { grid-template-columns:repeat(2,minmax(105px,1fr)); }
}
@media (max-width:575.98px) {
:where(.nf-cap-calculator) .cap-config-grid { grid-template-columns:1fr; }
:where(.nf-cap-calculator) .cap-page { padding-right:.35rem!important; padding-left:.35rem!important; }
}