/* 거래소 화면(결정 BB1~BB5, 2026-09-28). app.css 토큰만 쓴다. 직각·그림자 없음(D1), 주 버튼 화면당 1개(D3), 넓은 화면 2열은 거래소 예외(D4, ≥1024px).
   형광 녹(--phos)은 쓰지 않는다(AQ1). 공용 .tw-ct-* 모양(screens_city.css)은 그대로 쓰고, 거래소 전용은 .tw-ex-* 로 둔다. */

.tw-ex { gap: var(--sp-3); }

/* 소지 골드 카드(AW3: 입찰·즉시구매 뒤 −금액) */
.tw-ex-gold { display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: 2px var(--sp-3); padding: var(--sp-3) var(--sp-3); border: 1px solid var(--gold); border-radius: var(--radius-sm); background: transparent; min-width: 0; }
.tw-ex-gold > span { font-size: var(--fs-sub); color: var(--muted); font-weight: 700; display: inline-flex; align-items: center; }
.tw-ex-gold > span .tw-tip { margin-block: calc(-1 * var(--sp-3)); }   /* 결정 BS② 2단계: 옛 설명 줄 → '소지 골드' 옆 ⓘ(44px 누름 영역이 줄 높이를 키우지 않게) */
.tw-ex-gold > b { font-size: var(--fs-bignum); line-height: var(--lh-tight); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; justify-self: start; }
.tw-ex-gold__sub, .tw-ex-gold__sum { grid-column: 1 / -1; font-size: var(--fs-cap); color: var(--muted); overflow-wrap: anywhere; }
.tw-ex-gold__sum { color: var(--fg); }
.tw-ex-delta { grid-column: 1 / -1; justify-self: start; font-size: var(--fs-sub); font-weight: 700; padding: 1px var(--sp-2); border: 1px solid var(--line); border-radius: var(--radius-chip); font-variant-numeric: tabular-nums; }   /* 배지 테두리 회색(BT4) */
.tw-ex-delta.is-down { color: var(--bad); background: transparent; }
.tw-ex-gold.is-changed > b { animation: tw-ex-flash .9s ease-out 1; }
@keyframes tw-ex-flash { from { color: var(--fg-2); } }
@media (max-width: 420px) { .tw-ex-gold > b { font-size: var(--fs-section); } }

/* 넓은 화면: 결정 BZ7(BU6) ≥840px 목록 + 상세 나란히(오른쪽 상세 칸 .tw-ex-pane, 위에 붙어 따라옴), ≥1024px 왼쪽 필터 패널까지 3열.
   좁으면 필터 패널·상세 칸을 숨기고 [필터 (n)] → 하단 시트, 상세는 줄 아래 펼침 */
.tw-ex-layout { display: grid; gap: var(--sp-3); min-width: 0; }
.tw-ex-main { display: grid; gap: var(--sp-3); min-width: 0; align-content: start; }
.tw-ex-side, .tw-ex-pane { display: none; min-width: 0; }
@media (min-width: 840px) {
  .tw-ex-layout { grid-template-columns: minmax(0, 1fr) minmax(280px, .85fr); align-items: start; gap: var(--sp-4); }
  .tw-ex-pane { display: grid; gap: var(--sp-2); align-content: start; position: sticky; top: var(--sp-2); max-height: calc(100vh - var(--sp-4)); overflow-y: auto; overscroll-behavior: contain;
    padding: var(--sp-3); border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg); }
  .tw-ex-pane .tw-ct-detail { padding: 0; border-left: 0; }
  .tw-ex-pane .tw-empty { padding: var(--sp-5) var(--sp-2); }
  .tw-ex-row.is-open { border-left: 2px solid var(--accent); background: transparent; }   /* 오른쪽에 열린 매물(선택 = 왼쪽 인디고 2px 선 하나 — 결정 CN·CR15) */
  .tw-ex-row.is-open .tw-ct-g { text-decoration: underline; text-underline-offset: 3px; }
}
/* 결정 CL14(2026-09-29): 왼쪽 필터 패널(옛 ≥1024px 3열)을 없앴다 — 필터는 모든 폭에서 [필터 (n)] → 시트. 넓은 화면은 목록 + 상세 2열 그대로.
   낙찰내역 탭의 [필터] 버튼(옛 .tw-ex-fbtn, is-always 아님)은 그대로 좁은 화면에서만 보인다. */
