*{box-sizing:border-box}

:root{
  --page:#eaf2f5;
  --surface:#f3f8fa;
  --card:#fff;

  --ink:#173244;
  --text:#29495b;
  --sub:#526d7d;
  --muted:#617b8a;
  --line:#d5e2e8;
  --soft:#eef5f8;

  --up:#d8544d;
  --down:#4775a8;
  --flat:#6c818d;

  --orange-bg:#fff0e7;
  --orange:#d46b34;
  --blue-bg:#eaf2f8;
  --blue:#4f7591;
  --purple-bg:#f2eaf5;
  --purple:#8a629b;
}

html,body{
  margin:0;
  width:100%;
  height:100%;
  overflow:hidden;
  background:var(--page);
  font-family:Arial,"Noto Sans KR","Malgun Gothic",sans-serif;
}

#viewport{
  position:fixed;
  inset:0;
  overflow:hidden;
  background:var(--page);
}

.frame{
  position:absolute;
  left:0;
  top:0;
  color:var(--ink);
  display:grid;
  background:var(--page);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* ============================================================
   LANDSCAPE 672 × 336
   ============================================================ */

html[data-layout="landscape"] .frame{
  grid-template-columns:142px 1fr;
  gap:5px;
  padding:5px;
  font-size:14px;
}

html[data-layout="landscape"] .hero{
  min-width:0;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding:14px 12px 11px;
  border:1px solid var(--line);
  border-radius:8px;
  background:var(--surface);
}

html[data-layout="landscape"] .eyebrow{
  margin-bottom:.45em;
  color:var(--muted);
  font-size:.69em;
  font-weight:900;
  letter-spacing:.09em;
}

html[data-layout="landscape"] h1{
  margin:0;
  color:var(--ink);
  font-size:1.75em;
  line-height:1.02;
  font-weight:900;
  letter-spacing:-.045em;
}

html[data-layout="landscape"] .status{
  display:inline-flex;
  align-items:center;
  gap:.35em;
  margin-top:.65em;
  padding:.38em .55em;
  border:1px solid var(--line);
  border-radius:999px;
  background:#fff;
  color:var(--sub);
  font-size:.68em;
  font-weight:900;
}

.status i{
  width:.48em;
  height:.48em;
  border-radius:50%;
  background:#9aacb5;
}

.status.ok i{background:#449465}
.status.error i{background:var(--up)}

html[data-layout="landscape"] .hero-meta{
  display:grid;
  gap:4px;
}

html[data-layout="landscape"] .hero-meta>div{
  padding:6px 7px;
  border:1px solid var(--line);
  border-radius:6px;
  background:#fff;
}

.hero-meta span{
  display:block;
  margin-bottom:.18em;
  color:var(--muted);
  font-size:.58em;
  font-weight:900;
}

html[data-layout="landscape"] .hero-meta b{
  display:block;
  color:var(--text);
  font-size:.78em;
  line-height:1;
  font-weight:900;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* stage */
html[data-layout="landscape"] .stage{
  min-width:0;
  min-height:0;
  display:grid;
  grid-template-rows:38px minmax(0,1fr) 15px;
  gap:5px;
  padding:7px;
  border:1px solid var(--line);
  border-radius:8px;
  background:#f8fbfc;
}

.stage-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:.5em;
  border-bottom:1px solid var(--line);
}

html[data-layout="landscape"] .stage-head{
  padding:0 2px 6px;
}

.stage-head small{
  display:block;
  margin-bottom:.12em;
  color:var(--muted);
  font-weight:800;
}

html[data-layout="landscape"] .stage-head small{
  font-size:.61em;
}

.stage-head h2{
  margin:0;
  color:var(--ink);
  line-height:1;
  font-weight:900;
}

html[data-layout="landscape"] .stage-head h2{
  font-size:1.18em;
}

.stage-meta{
  display:flex;
  align-items:center;
  gap:.35em;
  color:var(--muted);
  font-weight:800;
  white-space:nowrap;
}

html[data-layout="landscape"] .stage-meta{
  font-size:.56em;
}

.stage-meta i{
  width:.18em;
  height:.18em;
  border-radius:50%;
  background:var(--muted);
}

/* Cards stack vertically */
.cards{
  min-height:0;
  display:flex;
  flex-direction:column;
}

html[data-layout="landscape"] .cards{
  gap:5px;
}

.market-row{
  flex:1 1 0;
  min-width:0;
  min-height:0;
  background:var(--card);
  border:1px solid var(--line);
  overflow:hidden;
}

html[data-layout="landscape"] .market-row{
  display:grid;
  grid-template-columns:92px 135px 95px minmax(0,1fr);
  grid-template-rows:minmax(0,1fr) 15px;
  grid-template-areas:
    "identity quote trend metrics"
    "foot foot foot foot";
  align-items:center;
  gap:7px;
  padding:7px 9px 4px;
  border-radius:7px;
}

.identity{
  grid-area:identity;
  min-width:0;
}

.badge{
  display:inline-block;
  font-weight:900;
  text-align:center;
}

html[data-layout="landscape"] .badge{
  min-width:5.4em;
  margin-bottom:.42em;
  padding:.35em .45em;
  border-radius:.42em;
  font-size:.68em;
}

.badge.orange{background:var(--orange-bg);color:var(--orange)}
.badge.blue{background:var(--blue-bg);color:var(--blue)}
.badge.purple{background:var(--purple-bg);color:var(--purple)}

.identity b{
  display:block;
  color:var(--text);
  font-weight:900;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

html[data-layout="landscape"] .identity b{
  font-size:.78em;
}

.identity small{
  display:block;
  color:var(--muted);
  font-weight:800;
}

html[data-layout="landscape"] .identity small{
  margin-top:.2em;
  font-size:.58em;
}

/* MAIN NUMBER */
.quote{
  grid-area:quote;
  min-width:0;
}

.quote>span{
  display:block;
  color:var(--muted);
  font-weight:900;
}

html[data-layout="landscape"] .quote>span{
  margin-bottom:.16em;
  font-size:.6em;
}

.quote>strong{
  display:block;
  color:var(--ink);
  line-height:.88;
  font-weight:900;
  letter-spacing:-.055em;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}

/* 3개 페이지에서도 약 39px */
html[data-layout="landscape"] .quote>strong{
  font-size:2.8em;
}

/* 2개는 약 46px */
html[data-layout="landscape"] .cards[data-count="2"] .quote>strong{
  font-size:3.3em;
}

/* 1개는 약 58px */
html[data-layout="landscape"] .cards[data-count="1"] .quote>strong{
  font-size:4.15em;
}

/* TREND */
.trend{
  grid-area:trend;
  min-width:0;
  border-left:1px solid var(--line);
  font-variant-numeric:tabular-nums;
}

html[data-layout="landscape"] .trend{
  padding-left:7px;
}

.trend>span{
  display:block;
  color:var(--muted);
  font-weight:900;
}

html[data-layout="landscape"] .trend>span{
  margin-bottom:.28em;
  font-size:.58em;
}

.trend>strong,
.trend>b{
  display:block;
  line-height:1;
  font-weight:900;
  white-space:nowrap;
}

html[data-layout="landscape"] .trend>strong{
  font-size:1em;
}

html[data-layout="landscape"] .trend>b{
  margin-top:.28em;
  font-size:.92em;
}

html[data-layout="landscape"] .cards[data-count="1"] .trend>strong{
  font-size:1.35em;
}

html[data-layout="landscape"] .cards[data-count="1"] .trend>b{
  font-size:1.15em;
}

html[data-layout="landscape"] .cards[data-count="2"] .trend>strong{
  font-size:1.15em;
}

.market-row.up .trend strong,
.market-row.up .trend b{color:var(--up)}

.market-row.down .trend strong,
.market-row.down .trend b{color:var(--down)}

.market-row.flat .trend strong,
.market-row.flat .trend b{color:var(--flat)}

/* METRICS */
.metrics{
  grid-area:metrics;
  min-width:0;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
}

html[data-layout="landscape"] .metrics{
  gap:4px;
}

.metrics>div{
  min-width:0;
  background:var(--soft);
}

html[data-layout="landscape"] .metrics>div{
  padding:5px 6px;
  border-radius:5px;
}

.metrics span{
  display:block;
  color:var(--muted);
  font-weight:900;
}

html[data-layout="landscape"] .metrics span{
  margin-bottom:.16em;
  font-size:.54em;
}

.metrics strong{
  display:block;
  color:var(--text);
  line-height:1;
  font-weight:900;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}

html[data-layout="landscape"] .metrics strong{
  font-size:.78em;
}

html[data-layout="landscape"] .cards[data-count="1"] .metrics strong{
  font-size:1em;
}

html[data-layout="landscape"] .cards[data-count="2"] .metrics strong{
  font-size:.88em;
}

.row-foot{
  grid-area:foot;
  display:flex;
  justify-content:space-between;
  gap:1em;
  border-top:1px solid var(--line);
  color:var(--muted);
  font-weight:800;
}

html[data-layout="landscape"] .row-foot{
  padding-top:3px;
  font-size:.52em;
}

.footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  color:var(--muted);
  font-weight:800;
}

html[data-layout="landscape"] .footer{
  font-size:.52em;
}

.pager{
  display:flex;
}

html[data-layout="landscape"] .pager{
  gap:3px;
}

.pager i{
  display:block;
  border-radius:999px;
  background:#c8d5dc;
}

html[data-layout="landscape"] .pager i{
  width:12px;
  height:2px;
}

.pager i.on{
  background:#607f91;
}

/* ============================================================
   PORTRAIT 336 × 672
   실제 세로형 LED 전광판 핵심
   ============================================================ */

html[data-layout="portrait"] .frame{
  grid-template-columns:1fr;
  grid-template-rows:116px minmax(0,1fr);
  gap:5px;
  padding:5px;
  font-size:15px;
}

html[data-layout="portrait"] .hero{
  display:grid;
  grid-template-columns:1fr 1.15fr;
  gap:8px;
  padding:9px 10px;
  border:1px solid var(--line);
  border-radius:8px;
  background:var(--surface);
}

html[data-layout="portrait"] .eyebrow{
  margin-bottom:.28em;
  color:var(--muted);
  font-size:.58em;
  font-weight:900;
}

html[data-layout="portrait"] h1{
  margin:0;
  color:var(--ink);
  font-size:1.5em;
  line-height:1;
  font-weight:900;
  letter-spacing:-.04em;
}

html[data-layout="portrait"] .status{
  display:inline-flex;
  align-items:center;
  gap:.32em;
  margin-top:.38em;
  padding:.3em .48em;
  border:1px solid var(--line);
  border-radius:999px;
  background:#fff;
  color:var(--sub);
  font-size:.55em;
  font-weight:900;
}

html[data-layout="portrait"] .hero-meta{
  display:grid;
  gap:3px;
}

html[data-layout="portrait"] .hero-meta>div{
  padding:4px 5px;
  border:1px solid var(--line);
  border-radius:5px;
  background:#fff;
}

html[data-layout="portrait"] .hero-meta span{
  margin-bottom:.12em;
  font-size:.48em;
}

html[data-layout="portrait"] .hero-meta b{
  display:block;
  color:var(--text);
  font-size:.65em;
  line-height:1;
  font-weight:900;
  white-space:nowrap;
}

/* stage */
html[data-layout="portrait"] .stage{
  min-width:0;
  min-height:0;
  display:grid;
  grid-template-rows:45px minmax(0,1fr) 18px;
  gap:5px;
  padding:6px;
  border:1px solid var(--line);
  border-radius:8px;
  background:#f8fbfc;
}

html[data-layout="portrait"] .stage-head{
  padding:0 2px 6px;
}

html[data-layout="portrait"] .stage-head small{
  font-size:.55em;
}

html[data-layout="portrait"] .stage-head h2{
  font-size:1.15em;
}

html[data-layout="portrait"] .stage-meta{
  font-size:.48em;
}

/* Portrait rows */
html[data-layout="portrait"] .cards{
  gap:5px;
}

html[data-layout="portrait"] .market-row{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  grid-template-rows:auto auto auto auto;
  grid-template-areas:
    "identity identity"
    "quote trend"
    "metrics metrics"
    "foot foot";
  align-items:center;
  gap:5px 9px;
  padding:7px 8px 5px;
  border-radius:7px;
}

html[data-layout="portrait"] .badge{
  min-width:5em;
  margin-bottom:.2em;
  padding:.3em .42em;
  border-radius:.4em;
  font-size:.62em;
}

html[data-layout="portrait"] .identity{
  display:flex;
  align-items:center;
  gap:6px;
}

html[data-layout="portrait"] .identity b{
  font-size:.78em;
}

html[data-layout="portrait"] .identity small{
  margin-top:.12em;
  font-size:.54em;
}

html[data-layout="portrait"] .quote>span{
  margin-bottom:.1em;
  font-size:.55em;
}

html[data-layout="portrait"] .quote>strong{
  font-size:2.6em;
}

/* 1개: 58px 수준 */
html[data-layout="portrait"] .cards[data-count="1"] .quote>strong{
  font-size:3.85em;
}

/* 2개: 47px 수준 */
html[data-layout="portrait"] .cards[data-count="2"] .quote>strong{
  font-size:3.15em;
}

/* 3개: 39px 수준 */
html[data-layout="portrait"] .cards[data-count="3"] .quote>strong{
  font-size:2.6em;
}

html[data-layout="portrait"] .trend{
  padding-left:8px;
}

html[data-layout="portrait"] .trend>span{
  margin-bottom:.22em;
  font-size:.54em;
}

html[data-layout="portrait"] .trend>strong{
  font-size:.92em;
}

html[data-layout="portrait"] .trend>b{
  margin-top:.2em;
  font-size:.82em;
}

html[data-layout="portrait"] .cards[data-count="1"] .trend>strong{
  font-size:1.25em;
}

html[data-layout="portrait"] .cards[data-count="2"] .trend>strong{
  font-size:1.05em;
}

html[data-layout="portrait"] .metrics{
  gap:3px;
}

html[data-layout="portrait"] .metrics>div{
  padding:4px 5px;
  border-radius:4px;
}

html[data-layout="portrait"] .metrics span{
  margin-bottom:.12em;
  font-size:.49em;
}

html[data-layout="portrait"] .metrics strong{
  font-size:.72em;
}

/* 1/2개 페이지는 보조숫자도 키움 */
html[data-layout="portrait"] .cards[data-count="1"] .metrics strong{
  font-size:1em;
}

html[data-layout="portrait"] .cards[data-count="2"] .metrics strong{
  font-size:.82em;
}

html[data-layout="portrait"] .row-foot{
  padding-top:2px;
  font-size:.46em;
}

html[data-layout="portrait"] .footer{
  font-size:.48em;
}

html[data-layout="portrait"] .pager{
  gap:3px;
}

html[data-layout="portrait"] .pager i{
  width:12px;
  height:2px;
}

/* ============================================================
   Skeleton — 실제 카드와 같은 크기
   ============================================================ */

.sk{
  display:block;
  position:relative;
  overflow:hidden;
  border-radius:4px;
  background:#e4edf1;
}

.sk:after{
  content:"";
  position:absolute;
  inset:0;
  transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.68),transparent);
  animation:shimmer 1.05s ease-in-out infinite;
}

