/* ============================================================
   DIGIVICE SKIN — styles.css 위에 얹는 기기(器) 레이어
   레이아웃은 손대지 않고 질감·발광·동작만 더한다.
   되돌리려면 index.html 에서 이 파일 link 한 줄만 지우면 된다.
   ============================================================ */

:root {
  --dv-glow: rgba(245, 166, 35, 0.55);
  --dv-glow-soft: rgba(245, 166, 35, 0.16);
  --dv-metal-1: #2b2320;
  --dv-metal-2: #171210;
  --dv-metal-3: #3a2f29;
  --dv-screw: rgba(246, 238, 228, 0.22);
  --dv-lcd-bg: #0c0a08;
  --dv-scan: rgba(245, 166, 35, 0.045);
}

@keyframes dvLedPulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 var(--dv-glow), 0 0 10px 2px var(--dv-glow); }
  50%      { opacity: .55; box-shadow: 0 0 0 6px rgba(245,166,35,0), 0 0 6px 1px var(--dv-glow-soft); }
}

@keyframes dvSweep {
  0%   { transform: translateY(-120%); opacity: 0; }
  8%   { opacity: 1; }
  92%  { opacity: 1; }
  100% { transform: translateY(320%); opacity: 0; }
}

@keyframes dvScanDrift {
  0%   { background-position: 0 0; }
  100% { background-position: 0 40px; }
}

@keyframes dvFlicker {
  0%, 96%, 100% { opacity: 1; }
  97%           { opacity: .93; }
  98%           { opacity: 1; }
  99%           { opacity: .96; }
}

@keyframes dvSheen {
  0%   { transform: translateX(-130%) skewX(-18deg); }
  100% { transform: translateX(230%) skewX(-18deg); }
}

@keyframes dvCaret {
  0%, 49%   { opacity: 1; }
  50%, 100% { opacity: 0; }
}

@keyframes dvGridDrift {
  0%   { background-position: 0 0, 0 0; }
  100% { background-position: 46px 46px, 46px 46px; }
}

/* ── 셸 = 기기 몸통 ───────────────────────────────── */
.dv-shell {
  position: relative;
  border-radius: 20px;
  background:
    linear-gradient(180deg, var(--dv-metal-3) 0%, var(--dv-metal-1) 12%, var(--dv-metal-2) 100%);
  border: 1px solid rgba(246, 238, 228, 0.14);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, .6),
    0 28px 70px -20px rgba(0, 0, 0, .9),
    inset 0 1px 0 rgba(246, 238, 228, .14),
    inset 0 -18px 40px -24px rgba(0, 0, 0, .9);
  padding: 14px;
  overflow: hidden;
}

/* 몸통에 흐르는 격자 — 아주 옅게 */
.dv-shell::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(246, 238, 228, .028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(246, 238, 228, .028) 1px, transparent 1px);
  background-size: 46px 46px, 46px 46px;
  animation: dvGridDrift 26s linear infinite;
  opacity: .8;
}

/* 네 귀퉁이 나사 */
.dv-shell::after {
  content: '';
  position: absolute;
  inset: 9px;
  pointer-events: none;
  border-radius: 14px;
  background:
    radial-gradient(circle at 0 0,        var(--dv-screw) 0 2.5px, transparent 3px),
    radial-gradient(circle at 100% 0,     var(--dv-screw) 0 2.5px, transparent 3px),
    radial-gradient(circle at 0 100%,     var(--dv-screw) 0 2.5px, transparent 3px),
    radial-gradient(circle at 100% 100%,  var(--dv-screw) 0 2.5px, transparent 3px);
}

/* ── 베젤 = 상단 계기판 ───────────────────────────── */
.dv-bezel {
  position: relative;
  z-index: 1;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(246, 238, 228, .07), rgba(0, 0, 0, .34));
  border: 1px solid rgba(246, 238, 228, .1);
  box-shadow: inset 0 1px 0 rgba(246, 238, 228, .12), inset 0 -8px 18px -12px rgba(0, 0, 0, .9);
}