@media (min-width: 1024px) {
  .tw-ex-fbtn:not(.is-always) { display: none; }
}
/* 매물 탭 도구 한 줄: [이름 ····· | 필터 (n) | 정렬] — 좁은 화면(≤400px)은 이름 한 줄 + [필터 | 정렬] 한 줄 */
.tw-ex-main .tw-ct-search.tw-ex-quick.is-market { grid-template-columns: minmax(0, 1fr) auto minmax(0, auto); align-items: stretch; }
.tw-ex-main .tw-ct-search.tw-ex-quick.is-market > .tw-ex-combo { grid-column: auto; grid-row: auto; }
.tw-ex-main .tw-ct-search.tw-ex-quick.is-market > select { width: auto; max-width: 10.5em; }
@media (max-width: 400px) {
  .tw-ex-main .tw-ct-search.tw-ex-quick.is-market { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .tw-ex-main .tw-ct-search.tw-ex-quick.is-market > .tw-ex-combo { grid-column: 1 / -1; }
  .tw-ex-main .tw-ct-search.tw-ex-quick.is-market > select { max-width: none; width: 100%; }
}
.tw-ex-counthead { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-1) var(--sp-2); min-width: 0; }
.tw-ex-counthead .tw-ex-lim .tw-ct-in { min-height: 36px; font-size: var(--fs-sub); }
/* 결정 CL15: 매물 그림 64px(128px 원본) — 줄 왼쪽 위에 붙인다 */
.tw-ex-row > .tw-ex-art { align-self: flex-start; }

/* 빠른 줄 + 이름 후보(콤보 상자) */
.tw-ex-combo { position: relative; }
.tw-ex-sug { position: absolute; left: 0; right: 0; top: 100%; z-index: 5; margin: 0; padding: 0; list-style: none; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-sm); max-height: 280px; overflow-y: auto; }
.tw-ex-sug li { padding: var(--sp-3) var(--sp-3); min-height: 44px; box-sizing: border-box; cursor: pointer; border-bottom: 1px solid var(--rule); font-size: var(--fs-body); overflow-wrap: anywhere; }
.tw-ex-sug li small { color: var(--muted); }
.tw-ex-sug li[aria-selected="true"], .tw-ex-sug li:hover { color: var(--accent); box-shadow: inset 2px 0 0 var(--accent); }   /* 결정 CN: 옛 반전 막대(채움) → 인디고 글자 + 왼쪽 선 */
.tw-ex-sug li[aria-selected="true"] small, .tw-ex-sug li:hover small { color: inherit; }
.tw-ex-sug .tw-ex-sugnone { cursor: default; color: var(--muted); }

/* 빠른 줄(검토 B 보강): 좁은 화면은 [이름] / [등급|부위] / [정렬|찾기·초기화] 3줄, 넓은 화면은 [이름 ····· 찾기·초기화] / [등급|부위|정렬] 2줄.
   공용 .tw-ct-search(flex, 360 이하 한 칸씩 세로)를 거래소에서만 격자로 바꿔 세로 길이를 줄인다. */
.tw-ct-search.tw-ex-quick { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); align-items: stretch; }
.tw-ct-search.tw-ex-quick > .tw-ex-combo { grid-column: 1 / -1; }
.tw-ct-search.tw-ex-quick > select { min-width: 0; width: 100%; }
.tw-ct-search.tw-ex-quick > .tw-actions { display: flex; gap: var(--sp-2); margin: 0; min-width: 0; flex-wrap: nowrap; }
.tw-ct-search.tw-ex-quick > .tw-actions > .tw-btn { flex: 1 1 0; min-width: 0; padding-left: var(--sp-2); padding-right: var(--sp-2); }
@media (min-width: 1024px) {
  .tw-ct-search.tw-ex-quick { grid-template-columns: repeat(3, minmax(0, 1fr)) auto; }
  .tw-ct-search.tw-ex-quick > .tw-ex-combo { grid-column: 1 / 4; grid-row: 1; }
  .tw-ct-search.tw-ex-quick > .tw-actions { grid-column: 4; grid-row: 1; }
  .tw-ct-search.tw-ex-quick > .tw-actions > .tw-btn { flex: none; padding-left: var(--sp-3); padding-right: var(--sp-3); }
}