.badge-sk{width:65px;height:18px}
.name-sk{width:90px;height:12px;margin-bottom:4px}
.sub-sk{width:55px;height:8px}
.label-sk{width:42px;height:8px;margin-bottom:5px}
.quote-sk{width:105px;height:32px}
.trend-sk{width:70px;height:15px;margin-bottom:5px}
.percent-sk{width:45px;height:12px}
.metric-sk{width:60px;height:12px}
.foot-sk{width:75px;height:7px}

@keyframes shimmer{
  to{transform:translateX(100%)}
}

.viewport-debug{
  position:fixed;
  right:4px;
  bottom:4px;
  z-index:99999;
  padding:4px 6px;
  border-radius:4px;
  background:rgba(0,0,0,.82);
  color:#fff;
  font:10px/1.2 monospace;
}

@media (prefers-reduced-motion:reduce){
  .sk:after{animation:none}
}


/* ============================================================
   v2.1 PORTRAIT FIX
   세로형에서는 현재지수와 전일대비를 절대 나란히 두지 않습니다.
   336×672 실사용 LED에서 겹침/축소 방지.
   ============================================================ */

html[data-layout="portrait"] .market-row{
  grid-template-columns:1fr !important;
  grid-template-rows:auto auto auto auto auto !important;
  grid-template-areas:
    "identity"
    "quote"
    "trend"
    "metrics"
    "foot" !important;
  align-content:start;
  gap:5px !important;
}

