/* =================================================
[FINAL COMPLETE v3.5 – 프로그램 소개 하단 정렬 적용 / 전체 통합본]
/공통/공통(신형)_상단하단공통ui+풋터여백.css
================================================= */


/* =================================================
0️⃣ 보험(노브)
================================================= */

:root{
  --rt-safe-bottom: env(safe-area-inset-bottom, 0px);

  --rt-footer-pad-y: 2px;
  --rt-footer-pad-x: 8px;
  --rt-footer-gap: 0px;

  --rt-footer-confirm-font: 12px;
  --rt-footer-confirm-lh: 1.12;

  --rt-footer-pageinput-gap: 4px;
  --rt-footer-pageinput-mb: 0px;
  --rt-footer-pagebox-h: 8px;

  --rt-footer-nav-gap: 3px;
  --rt-footer-btn-minh: 36px;
  --rt-footer-btn-pad-y: 6px;
  --rt-footer-btn-pad-x: 10px;
  --rt-footer-btn-radius: 10px;
  --rt-footer-btn-font: 12px;

  --rt-footer-pagenum-font: 12px;

  --rt-top-btn-h: 46px;
  --rt-top-gap: 6px;
  --rt-top-row-gap: 0px;

  --rt-top-title-font: 15px;
}


/* =================================================
1️⃣ 상단 UI
================================================= */

.card.card-top{
  flex:0 0 auto !important;

  display:grid;
  grid-template-columns:repeat(4, 1fr);

  grid-template-rows:
    var(--rt-top-btn-h)
    calc(var(--rt-top-btn-h) * 0.75);

  column-gap:var(--rt-top-gap);
  row-gap:var(--rt-top-row-gap);

  align-content:start;

  padding-top:4px;
  padding-bottom:0px;
  margin:0 !important;
}

.top-buttons{
  display:contents;
}
.top-buttons .btn.empty{
  display:none !important;
}

.btn{
  height:var(--rt-top-btn-h);
  border-radius:6px;
  border:1px solid rgba(255,255,255,.18);
  background:#1a1a1a;
  color:#fff;
  font-size:11px;
  font-weight:700;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  overflow:hidden;
  padding:0;
  min-width:0;
  user-select:none;
}

.btn:active{
  transform:translateY(1px);
}

/* CPU 스타일 */
.top-buttons .btn:not(.empty)::before{
  content:"";
  position:absolute;
  inset:4px;
  background-image:repeating-linear-gradient(
    90deg,
    rgba(255,215,0,.55) 0px,
    rgba(255,215,0,.55) 1px,
    transparent 1px,
    transparent 4px
  );
  pointer-events:none;
}

.top-buttons .btn:not(.empty)::after{
  content:"";
  position:absolute;
  inset:4px;
  background-image:repeating-linear-gradient(
    0deg,
    rgba(255,215,0,.55) 0px,
    rgba(255,215,0,.55) 1px,
    transparent 1px,
    transparent 4px
  );
  pointer-events:none;
}

.chip-wrap{
  position:relative;
  width:88%;
  height:78%;
  background:#151515;
  border-radius:4px;
  border:1px solid rgba(255,215,0,.35);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:2;
}

.chip-text{
  font-size:11px;
  font-weight:800;
  color:#f2f2f2;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:92%;
}