/* 도구 줄: 좁은 화면에서 [필터 (n)]·쪽 크기·자주 쓰는 조건은 목록을 내려도 위에 붙어 있다 */
.tw-ex-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); min-width: 0; position: sticky; top: 0; z-index: 3; background: var(--bg); padding: var(--sp-1) 0; }
.tw-ex-fbtn { min-height: 44px; }
.tw-ex-lim { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-sub); color: var(--muted); min-width: 0; }
.tw-ex-lim .tw-ct-in { min-height: 40px; }
/* 자주 쓰는 조건: 좁으면 도구 줄 둘째 줄에서 가로 이동(끝 알약이 반쯤 잘려 보임), 넓으면 쪽 크기 왼쪽에 감싸 놓는다 */
.tw-ex-qflags { order: 3; flex: 1 1 100%; display: flex; gap: var(--sp-2); overflow-x: auto; scrollbar-width: none; min-width: 0; padding-block: 2px; }
.tw-ex-qflags::-webkit-scrollbar { display: none; }
.tw-ex-lim { order: 2; }
.tw-ex-pill.is-q { flex: none; white-space: nowrap; }   /* 켜짐 표시는 필터 칩의 선 아이콘 체크(결정 BS4 — 옛 '✓' 글자 기호) */
@media (min-width: 1024px) {
  .tw-ex-bar { position: static; align-items: flex-start; }
  .tw-ex-qflags { order: 0; flex: 1 1 0; flex-wrap: wrap; overflow: visible; }
  .tw-ex-lim { order: 0; margin-left: auto; }
}
/* 결정 BZ7: 매물 탭은 ≥840px에서 오른쪽 상세 칸이 생겨 가운데 목록 열이 좁다 — 빠른 줄은 2칸 격자, 자주 쓰는 조건은 줄바꿈(가운데 열 안에서) */
@media (min-width: 840px) {
  .tw-ex-main .tw-ct-search.tw-ex-quick { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tw-ex-main .tw-ct-search.tw-ex-quick > .tw-ex-combo { grid-column: 1 / -1; grid-row: auto; }
  .tw-ex-main .tw-ct-search.tw-ex-quick > .tw-actions { grid-column: auto; grid-row: auto; }
  .tw-ex-main .tw-ct-search.tw-ex-quick > .tw-actions > .tw-btn { flex: 1 1 0; }
  .tw-ex-main .tw-ex-bar { position: static; }
  .tw-ex-main .tw-ex-qflags { order: 3; flex: 1 1 100%; flex-wrap: wrap; overflow: visible; }
  .tw-ex-main .tw-ex-lim { order: 2; margin-left: auto; }
}

/* 적용 칩 줄: 좁으면 가로 이동(끝 칩이 반쯤 잘려 보인다), 칩마다 × (44px 누름 영역) */
/* 적용 조건 칩 = 입력 칩(결정 BU3 — 공용 .tw-ichip 모양 + × 선 아이콘). 가로 이동 줄 안에서 누름 영역이 잘리지 않게 높이 40 + 위아래 2px 가상 영역 */
.tw-ex-chips { display: flex; align-items: center; gap: var(--sp-2); overflow-x: auto; scrollbar-width: thin; min-width: 0; padding-block: 2px; }
@media (min-width: 1024px) { .tw-ex-chips { flex-wrap: wrap; overflow: visible; } }
.tw-ichip.tw-ex-fchip { flex: none; min-height: 40px; max-width: 80vw; }
.tw-ex-fchip .tw-ichip__label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tw-ex-fchip .tw-ichip__x { width: 40px; }
.tw-ex-fchip .tw-ichip__x::before { inset: -2px -2px; }
.tw-ex-fchip.is-dim { opacity: var(--disabled-opacity); }
.tw-ex-fchip small { color: var(--muted); }
.tw-ex-clearall { flex: none; }

/* 결과 */
.tw-ex-results { display: grid; gap: var(--sp-2); min-width: 0; }
.tw-ex-results.is-busy { opacity: .55; transition: opacity .15s; }
.tw-ex-count { font-size: var(--fs-body); color: var(--fg); }
.tw-ex-count small { color: var(--muted); }
.tw-ex-tips, .tw-ex-relax { display: flex; flex-wrap: wrap; gap: var(--sp-2); justify-content: center; }
.tw-ex-tips { justify-content: flex-start; }
.tw-ex-just { font-size: var(--fs-sub); color: var(--fg); }
.tw-ex-pager { flex-wrap: wrap; }
.tw-ex-pnums { display: none; align-items: center; gap: 2px; }
.tw-ex-pnums .tw-btn[aria-current="page"] { color: var(--accent); border-color: var(--accent); font-weight: 700; }   /* 지금 쪽 = 인디고 선·글자(채움 없음) */
.tw-ex-gap { color: var(--faint); padding: 0 2px; }
@media (min-width: 1024px) { .tw-ex-pnums { display: inline-flex; } }

/* 목록 줄: ①칩·등록 시각 ②이름·시세 대비 ③핵심 수치·장착 비교 | 가격 묶음(좁으면 아래로) */
.tw-ex-row { align-items: flex-start; }
.tw-ex-row.is-result { background: transparent; }
.tw-ex-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1); min-width: 0; }
.tw-ex-meta .tw-chip { font-size: var(--fs-cap); padding: 3px var(--sp-1); }
.tw-ex-meta .tw-rel { margin-left: auto; font-size: var(--fs-cap); color: var(--muted); }
.tw-ex-name { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-1) var(--sp-2); }
.tw-ex-sum { color: var(--muted); display: flex; flex-wrap: wrap; align-items: center; gap: 2px var(--sp-2); }
.tw-ex-sum .tw-chip { font-size: var(--fs-cap); padding: 2px var(--sp-1); }
/* 시세 대비 버튼(누르면 시세 탭): 누를 수 있어 회색 테두리 — 라이트도 회색(결정 BT4, 옛 녹·노랑 테두리 없앰), 뜻은 글자색 + 선 아이콘 ▲▼ */
.tw-ex-mkt { font: inherit; font-size: var(--fs-cap); padding: 2px var(--sp-2); border: 1px solid var(--line); border-radius: var(--radius-chip); background: none; color: var(--muted); cursor: pointer; min-height: 26px; display: inline-flex; align-items: center; gap: 2px; }
.tw-ex-mkt.is-ok { color: var(--ok); background: transparent; }
.tw-ex-mkt.is-warn { color: var(--warn); background: transparent; }
.tw-ex-up, .tw-ex-up2 { color: var(--ok); font-weight: 700; }
.tw-ex-down { color: var(--bad); font-weight: 700; }
.tw-ex-up .tw-li, .tw-ex-up2 .tw-li, .tw-ex-down .tw-li { vertical-align: -.15em; }