/* 현재지수는 한 줄 전체 사용 */
html[data-layout="portrait"] .quote{
  width:100%;
  min-width:0;
  padding:2px 0 1px;
}

html[data-layout="portrait"] .quote>strong{
  width:100%;
  white-space:nowrap;
  overflow:visible;
}

/* 전일대비는 현재지수 아래 독립 행 */
html[data-layout="portrait"] .trend{
  width:100%;
  min-width:0;
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:6px;
  padding:5px 6px !important;
  border-left:0 !important;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}

html[data-layout="portrait"] .trend>span{
  margin:0 !important;
  font-size:.58em !important;
}

html[data-layout="portrait"] .trend>strong{
  margin:0 !important;
  font-size:1.02em !important;
}

html[data-layout="portrait"] .trend>b{
  margin:0 !important;
  font-size:.94em !important;
  text-align:right;
}

/* 1개 지수 페이지: 메인 숫자를 더 크게 */
html[data-layout="portrait"] .cards[data-count="1"] .market-row{
  padding:12px 10px 7px !important;
}

html[data-layout="portrait"] .cards[data-count="1"] .quote>strong{
  font-size:4.2em !important;
}

html[data-layout="portrait"] .cards[data-count="1"] .trend{
  padding:7px 8px !important;
}

html[data-layout="portrait"] .cards[data-count="1"] .trend>strong{
  font-size:1.28em !important;
}