.dv-led {
  animation: dvLedPulse 2.6s ease-in-out infinite;
}

.dv-model,
.dv-serial {
  font-family: var(--font-ui);
  letter-spacing: .16em;
  text-shadow: 0 0 12px var(--dv-glow-soft);
}

.dv-serial::after {
  content: '▌';
  margin-left: 4px;
  color: var(--accent);
  animation: dvCaret 1.1s steps(1) infinite;
}

/* ── 탭 = 물리 버튼 ───────────────────────────────── */
.pick-tabs {
  position: relative;
  z-index: 1;
}

.pick-tab {
  position: relative;
  overflow: hidden;
  font-family: var(--font-ui);
  letter-spacing: .06em;
  background: linear-gradient(180deg, rgba(246, 238, 228, .06), rgba(0, 0, 0, .28));
  box-shadow: inset 0 1px 0 rgba(246, 238, 228, .1), 0 2px 0 rgba(0, 0, 0, .5);
  transition: transform .12s cubic-bezier(.4, 0, .2, 1), box-shadow .18s, color .18s, background .18s;
}

.pick-tab:hover {
  transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(246, 238, 228, .16), 0 3px 0 rgba(0, 0, 0, .55), 0 0 18px -4px var(--dv-glow);
}

.pick-tab:active {
  transform: translateY(1px);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, .6);
}

/* 눌린 탭 아래 켜지는 표시등 */
.pick-tab::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 3px;
  width: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--accent);
  box-shadow: 0 0 10px 1px var(--dv-glow);
  transform: translateX(-50%);
  transition: width .26s cubic-bezier(.4, 0, .2, 1);
}

.pick-tab.is-on::after {
  width: 62%;
}

.pick-tab.is-on {
  background: linear-gradient(180deg, rgba(245, 166, 35, .18), rgba(245, 166, 35, .05));
}

.pick-tab-en.is-on {
  box-shadow: inset 0 1px 0 rgba(246, 238, 228, .18), 0 0 22px -6px var(--dv-glow);
}

/* ── LCD = 화면 ───────────────────────────────────── */
.dv-lcd {
  position: relative;
  overflow: hidden;
  background: var(--dv-lcd-bg);
  box-shadow:
    inset 0 0 0 1px rgba(245, 166, 35, .14),
    inset 0 0 60px -20px var(--dv-glow),
    inset 0 0 120px 10px rgba(0, 0, 0, .8);
  animation: dvFlicker 9s linear infinite;
}

/* 주사선 */
.dv-lcd::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  background: repeating-linear-gradient(
    180deg,
    var(--dv-scan) 0 1px,
    transparent 1px 3px
  );
  animation: dvScanDrift 8s linear infinite;
}

/* 부팅 때 한 번 훑고 지나가는 빛 */
.dv-lcd::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 26%;
  pointer-events: none;
  z-index: 3;
  background: linear-gradient(180deg, transparent, rgba(245, 166, 35, .1) 45%, transparent);
  animation: dvSweep 1.5s cubic-bezier(.4, 0, .2, 1) 1;
}

.dv-lcd .preview-pre {
  position: relative;
  z-index: 1;
  text-shadow: 0 0 14px rgba(245, 166, 35, .1);
}

/* 화면이 갱신될 때만 한 번 더 훑는다 — home.js 가 클래스를 붙였다 뗀다 */
.dv-lcd.dv-refresh::after {
  animation: dvSweep .55s cubic-bezier(.4, 0, .2, 1) 1;
}

/* ── 토큰 게이지 = LED 세그먼트 ───────────────────── */
.dv-meter-bar {
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .7);
}

.dv-meter-bar i {
  box-shadow: 0 0 14px -2px var(--dv-glow);
  transition: width .45s cubic-bezier(.4, 0, .2, 1);
}

/* 게이지를 칸칸이 끊어 계기처럼 */
.dv-meter-bar::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    90deg,
    transparent 0 7px,
    rgba(0, 0, 0, .55) 7px 9px
  );
}

