@charset "utf-8";
/* ============================================================
   gmnMarket.css — 주가지수(시세) 페이지  [2026-08-25 / 3차 개편]
   · 데이터 : /AxServer/GmnQuoteAPI.asp (하루 3회 수집 + 관리자 입력)
   · 밝은 톤 · 카드 높이/좌우 정렬 통일 · 상승 빨강 / 하락 파랑
   ============================================================ */

.mk{
  --ink:#12100e;
  --ink-2:#4a4540;
  --ink-3:#8b847c;
  --line:#e7e3dd;
  --line-2:#f2efeb;
  --gold:#b98a34;
  --gold-2:#d8b56a;
  --gold-tint:#fbf7ee;
  --up:#d6353a;
  --dn:#1f63c8;
  --surface:#ffffff;
  --surface-2:#fbfaf8;
  --shadow-s:0 1px 2px rgba(18,16,14,.03), 0 8px 22px -14px rgba(18,16,14,.16);
  --shadow-m:0 2px 6px rgba(18,16,14,.05), 0 22px 44px -24px rgba(18,16,14,.24);
  --r-l:18px;
  --r-m:13px;
  --r-s:9px;
  --pad:26px;
  color:var(--ink);
  text-align:left;
  font-variant-numeric:tabular-nums;
  -webkit-font-feature-settings:"tnum";
          font-feature-settings:"tnum";
}
.mk *{ box-sizing:border-box; }

/* =========================================================
   앵커 탭 — 페이지 최상단
   ========================================================= */
.mk-anchor{
  position:sticky; top:0; z-index:20;
  display:flex; gap:6px; flex-wrap:wrap;
  padding:12px 0; margin:0 0 70px;
  background:#fff;
}
.mk-anchor a{
  display:inline-block; padding:9px 16px; border-radius:999px;
  border:1px solid var(--line); background:#fff;
  font-size:14px; color:var(--ink-2); text-decoration:none; white-space:nowrap;
  transition:color .2s ease, border-color .2s ease, background .2s ease, transform .2s ease;
}
.mk-anchor a:hover{ border-color:var(--gold); color:var(--gold); transform:translateY(-1px); }
.mk-anchor a.on{ background:var(--ink); border-color:var(--ink); color:#fff; }

/* =========================================================
   대표 지표 카드 — 다른 카드와 동일한 규격
   ========================================================= */
.mk-live{ display:inline-flex; align-items:center; gap:7px; font-size:12.5px; color:var(--ink-3); white-space:nowrap; }
.mk-live i{ width:7px; height:7px; border-radius:50%; background:#2fa360; box-shadow:0 0 0 4px rgba(47,163,96,.14); animation:mkPulse 2.4s ease-in-out infinite; }
@keyframes mkPulse{ 0%,100%{ opacity:1; transform:scale(1) } 50%{ opacity:.3; transform:scale(.82) } }

/* 대표 지표 카드 = 하나의 큰 차트 + 상단 지표 탭 (상품차트 카드와 같은 폼) */
.mk-hero{ padding:var(--pad); }
.mk .mk-chart__bar--hero{ align-items:center; flex-wrap:nowrap; gap:14px;
                      padding-bottom:16px; margin-bottom:18px; border-bottom:1px solid var(--line-2); }
/* 탭이 많아도 줄바꿈 없이 한 줄 — 넘치면 가로로 스크롤된다 */
.mk .mk-tabs--hero{ gap:7px; flex:1 1 auto; min-width:0; margin-bottom:0;
                flex-wrap:nowrap; overflow-x:auto; scroll-behavior:smooth;
                -webkit-overflow-scrolling:touch; scrollbar-width:none;
                padding:2px;
                -webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 26px),transparent 100%);
                        mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 26px),transparent 100%); }
.mk .mk-tabs--hero.is-end{ -webkit-mask-image:none; mask-image:none; }
.mk .mk-tabs--hero::-webkit-scrollbar{ display:none; }
.mk .mk-tabs--hero .mk-tab{ padding:10px 15px; font-size:13.5px; flex:0 0 auto; }
/* 국내 도매가 4종과 국제 지표 사이에 얇은 구분선 */
.mk .mk-tabs--hero .mk-tab:nth-child(4){ position:relative; margin-right:15px; }
.mk .mk-tabs--hero .mk-tab:nth-child(4)::after{ content:""; position:absolute; right:-11px; top:50%;
  transform:translateY(-50%); width:1px; height:18px; background:var(--line); }
.mk .mk-chart__bar--hero .mk-range{ flex:0 0 auto; align-self:center; }
.mk-chart__lb{ font-size:13px; color:var(--ink-3); margin-bottom:6px; font-family:'Noto Sans bold'; }
.mk-chart__lb span{ font-family:'Noto Sans'; margin-left:7px; opacity:.8; }
.mk-chart__now.mk-chart__now--lg{ font-size:38px; }
.mk-chart__chg{ font-family:'Noto Sans bold'; font-size:14.5px; }
.mk-chart__chg .sub{ font-family:'Noto Sans'; font-size:12.5px; }
.mk-chartbox--hero{ margin-top:4px; }
.mk-stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; margin:14px 0 4px;
           background:var(--line-2); border:1px solid var(--line-2); border-radius:var(--r-m); overflow:hidden; }
.mk-stats div{ background:var(--surface-2); padding:12px 16px; }
.mk-stats b{ display:block; font-size:11.5px; color:var(--ink-3); font-family:'Noto Sans'; margin-bottom:5px; }
.mk-stats span{ font-family:'Noto Sans bold'; font-size:15px; }
.mk-stats .hi{ color:var(--up); }
.mk-stats .lo{ color:var(--dn); }

/* 단위 전환 (국내 도매가 탭 전용) */
.mk-unit{ display:inline-flex; gap:2px; padding:3px; background:var(--surface-2);
          border:1px solid var(--line); border-radius:999px; margin-left:10px; vertical-align:2px; }