html[data-layout="portrait"] .cards[data-count="1"] .trend>b{
  font-size:1.16em !important;
}

/* 2개 지수 */
html[data-layout="portrait"] .cards[data-count="2"] .quote>strong{
  font-size:3.35em !important;
}

html[data-layout="portrait"] .cards[data-count="2"] .trend>strong{
  font-size:1.08em !important;
}

/* 3개 지수 */
html[data-layout="portrait"] .cards[data-count="3"] .quote>strong{
  font-size:2.72em !important;
}

html[data-layout="portrait"] .cards[data-count="3"] .trend{
  padding:4px 5px !important;
}

html[data-layout="portrait"] .cards[data-count="3"] .trend>span{
  font-size:.52em !important;
}

html[data-layout="portrait"] .cards[data-count="3"] .trend>strong{
  font-size:.92em !important;
}

html[data-layout="portrait"] .cards[data-count="3"] .trend>b{
  font-size:.84em !important;
}

/* 보조정보는 두 열로 유지하되 숫자 대비 강화 */
html[data-layout="portrait"] .metrics{
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:3px !important;
}

html[data-layout="portrait"] .metrics strong{
  color:var(--ink);
  font-weight:900;
}

/* 카드 1개일 때 보조 숫자도 충분히 크게 */
html[data-layout="portrait"] .cards[data-count="1"] .metrics strong{
  font-size:1.08em !important;
}