/* 상세 */
.tw-ex-warn { display: grid; gap: 2px; padding: var(--sp-2) var(--sp-2); border-left: 2px solid var(--warn); background: transparent; font-size: var(--fs-sub); }
.tw-ex-cmp { display: grid; gap: var(--sp-1); }
.tw-ex-cmph { font-size: var(--fs-sub); color: var(--muted); }
.tw-ex-mline { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); }
.tw-ex-mline .tw-ct-affixline { flex: 1 1 220px; }
.tw-ex-bid { justify-content: flex-start; }
.tw-ex-bid label .tw-ct-in { width: 9em; }
.tw-ex-bidfill { display: inline-flex; gap: var(--sp-1); }
.tw-ex-bidfill .tw-btn { min-height: 36px; padding: var(--sp-1) var(--sp-2); }
.tw-ex-why { display: grid; gap: 2px; font-size: var(--fs-sub); color: var(--bad); }
.tw-ex-why1 { font-size: var(--fs-cap); color: var(--muted); }

/* 필터 패널(넓은 화면 왼쪽 · 하단 시트 안 공용) */
.tw-ex-panel { display: grid; gap: 0; min-width: 0; }
.tw-ex-phead { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--line); min-height: 44px; }
.tw-ex-phead small { color: var(--muted); }
.tw-ex-phead .tw-btn { margin-left: auto; flex: none; white-space: nowrap; }
.tw-ex-bad { font-size: var(--fs-sub); color: var(--bad); padding: var(--sp-2) var(--sp-3); }
.tw-ex-grp { border-bottom: 1px solid var(--line); min-width: 0; }
.tw-ex-grp > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: var(--sp-2); min-height: 44px; padding: var(--sp-2) var(--sp-3); font-weight: 700; font-size: var(--fs-body); color: var(--fg-2); }
.tw-ex-grp > summary::-webkit-details-marker { display: none; }
.tw-ex-grp > summary::after { content: ""; flex: none; width: 7px; height: 7px; margin-left: auto; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: translateY(-2px) rotate(45deg); }   /* 결정 CN: 옛 +/− 글자 → 공용 접힘 화살표 */
.tw-ex-grp[open] > summary::after { transform: translateY(2px) rotate(-135deg); }
.tw-ex-grp > summary small { color: var(--muted); font-weight: 400; }
.tw-ex-grp > summary:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.tw-ex-grp.is-na > summary { opacity: .6; }
.tw-ex-grpbody { display: grid; gap: var(--sp-2); padding: 2px var(--sp-3) var(--sp-3); min-width: 0; }
.tw-ex-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--info); display: inline-block; }
.tw-ex-pills { display: flex; flex-wrap: wrap; gap: var(--sp-2); min-width: 0; }
/* 거르기 알약 = 필터 칩(결정 BU3 — 공용 .tw-fchip: 회색 테두리, 켜짐 = 반전 + 선 아이콘 체크). 여기서는 높이 40 + 위아래 2px 가상 영역(가로 이동 줄 안) */
.tw-fchip.tw-ex-pill { min-height: 40px; }
.tw-fchip.tw-ex-pill::before { inset: -2px -1px; }
.tw-ex-pill small { color: var(--muted); font-variant-numeric: tabular-nums; }
.tw-ex-pill[aria-pressed="true"] small { color: inherit; opacity: .8; }
.tw-ex-pill.is-sq { min-width: 44px; justify-content: center; padding: 0 var(--sp-2); }
.tw-ex-sublab { font-size: var(--fs-cap); color: var(--muted); margin-top: 2px; }
.tw-ex-rar { display: grid; gap: var(--sp-2); }
.tw-ex-rar li { display: flex; align-items: center; gap: var(--sp-1); flex-wrap: wrap; }
.tw-ex-rar .tw-ex-pill { flex: 1 1 110px; justify-content: space-between; }
.tw-ex-q { min-height: 40px; padding: var(--sp-1) var(--sp-2); font-size: var(--fs-cap); }
.tw-ex-range { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; min-width: 0; }
.tw-ex-rl { font-size: var(--fs-sub); color: var(--muted); min-width: 2.5em; }
.tw-ex-num .tw-ct-in { width: 6.5em; }
.tw-ex-num .tw-ct-in[aria-invalid="true"], .tw-ex-affline .tw-ct-in[aria-invalid="true"] { border-color: var(--bad); }
.tw-ex-radios { display: flex; flex-wrap: wrap; gap: 2px var(--sp-3); }
.tw-ex-inline { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; font-size: var(--fs-sub); color: var(--muted); }
.tw-ex-inline .tw-ct-in { flex: 1 1 7em; min-width: 0; max-width: 12em; }
.tw-ex-affline { display: grid; grid-template-columns: minmax(0, 1fr) 5.5em; gap: var(--sp-2); align-items: center; padding-bottom: var(--sp-2); border-bottom: 1px solid var(--rule); }
.tw-ex-affline select[data-part="tier"] { grid-column: 1; }
.tw-ex-affline > button { grid-column: 2; grid-row: 2; min-height: 40px; }
.tw-ex-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); }
.tw-ex-stats .tw-ex-inline { display: grid; gap: 2px; }
.tw-ex-stats .tw-ex-inline .tw-ct-in { max-width: none; width: 100%; }
.tw-ex-psave { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.tw-ex-psave .tw-ct-in { flex: 1 1 10em; min-width: 0; }
.tw-ex-plist { display: grid; gap: var(--sp-1); }
.tw-ex-plist li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px var(--sp-2); align-items: center; border-bottom: 1px solid var(--rule); padding: var(--sp-1) 0; }
.tw-ex-plist li > small { grid-column: 1 / -1; color: var(--muted); font-size: var(--fs-cap); overflow-wrap: anywhere; }
.tw-ex-papply { justify-content: flex-start; text-align: left; overflow-wrap: anywhere; min-width: 0; }
.tw-ex-pacts { display: inline-flex; gap: 2px; }
.tw-ex-pacts .tw-btn { min-width: 40px; padding: var(--sp-1) var(--sp-2); }

