.barter-page { margin: 0; background: #f5f7fa; color: #233044; font-family: "Pretendard Variable", Pretendard, sans-serif; line-height: 1.6; }
.barter-page * { box-sizing: border-box; }
.barter-page a { color: #245eab; text-underline-offset: 3px; }
.barter-page button, .barter-page input, .barter-page select { font: inherit; }
.barter-page button { cursor: pointer; border: 1px solid #d5dce7; border-radius: 7px; background: white; color: #233044; padding: 9px 12px; }
.barter-page button:hover { border-color: #245eab; background: #eff5fd; }
.barter-page :focus-visible { outline: 3px solid #79a9eb; outline-offset: 3px; }
.barter-shell { max-width: 1380px; margin: auto; padding: 0 28px 45px; }
.barter-nav { display: flex; justify-content: space-between; gap: 15px; border-bottom: 1px solid #dce2ec; padding: 22px 0; font-size: 14px; }
.barter-nav a { text-decoration: none; font-weight: 700; }
.barter-page header { padding: 30px 0 20px; }
.barter-page h1 { margin: 0; font-size: 34px; letter-spacing: -1px; }
.barter-page h2 { margin: 0; font-size: 22px; }
.barter-page h3 { margin: 0 0 8px; font-size: 16px; }
.barter-page p { margin: 8px 0 15px; word-break: keep-all; }
.eyebrow { font-size: 12px; color: #245eab; font-weight: 750; }
.intro { font-size: 18px; }
.data-note { padding: 16px 20px; background: #edf2f9; border-radius: 8px; font-size: 13px; color: #53627a; }
.data-note p { margin-bottom: 0; }
.barter-filters { display: grid; grid-template-columns: minmax(220px, 2fr) repeat(2, minmax(130px, 1fr)) auto; gap: 12px; align-items: end; margin: 24px 0 12px; }
.barter-filters label { font-size: 12px; font-weight: 700; }
.barter-page input[type="search"], .barter-page select { display: block; width: 100%; min-width: 0; margin-top: 5px; padding: 11px; border: 1px solid #cbd5e2; border-radius: 7px; background: white; color: #233044; }
.barter-page input[type="number"] { width: 75px; min-height: 38px; padding: 5px 8px; border: 1px solid #cbd5e2; border-radius: 6px; }
.result-count, .muted { color: #67758a; font-size: 12px; }
.npc-picker { margin: 18px 0; }
.npc-picker h2 { font-size: 14px; margin: 0 0 10px; }
.barter-page #barter-region[hidden] { display: none; }
.region-tabs .npc-tab { min-width: auto; }
.npc-tabs { display: flex; flex-wrap: wrap; gap: 8px; max-height: 190px; overflow-y: auto; padding: 3px; }
.barter-page .npc-tab { flex: 0 0 auto; min-width: 100px; padding: 9px 13px; text-align: left; }
.npc-tab span, .npc-tab small { display: block; }
.npc-tab span { font-size: 13px; font-weight: 700; }
.npc-tab small { font-size: 10px; color: #67758a; margin-top: 2px; }
.barter-page .npc-tab[aria-pressed="true"] { background: #245eab; border-color: #245eab; color: white; }
.npc-tab[aria-pressed="true"] small { color: #e3edfb; }
@media (max-width: 700px) { .npc-tabs { flex-wrap: nowrap; max-height: none; overflow-x: auto; padding-bottom: 9px; } }
.barter-layout { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(320px, 1fr); gap: 20px; align-items: start; }
.barter-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; max-height: 850px; overflow-y: auto; padding: 3px; }
.trade-card { min-width: 0; background: white; border: 1px solid #dce2ec; border-radius: 9px; overflow: hidden; }
.trade-card.selected { border-color: #245eab; box-shadow: 0 0 0 1px #245eab; }
.barter-page .trade-open { display: block; width: 100%; text-align: left; border: 0; border-radius: 0; padding: 16px; }
.trade-location { display: block; color: #67758a; font-size: 12px; }
.trade-open strong { display: block; font-size: 17px; margin: 8px 0 4px; }
.trade-give { display: block; font-size: 13px; }
.trade-limit { display: block; color: #67758a; font-size: 11px; margin-top: 9px; }
.badge { display: inline-block; padding: 2px 6px; background: #edf3fb; border-radius: 4px; font-size: 10px; color: #245eab; margin: 5px 4px 0 0; }
.badge.warn { background: #fff3dd; color: #8e5b14; }
.trade-count { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 10px 16px; border-top: 1px solid #edf0f5; font-size: 12px; }
.barter-detail { background: white; border: 1px solid #dce2ec; border-radius: 10px; padding: 22px; position: sticky; top: 16px; max-height: 850px; overflow: auto; }
.detail-location { color: #67758a; font-size: 13px; }
.trade-flow { padding: 16px; background: #f4f7fb; border-radius: 7px; margin: 14px 0; }
.trade-flow strong { display: block; font-size: 19px; }
.trade-flow span { display: block; color: #67758a; margin: 7px 0; font-size: 13px; }
.source-links { font-size: 11px; color: #67758a; }
.source-links a { margin-right: 9px; }
.recipe-tree { padding: 0 0 0 17px; margin: 12px 0; font-size: 13px; }
.recipe-tree li { margin: 10px 0; }
.recipe-tree small { color: #67758a; }
.recipe-tree details { margin-top: 4px; }
.recipe-tree summary { cursor: pointer; }
.recipe-choice { font-size: 11px !important; max-width: 100%; }
.material-exchange { padding: 3px 6px !important; font-size: 10px !important; margin-left: 5px; }
.barter-plan { margin: 26px 0; background: white; padding: 24px; border: 1px solid #dce2ec; border-radius: 10px; }
.barter-plan > p { font-size: 13px; }
.section-heading { display: flex; justify-content: space-between; align-items: center; gap: 15px; }
.section-heading .eyebrow { margin: 0; }
.plan-actions { display: flex; gap: 8px; }
.check-label { display: flex; gap: 8px; align-items: center; font-size: 14px; font-weight: 700; margin: 18px 0 8px; }
.table-wrap { overflow-x: auto; }
.barter-page table { width: 100%; border-collapse: collapse; font-size: 13px; }
.barter-page caption { text-align: left; font-weight: 700; padding: 15px 0 8px; }
.barter-page th, .barter-page td { padding: 10px 12px; text-align: left; border-bottom: 1px solid #e7ecf3; }
.barter-page th { background: #f4f7fb; }
.barter-page td:nth-child(2) { font-weight: 700; color: #245eab; }
.plan-warnings { color: #8e5b14; font-size: 12px; }
.plan-production { margin-top: 18px; font-size: 13px; }
.plan-production summary { cursor: pointer; }
.plan-exchange { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid #edf0f5; font-size: 13px; }
.barter-page footer { color: #67758a; font-size: 12px; border-top: 1px solid #dce2ec; padding-top: 20px; }
.barter-page footer h2 { font-size: 17px; color: #233044; }
.barter-page footer ul { padding-left: 20px; }
.barter-page footer li { margin: 5px 0; }
@media (max-width: 1000px) { .barter-filters { grid-template-columns: repeat(3, 1fr); } .search-label { grid-column: 1 / -1; } .barter-filters button { grid-column: 1 / -1; } .barter-list { grid-template-columns: 1fr; } }
@media (max-width: 700px) { .barter-shell { padding: 0 14px 30px; } .barter-nav { font-size: 12px; } .barter-page h1 { font-size: 28px; } .barter-layout { grid-template-columns: 1fr; } .barter-list { max-height: 520px; } .barter-detail { position: static; max-height: none; padding: 18px; } .barter-filters { gap: 8px; } .barter-page select { padding: 10px 5px; font-size: 12px; } .barter-plan { padding: 18px; } .section-heading { display: block; } .plan-actions { margin-top: 12px; } .plan-actions button { flex: 1; font-size: 12px; } .plan-exchange { align-items: start; } }