html[data-layout="portrait"] .cards[data-count="2"] .metrics strong{
  font-size:.88em !important;
}

html[data-layout="portrait"] .cards[data-count="3"] .metrics strong{
  font-size:.74em !important;
}


/* ============================================================
   v2.2 LANDSCAPE BALANCE
   실제 가로형 화면 분석 후 count별 레이아웃 분리
   ============================================================ */

/* 가로형 hero 폭을 줄여 실제 데이터 영역 확대 */
html[data-layout="landscape"] .frame{
  grid-template-columns:126px minmax(0,1fr) !important;
}

/* 타이틀도 조금 압축해 우측 데이터에 시선 집중 */
html[data-layout="landscape"] h1{
  font-size:1.58em !important;
}

/* 공통 카드 */
html[data-layout="landscape"] .market-row{
  overflow:hidden;
}

/* ------------------------------------------------------------
   1개 지수 페이지 — 중국 / 일본
   identity → [현재지수 | 전일대비] → 4개 보조수치 → foot
   ------------------------------------------------------------ */
html[data-layout="landscape"] .cards[data-count="1"] .market-row{
  display:grid !important;
  grid-template-columns:minmax(0,1.7fr) minmax(0,.95fr) !important;
  grid-template-rows:auto minmax(0,1fr) auto auto !important;
  grid-template-areas:
    "identity identity"
    "quote trend"
    "metrics metrics"
    "foot foot" !important;
  align-content:center !important;
  align-items:center !important;
  gap:9px 18px !important;
  padding:18px 22px 10px !important;
}

