:root {
    --odin-panel: #151b27;
    --odin-line: rgba(255, 255, 255, 0.09);
    --odin-text: #eef1f6;
    --odin-muted: #8993a5;
    --odin-gold: #d8aa54;
    --odin-gold-bright: #f0cb7a;
    --odin-purple: #9c79e8;
}

#aside { display: none !important; }
#container_wr,
#container {
    box-sizing: border-box;
    width: 100% !important;
    max-width: 1000px;
}

.market-search {
    max-width: 1000px;
    margin: 32px auto 60px;
    padding: 0 18px;
    color: var(--odin-text);
    font-family: Pretendard, "Noto Sans KR", sans-serif;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.market-search input,
.market-search textarea {
    -webkit-user-select: text;
    -ms-user-select: text;
    user-select: text;
}


/* ── 리스트 본문 : 라인 테이블 스킨 ─────────────────────────────
   모서리 반경 0 · 그림자 없음 · 파스텔 채움 없음 · 본문은 고대비 잉크색 */

.market-search {
    --tp-ink: #16191f;
    --tp-ink-2: #454e5b;
    --tp-ink-3: #5b6472;
    --tp-mute: #8a919d;
    --tp-rule: #ecedf0;
    --tp-line: #d7dbe1;
    --tp-field: #cfd4db;
    --tp-brand: #8a6115;
    color: var(--tp-ink);
}

/* 탭 */
.market-mode-tabs { display: flex; gap: 0; margin: 0; border-bottom: 1px solid #16191f; }
.market-mode-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 96px;
    height: 38px;
    padding: 0 18px;
    border: 1px solid var(--tp-line);
    border-bottom: 0;
    border-radius: 0;
    color: var(--tp-ink-3);
    background: #f4f5f7;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    box-shadow: none;
}
.market-mode-tab + .market-mode-tab { border-left: 0; }
.market-mode-tab:hover { color: var(--tp-ink); background: #eceef1; }
.market-mode-tab.is-active,
.market-craft-search .market-mode-tab.is-active {
    height: 38px;
    border-color: #16191f;
    color: #fff;
    background: #16191f;
    box-shadow: none;
}

/* 헤더 띠 */
.market-hero,
.market-craft-hero {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    min-height: 0;
    padding: 24px 28px;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: #16191f;
    box-shadow: none;
}
.market-hero::after { display: none; }
.market-eyebrow { display: none; }
.market-hero h2 { margin: 0; color: #fff; font-size: clamp(21px, 2.6vw, 25px); font-weight: 800; letter-spacing: -0.03em; }
.market-hero p { margin: 7px 0 0; color: #9aa2ae; font-size: 13px; }
.market-hero-stat { position: relative; z-index: 1; min-width: 130px; text-align: right; }
.market-hero-stat span { display: block; color: #9aa2ae; font-size: 11px; font-style: normal; font-weight: 700; letter-spacing: .1em; }
.market-hero-stat em { display: none; }
.market-hero-stat strong {
    display: block;
    margin: 5px 0 0;
    color: #fff;
    font-family: inherit;
    font-size: 27px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

/* 검색 폼 */
.market-search-form {
    display: grid;
    grid-template-columns: 1fr 1fr 1.65fr .7fr 1fr auto;
    gap: 12px;
    padding: 18px 20px;
    border: 1px solid var(--tp-line);
    border-top: 0;
    border-radius: 0;
    background: #f4f5f7;
    box-shadow: none;
}
.market-field label { display: block; margin: 0 0 6px 1px; color: var(--tp-ink-3); font-size: 12px; font-weight: 700; }
.market-field input,
.market-field select {
    box-sizing: border-box;
    width: 100%;
    height: 38px;
    padding: 0 12px;
    border: 1px solid var(--tp-field);
    border-radius: 0;
    outline: none;
    color: var(--tp-ink);
    background: #fff;
    font-size: 13px;
    transition: border-color .15s;
}
.market-field input:focus,
.market-field select:focus { border-color: #16191f; box-shadow: none; }
.market-field input::placeholder { color: #98a0ac; }
.market-search-actions { display: flex; align-items: end; gap: 8px; }
.market-search-actions button,
.market-search-actions a {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 38px;
    padding: 0 18px;
    border-radius: 0;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
}
.market-search-actions button { min-width: 82px; border: 1px solid #16191f; color: #fff; background: #16191f; cursor: pointer; }
.market-search-actions button:hover { background: #2a2f39; }
.market-search-actions a { border: 1px solid var(--tp-field); color: var(--tp-ink-3); background: #fff; }
.market-search-actions a:hover { border-color: #16191f; color: var(--tp-ink); }

/* 고지문 */
.market-note { margin: 20px 0 0; padding: 11px 14px; border-left: 3px solid #c9ced6; background: #fafbfc; }
.market-note p { margin: 0 0 3px; color: #6c7480; font-size: 12px; line-height: 1.65; }
.market-note p:last-child { margin-bottom: 0; }

/* 결과 머리말 */
.market-result-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 20px 0 9px; }
.market-result-label { display: none; }
.market-result-head strong { display: block; margin: 0; color: var(--tp-ink); font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; }
.market-result-head p { margin: 0; color: var(--tp-mute); font-size: 12px; }
.market-result-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; }
.market-volume-button,
.market-type-button {
    display: inline-flex;
    align-items: center;
    height: 31px;
    padding: 0 13px;
    border: 1px solid var(--tp-field);
    border-radius: 0;
    color: #3f4854;
    background: #fff;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    box-shadow: none;
    cursor: pointer;
}
.market-volume-button { border-color: var(--tp-brand); color: #fff; background: var(--tp-brand); }
.market-volume-button:hover { filter: none; background: #6f4d10; }
.market-skillbook-button,
.market-mythic-button { border-color: var(--tp-field); color: #3f4854; background: #fff; box-shadow: none; }
.market-skillbook-button:hover,
.market-mythic-button:hover,
.market-type-button:hover { border-color: #16191f; color: var(--tp-ink); }
.market-type-button.is-active,
.market-type-craft.is-active { border-color: #16191f; color: #fff; background: #16191f; }

/* 월별 요약 (모달 내부) */
.market-month-chart-head { margin-top: 24px; }
.market-month-chart { display: grid; gap: 9px; }
.market-month-row {
    display: grid;
    grid-template-columns: 130px minmax(160px, 1fr) 180px;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid #3f4658;
    border-radius: 10px;
    background: linear-gradient(135deg, #202636, #151a27);
}
.market-month-row.is-current { border-color: #d8aa54; background: linear-gradient(135deg, #3a2b14, #181d2a); }
.market-month-row .market-chart-server,
.market-month-row .market-month-detail strong { color: #f6e4b9; }
.market-month-row .market-chart-track { background: rgba(255, 255, 255, .12); }
.market-month-row .market-chart-bar { background: linear-gradient(90deg, #c79339, #f2d27a); }
.market-month-detail { display: flex; flex-direction: column; }
.market-month-detail small,
.market-month-empty { color: #9aa2b1; font-size: 11px; }
.market-month-empty { padding: 18px; border: 1px dashed #3f4658; border-radius: 10px; text-align: center; }

/* 표 */
.market-table-wrap { overflow-x: auto; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.market-table {
    width: 100%;
    min-width: 940px;
    border-spacing: 0;
    border-collapse: collapse;
    table-layout: fixed;
    border-top: 2px solid #16191f;
    border-bottom: 1px solid var(--tp-line);
}
.market-craft-table { min-width: 720px; }

/* 열 폭 — 이름·세공에 폭을 몰아준다 (table-layout: fixed) */
.market-table:not(.market-craft-table) th:nth-child(1) { width: 88px; }
.market-table:not(.market-craft-table) th:nth-child(3) { width: 78px; }
.market-table:not(.market-craft-table) th:nth-child(4) { width: 64px; }
.market-table:not(.market-craft-table) th:nth-child(5) { width: 300px; }
.market-table:not(.market-craft-table) th:nth-child(6) { width: 132px; }
.market-table:not(.market-craft-table) th:nth-child(7) { width: 116px; }
.market-craft-table th:nth-child(1) { width: 96px; }
.market-craft-table th:nth-child(3) { width: 82px; }
.market-craft-table th:nth-child(4) { width: 172px; }
.market-craft-table th:nth-child(5) { width: 116px; }
.market-table th {
    padding: 11px 12px;
    border-bottom: 1px solid var(--tp-line);
    color: var(--tp-ink-3);
    background: #fff;
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: .03em;
    text-align: center;
}
.market-table td {
    padding: 12px;
    border-bottom: 1px solid var(--tp-rule);
    color: var(--tp-ink-2);
    font-size: 13px;
    text-align: center;
    vertical-align: middle;
    transition: background .15s;
}
.market-table tbody tr:hover td { background: #f7f8f9; }
.market-table tbody tr.is-archive-month td { background: #fafbfc; color: #98a0ac; }
.market-table tbody tr.is-archive-month:hover td { background: #f4f5f7; }
.market-table tbody tr.is-archive-month .item-detail,
.market-table tbody tr.is-archive-month .price strong { color: #6c7480; opacity: 1; }
.market-table tbody tr.is-archive-month .item-name strong { opacity: .62; }
.market-table .item-name,
.market-table .item-stat,
.market-table .item-detail,
.market-table .refinement { text-align: left; }

/* 아이템 이름 — 등급색 (배지와 같은 값을 써서 두 요소가 붙어 보이게) */
.market-table .item-name strong { color: var(--tp-ink); }
.market-table .item-name .item-grade-mythic { color: #b02a1e; }
.market-table .item-name .item-grade-legendary { color: #8a6115; }
.market-table .item-name .item-grade-hero { color: #5b3a9e; }
.market-table .item-name .item-grade-rare { color: #1f5fa8; }
.market-table .item-name .item-grade-other { color: var(--tp-ink); }
.market-item-cell { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; }
.market-item-cell strong {
    min-width: 0;
    font-size: 14.5px;
    font-weight: 800;
    line-height: 1.4;
    letter-spacing: -0.02em;
    text-rendering: geometricPrecision;
    word-break: keep-all;
}
.market-item-type-badge {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    height: 20px;
    padding: 0 7px;
    border: 1px solid var(--tp-line);
    border-radius: 0;
    color: var(--tp-mute);
    background: #fff;
    font-size: 10.5px;
    font-weight: 700;
}

/* 스탯 · 세공 한 열 */
.item-detail { display: flex; flex-direction: column; gap: 4px; }
.item-detail .stat { color: var(--tp-ink-3); font-size: 12.5px; }
.detail-label { color: var(--tp-mute); font-weight: 700; }
.detail-label::after { content: " : "; }
.refinement-text {
    display: inline;
    padding: 0;
    border: 0;
    color: var(--tp-ink-2);
    font-size: 12.5px;
    font-weight: 400;
    line-height: 1.55;
}
.muted-text { color: #a8aeb8; }

/* 분석 버튼 */
.market-item-actions,
.market-craft-inline-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.market-compare-button,
.market-enhancement-button,
.market-refinement-button {
    flex: 0 0 auto;
    height: 22px;
    padding: 0 8px;
    border: 1px solid var(--tp-line);
    border-radius: 0;
    color: var(--tp-ink-3);
    background: #fff;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    transition: border-color .15s, color .15s;
}
.market-compare-button:hover, .market-compare-button:focus,
.market-enhancement-button:hover, .market-enhancement-button:focus,
.market-refinement-button:hover, .market-refinement-button:focus {
    border-color: #16191f;
    color: var(--tp-ink);
    background: #fff;
    outline: none;
}

/* 배지 */
.server-badge,
.enhancement-badge { display: inline; min-height: 0; padding: 0; border: 0; border-radius: 0; background: transparent; }
.server-badge { color: var(--tp-ink-3); font-size: 12px; font-weight: 700; }
.enhancement-badge { color: var(--tp-ink); font-size: 12.5px; font-weight: 800; font-variant-numeric: tabular-nums; }
.grade-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    min-height: 0;
    height: 21px;
    padding: 0 7px;
    border: 0;
    border-radius: 0;
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .02em;
}
.grade-mythic { color: #fff; background: #b02a1e; }
.grade-legendary { color: #fff; background: #8a6115; }
.grade-hero { color: #fff; background: #5b3a9e; }
.grade-rare { color: #fff; background: #1f5fa8; }
.grade-other { color: var(--tp-ink-3); background: #eceef1; }

/* 가격 */
.market-table .price { text-align: right; }
.diamond-price { display: inline-flex; align-items: center; justify-content: flex-end; gap: 6px; }
.diamond-icon {
    position: relative;
    display: inline-block;
    width: 10px;
    height: 10px;
    flex: 0 0 auto;
    clip-path: none;
    border: 1.2px solid #5b6472;
    background: transparent;
    transform: rotate(45deg);
    filter: none;
}
.diamond-icon::after { display: none; }
.market-table .price strong {
    display: inline-block;
    color: var(--tp-ink);
    font-family: inherit;
    font-size: 15px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}

/* 갱신일 */
.updated-at { color: var(--tp-mute) !important; font-size: 11.5px !important; font-variant-numeric: tabular-nums; }
.archive-month-badge {
    display: inline-flex;
    margin: 0 0 0 6px;
    padding: 1px 6px;
    border: 1px solid var(--tp-line);
    border-radius: 0;
    color: var(--tp-mute);
    background: #fff;
    font-size: 10.5px;
    font-weight: 700;
}

/* 관리 · 빈 상태 · 페이지 */
.admin-column { width: 58px; }
.market-edit-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 26px;
    padding: 0 10px;
    border: 1px solid var(--tp-line);
    border-radius: 0;
    color: var(--tp-ink-3);
    background: #fff;
    font-size: 11.5px;
    font-weight: 700;
    text-decoration: none;
}
.market-edit-button:hover { border-color: #16191f; color: var(--tp-ink); }
.market-empty {
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 64px 20px;
    border: 1px solid var(--tp-line);
    border-radius: 0;
    color: #939aa5;
    background: #fff;
    text-align: center;
}
.market-empty strong { color: #3e4653; font-size: 16px; }
.market-pages { margin-top: 26px; text-align: center; }
.market-pages .pg_page,
.market-pages .pg_current { border-radius: 0 !important; }
.market-modal[hidden] { display: none !important; }
.market-modal {
    position: fixed;
    z-index: 100000;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.market-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(5, 8, 14, .76);
    backdrop-filter: blur(5px);
}
.market-modal-dialog {
    position: relative;
    z-index: 1;
    box-sizing: border-box;
    width: min(760px, 100%);
    max-height: calc(100vh - 48px);
    padding: 30px;
    overflow-y: auto;
    border: 1px solid rgba(216, 170, 84, .28);
    border-radius: 20px;
    color: var(--odin-text);
    background:
        radial-gradient(circle at 90% 0, rgba(216, 170, 84, .12), transparent 34%),
        #121824;
    box-shadow: 0 32px 90px rgba(0, 0, 0, .48);
}
.market-volume-dialog { width: min(820px, 100%); }
.market-skillbook-dialog { width: min(860px, 100%); }
.market-mythic-dialog { width: min(860px, 100%); }
.market-enhancement-dialog { width: min(840px, 100%); }
.market-refinement-dialog { width: min(860px, 100%); }
.market-modal-close {
    position: absolute;
    top: 15px;
    right: 17px;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 50%;
    color: #aab2c0;
    background: rgba(255, 255, 255, .04);
    font-size: 25px;
    line-height: 32px;
    cursor: pointer;
}
.market-modal-close:hover { color: #fff; background: rgba(255, 255, 255, .1); }
.market-modal-heading { padding-right: 42px; }
.market-modal-heading h3 {
    margin: 5px 0 7px;
    color: #fff;
    font-size: 24px;
    letter-spacing: -.03em;
}
.market-modal-heading p { margin: 0; color: var(--odin-muted); font-size: 13px; }
.market-modal-loading,
.market-modal-error {
    margin-top: 25px;
    padding: 55px 20px;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 14px;
    color: #9da6b6;
    background: rgba(255, 255, 255, .025);
    text-align: center;
}
.market-modal-error { color: #e29b95; }
.market-summary-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-top: 25px;
}
.market-summary-card {
    padding: 17px 15px;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 12px;
    background: rgba(255, 255, 255, .035);
}
.market-summary-card span {
    display: block;
    margin-bottom: 7px;
    color: var(--odin-muted);
    font-size: 10px;
    font-weight: 700;
}
.market-summary-card strong {
    color: #e9edf5;
    font-family: Georgia, serif;
    font-size: 19px;
}
.market-summary-average {
    border-color: rgba(216, 170, 84, .34);
    background: rgba(216, 170, 84, .09);
}
.market-summary-average strong { color: var(--odin-gold-bright); }
.market-chart-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    margin: 27px 2px 14px;
}
.market-chart-head strong { color: #f2f4f8; font-size: 15px; }
.market-chart-head span { color: #737e90; font-size: 10px; }
.market-server-chart {
    display: flex;
    flex-direction: column;
    gap: 9px;
}
.market-chart-row {
    display: grid;
    grid-template-columns: 110px minmax(100px, 1fr) 110px;
    align-items: center;
    gap: 13px;
    padding: 10px 12px;
    border: 1px solid transparent;
    border-radius: 9px;
}
.market-chart-row.is-current {
    border-color: rgba(216, 170, 84, .27);
    background: rgba(216, 170, 84, .06);
}
.market-chart-server {
    overflow: hidden;
    color: #b4bdcb;
    font-size: 12px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.market-chart-row.is-current .market-chart-server { color: var(--odin-gold-bright); }
.market-chart-server small {
    display: inline-block;
    margin-left: 5px;
    padding: 2px 4px;
    border-radius: 4px;
    color: #17110a;
    background: var(--odin-gold-bright);
    font-size: 8px;
    line-height: 1;
    vertical-align: 1px;
}
.market-chart-track {
    position: relative;
    height: 9px;
    overflow: hidden;
    border-radius: 99px;
    background: rgba(255, 255, 255, .07);
}
.market-chart-bar {
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #5b78b4, #72c5dc);
    box-shadow: 0 0 13px rgba(87, 177, 214, .18);
}
.market-chart-row.is-current .market-chart-bar {
    background: linear-gradient(90deg, #a97832, #e6c16f);
}
.market-chart-average {
    position: absolute;
    top: -3px;
    width: 2px;
    height: 15px;
    margin-left: -1px;
    border-radius: 2px;
    background: #fff;
    box-shadow: 0 0 5px rgba(255, 255, 255, .7);
}
.market-chart-price {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 7px;
}
.market-chart-price strong {
    color: #e3e7ed;
    font-family: Georgia, serif;
    font-size: 14px;
}
.market-volume-row {
    grid-template-columns: 140px minmax(130px, 1fr) 110px;
}
.market-volume-count {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}
.market-volume-count strong {
    color: #e3e7ed;
    font-family: Georgia, serif;
    font-size: 15px;
}
.market-volume-count span {
    color: #7f8aa0;
    font-size: 10px;
    font-weight: 800;
}
.market-volume-chart .market-chart-row.is-current .market-chart-bar {
    background: linear-gradient(90deg, #9b6cf2, #e6c16f);
}
.market-enhancement-chart {
    display: flex;
    flex-direction: column;
    gap: 9px;
}
.market-enhancement-row {
    display: grid;
    grid-template-columns: 54px minmax(180px, 1fr) 120px;
    align-items: center;
    gap: 14px;
    padding: 12px;
    border: 1px solid transparent;
    border-radius: 10px;
}
.market-enhancement-row.is-current {
    border-color: rgba(216, 170, 84, .3);
    background: rgba(216, 170, 84, .07);
}
.market-enhancement-level {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 30px;
    border: 1px solid rgba(133, 153, 211, .3);
    border-radius: 8px;
    color: #b8c5ec;
    background: rgba(89, 109, 169, .13);
    font-size: 12px;
    font-weight: 900;
}
.market-enhancement-row.is-current .market-enhancement-level {
    border-color: rgba(216, 170, 84, .4);
    color: var(--odin-gold-bright);
    background: rgba(216, 170, 84, .12);
}
.market-enhancement-graph {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.market-enhancement-graph small {
    overflow: hidden;
    color: #7f8a9d;
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.market-enhancement-row .market-chart-bar {
    background: linear-gradient(90deg, #586ea8, #8aa8eb);
}
.market-enhancement-row.is-current .market-chart-bar {
    background: linear-gradient(90deg, #a97832, #e6c16f);
}
.market-refinement-chart {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.market-refinement-row {
    padding: 14px;
    border: 1px solid rgba(156, 121, 232, .16);
    border-radius: 11px;
    background: rgba(255, 255, 255, .025);
}
.market-refinement-row.is-current {
    border-color: rgba(216, 170, 84, .38);
    background: rgba(216, 170, 84, .07);
}
.market-refinement-row-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 10px;
}
.market-refinement-row-head > strong {
    color: #c9b4f0;
    font-size: 12px;
    line-height: 1.55;
    word-break: keep-all;
}
.market-refinement-row.is-current .market-refinement-row-head > strong {
    color: var(--odin-gold-bright);
}
.market-refinement-count {
    flex: 0 0 auto;
    color: #c9b4f0;
    font-family: Georgia, serif;
    font-size: 15px;
    font-weight: 800;
}
.market-refinement-row.is-current .market-refinement-count {
    color: var(--odin-gold-bright);
}
.market-refinement-row .market-chart-bar {
    background: linear-gradient(90deg, #7153a8, #aa85e2);
}
.market-refinement-row.is-current .market-chart-bar {
    background: linear-gradient(90deg, #a97832, #e6c16f);
}
.market-refinement-details {
    margin-top: 8px;
    color: #7f8a9d;
    font-size: 10px;
}
.market-mythic-list {
    display: grid;
    gap: 14px;
    margin-top: 24px;
}
.market-mythic-server {
    overflow: hidden;
    border: 1px solid rgba(216, 170, 84, .16);
    border-radius: 13px;
    background: rgba(255, 255, 255, .025);
}
.market-mythic-server-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 13px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, .07);
    background: rgba(216, 170, 84, .055);
}
.market-mythic-server-head strong { color: var(--odin-gold-bright); font-size: 14px; }
.market-mythic-server-head span {
    padding: 3px 8px;
    border-radius: 99px;
    color: #e7c9c2;
    background: rgba(203, 76, 56, .16);
    font-size: 10px;
    font-weight: 900;
}
.market-mythic-items {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding: 12px;
}
.market-mythic-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-width: 0;
    padding: 11px 12px;
    border: 1px solid rgba(212, 91, 63, .17);
    border-radius: 9px;
    background: linear-gradient(135deg, rgba(212, 91, 63, .09), rgba(255, 255, 255, .02));
}
.market-mythic-item strong {
    overflow: hidden;
    color: #ed8068;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.market-mythic-item span {
    flex: 0 0 auto;
    color: #c3cad5;
    font-family: Georgia, serif;
    font-size: 12px;
}

/* =========================================================
   모달 리뉴얼 — 리스트 본문과 같은 '라인' 스킨
   ========================================================= */
.market-modal-backdrop {
    background: rgba(22, 25, 31, .5);
    backdrop-filter: none;
}
.market-modal-dialog {
    padding: 0;
    border: 1px solid #d7dbe1;
    border-radius: 2px;
    color: #16191f;
    background: #fff;
    box-shadow: 0 18px 50px rgba(16, 19, 25, .18);
}
.market-modal-close {
    top: 16px;
    right: 18px;
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 0;
    color: #8a919d;
    background: none;
    font-size: 26px;
    line-height: 26px;
}
.market-modal-close:hover { color: #16191f; background: none; }

.market-modal-heading {
    padding: 22px 56px 16px 26px;
    border-bottom: 2px solid #16191f;
}
.market-modal-heading h3 {
    margin: 0 0 6px;
    color: #16191f;
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -.02em;
}
.market-modal-heading p { color: #8a919d; font-size: 12.5px; line-height: 1.6; }

.market-modal-content { padding: 0 26px 26px; }
.market-modal-loading,
.market-modal-error {
    margin: 26px;
    padding: 48px 20px;
    border: 1px dashed #dfe2e7;
    border-radius: 0;
    color: #8a919d;
    background: none;
}
.market-modal-error { color: #b02a1e; border-color: #e6c4c0; }

/* 요약 — 카드가 아니라 세로 구분선으로 나눈 한 줄 */
.market-summary-cards {
    display: flex;
    gap: 0;
    margin: 0 -26px;
    padding: 0 26px;
    border-bottom: 1px solid #ecedf0;
}
.market-summary-card {
    flex: 1 1 0;
    min-width: 0;
    padding: 16px 6px 16px 18px;
    border: 0;
    border-left: 1px solid #ecedf0;
    border-radius: 0;
    background: none;
}
.market-summary-card:first-child { padding-left: 0; border-left: 0; }
.market-summary-card span {
    margin-bottom: 6px;
    color: #8a919d;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .02em;
}
.market-summary-card strong {
    overflow: hidden;
    color: #16191f;
    font-family: inherit;
    font-size: 19px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.market-summary-average { border-color: #ecedf0; background: none; }
.market-summary-average strong { color: #8a6115; }

.market-chart-head {
    margin: 24px 0 12px;
    padding-bottom: 9px;
    border-bottom: 1px solid #ecedf0;
}
.market-chart-head strong { color: #16191f; font-size: 13.5px; font-weight: 700; }
.market-chart-head span { color: #8a919d; font-size: 11.5px; }

/* 서버별 막대 */
.market-server-chart,
.market-enhancement-chart,
.market-refinement-chart { gap: 0; }
.market-chart-row {
    padding: 9px 0;
    border: 0;
    border-bottom: 1px solid #f2f3f5;
    border-radius: 0;
}
.market-chart-row.is-current { border-color: #f2f3f5; background: none; }
.market-chart-server { color: #454e5b; font-size: 12.5px; font-weight: 500; }
.market-chart-row.is-current .market-chart-server { color: #16191f; font-weight: 700; }
.market-chart-server small {
    margin-left: 6px;
    padding: 2px 5px;
    border-radius: 0;
    color: #fff;
    background: #8a6115;
    font-size: 9px;
    font-weight: 700;
}
.market-chart-track {
    height: 8px;
    border-radius: 0;
    background: #f0f1f4;
}
.market-chart-bar {
    border-radius: 0;
    background: #b9c0ca;
    box-shadow: none;
}
.market-chart-row.is-current .market-chart-bar { background: #8a6115; }
.market-chart-average {
    top: -3px;
    width: 1px;
    height: 14px;
    border-radius: 0;
    background: #16191f;
    box-shadow: none;
}
.market-chart-price strong {
    color: #16191f;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* 월별 평균 가격 */
.market-month-chart { gap: 0; }
.market-month-row {
    padding: 11px 0;
    border: 0;
    border-bottom: 1px solid #f2f3f5;
    border-radius: 0;
    background: none;
}
.market-month-row.is-current { border-color: #f2f3f5; background: none; }
.market-month-row .market-chart-server { color: #454e5b; font-weight: 500; }
.market-month-row.is-current .market-chart-server { color: #16191f; font-weight: 700; }
.market-month-row .market-month-detail strong {
    color: #16191f;
    font-family: inherit;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.market-month-row .market-chart-track { background: #f0f1f4; }
.market-month-row .market-chart-bar { background: #b9c0ca; }
.market-month-row.is-current .market-chart-bar { background: #8a6115; }
.market-month-detail small,
.market-month-empty { color: #8a919d; font-size: 11px; }
.market-month-empty { border: 1px dashed #dfe2e7; border-radius: 0; }

/* 물량 */
.market-volume-count strong {
    color: #16191f;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.market-volume-count span { color: #8a919d; font-size: 10.5px; font-weight: 700; }
.market-volume-chart .market-chart-row.is-current .market-chart-bar { background: #8a6115; }

/* 강화 단계 */
.market-enhancement-row {
    padding: 11px 0;
    border: 0;
    border-bottom: 1px solid #f2f3f5;
    border-radius: 0;
}
.market-enhancement-row.is-current { border-color: #f2f3f5; background: none; }
.market-enhancement-level {
    height: 24px;
    border: 1px solid #d7dbe1;
    border-radius: 0;
    color: #454e5b;
    background: none;
    font-size: 12px;
    font-weight: 700;
}
.market-enhancement-row.is-current .market-enhancement-level {
    border-color: #8a6115;
    color: #fff;
    background: #8a6115;
}
.market-enhancement-graph small { color: #8a919d; font-size: 11px; }
.market-enhancement-row .market-chart-bar { background: #b9c0ca; }
.market-enhancement-row.is-current .market-chart-bar { background: #8a6115; }

/* 세공 옵션 */
.market-refinement-row {
    padding: 13px 0;
    border: 0;
    border-bottom: 1px solid #f2f3f5;
    border-radius: 0;
    background: none;
}
.market-refinement-row.is-current { border-color: #f2f3f5; background: none; }
.market-refinement-row-head > strong { color: #454e5b; font-size: 12.5px; font-weight: 500; }
.market-refinement-row.is-current .market-refinement-row-head > strong { color: #16191f; font-weight: 700; }
.market-refinement-count {
    color: #16191f;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.market-refinement-row.is-current .market-refinement-count { color: #16191f; }
.market-refinement-row .market-chart-bar { background: #b9c0ca; }
.market-refinement-row.is-current .market-chart-bar { background: #8a6115; }
.market-refinement-details { color: #8a919d; font-size: 11px; }

/* 신화 / 스킬북 목록 */
.market-mythic-server {
    border: 1px solid #e4e7ec;
    border-radius: 0;
    background: none;
}
.market-mythic-server-head {
    border-bottom: 1px solid #ecedf0;
    background: #f7f8f9;
}
.market-mythic-server-head strong { color: #16191f; font-size: 13.5px; font-weight: 700; }
.market-mythic-server-head span {
    padding: 3px 7px;
    border-radius: 0;
    color: #fff;
    background: #b02a1e;
    font-size: 10px;
    font-weight: 700;
}
.market-mythic-item {
    border: 1px solid #ecedf0;
    border-radius: 0;
    background: none;
}
.market-mythic-item strong { color: #b02a1e; font-size: 12px; font-weight: 700; }
.market-mythic-item span {
    color: #454e5b;
    font-family: inherit;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}
.market-modal-open { overflow: hidden; }

@media (max-width: 960px) {
    .market-search-form { grid-template-columns: 1fr 1fr; }
    .market-search-actions { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
    .market-search { margin-top: 14px; padding: 0 10px; }
    .market-mode-tabs { margin-left: 0; }
    .market-mode-tab { min-width: 0; flex: 1; height: 34px; padding: 0 10px; font-size: 12px; }
    .market-mode-tab.is-active { height: 34px; }
    .market-hero, .market-craft-hero { min-height: 0; padding: 20px 18px; }
    .market-hero-stat { display: none; }
    .market-hero p { max-width: 260px; line-height: 1.6; }
    .market-search-form { grid-template-columns: 1fr; padding: 18px; }
    .market-search-actions { grid-column: auto; }
    .market-search-actions button { flex: 1; }
    .market-result-head p { display: none; }
    .market-result-actions { width: 100%; justify-content: flex-end; }
    .market-volume-button,
    .market-type-button { height: 30px; padding: 0 11px; font-size: 11.5px; }
    .market-note { margin-top: 16px; }
    .market-table th, .market-table td { padding: 10px 9px; }
    .market-modal { padding: 10px; }
    .market-modal-dialog { max-height: calc(100vh - 20px); padding: 24px 18px; }
    .market-summary-cards { grid-template-columns: 1fr 1fr; }
    .market-chart-head span { display: none; }
    .market-chart-row {
        grid-template-columns: 82px minmax(70px, 1fr) 92px;
        gap: 8px;
        padding: 9px 4px;
    }
    .market-volume-row { grid-template-columns: 92px minmax(70px, 1fr) 74px; }
    .market-enhancement-row {
        grid-template-columns: 42px minmax(90px, 1fr) 88px;
        gap: 8px;
        padding: 9px 3px;
    }
    .market-month-row {
        grid-template-columns: 82px minmax(70px, 1fr) 108px;
        gap: 8px;
        padding: 9px 4px;
    }
    .market-month-detail small { font-size: 10px; }
    .market-enhancement-graph small { font-size: 9px; }
    .market-chart-price strong { font-size: 12px; }
    .market-volume-count strong { font-size: 12px; }
    .market-mythic-items { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
    .market-modal-dialog { padding: 0; }
    .market-modal-heading { padding: 18px 48px 14px 18px; }
    .market-modal-content { padding: 0 18px 18px; }
    .market-modal-loading, .market-modal-error { margin: 18px; padding: 36px 16px; }
    .market-summary-cards {
        display: grid;
        grid-template-columns: 1fr 1fr;
        margin: 0 -18px;
        padding: 0 18px;
    }
    .market-summary-card { padding: 13px 6px 13px 14px; border-left: 1px solid #ecedf0; }
    .market-summary-card:nth-child(odd) { padding-left: 0; border-left: 0; }
    .market-summary-card:nth-child(n+3) { border-top: 1px solid #ecedf0; }
    .market-summary-card strong { font-size: 17px; }
    .market-chart-row, .market-enhancement-row { padding: 9px 0; }
}