/* 적정기술 경매장 「10년 후에 판정합니다」 — 공통 스타일 (경매장: 짙은 나무 + 금빛 조명) */
:root {
  --bg: #17100b; --bg2: #231811; --bg3: #2f2118; --bg4: #3c2b1f; --line: #4a3626;
  --fg: #f6ecdf; --fg2: #cbb59c; --fg3: #8d7660;
  --gold: #f2c14e; --gold2: #ffe39a; --wood: #8a5a35; --wood2: #b07a4a;
  --ok: #4ade80; --ok2: #bbf7d0; --bad: #f87171; --bad2: #fecaca; --warn: #fbbf24; --blue: #60a5fa; --purple: #c084fc;
  --radius: 14px; --shadow: 0 10px 34px rgba(0,0,0,.5);
  font-family: "Pretendard", "Noto Sans KR", "Malgun Gothic", system-ui, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg); color: var(--fg); min-height: 100%; }
body { font-size: 16px; line-height: 1.45; -webkit-font-smoothing: antialiased; overflow-x: hidden;
  background-image: radial-gradient(1100px 520px at 50% -12%, rgba(242,193,78,.13), transparent 62%),
                    repeating-linear-gradient(90deg, rgba(255,255,255,.012) 0 3px, transparent 3px 9px); }
