/* DFLUX 나라장터 입찰공고 LED Widget — 통일 토큰 (2026-09 톤앤매너 기준) */
:root,
html[data-theme="dark"] {
  --bg: #05080d;
  --card: #0b1018;
  --text: #f7f9fc;
  --muted: #8d98a8;
  --accent: #69e3ff;
  --good: #77f2bf;
  --bad: #ff8a80;
  --line: rgba(255, 255, 255, .08);
}
html[data-theme="light"] {
  --bg: #eef2f7;
  --card: #ffffff;
  --text: #13233d;
  --muted: #5b6b80;
  --accent: #0a7fa8;
  --good: #14895f;
  --bad: #d4443a;
  --line: rgba(19, 35, 61, .10);
}
html[data-theme="transparent"] {
  --bg: transparent;
  --card: rgba(5, 8, 13, .55);
  --text: #f7f9fc;
  --muted: #b4bdca;
  --accent: #69e3ff;
  --good: #77f2bf;
  --bad: #ff8a80;
  --line: rgba(255, 255, 255, .12);
}

html, body {
  margin: 0; padding: 0;
  width: 100%; height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--text);
  font-family: Arial, "Noto Sans KR", "Malgun Gothic", sans-serif;
  -webkit-font-smoothing: antialiased;
}
p { margin: 0; }

/* ---------- 가로형 (기본) : vh 기준 ---------- */
.wg {
  position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  display: -webkit-box; display: -webkit-flex; display: flex;
  -webkit-box-orient: vertical; -webkit-flex-direction: column; flex-direction: column;
  padding: 3.2vh 3vw 2.4vh;
  box-sizing: border-box;
}
.hd {
  display: -webkit-box; display: -webkit-flex; display: flex;
  -webkit-box-align: center; -webkit-align-items: center; align-items: center;
  -webkit-box-pack: justify; -webkit-justify-content: space-between; justify-content: space-between;
  height: 9vh;
  font-size: 4.6vh;
  font-weight: 700;
  white-space: nowrap;
}
.hd-t { overflow: hidden; text-overflow: ellipsis; }
.hd-t:before {
  content: ""; display: inline-block;
  width: 1.6vh; height: 1.6vh;
  margin: 0 1.6vh .5vh 0;
  border-radius: 50%;
  background: var(--accent);
  vertical-align: middle;
}
.hd-n { color: var(--muted); font-weight: 400; font-size: 3.2vh; padding-left: 2vw; }

.stage {
  position: relative;
  -webkit-box-flex: 1; -webkit-flex: 1; flex: 1;
  margin: 1.2vh 0 1.6vh;
}
.page {
  position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  display: -webkit-box; display: -webkit-flex; display: flex;
  -webkit-box-orient: vertical; -webkit-flex-direction: column; flex-direction: column;
  opacity: 0;
  -webkit-transition: opacity .7s ease; transition: opacity .7s ease;
}
.page.on { opacity: 1; }

/* 한 행 = 공고 1건 */
.row {
  -webkit-box-flex: 1; -webkit-flex: 1; flex: 1;
  min-height: 0;
  display: -webkit-box; display: -webkit-flex; display: flex;
  -webkit-box-align: center; -webkit-align-items: center; align-items: center;
  border-bottom: 1px solid var(--line);
  padding: 0 .4vw;
  overflow: hidden;
}
.row:last-child { border-bottom: 0; }
.row.blank { visibility: hidden; }
.row.link { cursor: pointer; }
.row.link:hover .r-t { color: var(--accent); text-decoration: underline; }