/* 하단 시트(≤480px 아래에서 올라옴, 그 위는 가운데 모달 — 공통 모달 규격) */
.tw-ex-sheet { padding: 0; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--bg); box-shadow: var(--pop-shadow); overflow: hidden; color: var(--fg); width: min(560px, calc(100vw - 24px)); max-height: 90vh; box-sizing: border-box; }
.tw-ex-sheet[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.tw-ex-sheet::backdrop { background: var(--scrim, #000c); }
.tw-ex-sheethead { display: flex; align-items: center; justify-content: space-between; background: var(--bg); color: var(--fg-2); padding: 0 0 0 var(--sp-4); min-height: 48px; border-bottom: 1px solid var(--rule); }   /* 결정 CN: 옛 반전 막대 제목 → 카드 제목 모양 */
.tw-ex-sheethead h2 { font-size: var(--fs-card); font-weight: var(--fw-card); letter-spacing: var(--ls-card); margin: 0; }
.tw-ex-sheethead .tw-btn { color: var(--muted); background: none; border: 0; font-size: var(--fs-section); min-width: 44px; min-height: 44px; }
.tw-ex-sheetbody { overflow-y: auto; overscroll-behavior: contain; min-height: 0; }
.tw-ex-sheetfoot { display: grid; grid-template-columns: 1fr 2fr; gap: var(--sp-2); padding: var(--sp-3) var(--sp-3); border-top: 1px solid var(--rule); background: var(--bg); }
.tw-ex-sheetfoot .tw-btn { min-height: 44px; }
@media (max-width: 480px) {
  .tw-ex-sheet { width: 100vw; max-width: 100vw; margin: auto 0 0; border-width: 1px 0 0; border-radius: var(--radius) var(--radius) 0 0; max-height: 90vh; }
}

/* 낙찰내역·내 등록·내 입찰 */
.tw-ex-days { display: inline-flex; gap: var(--sp-1); }
.tw-ex-days .tw-ex-pill { min-width: 44px; justify-content: center; }
.tw-ex-minehead { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.tw-ex-cap { display: grid; gap: var(--sp-1); flex: 1 1 180px; font-size: var(--fs-body); }
.tw-ex-cap progress { width: 100%; height: 8px; accent-color: var(--fg-2); }
.tw-ct-row.is-soon .tw-ct-row__main small { color: var(--warn); }   /* 결정 CR15(갈래 C 검토): 곧 마감 줄마다 붙던 색 세로선 → '곧 마감' 글자 줄 색 */

/* 등록하기 */
.tw-ex-lctl { display: grid; gap: var(--sp-2); }
.tw-ex-lctl > .tw-ex-pill { justify-self: start; }
.tw-ex-guide { display: grid; gap: var(--sp-1); padding: var(--sp-3) var(--sp-3); border: 1px solid var(--line); border-radius: var(--radius-sm); background: transparent; }
.tw-ex-guide:empty { display: none; }
.tw-ex-guideh { font-weight: 700; font-size: var(--fs-body); color: var(--fg-2); }
.tw-ex-guideh small { font-weight: 400; color: var(--muted); }
.tw-ex-note { font-size: var(--fs-sub); color: var(--muted); overflow-wrap: anywhere; }
.tw-ex-fills { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-1); }
.tw-ex-fills .tw-btn { min-height: 38px; }
.tw-ex-qty { display: flex; align-items: center; gap: var(--sp-2); }
.tw-ex-qty .tw-ct-in { width: 7em; }
.tw-ex-unit { font-size: var(--fs-cap); color: var(--muted); margin-top: calc(-1 * var(--sp-2)); }
.tw-ex-unit:empty { display: none; }
.tw-ex-preview:empty { display: none; }
.tw-ex-prev { display: grid; gap: 2px; font-size: var(--fs-sub); padding: var(--sp-2) var(--sp-3); border-left: 2px solid var(--info); background: transparent; font-variant-numeric: tabular-nums; }
.tw-ex-warn1 { font-size: var(--fs-sub); color: var(--warn); }

/* 결정 BS② 2단계: 옛 설명 줄·규칙 5줄 → 그 자리 ⓘ(수수료 줄 끝 '등록 규칙', 낙찰 수·즐겨찾기 수·내 등록/입찰 머리·필터 묶음 첫 줄 오른쪽) */
.tw-ex-noteline, .tw-ex-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 var(--sp-2); min-width: 0; }
.tw-ex-noteline .tw-tip__txt { color: var(--muted); }
.tw-ex-foot { font-size: var(--fs-sub); color: var(--muted); justify-content: flex-start; }
.tw-ex-count { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--sp-1); }
.tw-ex-count .tw-tip, .tw-ex-foot .tw-tip, .tw-ex-phead .tw-tip { margin-block: calc(-1 * var(--sp-2)); }
.tw-ex-grptip { display: flex; justify-content: flex-end; margin: calc(-1 * var(--sp-2)) 0 calc(-1 * var(--sp-3)); }
.tw-ex-minehead > .tw-tip { margin-left: calc(-1 * var(--sp-2)); }
.tw-ex-affadd { display: inline-flex; align-items: center; gap: var(--sp-1); justify-self: start; }
.tw-ex-bid > .tw-tip { margin-left: calc(-1 * var(--sp-1)); }

/* 시세 탭: 요약 타일 4칸 · 날짜별 글자·블록 막대(그래프 라이브러리 없음) */
.tw-ex-psec { display: grid; gap: var(--sp-3); }
.tw-ex-psec h2 small { font-weight: 400; color: var(--muted); font-size: var(--fs-sub); }
.tw-ex-h3 { font-size: var(--fs-body); margin: var(--sp-1) 0 0; color: var(--fg-2); }
.tw-ex-tiles dd:not(.tw-delta) { font-size: var(--fs-strong); }
.tw-ex-tiles .tw-delta { color: var(--muted); }
.tw-ex-daily { display: grid; gap: var(--sp-1); font-size: var(--fs-sub); font-variant-numeric: tabular-nums; }
.tw-ex-drow { display: grid; grid-template-columns: 3.2em minmax(40px, 1fr) minmax(0, 1.4fr) minmax(0, auto); gap: var(--sp-2); align-items: center; min-width: 0; }
.tw-ex-dd { color: var(--muted); }
.tw-ex-dbar { width: 100%; height: 6px; background: var(--track); border: 0; border-radius: 999px; display: block; box-sizing: border-box; }   /* 인라인 style 없이(CSP) SVG 막대 — 결정 CN: 가는 둥근 막대(트랙·채움만 색) */
.tw-ex-dbar rect { fill: var(--gold); }
.tw-ex-dv { overflow-wrap: anywhere; min-width: 0; }
.tw-ex-dv small { color: var(--muted); margin-left: var(--sp-1); }
.tw-ex-dd { white-space: nowrap; }
.tw-ex-dn { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 9em; }
/* 좁은 화면: 날짜 | 막대 | 값 | 건수 한 줄(날짜가 두 줄로 꺾이거나 건수만 한 줄 따로 차지하지 않게), 거래량 블록은 숨긴다(숫자는 남음) */
@media (max-width: 480px) {
  .tw-ex-drow { grid-template-columns: 3.1em minmax(24px, 1fr) minmax(0, 1.7fr) auto; gap: var(--sp-2); }
  .tw-ex-dblk { display: none; }
  .tw-ex-dv small { display: block; margin-left: 0; }
  .tw-ex-dn { max-width: none; }
}
.tw-ex-recent { border-top: 1px solid var(--line); }
.tw-ex-rrow { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px var(--sp-3); padding: var(--sp-2) 2px; border-bottom: 1px solid var(--line); font-size: var(--fs-sub); min-width: 0; }
.tw-ex-rrow > small { flex-basis: 100%; color: var(--muted); }