.dv-meter-val {
  font-family: var(--font-ui);
  text-shadow: 0 0 14px var(--dv-glow-soft);
}

/* ── 카드 = 홀로 패널 ─────────────────────────────── */
.bcard,
.pcard {
  position: relative;
  overflow: hidden;
}

/* 훑고 지나가는 반사광 */
.bcard::after,
.pcard::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 42%;
  pointer-events: none;
  z-index: 3;
  background: linear-gradient(90deg, transparent, rgba(246, 238, 228, .09), transparent);
  transform: translateX(-130%) skewX(-18deg);
  opacity: 0;
}

.bcard:hover::after,
.pcard:hover::after {
  opacity: 1;
  animation: dvSheen .7s cubic-bezier(.4, 0, .2, 1) 1;
}

/* 고른 카드에 모서리 괄호 */
.bcard.selected::before {
  content: '';
  position: absolute;
  inset: 4px;
  pointer-events: none;
  z-index: 2;
  border-radius: 6px;
  background:
    linear-gradient(var(--accent), var(--accent)) 0 0 / 10px 1.5px no-repeat,
    linear-gradient(var(--accent), var(--accent)) 0 0 / 1.5px 10px no-repeat,
    linear-gradient(var(--accent), var(--accent)) 100% 0 / 10px 1.5px no-repeat,
    linear-gradient(var(--accent), var(--accent)) 100% 0 / 1.5px 10px no-repeat,
    linear-gradient(var(--accent), var(--accent)) 0 100% / 10px 1.5px no-repeat,
    linear-gradient(var(--accent), var(--accent)) 0 100% / 1.5px 10px no-repeat,
    linear-gradient(var(--accent), var(--accent)) 100% 100% / 10px 1.5px no-repeat,
    linear-gradient(var(--accent), var(--accent)) 100% 100% / 1.5px 10px no-repeat;
  filter: drop-shadow(0 0 4px var(--dv-glow));
}

/* ── 규칙 패널 = LCD 와 같은 결 ───────────────────── */
.img-master {
  position: relative;
  background: var(--dv-lcd-bg);
  box-shadow:
    inset 0 0 0 1px rgba(245, 166, 35, .12),
    inset 0 0 50px -18px var(--dv-glow);
}

.img-master::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(180deg, var(--dv-scan) 0 1px, transparent 1px 3px);
  animation: dvScanDrift 8s linear infinite;
}

/* ── 섹션 라벨 = 단말기 헤더 ──────────────────────── */
.sec-label {
  font-family: var(--font-ui);
  letter-spacing: .28em;
}

.sec-label::after {
  content: '▌';
  margin-left: 6px;
  color: var(--accent);
  animation: dvCaret 1.1s steps(1) infinite;
}

/* ── 버튼 눌림감 ──────────────────────────────────── */
.btn {
  transition: transform .12s cubic-bezier(.4, 0, .2, 1), box-shadow .18s, background .18s, color .18s;
}

.btn:active {
  transform: scale(.97);
}

.btn-accent {
  box-shadow: 0 0 24px -6px var(--dv-glow);
}

.btn-accent:hover {
  box-shadow: 0 0 32px -4px var(--dv-glow);
}

/* ── 로고 표시등 ──────────────────────────────────── */
.logo-dot {
  animation: dvLedPulse 2.6s ease-in-out infinite;
}

/* ── 좁은 화면에서는 장식을 줄인다 ────────────────── */
@media (max-width: 720px) {
  .dv-shell { padding: 8px; border-radius: 14px; }
  .dv-shell::after { inset: 6px; }
  .dv-shell::before { animation: none; }
}

/* ── 움직임을 줄여 달라는 설정을 존중한다 ─────────── */
@media (prefers-reduced-motion: reduce) {
  .dv-shell::before,
  .dv-lcd,
  .dv-lcd::before,
  .dv-lcd::after,
  .img-master::before,
  .dv-led,
  .logo-dot,
  .sec-label::after,
  .dv-serial::after,
  .bcard:hover::after,
  .pcard:hover::after {
    animation: none !important;
  }
}