.r-l {
  width: 14%;
  -webkit-flex-shrink: 0; flex-shrink: 0;
  display: -webkit-box; display: -webkit-flex; display: flex;
  -webkit-box-orient: vertical; -webkit-flex-direction: column; flex-direction: column;
  -webkit-box-align: start; -webkit-align-items: flex-start; align-items: flex-start;
}
.kind {
  font-size: 2.4vh; font-weight: 700; line-height: 1;
  padding: .6vh 1.1vh;
  border-radius: .8vh;
  border: .25vh solid var(--muted);
  color: var(--muted);
}
.dday {
  margin-top: 1vh;
  font-size: 3.8vh; font-weight: 700; line-height: 1.1;
  color: var(--text);
  white-space: nowrap;
}
.dday.soon { color: var(--accent); }
.dday.today { color: var(--bad); }

.r-m {
  -webkit-box-flex: 1; -webkit-flex: 1; flex: 1;
  min-width: 0;
  padding: 0 2vw 0 1vw;
}
.r-t {
  font-size: 3.4vh; font-weight: 700; line-height: 1.25;
  max-height: 2.5em;
  overflow: hidden;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  word-break: keep-all; overflow-wrap: break-word;
}
.r-s {
  margin-top: .7vh;
  font-size: 2.5vh;
  color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.r-r {
  width: 17%;
  -webkit-flex-shrink: 0; flex-shrink: 0;
  text-align: right;
}
.price { display: block; font-size: 3.8vh; font-weight: 700; color: var(--accent); white-space: nowrap; }
.close { display: block; margin-top: .7vh; font-size: 2.4vh; color: var(--muted); white-space: nowrap; }
.price:empty, .close:empty, .dday:empty, .r-s:empty { display: none; }

.empty {
  position: absolute; top: 50%; left: 0; right: 0;
  -webkit-transform: translateY(-50%); transform: translateY(-50%);
  text-align: center; font-size: 5vh; color: var(--muted);
  display: none;
}
.is-empty .empty { display: block; }
.is-empty .page { display: none; }

.ft {
  display: -webkit-box; display: -webkit-flex; display: flex;
  -webkit-box-pack: justify; -webkit-justify-content: space-between; justify-content: space-between;
  border-top: 1px solid var(--line);
  padding-top: 1.4vh;
  font-size: 2.6vh;
  color: var(--muted);
  white-space: nowrap;
}

/* ---------- 세로형 : 가로/세로 1.2 미만, vw 기준 ---------- */
@media (max-aspect-ratio: 6/5) {
  .wg { padding: 4vw 4vw 3vw; }
  .hd { height: auto; padding: 1vw 0 2vw; font-size: 5.6vw; }
  .hd-t:before { width: 2vw; height: 2vw; margin: 0 2vw .6vw 0; }
  .hd-n { font-size: 3.8vw; }
  .stage { margin: 1vw 0 2vw; }
  .row {
    overflow: hidden;
    -webkit-flex-wrap: wrap; flex-wrap: wrap;
    -webkit-align-content: center; align-content: center;
    padding: 0;
  }
  .r-l {
    width: 60%;
    -webkit-box-orient: horizontal; -webkit-flex-direction: row; flex-direction: row;
    -webkit-box-align: center; -webkit-align-items: center; align-items: center;
  }
  .kind { font-size: 3vw; padding: .8vw 1.4vw; border-radius: 1vw; border-width: .3vw; }
  .dday { margin: 0 0 0 2.4vw; font-size: 4.2vw; }
  .r-r { width: 40%; -webkit-box-ordinal-group: 2; -webkit-order: 2; order: 2; }
  .r-l { -webkit-box-ordinal-group: 1; -webkit-order: 1; order: 1; }
  .hd-sort { display: none; }
  .price { font-size: 4.6vw; }
  .close { display: none; }
  .r-m { -webkit-box-ordinal-group: 3; -webkit-order: 3; order: 3; width: 100%; -webkit-box-flex: 0; -webkit-flex: none; flex: none; padding: 1.6vw 0 0; }
  .r-t { font-size: 4.2vw; }
  .r-s { margin-top: .8vw; font-size: 3.2vw; }
  .empty { font-size: 5.4vw; }
  .ft { padding-top: 2vw; font-size: 3.2vw; }
}