/* ============================================================
   AiriX 프로모션 — 영업 대시보드 (아케이드 캐비닛)
   팔레트/타이포 근거: .omc/plans/airix-promo-app-v260720.md
   외부 폰트·CDN 사용 금지 (사내 오프라인 구동 전제)
   ============================================================ */

:root{
  /* 캐비닛 */
  --cabinet:      #0A0C12;
  --cabinet-2:    #12161F;
  --panel:        #161B26;
  --edge:         #232A38;

  /* 인광체 */
  --amber:        #FFB000;
  --amber-dim:    #8A6410;
  --magenta:      #FF3D8B;
  --cyan:         #35D6E8;
  --navy:         #1E3A8A;   /* 브랜드 앵커 (공지 v260616 승계) */
  --green:        #4ADE80;

  --ink:          #E8ECF4;
  --dust:         #8A93A6;
  --dust-2:       #59617380;

  --kr: "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic",
        "Noto Sans KR", system-ui, sans-serif;
  --mono: ui-monospace, "DejaVu Sans Mono", "D2Coding", Consolas, monospace;

  --gap: 18px;
  --r: 14px;
}

*{ margin:0; padding:0; box-sizing:border-box; }

body{
  background:
    radial-gradient(120% 90% at 50% -10%, #1A2130 0%, var(--cabinet) 55%, #05070B 100%);
  color: var(--ink);
  font-family: var(--kr);
  min-height: 100vh;
  padding: 20px 20px 48px;
  overflow-x: hidden;
}

/* ---- CRT 오버레이 (비네팅만 — 스캔라인 가로 줄무늬는 제거) ---- */
body::after{
  content:"";
  position: fixed; inset: 0; z-index: 60; pointer-events: none;
  background:
    radial-gradient(130% 100% at 50% 50%, transparent 58%, rgba(0,0,0,.55) 100%);
}

.shell{ max-width: 1240px; margin: 0 auto; }

/* 전원 켜짐 연출은 의도적으로 넣지 않는다.
   하루 수십 번 보는 운영 화면이라 매번 0.6초를 기다리게 되고,
   애니메이션이 중단되면 화면이 비어 보이는 위험이 있다.
   CRT 성격은 스캔라인과 인광체 글로우가 전달한다. */

/* ============ 인광체 숫자 (도트 무늬 제거 — 가독성 우선) ============ */
.dot{
  font-family: var(--mono);
  font-weight: 800;
  letter-spacing: .02em;
  line-height: .92;
  color: var(--amber);
  display: inline-block;
  text-shadow: 0 0 12px rgba(255,176,0,.45);   /* 도트 무늬 대신 인광 글로우로 아케이드 느낌 유지 */
}
.dot.c-magenta{ color: var(--magenta); text-shadow: 0 0 12px rgba(255,61,139,.5); }
.dot.c-cyan{   color: var(--cyan);    text-shadow: 0 0 12px rgba(53,214,232,.5); }

/* ============ 마퀴 (캐비닛 상단 조명) ============ */
.marquee{
  position: relative;
  border: 1px solid var(--edge);
  border-radius: var(--r);
  background: linear-gradient(180deg, #1B2130 0%, #0D1119 100%);
  padding: 20px 26px 18px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
  overflow: hidden;
}
.marquee::before{  /* 조명 바 */
  content:""; position:absolute; left:0; right:0; top:0; height:3px;
  background: linear-gradient(90deg, var(--magenta), var(--amber) 42%, var(--cyan));
  box-shadow: 0 0 22px rgba(255,176,0,.55);
}
.marquee h1{
  font-size: clamp(20px, 3.4vw, 34px);
  font-weight: 800; letter-spacing: .34em;
  text-transform: uppercase;
  background: linear-gradient(180deg, #FFF 0%, var(--amber) 62%, #B87400 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: var(--amber);
  filter: drop-shadow(0 0 14px rgba(255,176,0,.35));
}
.marquee .sub{ font-size:12px; color:var(--dust); letter-spacing:.18em; margin-top:7px; }
.timer{ text-align:right; }
.timer .k{ font-size:10px; letter-spacing:.3em; color:var(--dust); }
.timer .v{ font-size:30px; margin-top:2px; }
.timer .n{ font-size:11px; color:var(--dust); margin-top:5px; }

/* ============ 공통 패널 ============ */
.panel{
  background: linear-gradient(180deg, var(--panel) 0%, #0E121A 100%);
  border: 1px solid var(--edge);
  border-radius: var(--r);
  padding: 20px 22px;
}
.label{
  font-size: 12.5px; font-weight: 800;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--amber);
}
.label .kr{ font-size:13.5px; font-weight:600; letter-spacing:.01em; text-transform:none; color:var(--ink); margin-left:9px; }

.grid{ display: grid; gap: var(--gap); margin-top: var(--gap); }
.g-stage{ grid-template-columns: 1.55fr 1fr; }
.g-bottom{ grid-template-columns: 1.85fr 1fr; }   /* 영업 ~20명 — 땅따먹기에 폭을 크게 준다 */

/* ============ 머니 히어로 (첫 화면 최상단 — 동기부여 우선) ============
   영업이 화면을 열자마자 "지금 내가 확정한 상금"이 지배하도록 최상단·최대. */
.hero{
  display:grid; grid-template-columns: 1.4fr 1fr; gap:28px; align-items:center;
  margin-top: var(--gap); border-color:#3B2F12;
  background:
    radial-gradient(130% 160% at 0% 0%, rgba(255,176,0,.12), transparent 58%),
    linear-gradient(180deg, var(--panel) 0%, #0E121A 100%);
}
.hero-eyebrow{ font-size:11px; font-weight:800; letter-spacing:.32em; color:var(--amber); }
.hero-sub{ font-size:16px; font-weight:700; color:var(--ink); margin-top:6px; }
.hero .hero-now{ font-size: clamp(56px, 10.5vw, 104px); margin:8px 0 10px; color:#FFC738; }
.hero .hero-locked{ font-size:14px; color:var(--ink); font-family:var(--mono); line-height:1.5; }
.hero .hero-locked b{ color:var(--magenta); }
.hero-side{ display:grid; grid-template-columns:1fr 1fr; gap:16px 20px; align-items:end; }
.hero-side .hstat .k{ font-size:10px; letter-spacing:.22em; color:var(--dust); }
.hero-side .hstat .v{ font-size:26px; margin-top:4px; }
.hero-side .hstat .v small{ font-size:12px; font-family:var(--kr); font-weight:700; margin-left:3px; color:var(--dust); }
.hero-btns{ grid-column:1 / -1; display:flex; gap:10px; margin-top:6px; }
.hero-btns .btn{ flex:1; padding:13px 16px; }
/* 히어로가 왔으니 팀 게이지 카운트는 한 급 낮춘다(시각 위계) */
.stage .count{ font-size: clamp(38px, 5.4vw, 58px); }
@media (max-width: 760px){
  .hero{ grid-template-columns:1fr; gap:18px; }
}

/* ============ 스테이지 게이지 ============ */
.stage .top{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; }
.stage .count{ font-size: clamp(46px, 7vw, 72px); }
.stage .of{ font-size:16px; color:var(--dust); font-family:var(--mono); padding-bottom:8px; }

.track{
  position: relative; height: 34px; margin: 26px 0 8px;
  background: #070A0F; border:1px solid var(--edge); border-radius: 6px;
  overflow: hidden;
}
.fill{
  position:absolute; inset:1px auto 1px 1px; border-radius:5px;
  background:
    repeating-linear-gradient(90deg,
      var(--amber) 0 9px, #0A0C12 9px 12px);   /* 세그먼트 LED */
  box-shadow: 0 0 24px rgba(255,176,0,.45);
  transition: width .8s cubic-bezier(.2,.8,.2,1);
}
.ticks{ position:relative; height:38px; }
.tick{ position:absolute; top:0; transform:translateX(-50%); text-align:center; white-space:nowrap; }
.tick.end{ transform:translateX(-100%); text-align:right; }
.tick.end i{ margin-right:0; }
.tick i{ display:block; width:1px; height:9px; background:var(--edge); margin:0 auto 6px; }
.tick b{ font-family:var(--mono); font-size:13px; color:var(--dust); font-weight:700; }
.tick s{ display:block; text-decoration:none; font-size:10px; letter-spacing:.12em; margin-top:3px; color:var(--dust); }
.tick.cleared b{ color: var(--green); }
.tick.cleared s{ color: var(--green); }
.tick.next b, .tick.next s{ color: var(--amber); }

.nextline{
  margin-top: 10px; padding-top:6px;
  font-size: 14px; color: var(--dust); line-height:1.6;
}
.nextline b{ color: var(--amber); font-family: var(--mono); font-size:17px; }

/* ============ 플레이어 카드 ============ */
.player{ display:flex; flex-direction:column; }
.player .name{ font-size: 21px; font-weight: 800; margin-top: 12px; }
.player .name em{ font-style:normal; color: var(--dust); font-size:13px; font-weight:600; margin-left:8px; }
.stats{ margin-top: 18px; display:flex; flex-direction:column; gap:15px; }
.stat .k{ font-size:10px; letter-spacing:.26em; color:var(--dust); }
.stat .v{ font-size: 30px; margin-top:3px; }
.stat .v small{ font-size:14px; font-family:var(--kr); font-weight:700; margin-left:4px; }
.stat .n{ font-size:12px; color:var(--dust); margin-top:4px; }

.payout{
  margin-top: 20px; padding-top:2px;
}
.payout .row{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:11px; }
.payout .row:last-child{ margin-bottom:0; }
.payout .rk{ font-size:13px; color:var(--dust); }
.payout .rv{ font-family:var(--mono); font-size:17px; font-weight:800; color:var(--ink); }
.locked{ color: var(--dust-2)!important; }
.rv.c-amber{ color: var(--amber); }

/* 수상 목록 합계 */
.sumline{
  margin-top:16px; padding-top:2px;
}
.sumline .row{ margin-bottom:8px; }
.sumline .rk{ font-weight:700; color:var(--ink); }
.sumline .rv{ font-size:18px; }

.hint{
  font-size:11.5px; color:var(--dust); line-height:1.65; margin-top:11px;
}

/* 오류 배너 */
.msg{
  margin-top: var(--gap); padding:14px 17px; border-radius:10px;
  background:rgba(255,61,139,.12); border:1px solid var(--magenta);
  color:#FFB3D0; font-size:13.5px; line-height:1.6;
}
.lockchip{
  display:inline-block; font-size:10px; letter-spacing:.16em; font-weight:800;
  color:#0A0C12; background: var(--dust); border-radius:4px; padding:3px 7px; margin-left:8px;
}

/* ============ 땅따먹기 — 영업이 보는 유일한 순위 화면 (시그니처) ============
   금액은 본인 것만. 타인은 점유율(%)로만 보인다 — 원가 역산 방지(보고서 p15). */
.terr{ min-width: 0; }   /* g-bottom 그리드 안에서 폭이 줄어들 수 있게 */
.terr .head{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.terr-body{ display:grid; grid-template-columns: 1fr 195px; gap:24px; align-items:center; margin-top:10px; }
.terr .canvas{ min-width:0; position:relative; }   /* position: 호버 툴팁 기준점 */

/* 4위 이하 호버 툴팁 (커서 위치에 뜬다) */
.terrtip{
  position:absolute; z-index:5; pointer-events:none;
  transform:translate(-50%,-118%);
  background:#070A0F; border:1px solid var(--edge); border-radius:8px;
  padding:8px 11px; white-space:nowrap;
  box-shadow:0 6px 20px rgba(0,0,0,.55);
}
.terrtip .n{ font-size:14px; font-weight:800; color:var(--ink); }
.terrtip .s{ font-size:11.5px; font-family:var(--mono); color:var(--cyan); margin-top:3px; }
.terr text{ font-family: var(--kr); font-weight:800; }

.gapbox{ border-left:1px solid var(--edge); padding-left:24px; }
.gapmeter{ margin-top:26px; padding-top:2px; }
.gapmeter .k{ font-size:10px; letter-spacing:.26em; color:var(--dust); }
.gapmeter .bar{
  height:14px; margin:11px 0 12px; background:#070A0F;
  border:1px solid var(--edge); border-radius:4px; overflow:hidden;
}
.gapmeter .bar i{
  display:block; height:100%;
  background: linear-gradient(90deg, #0E6E7C, var(--cyan));
  box-shadow: 0 0 16px rgba(53,214,232,.45);
}
.gapmeter .t{ font-size:12.5px; color:var(--dust); line-height:1.65; }
.gapmeter .t b{ color:var(--cyan); font-family:var(--mono); }

/* ============ 펀치머신 ============ */
.punch{ display:flex; gap:24px; min-width:0; }
/* 눈금 0~100점 (이론상 최대 = 10×7 + 10×2 + 10×1) */
.punch .tube{
  width: 88px; flex:0 0 auto; height: 236px; margin-top:14px;
  background:#070A0F; border:1px solid var(--edge); border-radius:10px;
  position:relative;
}
.punch .tube i{
  position:absolute; left:3px; right:3px; bottom:3px; border-radius:8px;
  background: linear-gradient(180deg, var(--cyan), #0E6E7C);
  box-shadow: 0 0 26px rgba(53,214,232,.42);
}
.punch .tube u{
  position:absolute; left:0; right:0; height:2px; background: var(--magenta);
  box-shadow:0 0 12px var(--magenta);
}
.punch .tube u::after{
  content:attr(data-label); position:absolute; right:6px; top:5px;
  font-family:var(--mono); font-size:10.5px; font-weight:800; color:var(--magenta);
  white-space:nowrap;
}
.punch .tube em{               /* 내 점수 — 게이지 안쪽 상단 */
  position:absolute; right:8px; font-style:normal; transform:translateY(100%);
  padding-top:5px;
  font-family:var(--mono); font-size:11px; font-weight:800; color:#04222A;
  white-space:nowrap;
}
.punch .info{ flex:1; display:flex; flex-direction:column; }
.punch .score{ font-size:52px; margin-top:14px; }
.punch .gap{ font-size:13px; color:var(--dust); margin-top:10px; line-height:1.6; }
.punch .gap b{ color:var(--cyan); font-family:var(--mono); }
.punch .formula{
  margin-top:20px; padding-top:2px;
  font-size:11.5px; color:var(--dust); line-height:1.7; font-family:var(--mono);
}

/* ============ 액션 ============ */
.actions{ display:flex; gap:12px; margin-top: var(--gap); flex-wrap:wrap; }
.btn{
  font-family: var(--kr); font-size:15px; font-weight:700;
  padding: 15px 30px; border-radius:10px; border:1px solid var(--edge);
  background: var(--panel); color: var(--ink); cursor:pointer;
  transition: transform .12s ease, border-color .12s ease, background .12s ease;
}
.btn:hover{ border-color: var(--amber); transform: translateY(-2px); }
.btn:focus-visible{ outline:3px solid var(--cyan); outline-offset:3px; }
.btn.primary{
  background: linear-gradient(180deg, var(--amber), #C97F00);
  color:#140D00; border-color:#FFD37A;
  box-shadow: 0 6px 0 #7A4E00, 0 10px 26px rgba(255,176,0,.28);
}
.btn.primary:hover{ box-shadow: 0 4px 0 #7A4E00, 0 12px 30px rgba(255,176,0,.36); }
.btn.primary:active{ transform: translateY(4px); box-shadow: 0 2px 0 #7A4E00; }

.foot{
  margin-top: 26px; font-size:12px; color:var(--dust); line-height:1.8;
  text-align:center;
}

/* ============ 반응형 ============ */
@media (max-width: 940px){
  .g-stage, .g-bottom{ grid-template-columns: 1fr; }
  .terr .head{ flex-direction:column; align-items:flex-start; gap:8px; }
  .terr-body{ grid-template-columns: 1fr; gap:16px; }
  .gapbox{ border-left:none; padding-left:0; padding-top:18px; }
  /* 게이지는 세로 방향을 유지한다. 가로로 눕히면 높이 기반 값과 어긋난다 */
  .punch .tube{ width:62px; height:190px; }
  .punch .score{ font-size:44px; }
}
@media (max-width: 520px){
  body{ padding:14px 14px 40px; }
  .panel{ padding:17px 16px; }
  .tick b{ font-size:11px; }
  .tick s{ font-size:9px; letter-spacing:.06em; }
  .btn{ flex:1 1 100%; }
}

/* ============ 접근성 ============ */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation: none !important;
    transition: none !important;
  }
  body::after{ background: radial-gradient(130% 100% at 50% 50%, transparent 62%, rgba(0,0,0,.5) 100%); }
}