/* GUIDE - 골드 */
.btn.chip-guide{ background:#1a1600; border-color:rgba(255,215,0,.60); }
.btn.chip-guide::before,.btn.chip-guide::after{ background-image:repeating-linear-gradient(90deg,rgba(255,215,0,.50) 0px,rgba(255,215,0,.50) 1px,transparent 1px,transparent 4px) !important; }
.btn.chip-guide .chip-wrap{ border-color:rgba(255,215,0,.60); background:#1f1a00; }
.btn.chip-guide .chip-text{ color:#ffd746; }

/* MEMO - 초록 */
.btn.chip-memo{ background:#001a0a; border-color:rgba(80,220,120,.60); }
.btn.chip-memo::before,.btn.chip-memo::after{ background-image:repeating-linear-gradient(90deg,rgba(80,220,120,.45) 0px,rgba(80,220,120,.45) 1px,transparent 1px,transparent 4px) !important; }
.btn.chip-memo .chip-wrap{ border-color:rgba(80,220,120,.55); background:#001f0d; }
.btn.chip-memo .chip-text{ color:#50dc78; }

/* NEWS - 사이언 */
.btn.chip-news{ background:#001a1f; border-color:rgba(70,215,255,.60); }
.btn.chip-news::before,.btn.chip-news::after{ background-image:repeating-linear-gradient(90deg,rgba(70,215,255,.45) 0px,rgba(70,215,255,.45) 1px,transparent 1px,transparent 4px) !important; }
.btn.chip-news .chip-wrap{ border-color:rgba(70,215,255,.55); background:#001f26; }
.btn.chip-news .chip-text{ color:#46d7ff; }

/* LAW - 퍼플 */
.btn.chip-law{ background:#12001a; border-color:rgba(187,124,255,.60); }
.btn.chip-law::before,.btn.chip-law::after{ background-image:repeating-linear-gradient(90deg,rgba(187,124,255,.45) 0px,rgba(187,124,255,.45) 1px,transparent 1px,transparent 4px) !important; }
.btn.chip-law .chip-wrap{ border-color:rgba(187,124,255,.55); background:#160020; }
.btn.chip-law .chip-text{ color:#bb7cff; }


/* =================================================
2️⃣ 프로그램 소개 (🔥 하단 정렬 적용)
================================================= */

.program-intro{
  grid-row:2;
  grid-column:1 / span 4;

  height:100% !important;

  display:flex;
  align-items:flex-end !important;
  justify-content:flex-start;

  padding:0 !important;
  margin:0 !important;
  margin-left:16px !important;

  font-weight:900;
  font-size:var(--rt-top-title-font);
  line-height:1.1;

  color:#ffeb3b;
  text-align:left;

  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  letter-spacing:-0.02em;
}

.program-intro + *{
  margin-top:0 !important;
}


/* =================================================
3️⃣ 칩 버튼
================================================= */

#page1-tent .p1-chip{
  cursor:pointer;
  user-select:none;
  -webkit-tap-highlight-color:transparent;
  position:relative;

  transform:translateY(-1px) !important;

  transition:
    transform .08s ease,
    box-shadow .12s ease,
    filter .12s ease;
}

#page1-tent .p1-chip::before{
  content:"";
  position:absolute;
  left:2px;
  right:2px;
  top:2px;
  height:40%;
  border-radius:inherit;
  background:linear-gradient(
    to bottom,
    rgba(255,255,255,.25),
    rgba(255,255,255,.08),
    rgba(255,255,255,0)
  );
  pointer-events:none;
}

#page1-tent .p1-chip.yellow{
  box-shadow:
    0 3px 0 rgba(255,215,70,.55),
    0 6px 10px rgba(0,0,0,.25),
    0 0 0 1px rgba(255,215,70,.18) inset !important;
}

#page1-tent .p1-chip.red{
  box-shadow:
    0 3px 0 rgba(255,107,107,.52),
    0 6px 10px rgba(0,0,0,.25),
    0 0 0 1px rgba(255,107,107,.17) inset !important;
}

#page1-tent .p1-chip.cyan{
  box-shadow:
    0 3px 0 rgba(70,215,255,.52),
    0 6px 10px rgba(0,0,0,.25),
    0 0 0 1px rgba(70,215,255,.17) inset !important;
}

#page1-tent .p1-chip:hover{
  filter:brightness(1.05);
}

#page1-tent .p1-chip:active{
  transform:translateY(3px) scale(.97) !important;
  filter:brightness(.94) !important;
}

#page1-tent .p1-chip.yellow:active{
  box-shadow:
    0 1px 0 rgba(255,215,70,.25),
    0 3px 6px rgba(0,0,0,.20),
    0 0 0 1px rgba(255,215,70,.16) inset !important;
}

#page1-tent .p1-chip.red:active{
  box-shadow:
    0 1px 0 rgba(255,107,107,.25),
    0 3px 6px rgba(0,0,0,.20),
    0 0 0 1px rgba(255,107,107,.16) inset !important;
}

#page1-tent .p1-chip.cyan:active{
  box-shadow:
    0 1px 0 rgba(70,215,255,.25),
    0 3px 6px rgba(0,0,0,.20),
    0 0 0 1px rgba(70,215,255,.16) inset !important;
}

#page1-tent .p1-chip.is-active{
  box-shadow:
    0 0 0 2px rgba(255,255,255,.10) inset,
    0 0 8px rgba(255,255,255,.06);
}


/* =================================================
4️⃣ 하단 footer
================================================= */

#rt-common-footer-mount .card-bot{
  width:100% !important;
  box-sizing:border-box !important;

  background:rgba(255,255,255,0.06) !important;
  border:1px solid rgba(255,255,255,0.08) !important;
  border-radius:14px !important;

  padding:var(--rt-footer-pad-y) var(--rt-footer-pad-x) !important;
  padding-bottom:calc(var(--rt-footer-pad-y) + var(--rt-safe-bottom)) !important;

  display:flex !important;
  flex-direction:column !important;
  gap:var(--rt-footer-gap) !important;
}

#rt-common-footer-mount .confirm-box{
  font-size:var(--rt-footer-confirm-font);
  text-align:center;
  color:#d2d2d2;
  margin:0 !important;
  line-height:var(--rt-footer-confirm-lh);
}

#rt-common-footer-mount .confirm-box label{
  min-height:23px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:0 4px;
  transform:translateY(-1px);
}

#rt-common-footer-mount .confirm-box input{
  width:16px;
  height:16px;
}

#rt-common-footer-mount .page-nav{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:var(--rt-footer-nav-gap);
}

#rt-common-footer-mount .nav-btn{
  background:#333;
  color:#fff;
  text-align:center;

  padding:var(--rt-footer-btn-pad-y) var(--rt-footer-btn-pad-x);
  border-radius:var(--rt-footer-btn-radius);

  font-size:var(--rt-footer-btn-font);
  min-height:var(--rt-footer-btn-minh);

  display:flex;
  align-items:center;
  justify-content:center;

  cursor:pointer;
  transition:transform .08s ease, opacity .08s ease;
}

#rt-common-footer-mount .nav-btn:active{
  transform:translateY(2px);
  opacity:.92;
}

#rt-common-footer-mount .page-num{
  font-size:var(--rt-footer-pagenum-font);
  font-weight:700;
  color:#ffeb3b;
  text-align:center;
}

/* 검수 확인후 100% 반영여부: 반영 */