/* TarkovBoard main/box/panelSurface/dashboard의 범용 shell과 패널 규약을 선별 이식. */
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.8/dist/web/variable/pretendardvariable-dynamic-subset.css");

:root {
    color-scheme: light;
    --site-panel-line: rgba(255, 255, 255, 0.15);
    --site-panel-background: rgba(59, 64, 77, 0.84);
    --site-panel-accent: rgba(79, 212, 238, 0.045);
    --site-card-background: rgba(51, 56, 67, 0.68);
    --site-panel-shadow: inset 0 0 0 1px var(--site-panel-line), 0 12px 30px rgba(0, 0, 0, 0.12);
    --dashboard-control-panel: rgba(91, 98, 113, 0.36);
    --muted: #acb4c0;
}

:root[data-theme="dark"] {
    color-scheme: dark;
    --site-panel-line: rgba(255, 255, 255, 0.11);
    --site-panel-background: rgba(25, 29, 37, 0.92);
    --site-panel-accent: rgba(79, 212, 238, 0.026);
    --site-card-background: rgba(18, 22, 29, 0.84);
    --site-panel-shadow: inset 0 0 0 1px var(--site-panel-line), 0 14px 34px rgba(0, 0, 0, 0.24);
    --dashboard-control-panel: rgba(27, 32, 42, 0.68);
}