button { font: inherit; cursor: pointer; border: 0; border-radius: 10px; padding: 10px 16px; background: var(--bg4); color: var(--fg); transition: transform .08s, filter .15s; touch-action: manipulation; }
button:hover { filter: brightness(1.15); }
button:active { transform: scale(.97); }
button:disabled { opacity: .38; cursor: not-allowed; filter: none; transform: none; }
button.primary { background: var(--gold); color: #2a1a05; font-weight: 800; }
button.ok { background: #16a34a; color: #fff; font-weight: 800; }
button.danger { background: #dc2626; color: #fff; font-weight: 800; }
button.ghost { background: transparent; border: 1px solid var(--line); }
button.big { padding: 16px 26px; font-size: 1.15rem; border-radius: 14px; }
button.sm { padding: 6px 10px; font-size: .85rem; }
input, select, textarea { font: inherit; background: var(--bg3); color: var(--fg); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--gold); border-color: transparent; }
h1, h2, h3, h4 { margin: 0; line-height: 1.2; }
.muted { color: var(--fg2); } .dim { color: var(--fg3); } .gold { color: var(--gold); } .okc { color: var(--ok); } .badc { color: var(--bad); }
.mono { font-variant-numeric: tabular-nums; font-family: "JetBrains Mono", Consolas, monospace; }
.card { background: var(--bg2); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.col { display: flex; flex-direction: column; gap: 10px; }
.grow { flex: 1; }
.center { text-align: center; }
.hidden { display: none !important; }
.chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; background: var(--bg3); border: 1px solid var(--line); font-size: .85rem; white-space: nowrap; }
.chip.ok { background: rgba(74,222,128,.14); border-color: rgba(74,222,128,.55); color: var(--ok2); }
.chip.bad { background: rgba(248,113,113,.15); border-color: rgba(248,113,113,.55); color: var(--bad2); }
.chip.warn { background: rgba(251,191,36,.14); border-color: rgba(251,191,36,.5); color: #fde68a; }
.chip.gold { background: rgba(242,193,78,.16); border-color: rgba(242,193,78,.55); color: var(--gold2); }
.chip.need { background: rgba(96,165,250,.12); border-color: rgba(96,165,250,.45); color: #bfdbfe; }
.chip.sel { background: var(--gold); color: #2a1a05; border-color: var(--gold); font-weight: 700; }
.tag-ok { background: rgba(74,222,128,.18) !important; border-color: var(--ok) !important; color: var(--ok2) !important; }
.tag-bad { background: rgba(248,113,113,.2) !important; border-color: var(--bad) !important; color: var(--bad2) !important; }
.tag-miss { opacity: .85; border-style: dashed !important; }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: #000d; color: #fff; padding: 12px 20px; border-radius: 12px; z-index: 999; font-weight: 600; box-shadow: var(--shadow); max-width: 90vw; text-align: center; }

/* ───── 상단 바 ───── */
.tbar { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; gap: 12px; padding: 10px 18px; background: rgba(23,16,11,.94); backdrop-filter: blur(6px); border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.tbar h1 { font-size: 1.2rem; white-space: nowrap; }
.tbar h1 .tag { font-size: .75rem; color: var(--fg3); font-weight: 500; margin-left: 6px; }
.tbar .code { font-family: Consolas, monospace; font-size: 1.3rem; font-weight: 800; letter-spacing: .15em; color: var(--gold); background: var(--bg3); padding: 3px 12px; border-radius: 8px; }
.timer { font-size: 1.6rem; font-weight: 800; color: var(--gold2); min-width: 4.5ch; text-align: center; }
.timer.low { color: var(--bad); animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: .45; } }

.screen { display: none; padding: 16px 18px 28px; }
.screen.active { display: block; }

/* ───── 마을 카드 / 보드 ───── */
.vgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.vcard { position: relative; background: var(--bg2); border: 2px solid var(--line); border-radius: 16px; padding: 14px; text-align: left; color: var(--fg); overflow: hidden; }
.vcard::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 5px; background: var(--vc, var(--gold)); }
.vcard .vh { display: flex; gap: 10px; align-items: center; }
.vcard .vi { font-size: 2.3rem; line-height: 1; }
.vcard .vn { font-size: 1.15rem; font-weight: 800; }
.vcard .vint { font-size: .9rem; color: var(--fg2); margin: 8px 0; }
.vcard .needs, .vcard .tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.vcard .tags .chip { font-size: .75rem; padding: 2px 8px; }
.vcard.taken { opacity: .5; }
.vcard.taken .owner, .vcard.mine .owner { position: absolute; top: 12px; right: 12px; }
.vcard.mine { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(242,193,78,.25); }
.vcard.pick { cursor: pointer; }
.vcard.pick:hover { border-color: var(--gold); }
.vcard .stat { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; font-size: .8rem; }

.board { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.bcell { position: relative; background: var(--bg2); border: 1px solid var(--line); border-radius: 12px; padding: 10px 10px 8px; min-height: 92px; overflow: hidden; }
.bcell::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--vc, var(--gold)); }
.bcell .bh { display: flex; align-items: center; gap: 6px; font-weight: 800; }
.bcell .bh .vi { font-size: 1.5rem; }
.bcell .gname { font-size: .85rem; color: var(--gold2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bcell .coins { font-size: 1.5rem; font-weight: 900; color: var(--gold); }
.bcell .coins small { font-size: .7rem; color: var(--fg3); font-weight: 500; }
.bcell .owned { display: flex; flex-wrap: wrap; gap: 2px; font-size: 1.25rem; min-height: 1.6rem; }
.bcell .nslots { display: flex; gap: 4px; margin-top: 4px; }
.bcell .nslots span { flex: 1; text-align: center; font-size: .72rem; padding: 2px 0; border-radius: 6px; background: var(--bg3); color: var(--fg3); white-space: nowrap; overflow: hidden; }
.bcell .nslots span.on { background: rgba(242,193,78,.2); color: var(--gold2); }
.bcell.empty { opacity: .35; }
.bcell.flash { animation: cellflash 1.2s ease-out; }
@keyframes cellflash { 0% { box-shadow: 0 0 0 4px var(--gold); } 100% { box-shadow: 0 0 0 0 transparent; } }
.prog { display: flex; gap: 4px; margin-top: 6px; flex-wrap: wrap; }
.prog span { font-size: .72rem; padding: 2px 6px; border-radius: 6px; background: var(--bg3); color: var(--fg3); }
.prog span.on { background: rgba(74,222,128,.18); color: var(--ok2); }

/* ───── 기술 카드 ───── */
.tcard { background: linear-gradient(180deg, #2c1f15, #22170f); border: 1px solid var(--line); border-radius: 14px; padding: 12px; display: flex; flex-direction: column; gap: 6px; position: relative; }
.tcard .th { display: flex; gap: 10px; align-items: center; }
.tcard .ti { font-size: 2rem; line-height: 1; }
.tcard .tn { font-weight: 800; font-size: 1.05rem; }
.tcard .tlot { position: absolute; top: 8px; right: 10px; font-size: .75rem; color: var(--fg3); }
.tcard .tp { font-size: .9rem; color: var(--fg2); }
.tcard .tl { font-size: .82rem; color: var(--fg3); }
.tcard .tr { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; font-size: .82rem; }
.tcard .tr b { font-size: .75rem; color: var(--fg3); font-weight: 600; margin-right: 2px; }
.tcard .price { color: var(--gold); font-weight: 800; }
.tcard.dim { opacity: .45; }
.tcard .wish { position: absolute; top: -8px; left: 10px; }

.lotcard { background: radial-gradient(500px 220px at 50% 0%, rgba(242,193,78,.16), transparent 70%), linear-gradient(180deg, #33231a, #20150e); border: 2px solid var(--wood2); border-radius: 22px; padding: 22px; box-shadow: var(--shadow); position: relative; }
.lotcard .lotno { font-size: .95rem; color: var(--gold2); font-weight: 700; letter-spacing: .05em; }
.lotcard .lic { font-size: 5.2rem; line-height: 1.05; }
.lotcard .lname { font-size: 2.3rem; font-weight: 900; }
.lotcard .lprinc { font-size: 1.15rem; color: var(--fg2); margin: 6px 0 10px; }
.lotcard .lrow { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 5px 0; font-size: 1rem; }
.lotcard .lrow > b { color: var(--fg3); font-weight: 600; min-width: 5.5em; font-size: .9rem; }
.lotcard .lstart { font-size: 1.5rem; font-weight: 900; color: var(--gold); }
.lotcard.enter { animation: lotin .55s cubic-bezier(.2,1.4,.4,1); }
@keyframes lotin { 0% { transform: translateY(-30px) scale(.92); opacity: 0; } 100% { transform: none; opacity: 1; } }

/* ───── 경매 진행 ───── */
.stepper { display: flex; gap: 6px; }
.stepper span { flex: 1; text-align: center; padding: 8px 4px; border-radius: 10px; background: var(--bg3); color: var(--fg3); font-weight: 700; font-size: .95rem; }
.stepper span.on { background: var(--gold); color: #2a1a05; }
.stepper span.done { background: rgba(242,193,78,.18); color: var(--gold2); }
.bigtime { font-size: 4.2rem; font-weight: 900; text-align: center; line-height: 1; color: var(--gold2); font-variant-numeric: tabular-nums; }
.bigtime.low { color: var(--bad); animation: blink 1s steps(2) infinite; }
.joingrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.jcell { background: var(--bg3); border-radius: 10px; padding: 8px; text-align: center; font-weight: 700; border: 2px solid transparent; }
.jcell .st { font-size: 1.6rem; display: block; }
.jcell.in { border-color: var(--ok); background: rgba(74,222,128,.12); }
.jcell.out { opacity: .45; }
.bars { display: flex; flex-direction: column; gap: 8px; }
.bar { display: grid; grid-template-columns: 130px 1fr 70px; gap: 8px; align-items: center; font-weight: 700; }
.bar .track { height: 30px; background: var(--bg3); border-radius: 8px; overflow: hidden; }
.bar .fill { height: 100%; width: 0; background: var(--vc, var(--gold)); border-radius: 8px; transition: width .45s cubic-bezier(.2,1.2,.4,1); }
.bar.lead .fill { box-shadow: 0 0 16px var(--gold); }
.bar.lead .bn::after { content: " 👑"; }
.bar .bp { text-align: right; font-size: 1.3rem; color: var(--gold); }
.blog { max-height: 190px; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; font-size: 1.05rem; }
.blog div { padding: 4px 8px; background: var(--bg3); border-radius: 8px; animation: lotin .3s; }
.high { font-size: 2.2rem; font-weight: 900; text-align: center; }
.high .who { color: var(--gold2); }
.hammer { position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center; pointer-events: none; background: radial-gradient(circle, rgba(0,0,0,.35), rgba(0,0,0,.7)); animation: fadein .25s; }
.hammer .inner { text-align: center; }
.hammer .hm { font-size: 9rem; display: inline-block; transform-origin: 80% 80%; animation: bang .6s cubic-bezier(.5,0,.5,1.6); }
.hammer .ht { font-size: 3rem; font-weight: 900; color: var(--gold); text-shadow: 0 4px 20px #000; margin-top: 10px; }
.hammer .hs { font-size: 1.4rem; color: var(--fg2); }
@keyframes bang { 0% { transform: rotate(-60deg); } 70% { transform: rotate(12deg); } 100% { transform: rotate(0); } }
@keyframes fadein { from { opacity: 0; } }
.flyer { position: fixed; z-index: 310; font-size: 4rem; pointer-events: none; transition: all .9s cubic-bezier(.5,-0.3,.5,1); }

/* ───── 교사 경매 레이아웃 ───── */
.auc { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 16px; margin-top: 14px; }
.ctrl { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; padding: 10px; background: var(--bg2); border: 1px solid var(--line); border-radius: 12px; align-items: center; }

/* ───── 타임랩스 ───── */
.tl-bar { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.tl-steps { display: flex; gap: 4px; flex: 1; }
.tl-steps span { flex: 1; text-align: center; padding: 10px; border-radius: 10px; background: var(--bg3); color: var(--fg3); font-weight: 800; font-size: 1.1rem; }
.tl-steps span.on { background: var(--gold); color: #2a1a05; }
.tl-steps span.done { background: rgba(242,193,78,.2); color: var(--gold2); }
.tlgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.tlv { background: var(--bg2); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; }
.tlv .tlh { display: flex; align-items: center; gap: 8px; padding: 8px 10px; font-weight: 800; }
.tlv .tlh .sc { margin-left: auto; font-size: 1.6rem; color: var(--gold); font-variant-numeric: tabular-nums; }
.tlv svg { display: block; width: 100%; height: auto; }
.slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 8px; }
.slot { background: var(--bg3); border-radius: 10px; padding: 6px; text-align: center; min-height: 64px; position: relative; }
.slot .sn { font-size: .72rem; color: var(--fg3); }
.slot .sicons { font-size: 1.7rem; line-height: 1.2; display: flex; justify-content: center; gap: 2px; flex-wrap: wrap; }
.ticon { display: inline-block; transition: filter .6s, transform .4s, opacity .6s; }
.ticon.W { animation: glow 1.6s ease-in-out infinite; }
.ticon.D { animation: flicker 1.1s steps(3) infinite; }
.ticon.X { filter: grayscale(1) sepia(.8) brightness(.55); transform: rotate(-8deg); }
.ticon.S { filter: grayscale(1) brightness(.5); opacity: .55; }
@keyframes glow { 50% { filter: drop-shadow(0 0 8px rgba(255,227,154,.95)); } }
@keyframes flicker { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.slot .sst { font-size: .7rem; font-weight: 700; }
.sst.W { color: var(--ok); } .sst.D { color: var(--warn); } .sst.X { color: var(--bad); } .sst.none { color: var(--fg3); }
.events { padding: 0 8px 8px; display: flex; flex-direction: column; gap: 4px; min-height: 40px; }
.bubble { background: #fff8ec; color: #2b1d10; border-radius: 10px; padding: 5px 9px; font-size: .82rem; line-height: 1.3; position: relative; animation: lotin .4s; }
.bubble.bad { background: #ffe1e1; color: #6b1010; font-weight: 700; }
.bubble.big { font-size: 1rem; }
.bubble.ok { background: #e3fbe9; color: #0f4d24; }
.storage { padding: 0 10px 8px; font-size: .75rem; color: var(--fg3); }
.tlgrid.compact { gap: 10px; }
.tlgrid.compact .tlv svg { height: 92px; }
.tlgrid.compact .tlh { padding: 5px 10px; }
.tlgrid.compact .tlh .sc { font-size: 1.5rem; }
.tlgrid.compact .slots { padding: 6px; gap: 5px; }
.tlgrid.compact .slot { min-height: 54px; padding: 4px; }
.tlgrid.compact .sicons { font-size: 1.45rem; }
.tlgrid.compact .events { min-height: 0; padding: 0 6px 6px; gap: 3px; }
.tlgrid.compact .bubble { font-size: .78rem; padding: 3px 8px; }
.tlgrid.compact .bubble.big { font-size: .9rem; }
.tlgrid.compact .storage { padding: 0 8px 6px; }
.predict { background: rgba(242,193,78,.12); border: 1px dashed var(--gold); border-radius: 12px; padding: 10px 14px; font-weight: 700; color: var(--gold2); text-align: center; font-size: 1.15rem; }

/* ───── 결산 ───── */
.rank { display: flex; flex-direction: column; gap: 8px; }
.rk { display: grid; grid-template-columns: 50px 1fr auto auto; gap: 12px; align-items: center; background: var(--bg2); border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; }
.rk .no { font-size: 1.8rem; font-weight: 900; color: var(--gold); text-align: center; }
.rk .pts { font-size: 1.8rem; font-weight: 900; color: var(--gold); }
.rgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 14px; }
.panel { background: var(--bg2); border: 1px solid var(--line); border-radius: 14px; padding: 14px; }
.panel h3 { margin-bottom: 10px; font-size: 1.05rem; }
.panel table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.panel td, .panel th { padding: 5px 6px; border-bottom: 1px solid var(--line); text-align: left; }
.panel th { color: var(--fg3); font-weight: 600; font-size: .8rem; }
.causebar { display: grid; grid-template-columns: 150px 1fr 40px; gap: 8px; align-items: center; margin: 5px 0; }
.causebar .t { height: 20px; background: var(--bg3); border-radius: 6px; overflow: hidden; }
.causebar .f { height: 100%; background: var(--bad); }
.motto { margin-top: 18px; text-align: center; font-size: 1.6rem; font-weight: 900; color: var(--gold2); padding: 18px; border-radius: 16px; background: radial-gradient(600px 120px at 50% 50%, rgba(242,193,78,.16), transparent); }

/* ───── 로비 ───── */
.lobby { display: grid; grid-template-columns: 320px 1fr; gap: 16px; }
.bigcode { font-family: Consolas, monospace; font-size: 4rem; font-weight: 900; letter-spacing: .2em; color: var(--gold); }
.qr { display: flex; justify-content: center; }
.qr img, .qr canvas { background: #fff; padding: 8px; border-radius: 8px; }
.setrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.setrow input[type=number] { width: 70px; }

/* ───── 모달 ───── */
.modal { position: fixed; inset: 0; z-index: 400; background: rgba(0,0,0,.7); display: flex; align-items: center; justify-content: center; padding: 16px; }
.modal .box { background: var(--bg2); border: 1px solid var(--line); border-radius: 16px; padding: 20px; max-width: 900px; width: 100%; max-height: 90vh; overflow-y: auto; }

/* ───── 모둠(태블릿) ───── */
.gwrap { max-width: 1100px; margin: 0 auto; }
.tabs { display: flex; gap: 6px; margin-bottom: 12px; flex-wrap: wrap; }
.tabs button { flex: 1; padding: 12px 8px; font-weight: 800; background: var(--bg3); min-width: 120px; }
.tabs button.on { background: var(--gold); color: #2a1a05; }
.tabs button .ck { margin-left: 4px; }
.catgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; }
.wish { display: flex; flex-direction: column; gap: 12px; }
.wneed { background: var(--bg2); border: 1px solid var(--line); border-radius: 14px; padding: 12px; }
.wneed h4 { margin-bottom: 8px; font-size: 1.05rem; }
.wpick { display: grid; grid-template-columns: 62px 1fr 110px; gap: 8px; align-items: center; margin: 6px 0; }
.wpick select { width: 100%; }
.wpick input { width: 100%; }
.wneed textarea { width: 100%; min-height: 48px; resize: vertical; }
.bigbtns { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.bigbtns button { padding: 24px 10px; font-size: 1.6rem; font-weight: 900; border-radius: 18px; }
.quick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.quick button { padding: 16px 6px; font-size: 1.25rem; font-weight: 900; }
.bidinput { display: grid; grid-template-columns: 1fr 160px; gap: 8px; }
.bidinput input { font-size: 1.8rem; font-weight: 900; text-align: center; padding: 10px; }
.bidinput button { font-size: 1.4rem; }
.banner { padding: 12px 16px; border-radius: 12px; font-weight: 800; text-align: center; font-size: 1.15rem; }
.banner.ok { background: rgba(74,222,128,.16); color: var(--ok2); border: 1px solid var(--ok); }
.banner.bad { background: rgba(248,113,113,.15); color: var(--bad2); border: 1px solid var(--bad); }
.banner.gold { background: rgba(242,193,78,.16); color: var(--gold2); border: 1px solid var(--gold); }
.gh { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.gh .gcoins { font-size: 1.6rem; font-weight: 900; color: var(--gold); }
.mine-owned { display: flex; gap: 6px; flex-wrap: wrap; }

@media (max-width: 1100px) {
  .board { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .auc { grid-template-columns: 1fr; }
  .tlgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lobby { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .vgrid { grid-template-columns: 1fr; }
  .board { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tlgrid, .rgrid { grid-template-columns: 1fr; }
  .lotcard .lname { font-size: 1.7rem; } .lotcard .lic { font-size: 3.6rem; }
  .bar { grid-template-columns: 90px 1fr 54px; }
  .wpick { grid-template-columns: 50px 1fr 90px; }
}