html[data-layout="landscape"] .cards[data-count="1"] .identity{
  display:flex;
  align-items:center;
  gap:10px;
}

html[data-layout="landscape"] .cards[data-count="1"] .badge{
  margin:0 !important;
  font-size:.78em !important;
}

html[data-layout="landscape"] .cards[data-count="1"] .identity b{
  font-size:1.02em !important;
}

html[data-layout="landscape"] .cards[data-count="1"] .identity small{
  margin-top:.15em;
  font-size:.63em !important;
}

html[data-layout="landscape"] .cards[data-count="1"] .quote{
  min-width:0;
  align-self:center;
}

html[data-layout="landscape"] .cards[data-count="1"] .quote>span{
  font-size:.68em !important;
  margin-bottom:.2em;
}

/* 672 기준 약 58px. quote 칼럼 폭도 1.7fr 확보 */
html[data-layout="landscape"] .cards[data-count="1"] .quote>strong{
  font-size:4.05em !important;
  max-width:100%;
  white-space:nowrap;
}

html[data-layout="landscape"] .cards[data-count="1"] .trend{
  min-width:0;
  padding:10px 0 10px 18px !important;
  border-left:1px solid var(--line);
}

html[data-layout="landscape"] .cards[data-count="1"] .trend>span{
  font-size:.67em !important;
}

html[data-layout="landscape"] .cards[data-count="1"] .trend>strong{
  font-size:1.35em !important;
}

html[data-layout="landscape"] .cards[data-count="1"] .trend>b{
  font-size:1.12em !important;
}

html[data-layout="landscape"] .cards[data-count="1"] .metrics{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:5px !important;
}

html[data-layout="landscape"] .cards[data-count="1"] .metrics>div{
  padding:7px 8px !important;
}

html[data-layout="landscape"] .cards[data-count="1"] .metrics span{
  font-size:.6em !important;
}

html[data-layout="landscape"] .cards[data-count="1"] .metrics strong{
  font-size:1em !important;
}

/* ------------------------------------------------------------
   2개 지수 페이지 — 국내
   각 행: identity | quote | trend
   보조수치는 아래 4칸
   ------------------------------------------------------------ */
html[data-layout="landscape"] .cards[data-count="2"] .market-row{
  display:grid !important;
  grid-template-columns:minmax(105px,.95fr) minmax(190px,1.65fr) minmax(130px,1fr) !important;
  grid-template-rows:minmax(0,1fr) auto auto !important;
  grid-template-areas:
    "identity quote trend"
    "metrics metrics metrics"
    "foot foot foot" !important;
  gap:7px 12px !important;
  padding:10px 14px 6px !important;
}

html[data-layout="landscape"] .cards[data-count="2"] .identity{
  align-self:center;
}

html[data-layout="landscape"] .cards[data-count="2"] .quote>strong{
  font-size:3.25em !important;
}

