/* Mulmit Polish — home watchlist rows (2026-09-27, preview).
 *
 * The phone board read as a web dashboard: a 16px logo glued to the name, the
 * price in a middle column, the line on the far right. Finance apps (and our own
 * /us rows) read the other way: identity on the left, the line in the middle,
 * the number on the right edge where the eye lands. Same data, same colours,
 * same lit end dot; only the row's composition changes.
 *
 *   [ logo ]  삼성전자            ~~~~~~•     279,114원
 *             기준 284,756원                  ▼ −1.98%
 *
 * Phone only: the desktop board is a grid of cards and keeps its own layout. */

@media (max-width: 760px) {
  .page-landing :is(#board, #my-board) > .tile:not(.tile-editing) {
    position: relative;
    /* The name column takes what a name and its reference line need (104px holds
       "기준 1,864,227원"), the line takes the rest: a fixed 68px line left the middle
       of a wide phone empty (operator, 2026-09-27). Tracks are fixed or fr, never
       content-sized, so the lines stack in one column across rows (each row is its
       own grid).
       ponytail: the price column is 90px, which holds "1,841,832원" (89px); it grows
       past that only when the text is bigger than ours (then rows may differ).
       Nothing has a floor but the price: on a Galaxy with enlarged text the row
       needed 330px and cut "-0.53%" off (operator report, 2026-09-27). Now the line
       gives way first, then the name ellipsises, and the price stays whole. */
    grid-template-columns: minmax(0, 104px) minmax(0, 1fr) minmax(90px, max-content);
    grid-template-rows: auto auto;
    align-content: center;
    gap: 3px 12px;
    min-height: 68px;
    padding: 12px 16px 12px 64px;
  }

  /* Identity: a 36px round logo spanning both lines. */
  .page-landing :is(#board, #my-board) > .tile:not(.tile-editing) .tile-head {
    position: static;
    grid-column: 1;
    grid-row: 1;
    align-self: end;
  }
  .page-landing :is(#board, #my-board) > .tile:not(.tile-editing) .tile-head > :is(img, .letter-mark) {
    position: absolute;
    top: 50%;
    left: 16px;
    width: 36px;
    height: 36px;
    margin: 0;
    padding: 5px;
    box-sizing: border-box;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 0 0 1px var(--line);
    object-fit: contain;
    transform: translateY(-50%);
  }
  /* Flags fill the circle. */
  .page-landing :is(#board, #my-board) > .tile:not(.tile-editing) .tile-head > img.inline-mark {
    padding: 0;
    object-fit: cover;
  }
  /* No reference line (coins): the name centres on the logo. */
  .page-landing :is(#board, #my-board) > .tile:not(.tile-editing):not(:has(.tile-anchor)) .tile-head {
    grid-row: 1 / span 2;
    align-self: center;
  }
  .page-landing :is(#board, #my-board) > .tile:not(.tile-editing) .tile-name {
    overflow: hidden;
    font-size: 15px;
    font-weight: 650;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .page-landing :is(#board, #my-board) > .tile:not(.tile-editing) .tile-anchor {
    grid-column: 1;
    grid-row: 2;
    overflow: hidden;
    color: var(--ink-3);
    font-weight: 500;
    text-overflow: ellipsis;
  }
  .page-landing :is(#board, #my-board) > .tile:not(.tile-editing) .tile-anchor-label { font-weight: 500; }

  /* The line sits between name and number. */
  .page-landing :is(#board, #my-board) > .tile:not(.tile-editing) .tile-foot {
    grid-column: 2;
    grid-row: 1 / span 2;
    width: 100%;
    height: 34px;
  }
  .world.page-landing :is(#board, #my-board) > .tile:not(.tile-editing) .tile-spark {
    --spark-pad-r: 6px;
    height: 34px;
  }
  /* When enlarged text leaves the line no room, the line goes whole — no lone dot. */
  .page-landing :is(#board, #my-board) > .tile:not(.tile-editing) .tile-foot { container-type: inline-size; }
  @container (max-width: 36px) {
    .world.page-landing :is(#board, #my-board) > .tile:not(.tile-editing) .tile-spark { visibility: hidden; }
  }

  /* The number owns the right edge. */
  .page-landing :is(#board, #my-board) > .tile:not(.tile-editing) .tile-value {
    grid-column: 3;
    grid-row: 1;
    display: flex;
    align-items: baseline;
    justify-self: end;
    gap: 1px;
    width: auto;
    font-size: 15px;
    font-weight: 650;
  }
  .page-landing :is(#board, #my-board) > .tile:not(.tile-editing) .tile-value > :first-child { justify-self: auto; }
  .page-landing :is(#board, #my-board) > .tile:not(.tile-editing) .tile-unit {
    color: var(--ink-3);
    font-size: 13px;
    font-weight: 500;
  }
  .page-landing :is(#board, #my-board) > .tile:not(.tile-editing) .tile-delta {
    grid-column: 3;
    grid-row: 2;
    justify-self: end;
    margin-right: 0;
  }
  .page-landing :is(#board, #my-board) > .tile:not(.tile-editing) .tile-change {
    font-size: 13px;
    font-weight: 650;
  }
}

/* Home hero: the line takes the card's free width, like the rows above.
 * It was absolute at 44% × 86px, so on a wider phone the level stood alone with
 * an empty strip beside it and a blank band over the line (operator,
 * 2026-09-27). The hero becomes two columns: the words in a max-content column,
 * the line in the rest. It grows sideways only: the line's vertical range
 * includes the reference close (console.js waterGeometry), so a taller box only
 * grows the blank between the line and a reference it no longer draws. */
@media (max-width: 760px) {
  .page-landing .seg-hero {
    grid-template-columns: max-content minmax(0, 1fr);
    column-gap: 16px;
  }
  .page-landing .seg-hero > :not(.ocean-hero-chart) { grid-column: 1; }
  .page-landing .ocean-hero-chart {
    position: relative;
    top: auto;
    right: auto;
    grid-column: 2;
    grid-row: 2 / span 2;
    align-self: stretch;
    width: auto;
    height: auto;
    min-height: 86px;
    margin: 14px -4px 4px 0;
  }
  /* The date line was capped at 48% so it could not run under the absolute line. */
  .page-landing .seg-hero-label { max-width: none; }
}

/* Narrow phones (360px). The level's width does not shrink with the screen, so
 * the hero line fell to 114px (main gave it ~122), and the reference line
 * "기준 1,864,227원" ran 5px past its column. A little less level, gap and logo
 * gives both back. */
@media (max-width: 370px) {
  .page-landing .seg-hero { column-gap: 12px; }
  .page-landing .seg-hero-level { font-size: 40px; }
  .page-landing :is(#board, #my-board) > .tile:not(.tile-editing) { padding-left: 56px; }
  .page-landing :is(#board, #my-board) > .tile:not(.tile-editing) .tile-head > :is(img, .letter-mark) {
    left: 14px;
    width: 32px;
    height: 32px;
    padding: 4px;
  }
}

/* -- The same row everywhere else (2026-09-27, operator: "다른 탭들로 넓히자") --
 *
 * The /us boards and the home private-market pair read as the home rows do:
 *   [logo] name        ~~~line~~~   price
 *          basis                    change
 * Here the logo is the first grid track (the head becomes display: contents),
 * and every board shares its columns with its rows (subgrid), so a wide price
 * such as "4,282.8 USD/oz" moves the whole column, never one row's line.
 * /us rows keep the basis ("9. 25. 마감 이후") under the name and drop the
 * anchor, as the /us watchlist already did (2026-09-26). The lead cards
 * (home KOSPI 200, /kr cards, /us S&P 500) stay cards: they are the answer. */
@media (max-width: 760px) {
  .page-us #us-board #board,
  .page-us :is(#uso-grid, #commodity-board, #smm-grid, #dcb-grid),
  .page-landing #home-private-body.hp-tiles {
    grid-template-columns: 36px minmax(84px, 112px) minmax(52px, 1fr) max-content;
    column-gap: 12px;
    row-gap: 0;
  }
  .page-us :is(#uso-grid, #commodity-board, #smm-grid, #dcb-grid) { padding: 0 16px; }

  .page-us #board > .tile:not(:first-child),
  .page-us :is(#commodity-board, #smm-grid, #dcb-grid) > .tile,
  :is(.page-us, .page-landing) #uso-grid > .kro-card,
  .page-landing #home-private-body > .tile {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: subgrid;
    grid-template-rows: auto auto;
    grid-template-areas: none;
    align-items: center;
    row-gap: 3px;
    min-height: 0;
    margin: 0;
    padding: 12px 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }
  /* A line between visible rows. The two-column grids pad themselves with empty
     ghost cells; in one column they would be empty rows. */
  .page-us #board > .tile.is-ghost,
  .page-us :is(#uso-grid, #commodity-board, #smm-grid, #dcb-grid) > .is-ghost { display: none; }
  .page-us :is(#commodity-board, #smm-grid, #dcb-grid) > .tile:not(.is-ghost) ~ .tile:not(.is-ghost),
  :is(.page-us, .page-landing) #uso-grid > .kro-card ~ .kro-card { border-top: 1px solid var(--line); }
  /* The home pair carried its old two-column divider (home-current.css, 1,3,0). */
  .page-landing #home-private #home-private-body > .tile { padding: 12px 0; border: 0; }
  .page-landing #home-private #home-private-body > .tile + .tile { border-top: 1px solid var(--line); }
  /* Private names have no 30-day series; main never showed the empty frame. */
  .page-landing #home-private-body > .tile > .tile-foot:has(.is-absent) { visibility: hidden; }
  .page-us :is(#commodity-board, #smm-grid, #dcb-grid) > a.tile:hover,
  :is(.page-us, .page-landing) #uso-grid > .kro-card:hover,
  .page-landing #home-private-body > a.tile:hover { background: transparent; box-shadow: none; transform: none; }

  /* Identity: logo (36px circle) spanning both lines, name, basis. */
  .page-us #board > .tile:not(:first-child) > .tile-head,
  .page-us :is(#commodity-board, #smm-grid, #dcb-grid) > .tile > .tile-head,
  :is(.page-us, .page-landing) #uso-grid > .kro-card > header,
  :is(.page-us, .page-landing) #uso-grid > .kro-card > header > h3:has(> .kro-hub-link),
  .page-landing #home-private-body > .tile > .tile-head { display: contents; }
  :is(.page-us #board > .tile:not(:first-child) > .tile-head,
      .page-us :is(#commodity-board, #smm-grid, #dcb-grid) > .tile > .tile-head,
      :is(.page-us, .page-landing) #uso-grid > .kro-card > header > h3,
      .page-landing #home-private-body > .tile > .tile-head) > :is(img, svg, .letter-mark) {
    grid-column: 1;
    grid-row: 1 / span 2;
    width: 36px;
    height: 36px;
    margin: 0;
    padding: 5px;
    box-sizing: border-box;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 0 0 1px var(--line);
    color: #3a4150;
    object-fit: contain;
  }
  :is(.page-us #board > .tile:not(:first-child) > .tile-head,
      .page-us :is(#commodity-board, #smm-grid, #dcb-grid) > .tile > .tile-head,
      :is(.page-us, .page-landing) #uso-grid > .kro-card > header > h3) > img.inline-mark[src*="/flags/"] {
    padding: 0;
    object-fit: cover;
  }
  :is(.page-us #board > .tile:not(:first-child),
      .page-us :is(#commodity-board, #smm-grid, #dcb-grid) > .tile,
      .page-landing #home-private-body > .tile) .tile-name,
  :is(.page-us, .page-landing) #uso-grid > .kro-card > header > h3,
  :is(.page-us, .page-landing) #uso-grid > .kro-card > header > h3 > .kro-hub-link {
    grid-column: 2;
    grid-row: 1;
    align-self: end;
    min-width: 0;
    margin: 0;
    overflow: hidden;
    color: var(--ink);
    font-size: 15px;
    font-weight: 650;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  :is(.page-us #board > .tile:not(:first-child),
      .page-us :is(#commodity-board, #smm-grid, #dcb-grid) > .tile,
      .page-landing #home-private-body > .tile) :is(.tile-tag, .tile-anchor),
  :is(.page-us, .page-landing) #uso-grid > .kro-card .kro-sym,
  :is(.page-us, .page-landing) #uso-grid > .kro-card .kro-vs-sep { display: none; }
  :is(.page-us #board > .tile:not(:first-child),
      .page-us :is(#commodity-board, #smm-grid, #dcb-grid) > .tile,
      .page-landing #home-private-body > .tile) > .tile-delta { display: contents; }
  :is(.page-us #board > .tile:not(:first-child),
      .page-us :is(#commodity-board, #smm-grid, #dcb-grid) > .tile,
      .page-landing #home-private-body > .tile) .tile-basis,
  :is(.page-us, .page-landing) #uso-grid > .kro-card .kro-vs-basis,
  :is(.page-us, .page-landing) #uso-grid > .kro-card > .kro-vs:not(:has(.kro-vs-pct)) {
    display: block;
    grid-column: 2;
    grid-row: 2;
    align-self: start;
    min-width: 0;
    margin: 0;
    overflow: hidden;
    color: var(--ink-3);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.45;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* The line between name and number. */
  :is(.page-us #board > .tile:not(:first-child),
      .page-us :is(#commodity-board, #smm-grid, #dcb-grid) > .tile,
      .page-landing #home-private-body > .tile) > .tile-foot,
  :is(.page-us, .page-landing) #uso-grid > .kro-card > .tile-spark {
    display: block;
    grid-column: 3;
    grid-row: 1 / span 2;
    width: 100%;
    height: 34px;
    margin: 0;
  }
  :is(.page-us #board > .tile:not(:first-child),
      .page-us :is(#commodity-board, #smm-grid, #dcb-grid) > .tile,
      .page-landing #home-private-body > .tile) .tile-spark,
  :is(.page-us, .page-landing) #uso-grid > .kro-card > .tile-spark {
    --spark-pad-r: 6px;
    grid-area: auto;
    width: 100%;
    height: 34px;
    padding: 0 var(--spark-pad-r) 0 0;
  }
  :is(.page-us, .page-landing) #uso-grid > .kro-card > .tile-spark { display: flex; grid-column: 3; grid-row: 1 / span 2; min-width: 0; }
  :is(.page-us, .page-landing) #uso-grid > .kro-card > .tile-spark > svg { width: 100%; min-width: 0; height: 100%; }
  /* /us 보드의 일별 선(10년물·원·달러: 숫자는 직전 공표일 대비, 선은 한 달)은 기간 글자를 남긴다 —
     위치는 us-current.css가 선 밑으로 놓는다(운영자 2026-10-03 "3번으로 가자"). */
  .page-us #board > .tile:not(:first-child) .tile-spark:not(.is-absent):not([data-span="days"]) .spark-period,
  :is(.page-us :is(#commodity-board, #smm-grid, #dcb-grid) > .tile,
      .page-landing #home-private-body > .tile) .tile-spark:not(.is-absent) .spark-period,
  :is(.page-us, .page-landing) #uso-grid > .kro-card > .tile-spark .spark-period { display: none; }

  /* The number owns the right edge. */
  :is(.page-us #board > .tile:not(:first-child),
      .page-us :is(#commodity-board, #smm-grid, #dcb-grid) > .tile,
      .page-landing #home-private-body > .tile) > .tile-value,
  :is(.page-us, .page-landing) #uso-grid > .kro-card > .kro-price {
    display: flex;
    grid-column: 4;
    grid-row: 1;
    align-items: baseline;
    align-self: end;
    justify-self: end;
    justify-content: flex-end;
    gap: 2px;
    margin: 0;
    color: var(--ink);
    font-size: 15px;
    font-weight: 650;
    line-height: 1.25;
    letter-spacing: 0;
    white-space: nowrap;
  }
  :is(.page-us #board > .tile:not(:first-child),
      .page-us :is(#commodity-board, #smm-grid, #dcb-grid) > .tile,
      .page-landing #home-private-body > .tile) .tile-unit {
    color: var(--ink-3);
    font-size: 12px;
    font-weight: 500;
  }
  :is(.page-us #board > .tile:not(:first-child),
      .page-us :is(#commodity-board, #smm-grid, #dcb-grid) > .tile,
      .page-landing #home-private-body > .tile) .tile-change,
  :is(.page-us, .page-landing) #uso-grid > .kro-card .kro-vs-pct {
    grid-column: 4;
    grid-row: 2;
    align-self: start;
    justify-self: end;
    margin: 0;
    font-size: 13px;
    font-weight: 650;
    line-height: 1.45;
    white-space: nowrap;
  }
  :is(.page-us, .page-landing) #uso-grid > .kro-card > .kro-vs:has(.kro-vs-pct) { display: contents; }
  /* A thin-trading warning keeps its place: a third line under the name. */
  :is(.page-us, .page-landing) #uso-grid > .kro-card > .kro-badges { grid-column: 2 / -1; grid-row: 3; margin: 2px 0 0; }
}

/* -- Tables that are lists (2026-09-27) --------------------------------------
 * On a phone, "국내장, 큰 것과 움직인 것" and the league standings were desktop
 * tables squeezed to three columns: a tinted sticky first column, a vertical rule,
 * 80-90px rows. They are ranked lists, so they read as the other rows do:
 *   1  [logo] SK하이닉스               -1.50%        (kr: change / traded value)
 *             KOSPI                   6.2조원
 *   1  [logo] grok-4.6     ~~line~~   +4.99%        (league: return / value)
 *             xAI                     1억 499만
 * The league rows bring back the trend line and the value the phone hid. Tables
 * that compare several columns (index family, options, fills) stay tables. */
@media (max-width: 760px) {
  .page-kr #krl-table,
  .world .league-table:has(td.league-ret),
  .page-kr #krl-table > tbody,
  .world .league-table:has(td.league-ret) > tbody {
    display: block;
    width: 100%;
    min-width: 0;
  }
  /* Headings stay readable to a screen reader; the rows carry their own words. */
  .page-kr #krl-table > thead,
  .world .league-table:has(td.league-ret) > thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .page-kr #krl-table > tbody > tr,
  .world .league-table:has(td.league-ret) > tbody > tr {
    display: grid;
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: 12px;
    row-gap: 2px;
    padding: 12px 16px;
    border: 0;
    background: transparent;
  }
  .page-kr #krl-table > tbody > tr { grid-template-columns: 20px 36px minmax(0, 1fr) max-content; }
  .world .league-table:has(td.league-ret) > tbody > tr { grid-template-columns: 20px minmax(0, 1fr) 56px max-content; }
  .page-kr #krl-table > tbody > tr + tr,
  .world .league-table:has(td.league-ret) > tbody > tr + tr { border-top: 1px solid var(--line); }
  .page-kr #krl-table > tbody > tr > :is(td, th),
  .world .league-table:has(td.league-ret) > tbody > tr > :is(td, th) {
    position: static;
    display: block;
    min-width: 0;
    width: auto;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    text-align: left;
  }

  /* Rank: a quiet number on the left edge. */
  .page-kr #krl-table > tbody > tr > .krl-rank,
  .world .league-table:has(td.league-ret) > tbody > tr > .league-rank {
    grid-column: 1;
    grid-row: 1 / span 2;
    color: var(--ink-3);
    font-size: 13px;
    font-weight: 650;
    font-variant-numeric: tabular-nums;
    text-align: center;
  }

  /* /kr identity: logo, name, market. */
  /* The scroll box shrinks to its table (monitor.css max-width: max-content) and
     league cells cap at 9.5em (league.bundle.css): a list row needs the full width. */
  .page-kr #krl-panel > .table-scroll,
  .world .panel > .table-scroll:has(> .league-table td.league-ret) { max-width: none; }
  .page-kr #krl-table > tbody > tr > :is(td, th),
  .world .league-table:has(td.league-ret) > tbody > tr > :is(.league-rank, .league-who, .league-trend, .league-ret, .league-nav) { max-width: none; min-width: 0; min-height: 0; }
  /* monitor.css makes this cell a flex row at (1,2,1); the row grid needs its parts. */
  .page-kr #kr-leaders #krl-table > tbody > tr > th[scope="row"] { display: contents; }
  .page-kr #krl-table > tbody > tr > th > :first-child:not(a) {
    grid-column: 2;
    grid-row: 1 / span 2;
    width: 36px;
    height: 36px;
    margin: 0;
    padding: 5px;
    box-sizing: border-box;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 0 0 1px var(--line);
    object-fit: contain;
  }
  .page-kr #kr-leaders #krl-table > tbody > tr > th[scope="row"] { color: var(--ink); text-align: left; }
  .page-kr #krl-table > tbody > tr > th > a {
    display: block;
    justify-self: stretch;
    text-align: left;
    grid-column: 3;
    grid-row: 1;
    align-self: end;
    min-width: 0;
    overflow: hidden;
    color: var(--ink);
    font-size: 15px;
    font-weight: 650;
    line-height: 1.35;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .page-kr #krl-table > tbody > tr > th > .krl-market {
    display: block;
    grid-column: 3;
    grid-row: 2;
    align-self: start;
    margin: 0;
    color: var(--ink-3);
    font-size: 12px;
    font-weight: 500;
  }
  .page-kr #krl-table > tbody > tr > th > .krl-flags {
    grid-column: 3 / -1;
    grid-row: 3;
    justify-self: start;
    margin-top: 4px;
  }
  .page-kr #krl-table > tbody > tr:has(.krl-flags) > .krl-rank,
  .page-kr #krl-table > tbody > tr:has(.krl-flags) > th > :first-child:not(a) { grid-row: 1 / span 3; }
  .page-kr #krl-table > tbody > tr > .krl-close { display: none; }
  .page-kr #krl-table > tbody > tr > td:nth-child(4) {
    grid-column: 4;
    grid-row: 1;
    align-self: end;
    justify-self: end;
    font-size: 15px;
    font-weight: 650;
    text-align: right;
  }
  .page-kr #krl-table > tbody > tr > td:nth-child(5) {
    grid-column: 4;
    grid-row: 2;
    align-self: start;
    justify-self: end;
    color: var(--ink-3);
    font-size: 12px;
    font-weight: 500;
    text-align: right;
  }

  /* League identity: the link keeps its box; the logo sits in the cell's gutter. */
  .world .league-table:has(td.league-ret) > tbody > tr > .league-who {
    position: relative;
    grid-column: 2;
    grid-row: 1 / span 2;
    min-height: 36px;
    padding-left: 48px;
  }
  .world .league-table:has(td.league-ret) .league-who .league-logo {
    position: absolute;
    top: 50%;
    left: 0;
    width: 36px;
    height: 36px;
    margin: 0;
    padding: 9px;
    box-sizing: border-box;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 0 0 1px var(--line);
    object-fit: contain;
    transform: translateY(-50%);
  }
  .world .console-section[aria-labelledby="personas-title"] .league-who .league-face {
    position: absolute;
    top: 50%;
    left: 0;
    width: 36px;
    height: 36px;
    margin: 0;
    transform: translateY(-50%);
  }
  .world .league-table:has(td.league-ret) .league-who .league-name {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-size: 15px;
    font-weight: 650;
    line-height: 1.3;
    white-space: normal;
  }
  .world .league-page .league-table:has(td.league-ret) .league-who .league-name a {
    display: inline;
    min-height: 0;
    border: 0;
    color: var(--ink);
    text-decoration: none;
  }
  .world .league-table:has(td.league-ret) .league-who small {
    display: block;
    margin: 2px 0 0;
    overflow: hidden;
    color: var(--ink-3);
    font-size: 12px;
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .world .league-table:has(td.league-ret) > tbody > tr > .league-trend {
    display: block;
    grid-column: 3;
    grid-row: 1 / span 2;
    height: 28px;
  }
  .world .league-table:has(td.league-ret) > tbody > tr > .league-trend svg {
    display: block;
    width: 100%;
    min-width: 0;
    height: 100%;
  }
  .world .league-table:has(td.league-ret) > tbody > tr > .league-ret {
    grid-column: 4;
    grid-row: 1;
    align-self: end;
    justify-self: end;
    font-size: 15px;
    text-align: right;
  }
  .world .league-table:has(td.league-ret) > tbody > tr > .league-ret b { font-weight: 650; }
  .world .league-table:has(td.league-ret) > tbody > tr > .league-nav {
    display: block;
    grid-column: 4;
    grid-row: 2;
    align-self: start;
    justify-self: end;
    color: var(--ink-3);
    font-size: 12px;
    font-weight: 500;
    text-align: right;
  }
  .world .league-table:has(td.league-ret) > tbody > tr > .league-make { display: none; }
  /* The benchmark row has no logo and no line: its words take that room. */
  .world .league-table:has(td.league-ret) > tbody > tr.league-index > .league-trend { display: none; }
  .world .league-table:has(td.league-ret) > tbody > tr.league-index > .league-who { grid-column: 2 / span 2; }
}

/* -- Round 3 (2026-09-27): one basis per board, league names, lead-card logos -- */

/* US large caps: when every row measures from the same close, the board says it
 * once above the rows (monitor.js #uso-basis) and each row shows its ticker. The
 * wide cards keep their own basis, so the caption is a phone thing only. */
.uso-basis { display: none; }
@media (max-width: 760px) {
  :is(.page-us, .page-landing) #us-overnight > .uso-basis:not([hidden]) {
    display: block;
    margin: 0 0 8px;
    padding: 0 var(--panel-inset, 16px);
    color: var(--ink-3);
    font-size: 12px;
    font-weight: 500;
  }
  :is(.page-us, .page-landing) #us-overnight:has(#uso-basis:not([hidden])) #uso-grid > .kro-card .kro-vs-basis { display: none; }
  :is(.page-us, .page-landing) #us-overnight:has(#uso-basis:not([hidden])) #uso-grid > .kro-card .kro-sym {
    display: block;
    grid-column: 2;
    grid-row: 2;
    align-self: start;
    min-width: 0;
    margin: 0;
    color: var(--ink-3);
    font: 500 12px/1.45 var(--sans);
    letter-spacing: 0;
  }

  /* League: the name gets the room a narrower line gives back, and a long model
   * name breaks at its hyphens onto a second line instead of losing its tail. */
  .world .league-table:has(td.league-ret) > tbody > tr {
    grid-template-columns: 18px minmax(0, 1fr) 48px max-content;
    column-gap: 10px;
  }

  /* Lead cards: the rows' round logo, one step smaller (operator, 2026-09-27). */
  .page-kr #kro-grid > .kro-card > header,
  .page-us #board > .tile:first-child > .tile-head {
    align-items: center;
  }
  .page-kr #kro-grid > .kro-card > header > h3 {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
  }
  .page-us #board > .tile:first-child > .tile-head { display: flex; gap: 10px; }
  .page-kr #kro-grid > .kro-card > header > h3 > :is(img, svg, .letter-mark):first-child,
  .page-us #board > .tile:first-child > .tile-head > :is(img, svg, .letter-mark):first-child {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    margin: 0;
    padding: 4px;
    box-sizing: border-box;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 0 0 1px var(--line);
    object-fit: contain;
  }
  .page-kr #kro-grid > .kro-card > header > h3 > img.inline-mark[src*="/flags/"],
  .page-us #board > .tile:first-child > .tile-head > img.inline-mark[src*="/flags/"] {
    padding: 0;
    object-fit: cover;
  }
}

/* /us lead (S&P 500): the heading stands on the card's text column, and the
 * change, its basis and the reference share one line. The heading took the
 * section inset inside a card that already insets its words (12px off), and
 * five short lines in a column read as a tall, tiring stack (operator,
 * 2026-09-27). */
@media (max-width: 760px) {
  .page-us #us-board > header { padding-left: 0; }
  .page-us #board > .tile:first-child {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    column-gap: 8px;
    row-gap: 6px;
  }
  .page-us #board > .tile:first-child > :not(.tile-foot) { grid-column: 1 / -1; }
  .page-us #board > .tile:first-child > .tile-foot { grid-column: 1 / -1; grid-row: auto; }
  .page-us #board > .tile:first-child > .tile-delta {
    grid-column: 1;
    grid-row: 3;
    display: flex;
    flex-wrap: nowrap;
    align-items: baseline;
    align-self: baseline;
    gap: 8px;
    margin: 0;
  }
  .page-us #board > .tile:first-child > .tile-delta > .tile-basis {
    flex: 0 0 auto;
    margin: 0;
    color: var(--ink-3);
    font-size: 13px;
  }
  .page-us #board > .tile:first-child > .tile-anchor {
    grid-column: 2;
    grid-row: 3;
    align-self: baseline;
    min-width: 0;
    margin: 0;
    overflow: hidden;
    color: var(--ink-3);
    font-size: 13px;
    white-space: nowrap;
  }
  .page-us #board > .tile:first-child > .tile-anchor::before {
    content: "·";
    margin-right: 6px;
  }
  .page-us #board > .tile:first-child > .tile-say { margin-top: 4px; }
}

/* -- Home, below the board (2026-09-27, operator: "홈화면 더 다듬자") --------- */
@media (max-width: 760px) {
  /* 지난 시장 요약: quiet bullets, the figures close under the prose, one line
     between their two rows (each cell drew a top and a bottom line). */
  .page-landing #market-mood .mood-line::after {
    top: .78em;
    width: 4px;
    height: 4px;
    background: var(--ink-3);
  }
  .page-landing #market-mood .mood-points { margin-bottom: 8px; }
  .page-landing #market-mood .pulse-chips { padding-top: 4px; }
  .page-landing #market-mood .pulse-chip { border-bottom: 0; }

  /* 비상장: the heading had a 13ch cap made for the desktop's three narrow
     columns; on a phone it broke "장에서는" onto its own line. */
  .page-landing .home-lede > :is(.pulse-strip, .pulse-side) > header h2 { max-width: none; }

  /* 지금 이슈: topic and age on the meta line, the headline under it at full
     width, the chevron centred on the row. The tail's two parts go to their
     own cells (display: contents) so the age no longer narrows the headline. */
  /* Four tracks: rank · the meta line (topic left, age right) · the rank move · the
     chevron. The move had shared the age's cell and the two drew on top of each other
     ("5시간 전" under "▼3", operator 2026-09-27). Each row is its own grid, so the
     move's auto track is 0 wide on rows without one; the headline spans it. */
  /* 순위 칸 14px · 간격 8px — 20px 칸에 한 자리 숫자(약 9px)가 서서 제목까지 눈에 21px 벌어져 보였다
     (운영자 2026-10-01 "이슈랑 순위 사이 칸 좀만 줄여"). 순위는 한 자리다. */
  .page-landing #live-issues .issue-row {
    grid-template-columns: 14px minmax(0, 1fr) auto 32px;
    column-gap: 8px;
    row-gap: 3px;
  }
  .page-landing #live-issues .issue-tag {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    line-height: 18px;
    padding: 0;
    background: none;
    color: var(--ink-3);
    font-size: 12px;
    font-weight: 600;
  }
  .page-landing #live-issues .issue-tail { display: contents; }
  /* The rank move (NEW, ▲3) has its own track beside the age: without a place it fell
     into the 20px rank column and ran over the tag (seen 2026-09-27 on a NEW issue). */
  .page-landing #live-issues :is(.issue-sources, .issue-move) {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    align-self: center;
    font-size: 12px;
    line-height: 18px;
  }
  .page-landing #live-issues .issue-move { grid-column: 3; }
  .page-landing #live-issues .issue-toggle {
    grid-column: 4;
    grid-row: 1 / span 2;
    align-self: center;
  }
  .page-landing #live-issues .issue-body { grid-column: 2 / 4; }
  .page-landing #live-issues .issue-title { font-size: 15px; font-weight: 600; }

  /* 오늘의 질문: choices are soft filled buttons, not outlined fields, and
     three choices share one row instead of leaving the third alone. */
  .page-landing #home-ask .ask-options:not(.is-pair):has(> :nth-child(3):last-child) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .page-landing #home-ask .ask-option {
    justify-content: center;
    border-color: transparent;
    background: var(--water-3);
    text-align: center;
  }
  .page-landing #home-ask .ask-option[aria-pressed="true"] { border-color: var(--accent); }
  /* At night --water-3 is the card's own tone; the fill steps up from the card. */
  html[data-theme="dark"] .page-landing #home-ask .ask-option { background: color-mix(in srgb, var(--ink) 9%, var(--panel)); }
  .page-landing #home-ask .ask-option:has(.ask-fill) { justify-content: space-between; text-align: left; }
  /* Once the tally shows, each choice carries "100% 2명" beside its name; three
     to a row left the names one syllable per line (operator, 2026-09-27). The
     results read as a list, one choice per row, and a name never wraps. */
  .page-landing #home-ask .ask-options:not(.is-pair):has(> :nth-child(3):last-child):has(.ask-result) {
    grid-template-columns: minmax(0, 1fr);
  }
  .page-landing #home-ask .ask-option .ask-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .page-landing #home-ask .ask-option .ask-result { flex: 0 0 auto; white-space: nowrap; }

  /* 오늘의 한 마디: words on the same column as the section headings. */
  .page-landing #home-quote { padding-inline: var(--panel-inset); }
  .page-landing #home-quote .hq-fact b { color: var(--ink); }

  /* 캘린더: days outside the month are empty, not grey blocks (a dark-world
     leftover, rgba(0,0,0,.16), on the daylight canvas). */
  .world .cal-cell.is-blank { background: transparent; }

  /* 지금 일어나는 일: the kind is a label in the row, not a coloured pill each. */
  .world #signal-feed .feed-tag {
    padding: 0;
    background: none;
    color: var(--ink-3);
    font-weight: 600;
    text-align: left;
  }

  /* 뉴스 영상: a list of rows with a small thumbnail, not four full-width
     posters (1,100px of scrolling for four links). */
  .page-landing .news-videos { gap: 0; }
  .page-landing .news-videos > li {
    display: grid;
    grid-template-columns: 128px minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    column-gap: 12px;
    row-gap: 4px;
    padding: 12px 0;
  }
  .page-landing .news-videos > li + li { border-top: 1px solid var(--line); }
  .page-landing .news-videos > li > .nvid-shot {
    grid-column: 1;
    grid-row: 1 / span 2;
    align-self: start;
    border-radius: 10px;
  }
  .page-landing .news-videos > li > .nvid-title {
    grid-column: 2;
    grid-row: 1;
    min-height: 0;
    font-size: 14px;
    font-weight: 600;
  }
  .page-landing .news-videos > li > .nvid-meta {
    grid-column: 2;
    grid-row: 2;
    align-self: start;
    font-size: 12px;
    font-weight: 500;
  }
  .page-landing .news-videos > li > :not(.nvid-shot, .nvid-title, .nvid-meta) { grid-column: 1 / -1; }
  /* Channel over date: side by side they wrapped with the dot left at a line end. */
  .page-landing .news-videos > li > .nvid-meta { flex-direction: column; align-items: flex-start; gap: 0; }
  .page-landing .news-videos .nvid-channel::after { content: none; }
  .page-landing .news-videos .nvid-badge { width: 30px; height: 30px; }
  .page-landing .news-videos li.playing { display: block; border: 0; }

  /* 미국 대형주 on the home: the same rows as /us (rules above), on one panel. */
  .page-landing #uso-grid {
    grid-template-columns: 36px minmax(84px, 112px) minmax(52px, 1fr) max-content;
    column-gap: 12px;
    row-gap: 0;
    padding: 0 16px;
    overflow: hidden;
    border-radius: 16px;
    background: var(--panel);
    box-shadow: var(--surface-shadow);
  }
}

/* -- /kr, 코스피 지수군 down (2026-09-27, operator: "한국탭도 다듬자") -------- */
@media (max-width: 760px) {
  /* 코스피 지수군: six columns squeezed into a scrolling table became a list.
   *   코스피                                   7,017.91
   *   연초 +66.53%  최고 대비 −23.00%  23.6조     +0.15%
   * Every column stays (nothing hidden); the three quiet ones carry their
   * names in front, the header row is kept for screen readers only. */
  .page-kr #kr-indices .kridx-table,
  .page-kr #kr-indices .kridx-table > tbody {
    display: block;
    width: 100%;
    min-width: 0;
  }
  .page-kr #kr-indices .table-scroll { max-width: none; overflow: visible; }
  .page-kr #kr-indices .kridx-table > thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .page-kr #kr-indices .kridx-table > tbody > tr {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 10px;
    row-gap: 3px;
    padding: 12px 16px;
    border: 0;
    background: transparent;
  }
  .page-kr #kr-indices .kridx-table > tbody > tr + tr { border-top: 1px solid var(--line); }
  .page-kr #kr-indices .kridx-table > tbody > tr > td {
    position: static;
    display: block;
    min-width: 0;
    max-width: none;
    min-height: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    white-space: nowrap;
  }
  /* Row 1: name, close. */
  .page-kr #kr-indices .kridx-table > tbody > tr > td:nth-child(1) {
    order: 1;
    flex: 1 1 calc(100% - 110px);
    overflow: hidden;
    color: var(--ink);
    font-size: 15px;
    font-weight: 650;
    text-align: left;
    text-overflow: ellipsis;
  }
  .page-kr #kr-indices .kridx-table > tbody > tr > td:nth-child(2) {
    order: 2;
    flex: 0 0 100px;
    color: var(--ink);
    font-size: 15px;
    font-weight: 650;
    text-align: right;
  }
  /* Row 2: the three quiet figures, then the day's change on the right. */
  .page-kr #kr-indices .kridx-table > tbody > tr > td:is(:nth-child(4), :nth-child(5), :nth-child(6)) {
    font-size: 12px;
    font-weight: 600;
    text-align: left;
  }
  .page-kr #kr-indices .kridx-table > tbody > tr > td:nth-child(4) { order: 3; }
  .page-kr #kr-indices .kridx-table > tbody > tr > td:nth-child(5) { order: 4; }
  .page-kr #kr-indices .kridx-table > tbody > tr > td:nth-child(6) { order: 5; color: var(--ink-3); }
  .page-kr #kr-indices .kridx-table > tbody > tr > td:is(:nth-child(4), :nth-child(5), :nth-child(6))::before {
    margin-right: 4px;
    color: var(--ink-3);
    font-weight: 500;
  }
  .page-kr #kr-indices .kridx-table > tbody > tr > td:nth-child(4)::before { content: "연초"; }
  .page-kr #kr-indices .kridx-table > tbody > tr > td:nth-child(5)::before { content: "최고 대비"; }
  .page-kr #kr-indices .kridx-table > tbody > tr > td:nth-child(6)::before { content: "거래"; }
  html[data-lang="en"] .page-kr #kr-indices .kridx-table > tbody > tr > td:nth-child(4)::before { content: "YTD"; }
  html[data-lang="en"] .page-kr #kr-indices .kridx-table > tbody > tr > td:nth-child(5)::before { content: "from high"; }
  html[data-lang="en"] .page-kr #kr-indices .kridx-table > tbody > tr > td:nth-child(6)::before { content: "value"; }
  .page-kr #kr-indices .kridx-table > tbody > tr > td:nth-child(3) {
    order: 6;
    margin-left: auto;
    font-size: 13px;
    font-weight: 650;
    text-align: right;
  }

  /* 오늘 시장의 등락 분포: the columns stay inside the card's text column
     (the end labels "−7%이하" ran past the card edge). */
  .page-kr #kr-breadth #krbd-bars.krbd-hist { padding-inline: 16px; }

  /* 업종별 오늘: the sort choice is a quiet pair; the chosen one is filled.
     Two 44px outlined boxes read as form fields. */
  .page-kr #kr-industry .ko-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
  .page-kr #kr-industry .ko-toolbar > .ko-choice {
    min-height: 36px;
    padding: 0 14px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--ink-3);
    font-weight: 600;
  }
  .page-kr #kr-industry .ko-toolbar > .ko-choice[aria-pressed="true"] { background: var(--water-3); color: var(--ink); }
  .page-kr #kr-industry .ko-toolbar > .ko-help { flex: 1 1 100%; margin-top: 4px; }

  /* 본사 소재지별: seventeen regions as wrapping chips, no orphan cell. */
  .page-kr #kr-region .ko-region-choices {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }
  .page-kr #kr-region .ko-region-choices > .ko-choice {
    flex: 0 0 auto;
    min-width: 52px;
    min-height: 36px;
    padding: 0 12px;
    border: 0;
    border-radius: 999px;
    background: var(--water-3);
    font-weight: 600;
  }
  .page-kr #kr-region .ko-region-choices > .ko-choice[aria-pressed="true"] {
    background: var(--ink);
    color: var(--panel);
  }

  /* Top stocks under an industry or a region: the same round logo as every list. */
  .page-kr .ko-stock > :is(img, .letter-mark):first-child {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    margin: 0;
    padding: 4px;
    box-sizing: border-box;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 0 0 1px var(--line);
    object-fit: contain;
  }
  .page-kr .ko-stock > .letter-mark:first-child { padding: 0; font-size: 13px; }

  /* 옵션: the most-traded contracts were a table whose first column wrapped
     "2026-10 콜 1,300" into three lines (146px rows). One row per contract:
       2026-10 콜 1,300                 거래량 4,530
       종가 2.2  미결제 6,228  IV 42.8%  내가격 3.8%            */
  .page-kr #krop-rank,
  .page-kr #krop-rank > tbody { display: block; width: 100%; min-width: 0; }
  .page-kr #krop-rank-wrap { max-width: none; overflow: visible; }
  .page-kr #krop-rank > thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .page-kr #krop-rank > tbody > tr {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 10px;
    row-gap: 3px;
    padding: 11px 16px;
    border: 0;
    background: transparent;
  }
  .page-kr #krop-rank > tbody > tr + tr { border-top: 1px solid var(--line); }
  .page-kr #krop-rank > tbody > tr > :is(th, td) {
    position: static;
    display: block;
    min-width: 0;
    max-width: none;
    min-height: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    white-space: nowrap;
  }
  .page-kr #krop-rank > tbody > tr > th {
    order: 1;
    flex: 1 1 calc(100% - 130px);
    font-size: 15px;
    font-weight: 650;
    text-align: left;
  }
  .page-kr #krop-rank > tbody > tr > td:nth-child(2) {
    order: 2;
    flex: 0 0 120px;
    color: var(--ink);
    font-size: 15px;
    font-weight: 650;
    text-align: right;
  }
  .page-kr #krop-rank > tbody > tr > td.col-value { display: none; }
  .page-kr #krop-rank > tbody > tr > td:nth-child(n+4) {
    order: 3;
    color: var(--ink-2);
    font-size: 12px;
    font-weight: 600;
    text-align: left;
  }
  .page-kr #krop-rank > tbody > tr > :is(td:nth-child(2), td:nth-child(n+4))::before {
    margin-right: 4px;
    color: var(--ink-3);
    font-weight: 500;
  }
  .page-kr #krop-rank > tbody > tr > td:nth-child(2)::before { content: "거래량"; font-size: 12px; }
  .page-kr #krop-rank > tbody > tr > td:nth-child(4)::before { content: "종가"; }
  .page-kr #krop-rank > tbody > tr > td:nth-child(5)::before { content: "미결제"; }
  .page-kr #krop-rank > tbody > tr > td:nth-child(6)::before { content: "IV"; }
  .page-kr #krop-rank > tbody > tr > td:nth-child(7)::before { content: "내가격"; }
  html[data-lang="en"] .page-kr #krop-rank > tbody > tr > td:nth-child(2)::before { content: "volume"; }
  html[data-lang="en"] .page-kr #krop-rank > tbody > tr > td:nth-child(4)::before { content: "close"; }
  html[data-lang="en"] .page-kr #krop-rank > tbody > tr > td:nth-child(5)::before { content: "OI"; }
  html[data-lang="en"] .page-kr #krop-rank > tbody > tr > td:nth-child(7)::before { content: "ITM"; }

  /* 위·아래 확률 table: use the card's width. */
  .page-kr #krop-prob .table-scroll { max-width: none; }
  .page-kr #krop-prob-levels { width: 100%; }
}

/* 360px phones: the index row's second line ran over and pushed the day's change
   onto a third line in 16 of 22 rows. A shorter label and gap keep it on two. */
@media (max-width: 380px) {
  .page-kr #kr-indices .kridx-table > tbody > tr { column-gap: 8px; }
  .page-kr #kr-indices .kridx-table > tbody > tr > td:nth-child(5)::before { content: "고점"; }
  html[data-lang="en"] .page-kr #kr-indices .kridx-table > tbody > tr > td:nth-child(5)::before { content: "off high"; }
}