* { box-sizing: border-box; }
html { background: #111; scroll-behavior: smooth; }
body { margin: 0; color: #f3f3f3; font-family: "Pretendard Variable", Pretendard, system-ui, sans-serif; line-height: 1.4; }
.dashboard-body { background: #111; isolation: isolate; }
.dashboard-body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    background: linear-gradient(rgba(7, 10, 16, .28), rgba(7, 10, 16, .4)), url("image/background_1.webp") center / cover no-repeat;
}
.site-shell-container { width: min(100% - 1.5rem, 1600px); max-width: 1600px; margin-inline: auto; }
.site-header { text-align: center; padding: 30px 0 10px; }
.site-logo-link { display: inline-block; color: #fff; text-decoration: none; }
#logo { height: clamp(4rem, calc(1rem + 6.25vw), 8.5rem); width: auto; max-width: 85vw; object-fit: contain; }
.menu-icon { width: 1rem; height: 1rem; vertical-align: middle; object-fit: contain; }
#supportDiscordLink img { width: 1.15em; height: 1.15em; border-radius: 50%; }
.site-logo { margin: 0; line-height: 1.05; text-align: center; }
.site-logo span { display: block; font-size: clamp(22px, 2.3vw, 32px); font-weight: 500; letter-spacing: -.06em; }
.site-logo strong { display: block; font-size: clamp(36px, 3.7vw, 52px); font-weight: 900; letter-spacing: -.06em; }
#lastRefreshTimeContainer { display: flex; justify-content: space-between; align-items: center; gap: .75rem; padding: 0 1rem; margin-top: .1rem; margin-bottom: .55rem; font-size: calc(.75rem + .15vw); }
#supportDiscordLink { display: inline-flex; gap: .45rem; color: #b8d9ff; min-width: 0; }
.freshness { color: #aaa; text-align: right; }
.freshness strong { color: #f5c678; }
.site-panel {
    color: #fff;
    background: radial-gradient(circle at 10% 0%, var(--site-panel-accent), transparent 30%), var(--site-panel-background);
    background-clip: padding-box;
    box-shadow: var(--site-panel-shadow);
}
.box { padding: 1rem; position: relative; border: clamp(6px, .7vw, 10px) solid transparent; border-radius: clamp(16px, 1.4vw, 20px); }
.box h2 { margin: 0 0 .85rem; font-size: clamp(18px, 1.5vw, 21px); font-weight: 700; letter-spacing: -.02em; text-align: center; }
.menulist { display: flex; flex-wrap: wrap; align-items: center; padding: .5rem .5rem .5rem calc(.75rem + 1vw); gap: .35rem .5rem; margin-bottom: .15rem; }
.menu { color: #a5a9b1; text-decoration: none; font-weight: 700; padding: .45rem .75rem; border-radius: 6px; font-size: calc(.85rem + .15vw); }
.menu.active { color: #fff; background: rgba(255, 255, 255, .065); box-shadow: inset 0 -2px #b88aae; }
.menu:hover { color: #fff; background: rgba(255, 255, 255, .05); }
.top-summary-row { display: grid; grid-template-columns: 1fr 2fr; }
.summary-panel { display: flex; flex-direction: column; text-align: center; }
.summary-primary { margin: .35rem 0 1rem; }
.summary-primary p, .summary-types p { margin: 0 0 .25rem; color: var(--muted); }
.summary-primary strong { font-size: clamp(28px, 2.6vw, 40px); font-weight: 700; font-variant-numeric: tabular-nums; }
.summary-primary span { color: var(--muted); margin-left: .3rem; }
.summary-types { display: flex; justify-content: center; gap: 2.5rem; margin: .3rem 0; }
.summary-types strong { font-size: 1.1rem; font-weight: 600; }
.panel-description { margin: .65rem 0 0; color: #8b929f; font-size: calc(.72rem + .1vw); text-align: center; }
.summary-panel .panel-description { margin-top: auto; padding-top: 1.1rem; }
.region-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; }
.region-card { color: #f3f3f3; display: block; text-align: center; text-decoration: none; font-size: .92rem; padding: .25rem; border-radius: 7px; line-height: 1.35; }
.region-card:hover { background: var(--site-card-background); }
.region-card strong { color: #b9bdc7; display: block; font-weight: 500; margin-bottom: .15rem; }
.region-card span { display: block; }
.region-card .region-players { color: #b1cdd2; font-size: .82rem; }
.region-card small { display: block; color: #f5c678; font-size: .7rem; }
.server-panel { margin-top: .15rem; scroll-margin-top: 12px; }
.dashboard-control-strip { display: flex; align-items: end; gap: .5rem; padding: .5rem; border: 1px solid rgba(255, 255, 255, .18); border-radius: 12px; background: var(--dashboard-control-panel); }
label { display: flex; flex-direction: column; gap: .3rem; font-size: .8rem; color: #b9bdc7; }
.search-label { flex: 1; min-width: 0; }
input, select { border: 1px solid #979da6; border-radius: 5px; color: #f3f3f3; background: transparent; min-height: 38px; font: inherit; font-size: .95rem; padding: .4rem .65rem; }
select option { background: #242a35; color: #fff; }
button { border: 1px solid #c1c7cd; border-radius: 5px; min-height: 38px; padding: .35rem 1.5rem; color: #f3f3f3; background: transparent; font: inherit; cursor: pointer; }
button:hover { background: #f3f3f3; color: #171b23; }
.reset-link { padding: .5rem; color: #b9bdc7; font-size: .8rem; }
.result-count { font-size: .8rem; color: var(--muted); margin: .9rem 0; }
.table-scroll { overflow-x: auto; border-radius: 8px; border: 1px solid var(--site-panel-line); }
table { width: 100%; border-collapse: collapse; min-width: 940px; font-size: .88rem; text-align: left; }
th { color: #c9ced6; font-weight: 600; background: var(--dashboard-control-panel); }
td, th { padding: .55rem .7rem; border-bottom: 1px solid var(--site-panel-line); }
td:first-child { min-width: 250px; max-width: 380px; overflow-wrap: anywhere; }
td:nth-child(2), td:nth-child(3) { white-space: nowrap; }
td:last-child { min-width: 180px; white-space: nowrap; }
td small { display: block; color: var(--muted); font-size: .73rem; margin-top: .2rem; }
td time { font-size: .73rem; }
td strong { font-weight: 500; }
footer { text-align: center; padding: 1rem 1.5rem 2rem; font-size: .78rem; color: #a8a8a8; }
footer p { margin: .35rem 0; }
.footer-legal-notice, .attribution { font-size: .68rem; color: #888; }
footer a { color: #a4b4c2; }
.footer-theme-toggle { margin: 1rem auto 0; width: 38px; height: 38px; padding: 0; border-radius: 8px; border: 1px solid #888; }
.footer-social img { width: .9rem; height: .9rem; object-fit: contain; vertical-align: middle; }
.footer-preferences { display: flex; justify-content: center; align-items: center; gap: .7rem; margin-top: .8rem; }
.footer-preferences .footer-theme-toggle { margin: 0; }
.language-link { border: 1px solid #888; border-radius: 6px; padding: .45rem .7rem; text-decoration: none; }
.gold-panel { text-align: center; display: flex; flex-direction: column; justify-content: center; }
.gold-label, .quote-date { color: var(--muted); font-size: .85rem; }
.gold-price { color: #f3d793; font-size: clamp(28px, 2.7vw, 36px); margin: .2rem 0; font-variant-numeric: tabular-nums; }
.gold-change { font-size: .85rem; margin: .3rem 0; }
.positive { color: #86d5a4; }
.negative { color: #f6979d; }
.comparison-status { font-size: .75rem; color: #acc8d0; }
.gold-panel .panel-description { margin-top: 1rem; }
.panel-description a { color: #b8d9ff; }
.converter-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; gap: .55rem; }
.converter-grid input { width: 100%; }
.conversion-result { text-align: center; }
.conversion-result span, .conversion-result strong { display: block; }
.conversion-result span { color: var(--muted); font-size: .8rem; }
.conversion-result strong { font-size: 1.25rem; }
.equipment-table a, .equipment-panel td a { color: #d5e9f8; text-decoration: none; }
.equipment-table td:last-child { white-space: normal; }
.equipment-table td small { white-space: normal; }
.notice { color: #f5c678; }
.compact-notice { margin: .5rem 1rem; font-size: .8rem; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, .table-scroll:focus-visible { outline: 2px solid #b8d9ff; outline-offset: 3px; }
@media (max-width: 767.98px) {
    .site-header { padding-top: 24px; }
    .top-summary-row { grid-template-columns: 1fr; }
    .box { padding: .8rem; }
    .menulist { padding: .5rem; }
    .menu { padding: .4rem .5rem; font-size: .78rem; }
    .summary-primary { margin-bottom: .65rem; }
    .summary-panel .panel-description { margin-top: .6rem; }
    .region-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dashboard-control-strip { flex-wrap: wrap; }
    .dashboard-control-strip label { width: 100%; flex: auto; }
    #lastRefreshTimeContainer { padding: 0 .5rem; align-items: start; }
    #supportDiscordLink { flex-shrink: 0; font-size: .68rem; }
    .freshness { font-size: .68rem; }
    .converter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .gold-price { font-size: 30px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* 게임 사진과 비교 수치를 같은 시선 흐름에 배치한다. */
.box h2.visual-heading { display: flex; align-items: center; justify-content: center; gap: .4rem; }
.visual-heading img { object-fit: contain; flex: 0 0 22px; width: 22px; height: 22px; }
.category-grid { display: flex; flex-wrap: wrap; gap: .35rem; margin: .6rem 0; }
.category-card { display: inline-flex; align-items: center; gap: .35rem; min-height: 34px; padding: .3rem .55rem; border-color: var(--site-panel-line); background: var(--site-card-background); }
.category-card img { object-fit: contain; width: 18px; height: 18px; }
.category-card strong { font-size: .78rem; font-weight: 500; }
.category-card span { color: var(--muted); font-size: .7rem; }
.category-card[aria-pressed="true"], .local-tabs [aria-selected="true"] { background: rgba(163, 177, 194, .18); border-color: #aabacc; color: #fff; }
.section-subtitle { margin: .7rem 0 .5rem; font-size: 1rem; color: #d5dfe9; }
.equipment-card-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .6rem; }
.equipment-card { border: 1px solid var(--site-panel-line); border-radius: 10px; background: var(--site-card-background); padding: .65rem; min-width: 0; }
.equipment-card-image { display: block; border-radius: 6px; background: radial-gradient(ellipse, rgba(127, 142, 165, .12), transparent 70%); }
.item-media { display: flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 100px; height: 64px; min-width: 0; min-height: 0; overflow: hidden; }
.item-media img { display: block; object-fit: contain; width: 100%; height: 64px; min-width: 0; min-height: 0; }
.equipment-card .item-media { width: 100%; height: 80px; }
.equipment-card .item-media img { height: 80px; }
.image-placeholder { display: none; color: #7d8898; font-size: 1.8rem; }
.image-unavailable .image-placeholder { display: block; }
.image-unavailable img { display: none; }
img[hidden] { display: none !important; }
.source-state { color: #d8bb83; font-size: .75rem; text-align: center; margin: .3rem 0 .6rem; }
.equipment-card-heading { display: flex; align-items: start; justify-content: space-between; gap: .4rem; margin: .4rem 0; }
.equipment-card h3 { margin: 0; font-size: .92rem; font-weight: 700; }
.item-price { color: #e7d9aa; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.item-identity { display: flex; align-items: center; gap: .6rem; }
.stat-chips { display: flex; flex-wrap: wrap; gap: .35rem; }
.stat-chips span { display: inline-block; border: 1px solid rgba(178, 193, 210, .14); border-radius: 5px; padding: .15rem .4rem; font-size: .75rem; color: #bbcdda; background: rgba(64, 77, 94, .15); }
.item-specs { color: var(--muted); font-size: .75rem; margin-top: .6rem; }
.item-specs summary { cursor: pointer; color: #bccbdb; }
.item-specs dl { margin: .6rem 0 0; }
.item-specs dl > div { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: .2rem; }
.item-specs dt { font-weight: 400; }
.item-specs dd { margin: 0; color: #e2e8ef; white-space: nowrap; }
.role-experience { margin: .65rem 0; }
.role-card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .65rem; }
.role-card { display: flex; flex-direction: column; gap: .25rem; padding: .6rem; border: 1px solid var(--site-panel-line); border-radius: 8px; background: var(--site-card-background); }
.role-card > span, .role-card small { color: var(--muted); font-size: .75rem; }
.role-card b { color: #b6d6ed; font-size: 1.1rem; }
@media (max-width: 767.98px) {
    .equipment-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .equipment-card { padding: .7rem; }
    .equipment-card .item-media { height: 72px; }
    .equipment-card .item-media img { height: 72px; }
    .equipment-card-heading { flex-direction: column; gap: .3rem; }
    .role-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 420px) { .equipment-card-heading { align-items: start; } }

/* 타르코프처럼 패널 안에서 선택·조회한다. 메뉴는 페이지 이동만 담당한다. */
[hidden] { display: none !important; }
.gold-panel { justify-content: start; }
.gold-label { margin: .15rem 0; }
.gold-price { line-height: 1.2; }
.gold-panel > .notice { margin: .3rem 0; font-size: .75rem; }
.quote-date { margin: .3rem 0; font-size: .75rem; }
.source-details { color: var(--muted); font-size: .72rem; margin: .25rem 0; }
.source-details summary { cursor: pointer; }
.source-details p { margin: .35rem 0; }
.gold-panel > .panel-description { margin: .35rem 0 .5rem; }
.converter-panel { border-top: 1px solid var(--site-panel-line); padding-top: .65rem; margin-top: auto; }
.converter-panel h3 { display: flex; align-items: center; justify-content: center; gap: .4rem; margin: 0 0 .6rem; font-size: .95rem; }
.conversion-result strong { font-size: 1.05rem; margin-top: .15rem; }
.equipment-toolbar { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .5rem; }
.local-tabs { display: flex; gap: .3rem; }
.local-tabs button { min-height: 36px; padding: .35rem .8rem; border-color: var(--site-panel-line); font-size: .85rem; }
.toolbar-note { color: var(--muted); font-size: .75rem; }
.level-field { max-width: 110px; }
.reset-control { font-size: .8rem; padding-inline: .65rem; border-color: var(--site-panel-line); }
.search-status { color: var(--muted); font-size: .75rem; min-height: 1.05rem; margin: .4rem 0; }
.search-status:empty { display: none; }
#equipment-results .result-count { margin: .55rem 0; }
#equipment-results table { min-width: 580px; }
#equipment-results[aria-busy="true"] { opacity: .65; }
.equipment-card-heading { flex-direction: column; gap: .2rem; }
.equipment-card .stat-chips span { font-size: .7rem; padding: .1rem .3rem; }
.equipment-card .item-price { font-size: .88rem; }
@media (min-width: 768px) and (max-width: 1050px) {
    .equipment-card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 767.98px) {
    #equipment-search { display: grid; grid-template-columns: 1fr 1fr; }
    #equipment-search .search-label { grid-column: 1 / -1; }
    #equipment-search .level-field { max-width: none; }
    .equipment-toolbar { flex-wrap: wrap; }
    .toolbar-note { display: none; }
    .category-card { min-height: 36px; padding: .25rem .45rem; }
    .category-card span { display: none; }
    .equipment-card h3 { font-size: .85rem; overflow-wrap: anywhere; }
}

.resources-intro { margin: 0 0 1rem; color: var(--muted); text-align: center; font-size: .85rem; }
.resources-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; }
.resources-grid article { padding: .8rem; border: 1px solid var(--site-panel-line); border-radius: 8px; background: var(--site-card-background); }
.resources-panel h3 { margin: 0 0 .45rem; font-size: 1rem; }
.resources-panel p, .resources-panel li { font-size: .85rem; line-height: 1.55; }
.resources-grid p { margin: 0; color: #bdc6d1; }
.resources-panel a { color: #b8d9ff; }
.resources-notes { margin-top: 1.1rem; }
.resources-notes ul { margin: .5rem 0; padding-left: 1.2rem; }
.resources-notes li { margin-bottom: .35rem; }
@media (max-width: 767.98px) { .resources-grid { grid-template-columns: 1fr; } }

/* 시세 추이 대신 전체 접속자와 지역별 현황을 같은 패널에서 확인한다. */
.regional-status-panel { min-width: 0; }
.online-summary { display: flex; justify-content: center; align-items: center; gap: 2.5rem; margin: 0 0 .85rem; padding-bottom: .75rem; border-bottom: 1px solid var(--site-panel-line); text-align: center; }
.online-summary > div > span { color: var(--muted); font-size: .78rem; }
.online-summary p { margin: .15rem 0 0; line-height: 1.2; white-space: nowrap; }
.online-summary strong { font-size: 1.6rem; font-variant-numeric: tabular-nums; }
.online-summary > div:first-child strong { color: #c1dde8; }
.online-summary small { color: var(--muted); font-size: .78rem; }
.regional-status-panel .region-grid { gap: .4rem; }
.regional-status-panel .region-card { padding: .45rem .3rem; background: var(--site-card-background); }
.regional-status-panel .region-card h3 { margin: 0 0 .2rem; color: #bac5d2; font-size: .78rem; font-weight: 500; }
.regional-status-panel .region-card p { margin: 0; font-size: .78rem; color: var(--muted); }
.regional-status-panel .region-card strong, .regional-status-panel .region-card b { display: inline; margin: 0; font-size: inherit; font-weight: 500; font-variant-numeric: tabular-nums; }
.regional-status-panel .region-card strong { color: #c1dde8; }
.regional-status-panel .region-card span { display: inline; }
.regional-status-panel .region-divider { margin: 0 .35rem; color: #7f8997; }
.regional-unavailable { text-align: center; color: var(--muted); font-size: .85rem; }
@media (max-width: 767.98px) {
    .online-summary { gap: 1.5rem; }
    .online-summary strong { font-size: 1.4rem; }
}

.region-map-scroll { overflow-x: auto; border-radius: 10px; background: rgba(7, 15, 23, .16); scrollbar-width: thin; scrollbar-color: #758b99 transparent; }
.region-map-scroll:focus-visible { outline: 2px solid #b8d9ff; outline-offset: 3px; }
.region-map { position: relative; min-width: 760px; aspect-ratio: 1000 / 520; }
.region-world-map, .region-map-pins { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.region-map-pins line { stroke: #a4d0dc; stroke-width: 1; opacity: .65; vector-effect: non-scaling-stroke; }
.region-map-pins circle { fill: #b6e0e8; stroke: #253d49; stroke-width: 2; }
.regional-status-panel .region-map-card { position: absolute; width: 14%; transform: translate(-50%, -50%); padding: .35rem .2rem; border: 1px solid rgba(169, 201, 215, .25); border-radius: 6px; background: #29323e; box-shadow: 0 2px 8px rgba(0, 0, 0, .16); }
.regional-status-panel .region-map-card h3 { font-size: .73rem; line-height: 1.15; }
.regional-status-panel .region-map-card p { font-size: .7rem; line-height: 1.3; white-space: nowrap; }
.regional-status-panel .region-map-card .region-divider { margin: 0 .2rem; }
:root[data-theme="dark"] .region-map-card { background: #19222d; }
html[lang="en"] .region-map-card p > span:last-child { display: block; }
html[lang="en"] .region-map-card .region-divider { display: none; }
.unmapped-regions { margin-top: .5rem; }

.regional-status-panel { --heat-card-background: #29323e; }
:root[data-theme="dark"] .regional-status-panel { --heat-card-background: #19222d; }
.regional-status-panel .region-card[data-heat] { overflow: hidden; border-color: color-mix(in srgb, var(--region-color) 65%, transparent); background: linear-gradient(color-mix(in srgb, var(--region-color) 12%, transparent), color-mix(in srgb, var(--region-color) 4%, transparent)), var(--heat-card-background); }
.regional-status-panel .region-card[data-heat] strong { color: var(--region-color); font-weight: 700; }
.region-heat-meter { position: absolute; bottom: 0; left: 0; height: 2px; width: var(--region-fill); background: var(--region-color); border-radius: 0 2px 2px 0; }
.unmapped-regions .region-card { position: relative; border: 1px solid; }
.region-map-pins line { stroke: var(--region-color); }
.region-map-pins .region-map-dot { fill: var(--region-color); }
.region-map-pins .region-map-glow { fill: var(--region-color); stroke: none; opacity: .32; filter: blur(3px); }

.gold-history { position: relative; flex: 1; min-height: 200px; margin: .8rem 0; }
.gold-periods { display: flex; gap: .3rem; margin-top: .35rem; }
.gold-periods button { flex: 1; min-height: 28px; padding: .2rem .3rem; font-size: .75rem; color: var(--muted); border: 1px solid var(--site-panel-line); background: transparent; }
.gold-periods button[aria-pressed="true"], .gold-periods button:hover { color: #f3d793; border-color: #bba16b; background: rgba(231, 199, 124, .13); }
#goldChart { position: absolute; inset: 0; width: 100%; height: 100%; display: block; border-radius: 6px; }
#goldChart:focus-visible { outline: 2px solid #b8d9ff; outline-offset: 2px; }
.gold-chart-tooltip { position: absolute; top: 0; right: .2rem; z-index: 1; padding: .3rem .5rem; border: 1px solid var(--site-panel-line); border-radius: 5px; background: #202733; color: #f3d793; font-size: .72rem; pointer-events: none; font-variant-numeric: tabular-nums; }
@media (max-width: 767.98px) { .gold-history { min-height: 180px; } }

/* 구경 선택·작은 사진·행별 제원은 TarkovBoard 탄약 박스의 배치를 따른다. */
.ammo-panel { margin-top: .15rem; }
.ammo-calibers { position: relative; display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .35rem; margin: .3rem 0 .7rem; }
.ammo-calibers button { --ammo-accent: #eceff4; --ammo-accent-rgb: 236, 239, 244; display: inline-flex; flex: 1 0 auto; align-items: center; justify-content: center; gap: .35rem; min-height: 34px; padding: .3rem .65rem; font-size: .78rem; white-space: nowrap; border-color: rgba(var(--ammo-accent-rgb), .78); color: var(--ammo-accent); background: rgba(var(--ammo-accent-rgb), .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .03); }
.ammo-calibers button img { width: 18px; height: 18px; object-fit: contain; filter: var(--ammo-icon-filter, invert(100%) sepia(2%) saturate(489%) hue-rotate(182deg) brightness(115%) contrast(91%)); }
.ammo-calibers button:hover { background: rgba(var(--ammo-accent-rgb), .18); border-color: rgba(var(--ammo-accent-rgb), .96); color: #fff; }
.ammo-calibers button[aria-pressed="true"], .ammo-calibers button[aria-pressed="true"]:hover { background: rgba(var(--ammo-accent-rgb), .26); border-color: var(--ammo-accent); color: #fff; box-shadow: 0 0 0 1px rgba(var(--ammo-accent-rgb), .18), 0 12px 22px rgba(0, 0, 0, .16); }
.ammo-calibers button:focus-visible { outline: none; box-shadow: 0 0 0 .2rem rgba(var(--ammo-accent-rgb), .22); }
.ammo-search { margin-bottom: .5rem; }
.ammo-search label { flex: 1; }
.ammo-list-heading, .ammo-row { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 8fr) minmax(100px, 3fr); align-items: center; column-gap: 1rem; }
.ammo-list-heading { padding: .5rem .65rem; color: #b9c2cd; font-size: .78rem; text-align: center; background: var(--dashboard-control-panel); border-radius: 7px; }
.ammo-row { padding: .4rem .65rem; border-bottom: 1px solid var(--site-panel-line); min-width: 0; }
.ammo-identity { min-width: 0; }
.ammo-identity a { display: flex; align-items: center; gap: .65rem; min-width: 0; color: #e0e6ef; text-decoration: none; }
.ammo-identity strong { font-weight: 500; font-size: .85rem; overflow-wrap: anywhere; }
.ammo-identity small { display: block; font-size: .72rem; color: var(--muted); }
.ammo-identity .item-media { width: 48px; height: 48px; border: 1px solid rgba(175, 155, 113, .45); border-radius: 4px; background: var(--site-card-background); }
.ammo-identity .item-media img { height: 46px; }
.ammo-stats { display: flex; align-items: center; flex-wrap: wrap; gap: .35rem 1rem; font-size: .8rem; color: #bdc9d6; }
.ammo-stats > span { display: inline-flex; align-items: center; gap: .3rem; white-space: nowrap; }
.ammo-stats img { width: 16px; height: 16px; object-fit: contain; filter: invert(1); opacity: .8; }
.ammo-stats b { color: #e0b09c; font-weight: 600; }
.ammo-price { text-align: center; font-size: .85rem; }
@media (max-width: 767.98px) {
    .ammo-calibers { display: flex; flex-wrap: nowrap; overflow-x: auto; padding-bottom: .4rem; scrollbar-width: thin; }
    .ammo-calibers button { flex: 0 0 auto; }
    .ammo-search { display: grid; grid-template-columns: 1fr auto auto; align-items: end; }
    .ammo-search label { min-width: 0; }
    .ammo-search input { width: 100%; }
    .ammo-search button { padding-inline: .6rem; }
    .ammo-list-heading { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); }
    .ammo-row { grid-template-columns: minmax(0, 1fr) auto; row-gap: .4rem; padding: .6rem .25rem; }
    .ammo-identity { grid-column: 1 / -1; }
    .ammo-stats { padding-left: 3.65rem; gap: .3rem .6rem; font-size: .73rem; }
}

.item-description { margin: .55rem 0 0; padding-left: 1.1rem; color: var(--muted); font-size: .76rem; line-height: 1.5; }
.item-description li + li { margin-top: .2rem; }
.item-specs dd { overflow-wrap: anywhere; }

.equipment-subtypes { display: flex; flex-wrap: wrap; gap: .35rem; margin: .15rem 0 .75rem; }
.equipment-subtypes button { padding: .3rem .7rem; min-height: 30px; font-size: .78rem; background: transparent; border: 1px solid var(--site-panel-line); color: var(--muted); }
.equipment-subtypes button[aria-pressed="true"], .equipment-subtypes button:hover { color: #e5ebf2; background: var(--dashboard-control-panel); border-color: #9aaab9; }


/* TarkovBoard 공통 탄약군의 색상과 아이콘 필터를 동일하게 사용한다. */
.ammo-calibers button.ammo-caliber-assault { --ammo-accent: #e26666; --ammo-accent-rgb: 226, 102, 102; --ammo-icon-filter: invert(47%) sepia(55%) saturate(1049%) hue-rotate(318deg) brightness(101%) contrast(87%); }
.ammo-calibers button.ammo-caliber-sniper { --ammo-accent: #f0a24a; --ammo-accent-rgb: 240, 162, 74; --ammo-icon-filter: invert(75%) sepia(39%) saturate(1591%) hue-rotate(339deg) brightness(99%) contrast(90%); }
.ammo-calibers button.ammo-caliber-pistol { --ammo-accent: #7ecb7b; --ammo-accent-rgb: 126, 203, 123; --ammo-icon-filter: invert(69%) sepia(18%) saturate(1203%) hue-rotate(68deg) brightness(95%) contrast(89%); }
.ammo-calibers button.ammo-caliber-shotgun { --ammo-accent: #70b4ff; --ammo-accent-rgb: 112, 180, 255; --ammo-icon-filter: invert(67%) sepia(45%) saturate(1712%) hue-rotate(185deg) brightness(100%) contrast(103%); }
.ammo-calibers button.ammo-caliber-launcher { --ammo-accent: #ba8dff; --ammo-accent-rgb: 186, 141, 255; --ammo-icon-filter: invert(65%) sepia(23%) saturate(2360%) hue-rotate(227deg) brightness(99%) contrast(104%); }
.ammo-calibers button.ammo-caliber-rocket { --ammo-accent: #f48cce; --ammo-accent-rgb: 244, 140, 206; --ammo-icon-filter: invert(76%) sepia(29%) saturate(1604%) hue-rotate(286deg) brightness(98%) contrast(98%); }
.ammo-calibers button.ammo-caliber-mortar { --ammo-accent: #d4aa70; --ammo-accent-rgb: 212, 170, 112; --ammo-icon-filter: invert(75%) sepia(39%) saturate(700%) hue-rotate(350deg) brightness(95%); }
.ammo-calibers button.ammo-caliber-cannon { --ammo-accent: #d1ba75; --ammo-accent-rgb: 209, 186, 117; --ammo-icon-filter: invert(78%) sepia(40%) saturate(430%) hue-rotate(8deg) brightness(94%); }
.ammo-calibers button.ammo-caliber-battery { --ammo-accent: #6acfd6; --ammo-accent-rgb: 106, 207, 214; --ammo-icon-filter: invert(78%) sepia(40%) saturate(540%) hue-rotate(133deg) brightness(94%); }
.ammo-calibers button.ammo-caliber-arrow { --ammo-accent: #a9c98a; --ammo-accent-rgb: 169, 201, 138; --ammo-icon-filter: invert(80%) sepia(26%) saturate(490%) hue-rotate(42deg) brightness(94%); }
.ammo-calibers button.ammo-caliber-drone { --ammo-accent: #90b7e8; --ammo-accent-rgb: 144, 183, 232; --ammo-icon-filter: invert(76%) sepia(21%) saturate(700%) hue-rotate(180deg) brightness(97%); }