html[data-layout="landscape"] .cards[data-count="2"] .trend{
  padding-left:12px !important;
}

html[data-layout="landscape"] .cards[data-count="2"] .trend>strong{
  font-size:1.15em !important;
}

html[data-layout="landscape"] .cards[data-count="2"] .metrics{
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:4px !important;
}

html[data-layout="landscape"] .cards[data-count="2"] .metrics>div{
  padding:5px 6px !important;
}

html[data-layout="landscape"] .cards[data-count="2"] .metrics strong{
  font-size:.88em !important;
}

/* ------------------------------------------------------------
   3개 지수 페이지 — 미국
   폭을 정확하게 계산해 현재지수가 전일대비로 침범하지 않도록 함
   ------------------------------------------------------------ */
html[data-layout="landscape"] .cards[data-count="3"] .market-row{
  display:grid !important;
  grid-template-columns:minmax(94px,.8fr) minmax(158px,1.35fr) minmax(108px,.9fr) minmax(155px,1.3fr) !important;
  grid-template-rows:minmax(0,1fr) auto !important;
  grid-template-areas:
    "identity quote trend metrics"
    "foot foot foot foot" !important;
  gap:7px 10px !important;
  padding:7px 10px 4px !important;
}

html[data-layout="landscape"] .cards[data-count="3"] .quote>strong{
  font-size:2.55em !important;
}

html[data-layout="landscape"] .cards[data-count="3"] .trend{
  padding-left:9px !important;
}

html[data-layout="landscape"] .cards[data-count="3"] .trend>strong{
  font-size:.98em !important;
}

html[data-layout="landscape"] .cards[data-count="3"] .trend>b{
  font-size:.86em !important;
}

html[data-layout="landscape"] .cards[data-count="3"] .metrics{
  gap:3px !important;
}

html[data-layout="landscape"] .cards[data-count="3"] .metrics>div{
  padding:4px 5px !important;
}

html[data-layout="landscape"] .cards[data-count="3"] .metrics strong{
  font-size:.74em !important;
}

/* ------------------------------------------------------------
   Portrait v2.2
   세로형은 기존 v2.1 원칙 유지하되 수치 위계 강화
   ------------------------------------------------------------ */
html[data-layout="portrait"] .cards[data-count="1"] .quote>strong{
  font-size:4.25em !important;
}

html[data-layout="portrait"] .cards[data-count="2"] .quote>strong{
  font-size:3.4em !important;
}

html[data-layout="portrait"] .cards[data-count="3"] .quote>strong{
  font-size:2.75em !important;
}

/* 텍스트 대비 강화 — LED 원거리용 */
.stage-head h2,
.identity b,
.quote>strong,
.metrics strong{
  text-shadow:0 0 .01px currentColor;
}

/* footer/source는 중요도가 낮으므로 핵심정보와 경쟁하지 않게 */
html[data-layout="landscape"] .footer{
  opacity:.78;
}



/* ============================================================
   v2.2.1 VERIFIED
   실제 가로형 렌더링 확인 후 최종 미세조정
   ============================================================ */

/* Hero가 너무 좁으면 "글로벌 주요"가 3줄로 깨지므로 폭 복원 */
html[data-layout="landscape"] .frame{
  grid-template-columns:145px minmax(0,1fr) !important;
}

html[data-layout="landscape"] h1{
  font-size:1.58em !important;
}

/* 세로형 1개 지수도 큰 빈공간 안에서 정보 그룹을 중앙 정렬 */
html[data-layout="portrait"] .cards[data-count="1"] .market-row{
  align-content:center !important;
}


/* ============================================================
   v2.3 PORTRAIT COUNT-3 FIT
   미국 3개 지수 세로형 전용: 하단 잘림 없이 4개 보조수치까지 표시
   ============================================================ */

/* 3개 페이지일 때 상단을 약간 압축하여 카드 영역 확보 */
html[data-layout="portrait"][data-count="3"] .frame{
  grid-template-rows:104px minmax(0,1fr) !important;
}

html[data-layout="portrait"][data-count="3"] .hero{
  padding:7px 9px !important;
}