.mk-unit button{ appearance:none; border:0; background:transparent; cursor:pointer; line-height:1;
                 font-family:'Noto Sans bold'; font-size:11.5px; color:var(--ink-3);
                 padding:6px 12px; border-radius:999px; transition:all .2s ease; }
.mk-unit button.on{ background:var(--ink); color:#fff; }

/* 시세 계산기 */
.mk-calc{ display:grid; grid-template-columns:1.1fr 1fr; gap:22px; align-items:start; }
.mk-calc__f{ display:flex; flex-direction:column; gap:12px; min-width:0; }
.mk-calc__lb{ font-size:12.5px; color:var(--ink-3); margin-bottom:7px; }
.mk-calc__in{ display:flex; gap:8px; }
.mk-calc__in input{ flex:1 1 auto; min-width:0; appearance:none; border:1px solid var(--line);
  border-radius:var(--r-s); padding:13px 15px; font-family:'Noto Sans bold'; font-size:17px;
  color:var(--ink); background:#fff; text-align:right; letter-spacing:-.02em; }
.mk-calc__in input:focus{ outline:none; border-color:var(--gold); box-shadow:0 0 0 3px rgba(185,138,52,.12); }
.mk-calc__out{ border:1px solid var(--line); border-radius:var(--r-m); overflow:hidden; }
.mk-calc__r{ display:flex; align-items:baseline; justify-content:space-between; gap:12px;
             padding:15px 18px; background:var(--surface-2); border-bottom:1px solid var(--line-2); }
.mk-calc__r:last-child{ border-bottom:0; }
.mk-calc__r em{ font-style:normal; font-size:12.5px; color:var(--ink-3); }
.mk-calc__r b{ font-family:'Noto Sans bold'; font-size:19px; letter-spacing:-.03em; }
.mk-calc__r--main{ background:var(--gold-tint); }
.mk-calc__r--main b{ font-size:23px; }
.mk-calc__n{ font-size:12px; color:var(--ink-3); line-height:1.7; margin-top:2px; }

/* =========================================================
   섹션 / 카드 — 좌우·상하 정렬 통일
   ========================================================= */
.mk-sec{ margin-top:70px; scroll-margin-top:80px; }
.mk-sec__head{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  margin-bottom:16px; flex-wrap:wrap; padding:0 2px;
}
.mk-sec__t{ font-family:'Noto Sans bold'; font-size:21px; letter-spacing:-.03em; position:relative; padding-left:13px; }
.mk-sec__t::before{
  content:""; position:absolute; left:0; top:3px; bottom:3px; width:3px; border-radius:2px;
  background:linear-gradient(180deg,#e3c68a,var(--gold));
}
.mk-sec__t small{ font-family:'Noto Sans'; font-size:13px; color:var(--ink-3); margin-left:8px; letter-spacing:0; }
.mk-sec__d{ font-size:12.5px; color:var(--ink-3); }

/* 모든 그리드는 같은 높이로 늘려서 카드 아래끝이 맞도록 */
.mk-cols{ display:grid; gap:18px; align-items:stretch; }
.mk-cols--2{ grid-template-columns:repeat(2,1fr); }
.mk-cols--3{ grid-template-columns:repeat(3,1fr); }
.mk-cols + .mk-cols{ margin-top:18px; }

.mk-card{
  display:flex; flex-direction:column;
  border:1px solid var(--line); border-radius:var(--r-l); background:var(--surface);
  padding:var(--pad); box-shadow:var(--shadow-s);
  transition:box-shadow .3s ease, border-color .3s ease;
  min-width:0;
}
.mk-card:hover{ box-shadow:var(--shadow-m); border-color:#ded8cf; }
.mk-card__t{
  font-family:'Noto Sans bold'; font-size:16px; letter-spacing:-.02em;
  display:flex; align-items:baseline; gap:8px; flex-wrap:wrap;
  min-height:24px; margin-bottom:16px;
}
.mk-card__t small{ font-family:'Noto Sans'; font-size:12.5px; color:var(--ink-3); }
/* 안내문은 항상 카드 맨 아래에 붙어 카드 높이가 서로 맞는다 */
.mk-card__n{
  margin-top:auto; padding-top:18px; border-top:1px solid var(--line-2);
  font-size:12.5px; color:var(--ink-3); line-height:1.7;
}
.mk-card__n b{ color:var(--ink-2); font-family:'Noto Sans bold'; }
.mk-card__body{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; }

/* =========================================================
   표 — 열 정렬 규칙 통일
   ========================================================= */
.mk-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; padding-top:4px; }
.mk-tbl{ width:100%; border-collapse:separate; border-spacing:0; font-size:14.5px; table-layout:fixed; }
.mk-tbl.auto{ table-layout:auto; }
.mk-tbl th, .mk-tbl td{
  padding:15px 10px; border-bottom:1px solid var(--line-2);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.mk-tbl thead th{
  font-family:'Noto Sans bold'; font-size:12px; color:var(--ink-3);
  border-bottom:1px solid var(--line); padding:15px 10px 14px; text-align:right;
}
.mk-tbl thead th:first-child{ text-align:left; }
.mk-tbl tbody td{ text-align:right; transition:background .18s ease; }
.mk-tbl tbody td:first-child{ text-align:left; }
.mk-tbl tbody tr:last-child td{ border-bottom:0; }
.mk-tbl tbody tr:hover td{ background:var(--gold-tint); }
.mk-tbl tbody tr:hover td:first-child{ box-shadow:inset 3px 0 0 var(--gold); }
.mk-tbl .nm{ font-family:'Noto Sans bold'; color:var(--ink); }
.mk-tbl .sub{ font-size:12px; color:var(--ink-3); font-family:'Noto Sans'; }
.mk-tbl .big{ font-family:'Noto Sans bold'; font-size:15.5px; }
.mk-tbl .muted td{ color:var(--ink-3); }
.mk-tbl .chg{ font-size:12.5px; margin-top:3px; }

/* 2단 헤더 */
.mk-tbl thead tr:first-child th{ border-bottom:1px solid var(--line-2); padding:13px 10px 12px; }
.mk-tbl thead tr:first-child + tr th{ padding-top:16px; }
.mk-tbl th.grp{ text-align:center; color:var(--ink); font-size:13px; line-height:1.5;
                background:var(--gold-tint); border-radius:8px 8px 0 0; padding:13px 10px 12px; }
.mk-tbl th.grp--kr{ background:#f1f4f9; }

.mk-dot{ display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:9px; vertical-align:1px; }
.mk-dot--au{ background:linear-gradient(140deg,#f4d98a,#b98a34); }
.mk-dot--ag{ background:linear-gradient(140deg,#eef0f3,#a3abb4); }
.mk-dot--pt{ background:linear-gradient(140deg,#e6ecf3,#8592a0); }
.mk-dot--pd{ background:linear-gradient(140deg,#ece5da,#a99981); }

.up{ color:var(--up); }
.dn{ color:var(--dn); }
.flat{ color:var(--ink-3); }
.mk-pct-badge{ font-size:12px; opacity:.85; margin-left:3px; }

/* =========================================================
   탭 (프리미엄 / 차트)
   ========================================================= */
.mk-tabs{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:14px; }
.mk-tabs--seg{ background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r-s); padding:4px; gap:4px; }
.mk-tab{
  appearance:none; border:1px solid transparent; background:transparent; cursor:pointer;
  font-family:'Noto Sans bold'; font-size:13px; color:var(--ink-3);
  padding:9px 16px; border-radius:7px; transition:all .2s ease; white-space:nowrap;
}
.mk-tabs--seg .mk-tab{ flex:1 1 0; }
.mk-tab:hover{ color:var(--ink); }
.mk-tab.on{ background:var(--ink); color:#fff; }
.mk-tabs--metal .mk-tab{ border-color:var(--line); background:#fff; }
.mk-tabs--metal .mk-tab.on{ background:linear-gradient(135deg,#d8b56a,var(--gold)); border-color:transparent; color:#fff;
                            box-shadow:0 6px 14px -8px rgba(185,138,52,.9); }

/* 프리미엄 : 표 + 요약을 나란히 */
.mk-prem{ display:grid; grid-template-columns:1.5fr 1fr; gap:20px; align-items:start; }
.mk-prem__main{ min-width:0; }

/* 차트 기간 선택 (일/주/월/년) */
.mk-range{ display:inline-flex; gap:2px; padding:3px; background:var(--surface-2);
           border:1px solid var(--line); border-radius:999px; }
.mk-range button{
  appearance:none; border:0; background:transparent; cursor:pointer;
  font-family:"Noto Sans bold"; font-size:12.5px; color:var(--ink-3);
  padding:7px 15px; border-radius:999px; transition:all .2s ease; line-height:1;
}
.mk-range button:hover{ color:var(--ink); }
.mk-range button.on{ background:var(--ink); color:#fff; }
.mk-chart__bar{ display:flex; align-items:center; justify-content:space-between; gap:12px;
                flex-wrap:wrap; margin-bottom:12px; }
.mk-prem__side{ display:flex; flex-direction:column; gap:10px; }
.mk-pgrid{ display:grid; grid-template-columns:1fr; border:1px solid var(--line); border-radius:var(--r-m); overflow:hidden; }
.mk-pgrid__i{ background:var(--surface-2); padding:13px 16px; display:flex; align-items:center; justify-content:space-between; gap:10px; border-bottom:1px solid var(--line-2); }
.mk-pgrid__i:last-child{ border-bottom:0; }
.mk-pgrid__k{ font-size:12.5px; color:var(--ink-3); }
.mk-pgrid__v{ font-family:'Noto Sans bold'; font-size:15.5px; }
.mk-prem__note{ font-size:12.5px; color:var(--ink-3); line-height:1.7; }
.mk-prem-tbl tbody td:first-child{ font-family:'Noto Sans bold'; }

/* =========================================================
   차트
   ========================================================= */
.mk-chartbox{ position:relative; }
.mk-chart{ width:100%; display:block; touch-action:pan-y; }
.mk-chart__hd{ display:flex; align-items:flex-end; justify-content:space-between; gap:14px; margin-bottom:8px; flex-wrap:wrap; }
.mk-chart__now{ font-family:'Noto Sans bold'; font-size:26px; letter-spacing:-.035em; }
.mk-chart__unit{ font-size:12.5px; color:var(--ink-3); margin-left:6px; font-family:'Noto Sans'; }
.mk-tip{
  position:absolute; pointer-events:none; z-index:5; opacity:0; transform:translate(-50%,-8px);
  background:rgba(18,16,14,.94); color:#fff; border-radius:8px; padding:8px 12px;
  font-size:12px; line-height:1.5; white-space:nowrap; transition:opacity .16s ease;
  box-shadow:0 10px 24px -10px rgba(0,0,0,.6);
}
.mk-tip.on{ opacity:1; }
.mk-tip b{ font-family:'Noto Sans bold'; font-size:14px; display:block; }
.mk-tip span{ color:rgba(255,255,255,.6); }

/* =========================================================
   안내 / 빈 상태
   ========================================================= */
.mk-note{
  margin-top:44px; padding:20px 24px; border-radius:var(--r-m);
  background:var(--surface-2); border:1px solid var(--line);
  font-size:12.5px; color:var(--ink-3); line-height:1.85;
}
.mk-note b{ color:var(--ink); font-family:'Noto Sans bold'; }
.mk-empty{ padding:60px 0; text-align:center; color:var(--ink-3); font-size:13.5px; }
.mk-empty span{ display:block; margin-top:6px; font-size:12px; opacity:.75; }

.mk-sec, .mk-hero{ animation:mkUp .55s cubic-bezier(.22,1,.36,1) both; }
@keyframes mkUp{ from{ opacity:0; transform:translateY(12px) } to{ opacity:1; transform:none } }
@media (prefers-reduced-motion:reduce){
  .mk-sec, .mk-hero{ animation:none; }
}

/* =========================================================
   반응형
   ========================================================= */
@media (max-width:1280px){
  .mk-cols--3{ grid-template-columns:1fr; }
  .mk-prem{ grid-template-columns:1fr; }
}
@media (max-width:900px){
  .mk-cols--2{ grid-template-columns:1fr; }
}
@media (max-width:1100px){
  .mk-calc{ grid-template-columns:1fr; }
}
@media (max-width:900px){
  .mk .mk-chart__bar--hero{ flex-direction:column; align-items:stretch; gap:10px; }
  .mk-stats{ grid-template-columns:repeat(2,1fr); }
  /* 세로 배치에서는 min-width:auto 때문에 탭 줄이 카드를 밀어낸다 → 0 으로 풀고 가로 스크롤 */
  .mk .mk-tabs--hero{ flex:0 0 auto; min-width:0; width:100%; flex-wrap:nowrap;
                  overflow-x:auto; -webkit-overflow-scrolling:touch; padding-bottom:4px; }
  .mk .mk-tabs--hero::-webkit-scrollbar{ display:none; }
  .mk .mk-chart__bar--hero .mk-range{ min-width:0; align-self:flex-start; }
  .mk .mk-tabs--hero{ margin-bottom:0; padding-bottom:2px; }
  .mk-chart__now.mk-chart__now--lg{ font-size:30px; }
}
@media (max-width:768px){
  .mk{ --pad:18px; }
  .mk-chart__now.mk-chart__now--lg{ font-size:26px; }
  .mk .mk-tabs--hero .mk-tab{ padding:9px 14px; font-size:13px; }
  .mk-sec{ margin-top:44px; }
  .mk-sec__t{ font-size:18px; }
  .mk-tbl{ font-size:13.5px; }
  .mk-tbl th, .mk-tbl td{ padding:13px 7px; }
  .mk-anchor{ flex-wrap:nowrap; overflow-x:auto; }
  .mk-anchor::-webkit-scrollbar{ display:none; }
  .mk-chart__now{ font-size:21px; }
}

/* ============================================================
   [2026-08-27] 시세 표 → 모바일 카드 전환 (≤640px 전용 · 데스크톱 무변경)

   문제 (메인페이지와 원인이 다르다)
   - 메인은 `min-width:560px` 이라 가로로 밀렸지만, 여기 `.mk-tbl` 은
     `table-layout:fixed; width:100%` 라 가로 스크롤 없이 열이 그대로 압축된다.
   - 375px 에서 열 폭이 36~57px 까지 좁아지고,
     `.mk-tbl td{overflow:hidden; text-overflow:ellipsis}` 때문에
     숫자가 소리 없이 잘려 나갔다. 밀어서 볼 수조차 없으니 스크롤보다 나쁘다.
     (실측: 14개 표 중 9개, 잘린 칸 합계 104개)

   재구성
   - <tr> 하나 = 카드 하나. 1열(종목·구분)은 카드 제목으로 폭 전체를 쓰고,
     나머지 열은 2열 그리드에 [열 이름 / 값] 으로 쌓는다.
   - 열 이름은 gmnMarket.js 의 labelTables() 가 thead 에서 복사해 둔 data-l.
     2단 헤더(국제 기준시세 / 국내 도매시세)는 "국제 ₩/g" 식으로 합쳐진다.

   주의 (선택자 구체성)
   - 앞쪽 `.mk-tbl tbody tr:last-child td{border-bottom:0}` 이 (0,2,3) 이라
     `.mk-tbl tbody td:first-child`(0,2,2) 로 쓰면 마지막 카드만 제목 밑줄이 사라진다.
     그래서 td 규칙은 전부 `tbody tr td` 로 (0,2,3) 이상을 맞춘다.
   ============================================================ */
@media (max-width:640px){

  /* 카드로 바뀌므로 가로 스크롤 컨테이너가 필요 없다 */
  .mk-scroll{ overflow-x:visible; padding-top:0; }

  .mk-tbl{ display:block; width:100%; }
  .mk-tbl colgroup, .mk-tbl thead{ display:none; }
  .mk-tbl tbody{ display:block; }

  .mk-tbl tbody tr{
    display:grid;
    /* 카드 안쪽 폭이 좁으면(≤330px 급 화면) 스스로 1열로 떨어진다.
       316px 에서 2열을 고집하면 열 폭 79px 에 값 109px 이 들어가 잘렸다. */
    grid-template-columns:repeat(auto-fit,minmax(100px,1fr));
    column-gap:12px;
    row-gap:11px;
    background:#fff;
    border:1px solid var(--line);
    border-radius:12px;
    padding:12px 13px 13px;
    margin-top:9px;
  }
  .mk-tbl tbody tr:first-child{ margin-top:2px; }

  .mk-tbl tbody tr td{
    display:block;
    padding:0;
    border-bottom:0;
    text-align:left;
    /* 본문 줄간격이 상속되면 카드가 30% 이상 커진다 */
    line-height:1.3;
  }

  /* 1열 = 카드 제목 (두 칸 폭 전체) */
  .mk-tbl tbody tr td:first-child{
    grid-column:1 / -1;
    font-size:15px;
    border-bottom:1px solid var(--line-2);
    padding-bottom:9px;
    margin-bottom:0;   /* 아래 간격은 row-gap 이 담당한다 */
  }
  .mk-tbl tbody tr td:first-child .sub{ display:block; margin-top:3px; }

  /* 값이 길면(환산 기준가 "14,700,000 ₩/100g") 단위를 다음 줄로 흘려보낸다.
     nowrap 이면 열 폭을 넘겨 overflow:hidden 에 잘린다. */
  .mk-tbl tbody tr td[data-l]{ white-space:normal; }

  .mk-tbl tbody tr td[data-l]::before{
    content:attr(data-l);
    display:block;
    font-family:'Noto Sans bold';
    font-size:11px;
    line-height:1.35;
    color:var(--ink-3);
    margin-bottom:3px;
  }

  /* 안내문 행(mk-empty 등)은 폭 전체를 쓴다 */
  .mk-tbl tbody tr td[colspan]{ grid-column:1 / -1; }

  /* 표일 때 쓰던 행 hover 강조 — 카드에서는 어색하다 */
  .mk-tbl tbody tr:hover td{ background:transparent; }
  .mk-tbl tbody tr:hover td:first-child{ box-shadow:none; }

  /* ---- 예외: 프리미엄율 대조표 ----
     13행짜리라 카드로 쌓으면 이 표 하나가 화면 1,500px 을 넘는다.
     행을 하나씩 읽는 표가 아니라 프리미엄율에 따른 값을 세로로 훑는 대조표라
     표 형태를 유지하고, 대신 압축(=글자 잘림) 대신 가로 스크롤을 살린다. */
  .mk-scroll--keep{ overflow-x:auto; -webkit-overflow-scrolling:touch; padding-top:4px; }
  .mk-prem-tbl{ display:table; min-width:430px; }
  .mk-prem-tbl thead{ display:table-header-group; }
  .mk-prem-tbl tbody{ display:table-row-group; }
  .mk-prem-tbl tbody tr{
    display:table-row; background:none;
    border:0; border-radius:0; padding:0; margin:0;
  }
  .mk-prem-tbl tbody tr td{
    display:table-cell; text-align:right;
    padding:13px 7px; border-bottom:1px solid var(--line-2);
    line-height:normal;
  }
  .mk-prem-tbl tbody tr td:first-child{
    text-align:left; font-size:13.5px;
    grid-column:auto; margin-bottom:0; padding-bottom:13px;
  }
  .mk-prem-tbl tbody tr td[data-l]{ padding-top:13px; white-space:nowrap; }
  .mk-prem-tbl tbody tr td[data-l]::before{ content:none; }
}


/* ============================================================
   [2026-08-29] 주가지수 모바일 카드 배치  (≤640px 전용 / 데스크톱 무변경)

   ── 왜 한 블록인가 ──────────────────────────────────────────
   고칠 때마다 블록을 덧붙였더니 @media 640 블록이 13개가 되고
   같은 행을 여러 블록이 다시 잡았다. 새 규칙을 넣을 때마다
   이미 맞춰 둔 실시간 시세 간격이 딸려 바뀌었다.
   행 종류를 다섯으로 나누고, 각 종류를 여기서 한 번만 정의한다.
   서로 겹치지 않으므로 한 곳만 고치면 다른 표는 움직이지 않는다.

   ── 행 종류 ────────────────────────────────────────────────
   A  값 4개 비교      실시간 시세            td 6개
   B  값 1개 + 변동     증시·국제시세·환율·유가·유가증권   등락률 있음
   C  살 때 / 팔 때     사업자 매입시세        살 때 있음
   D  값 2개 비교       기타 금속·금 소매      변동 있고 등락률 없음
   E  그 외            런던 픽스              앞 규칙 대상 아님

   ── 공통 축 ────────────────────────────────────────────────
   왼쪽 52px / 변동 오른쪽 끝 274px / 등락률·대표값 오른쪽 끝 338px
   ============================================================ */
@media (max-width:640px){

  /* ─────────── 공통 ─────────── */

  /* 카드 간격과 안쪽 여백 */
  .mk-tbl tbody tr{
    padding:14px 14px 15px;
    margin-top:12px;
    row-gap:12px;
  }
  .mk-tbl tbody tr:first-child{ margin-top:4px; }
  .mk-tbl tbody tr td:first-child{ padding-bottom:10px; }
  .mk-card__n{ margin-top:18px; }

  /* 숫자는 네 칸이 같은 글꼴이어야 폭과 자간이 맞는다.
     .big 이 붙은 칸만 'Noto Sans bold' 를 쓰고 나머지는 정체라
     같은 열에 있어도 눈에는 어긋나 보였다. */
  .mk .mk-tbl tbody tr td[data-l],
  .mk .mk-tbl tbody tr td[data-l] .mk-n,
  .mk .mk-tbl tbody tr td[data-l] span{
    font-family:'Noto Sans bold','Noto Sans KR',sans-serif !important;
  }
  .mk .mk-tbl tbody tr td[data-l]::before{
    font-family:'Noto Sans KR','Noto Sans',sans-serif !important;
  }

  /* 앵커 내비 아래 여백이 데스크톱 값(70px) 그대로였다 */
  .mk .mk-anchor{ margin-bottom:36px; padding:11px 0 9px; }
  .mk .mk-sec__head{ margin-bottom:14px; }


  /* ─────────── A. 값 4개 비교 : 실시간 시세 ─────────── */
  /* 네 칸을 같은 폭으로 둔다. 숫자 폭이 네 개 다 50px 이라
     이때 숫자 사이가 24/24/24 로 균등해진다.
     이름표는 "국내 ₩/g" 40px, "국내 ₩/3.75g" 58px 로 길이가 달라
     열 폭을 어떻게 잡아도 숫자와 이름표를 동시에 맞출 수 없다.
     → 이름표를 "₩/돈" 으로 바꿔 네 개 길이를 맞춘다(3.75g = 1돈). */
  /* 칸 안쪽 폭 286px 을 4로 나누면 71.5 라 열 위치가 .5 로 떨어지고,
     브라우저가 칸마다 다르게 반올림해 간격이 24/23/24 로 1px 씩 어긋난다.
     열 간격을 6px 로 두면 (286-18)/4 = 67 로 딱 떨어져 세 간격이 같아진다. */
  .mk .mk-tbl tbody tr:has(> td:first-child:nth-last-child(6)){
    grid-template-columns:repeat(4, minmax(0,1fr)) !important;
    column-gap:6px !important;
  }
  /* 변동값이 4번째 칸으로 가면서 3번째 칸이 비어 밑줄이 가운데서 끊겼다.
     제목이 3칸을 차지해 밑줄이 변동 칸까지 이어지게 한다. */
  .mk .mk-tbl tbody tr:has(> td:first-child:nth-last-child(6)) > td:first-child{
    grid-column:1 / span 3 !important;
    grid-row:1 !important;
    margin-right:-8px;
    padding-right:8px;
  }
  /* 오른쪽 정렬하면 자릿수가 달라 세모가 카드마다 어긋난다.
     칸을 고정하고 왼쪽 정렬해 세모를 같은 세로선에 세운다. */
  .mk .mk-tbl tbody tr:has(> td:first-child:nth-last-child(6)) > td:nth-child(6){
    grid-column:4 / span 1 !important;
    grid-row:1 !important;
    text-align:left;
    align-self:center;
    border-bottom:1px solid var(--line-2);
    padding-bottom:10px;
    font-size:13.5px;
    white-space:nowrap;
  }
  .mk .mk-tbl tbody tr:has(> td:first-child:nth-last-child(6)) > td:nth-child(6)::before{ content:none; }

  /* 2행 : 국내 두 칸을 앞으로, 국제 두 칸을 뒤로 (DOM 순서는 국제가 먼저다) */
  .mk .mk-tbl tbody tr:has(> td:first-child:nth-last-child(6)) > td:nth-child(4){ grid-column:1; grid-row:2; }
  .mk .mk-tbl tbody tr:has(> td:first-child:nth-last-child(6)) > td:nth-child(5){ grid-column:2; grid-row:2; }
  .mk .mk-tbl tbody tr:has(> td:first-child:nth-last-child(6)) > td:nth-child(2){ grid-column:3; grid-row:2; }
  .mk .mk-tbl tbody tr:has(> td:first-child:nth-last-child(6)) > td:nth-child(3){ grid-column:4; grid-row:2; }
  .mk .mk-tbl tbody tr:has(> td:first-child:nth-last-child(6)) > td:nth-child(2),
  .mk .mk-tbl tbody tr:has(> td:first-child:nth-last-child(6)) > td:nth-child(3){ padding-top:0; color:#6d665e; }

  .mk .mk-tbl tbody tr:has(> td:first-child:nth-last-child(6)) > td[data-l]{
    font-size:clamp(11.5px, 3.3vw, 14px);
    white-space:nowrap;
  }
  .mk .mk-tbl tbody tr:has(> td:first-child:nth-last-child(6)) > td[data-l]::before{
    font-size:clamp(8.8px, 2.35vw, 10.5px);
    letter-spacing:-.05em;
    white-space:nowrap;
  }
  .mk .mk-tbl tbody tr:has(> td:first-child:nth-last-child(6)) > td[data-l="국내 ₩/3.75g"]::before{ content:"국내 ₩/돈"; }
  .mk .mk-tbl tbody tr:has(> td:first-child:nth-last-child(6)) > td[data-l="국제 ₩/3.75g"]::before{ content:"국제 ₩/돈"; }

  /* 이름표 폭이 "국내 ₩/g" 30px, "국내 ₩/돈" 33.26px 로 3.26px 다르다.
     왼쪽 정렬이라 그 차이가 그대로 칸 사이 여백 차이가 되어
     가운데(₩/돈 다음)만 3.26px 좁아 보였다.
     ₩/g 쪽 자간을 넓혀 네 이름표 폭을 같게 맞춘다. */
  .mk .mk-tbl tbody tr:has(> td:first-child:nth-last-child(6)) > td[data-l="국내 ₩/g"]::before,
  .mk .mk-tbl tbody tr:has(> td:first-child:nth-last-child(6)) > td[data-l="국제 ₩/g"]::before{
    letter-spacing:.0093em;
  }

  /* 시각보정.
     폭을 같게 맞춰도 '돈' 은 'g' 보다 획이 빽빽해서 그 뒤 여백이
     눈에는 좁아 보인다. 수치상 39.74px 로 같아도 가운데만 붙어 보인다.
     국제 두 칸을 통째로 2px 오른쪽으로 밀어 가운데 여백을 벌린다.
     마지막 칸은 오른쪽에 여유가 있어 밀려도 넘치지 않는다. */
  .mk .mk-tbl tbody tr:has(> td:first-child:nth-last-child(6)) > td:nth-child(2),
  .mk .mk-tbl tbody tr:has(> td:first-child:nth-last-child(6)) > td:nth-child(3){
    padding-left:2px;
  }


  /* ─────────── B. 값 1개 + 변동 : 시세판 배치 ─────────── */
  /* 값 하나짜리를 라벨 위/값 아래로 두면 세 줄이 되고
     같이 읽어야 할 변동값과 등락률이 카드 대각선으로 갈라진다.
     변동 칸은 폭을 고정한다. auto 면 행마다 격자가 따로라 시작점이 밀린다. */
  .mk .mk-tbl tbody tr:has(> td[data-l="등락률"]):not(:has(> td[data-l^="살 때"])){
    grid-template-columns:minmax(0,1fr) 72px 54px !important;
    column-gap:10px !important;
    row-gap:4px !important;
  }
  .mk .mk-tbl tbody tr:has(> td[data-l="등락률"]):not(:has(> td[data-l^="살 때"])) > td:first-child{
    grid-column:1 / 2 !important;
    grid-row:1 !important;
    align-self:start;
    padding-top:18px;              /* 이름표 한 줄 높이만큼 내려 대표값 줄에 맞춘다 */
    border-bottom:0 !important;
    padding-bottom:0 !important;
  }
  .mk .mk-tbl tbody tr:has(> td[data-l="등락률"]):not(:has(> td[data-l^="살 때"])) > td:nth-child(2){
    grid-column:2 / -1 !important;
    grid-row:1 !important;
    text-align:right !important;
    font-size:19px;
    letter-spacing:-.03em;
    line-height:1.3;
    white-space:nowrap;
  }
  .mk .mk-tbl tbody tr:has(> td[data-l="등락률"]):not(:has(> td[data-l^="살 때"])) > td:nth-child(2)::before{
    text-align:right;
    white-space:nowrap;
    line-height:1.35;
    margin-bottom:2px;
  }
  .mk .mk-tbl tbody tr:has(> td[data-l="등락률"]):not(:has(> td[data-l^="살 때"])) > td[data-l="전일대비"],
  .mk .mk-tbl tbody tr:has(> td[data-l="등락률"]):not(:has(> td[data-l^="살 때"])) > td[data-l^="변동"]{
    grid-column:2 / 3 !important;
    grid-row:2 !important;
  }
  .mk .mk-tbl tbody tr:has(> td[data-l="등락률"]):not(:has(> td[data-l^="살 때"])) > td[data-l="등락률"]{
    grid-column:3 / 4 !important;
    grid-row:2 !important;
  }
  .mk .mk-tbl tbody tr:has(> td[data-l="등락률"]):not(:has(> td[data-l^="살 때"])) > td[data-l="전일대비"],
  .mk .mk-tbl tbody tr:has(> td[data-l="등락률"]):not(:has(> td[data-l^="살 때"])) > td[data-l^="변동"],
  .mk .mk-tbl tbody tr:has(> td[data-l="등락률"]):not(:has(> td[data-l^="살 때"])) > td[data-l="등락률"]{
    text-align:right;
    align-self:start;
    border-bottom:0 !important;
    padding-bottom:0 !important;
    font-size:13.5px;
    white-space:nowrap;
  }
  .mk .mk-tbl tbody tr:has(> td[data-l="등락률"]):not(:has(> td[data-l^="살 때"])) > td[data-l="전일대비"]::before,
  .mk .mk-tbl tbody tr:has(> td[data-l="등락률"]):not(:has(> td[data-l^="살 때"])) > td[data-l^="변동"]::before,
  .mk .mk-tbl tbody tr:has(> td[data-l="등락률"]):not(:has(> td[data-l^="살 때"])) > td[data-l="등락률"]::before{
    content:none;
  }

  /* 변동 칸만 왼쪽 정렬한다. 오른쪽 정렬하면 자릿수가 달라
     세모가 카드마다 어긋난다. 등락률은 오른쪽 정렬을 지켜
     오른쪽 여백선을 맞춘다. (이 규칙은 반드시 위 공통 블록 뒤에 온다) */
  .mk .mk-tbl tbody tr:has(> td[data-l="등락률"]):not(:has(> td[data-l^="살 때"])) > td[data-l="전일대비"],
  .mk .mk-tbl tbody tr:has(> td[data-l="등락률"]):not(:has(> td[data-l^="살 때"])) > td[data-l^="변동"]{
    text-align:left !important;
  }

  /* B-1. 주요 증시는 전일대비가 종가 칸 안에 들어 있다.
     display:contents 로 칸을 열어 값과 전일대비를 격자에 직접 놓는다.
     "종가" 라벨은 이 카드에서 자명하므로 함께 뺀다. */
  .mk .mk-tbl tbody tr:has(> td[data-l="등락률"]):not(:has(> td[data-l="전일대비"])):not(:has(> td[data-l^="변동"])) > td:nth-child(2){
    display:contents !important;
  }
  .mk .mk-tbl tbody tr:has(> td[data-l="등락률"]):not(:has(> td[data-l="전일대비"])):not(:has(> td[data-l^="변동"])) > td:nth-child(2)::before{
    content:none !important;
  }
  .mk .mk-tbl tbody tr:has(> td[data-l="등락률"]):not(:has(> td[data-l="전일대비"])):not(:has(> td[data-l^="변동"])) > td:nth-child(2) > .mk-n{
    grid-column:2 / -1; grid-row:1;
    text-align:right; font-size:19px; letter-spacing:-.03em; line-height:1.3; white-space:nowrap;
  }
  .mk .mk-tbl tbody tr:has(> td[data-l="등락률"]):not(:has(> td[data-l="전일대비"])):not(:has(> td[data-l^="변동"])) > td:nth-child(2) > .chg{
    grid-column:2 / 3; grid-row:2;
    text-align:left; font-size:13.5px; white-space:nowrap;
    /* .chg 에 원래 margin-top:3px 이 있어 변동값만 등락률보다 3px 내려갔다 */
    margin-top:0 !important;
  }
  .mk .mk-tbl tbody tr:has(> td[data-l="등락률"]):not(:has(> td[data-l="전일대비"])):not(:has(> td[data-l^="변동"])) > td:first-child{
    padding-top:0 !important;
  }


  /* ─────────── C. 살 때 / 팔 때 : 사업자 매입시세 ─────────── */
  .mk .mk-tbl tbody tr:has(> td[data-l^="살 때"]){
    grid-template-columns:repeat(3, minmax(0,1fr)) !important;
    column-gap:8px !important;
    row-gap:12px !important;
    align-items:start;
  }
  .mk .mk-tbl tbody tr:has(> td[data-l^="살 때"]) > td:first-child{
    grid-column:1 / 2 !important; grid-row:1 !important;
    align-self:center; padding-top:0 !important;
    margin-right:-8px; padding-right:8px;
  }
  .mk .mk-tbl tbody tr:has(> td[data-l^="살 때"]) > td[data-l^="변동"]{
    grid-column:2 / 3 !important; grid-row:1 !important;
    margin-right:-8px; padding-right:8px;
  }
  .mk .mk-tbl tbody tr:has(> td[data-l^="살 때"]) > td[data-l="등락률"]{
    grid-column:3 / 4 !important; grid-row:1 !important;
  }
  .mk .mk-tbl tbody tr:has(> td[data-l^="살 때"]) > td[data-l^="변동"],
  .mk .mk-tbl tbody tr:has(> td[data-l^="살 때"]) > td[data-l="등락률"]{
    text-align:right; align-self:center;
    border-bottom:1px solid var(--line-2); padding-bottom:10px;
    font-size:13.5px; white-space:nowrap;
  }
  .mk .mk-tbl tbody tr:has(> td[data-l^="살 때"]) > td[data-l^="변동"]::before,
  .mk .mk-tbl tbody tr:has(> td[data-l^="살 때"]) > td[data-l="등락률"]::before{ content:none; }
  .mk .mk-tbl tbody tr:has(> td[data-l^="살 때"]) > td[data-l^="변동"]{ text-align:left !important; }

  .mk .mk-tbl tbody tr:has(> td[data-l^="살 때"]) > td[data-l^="살 때"]{
    grid-column:1 / 2 !important; grid-row:2 !important;
  }
  .mk .mk-tbl tbody tr:has(> td[data-l^="살 때"]) > td[data-l="팔 때"]{
    grid-column:2 / 4 !important; grid-row:2 !important;
    text-align:right !important;
  }
  .mk .mk-tbl tbody tr:has(> td[data-l^="살 때"]) > td[data-l="팔 때"]::before{ text-align:right; }
  .mk .mk-tbl tbody tr:has(> td[data-l^="살 때"]) > td[data-l^="살 때"],
  .mk .mk-tbl tbody tr:has(> td[data-l^="살 때"]) > td[data-l="팔 때"]{ white-space:nowrap; }
  .mk .mk-tbl tbody tr:has(> td[data-l^="살 때"]) > td[data-l^="살 때"]::before,
  .mk .mk-tbl tbody tr:has(> td[data-l^="살 때"]) > td[data-l="팔 때"]::before{
    white-space:nowrap;
    font-size:clamp(8.8px, 2.35vw, 10.5px);
    letter-spacing:-.05em;
  }


  /* ─────────── D. 값 2개 비교 : 기타 금속, 금 소매 ─────────── */
  .mk .mk-tbl tbody tr:has(> td[data-l^="변동"]):not(:has(> td[data-l="등락률"])):not(:has(> td:first-child:nth-last-child(6))){
    grid-template-columns:repeat(3, minmax(0,1fr)) !important;
    column-gap:8px !important;
  }
  .mk .mk-tbl tbody tr:has(> td[data-l^="변동"]):not(:has(> td[data-l="등락률"])):not(:has(> td:first-child:nth-last-child(6))) > td:first-child{
    grid-column:1 / 3 !important; grid-row:1 !important;
    margin-right:-8px; padding-right:8px;
  }
  .mk .mk-tbl tbody tr:has(> td[data-l^="변동"]):not(:has(> td[data-l="등락률"])):not(:has(> td:first-child:nth-last-child(6))) > td[data-l^="변동"]{
    grid-column:3 / 4 !important; grid-row:1 !important;
    text-align:right; align-self:center;
    border-bottom:1px solid var(--line-2); padding-bottom:10px;
    font-size:13.5px; white-space:nowrap;
  }
  .mk .mk-tbl tbody tr:has(> td[data-l^="변동"]):not(:has(> td[data-l="등락률"])):not(:has(> td:first-child:nth-last-child(6))) > td[data-l^="변동"]::before{ content:none; }
  .mk .mk-tbl tbody tr:has(> td[data-l^="변동"]):not(:has(> td[data-l="등락률"])):not(:has(> td:first-child:nth-last-child(6))) > td[data-l^="변동"]{ text-align:left !important; }

  .mk .mk-tbl tbody tr:has(> td[data-l^="변동"]):not(:has(> td[data-l="등락률"])):not(:has(> td:first-child:nth-last-child(6))) > td:nth-child(2){
    grid-column:1 / 2 !important; grid-row:2 !important;
  }
  .mk .mk-tbl tbody tr:has(> td[data-l^="변동"]):not(:has(> td[data-l="등락률"])):not(:has(> td:first-child:nth-last-child(6))) > td:nth-child(3){
    grid-column:2 / 4 !important; grid-row:2 !important;
    text-align:right !important;
  }
  .mk .mk-tbl tbody tr:has(> td[data-l^="변동"]):not(:has(> td[data-l="등락률"])):not(:has(> td:first-child:nth-last-child(6))) > td:nth-child(3)::before{ text-align:right; }
  .mk .mk-tbl tbody tr:has(> td[data-l^="변동"]):not(:has(> td[data-l="등락률"])):not(:has(> td:first-child:nth-last-child(6))) > td[data-l]:not([data-l^="변동"]){
    white-space:nowrap;
    font-size:clamp(12px, 3.3vw, 14px);
  }
  .mk .mk-tbl tbody tr:has(> td[data-l^="변동"]):not(:has(> td[data-l="등락률"])):not(:has(> td:first-child:nth-last-child(6))) > td[data-l]:not([data-l^="변동"])::before{
    white-space:nowrap;
  }
}