html[data-layout="portrait"][data-count="3"] h1{
  font-size:1.42em !important;
}

html[data-layout="portrait"][data-count="3"] .status{
  margin-top:.28em !important;
}

html[data-layout="portrait"][data-count="3"] .stage{
  grid-template-rows:40px minmax(0,1fr) 14px !important;
  gap:4px !important;
  padding:5px !important;
}

html[data-layout="portrait"][data-count="3"] .stage-head{
  padding-bottom:5px !important;
}

html[data-layout="portrait"][data-count="3"] .stage-head h2{
  font-size:1.08em !important;
}

/* 카드 내부: row-foot를 없애고 네 요소에 높이 집중 */
html[data-layout="portrait"] .cards[data-count="3"] .market-row{
  grid-template-columns:1fr !important;
  grid-template-rows:auto auto auto auto !important;
  grid-template-areas:
    "identity"
    "quote"
    "trend"
    "metrics" !important;
  align-content:start !important;
  gap:3px !important;
  padding:5px 7px !important;
}

html[data-layout="portrait"] .cards[data-count="3"] .row-foot{
  display:none !important;
}

html[data-layout="portrait"] .cards[data-count="3"] .identity{
  gap:5px !important;
}

html[data-layout="portrait"] .cards[data-count="3"] .badge{
  margin:0 !important;
  padding:.27em .38em !important;
  font-size:.58em !important;
}

html[data-layout="portrait"] .cards[data-count="3"] .identity b{
  font-size:.74em !important;
}

html[data-layout="portrait"] .cards[data-count="3"] .identity small{
  margin-top:.08em !important;
  font-size:.48em !important;
}

/* 메인 지수는 여전히 크게 */
html[data-layout="portrait"] .cards[data-count="3"] .quote{
  padding:0 !important;
}

html[data-layout="portrait"] .cards[data-count="3"] .quote>span{
  margin-bottom:.02em !important;
  font-size:.49em !important;
}

html[data-layout="portrait"] .cards[data-count="3"] .quote>strong{
  font-size:2.62em !important;
  line-height:.9 !important;
}

/* 전일대비는 한 줄 독립 */
html[data-layout="portrait"] .cards[data-count="3"] .trend{
  padding:3px 4px !important;
  gap:4px !important;
}

html[data-layout="portrait"] .cards[data-count="3"] .trend>span{
  font-size:.47em !important;
}

html[data-layout="portrait"] .cards[data-count="3"] .trend>strong{
  font-size:.86em !important;
}

html[data-layout="portrait"] .cards[data-count="3"] .trend>b{
  font-size:.78em !important;
}

/* 4개 보조정보: 2×2, 각 셀 안에서 라벨/숫자를 가로 배치 */
html[data-layout="portrait"] .cards[data-count="3"] .metrics{
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  grid-template-rows:repeat(2,auto) !important;
  gap:2px !important;
}

html[data-layout="portrait"] .cards[data-count="3"] .metrics>div{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:3px !important;
  padding:3px 4px !important;
  min-width:0 !important;
}

html[data-layout="portrait"] .cards[data-count="3"] .metrics span{
  margin:0 !important;
  font-size:.45em !important;
  white-space:nowrap;
}

html[data-layout="portrait"] .cards[data-count="3"] .metrics strong{
  font-size:.69em !important;
  white-space:nowrap;
}

/* 1개/2개 페이지: 숫자 길이에 따른 자동 fit을 위해 overflow 금지 */
.quote>strong,
.trend>strong,
.trend>b,
.metrics strong{
  max-width:100%;
  white-space:nowrap;
}


/* ============================================================
   v2.4 FULLWIDTH — 세로형 외곽 여백 제거
   ============================================================ */
html,
body,
#viewport{
  margin:0 !important;
  padding:0 !important;
  width:100% !important;
  height:100% !important;
  max-width:none !important;
  overflow:hidden !important;
}

#viewport{
  position:fixed !important;
  inset:0 !important;
}

html[data-layout="portrait"] .frame{
  margin:0 !important;
  max-width:none !important;
}