* {
  box-sizing: border-box;
}

:root {
  --background: #050806;
  --text: #b9c9bc;
  --dim-text: #637267;

  --primary: #7fb38c;
  --primary-bright: #b7e4c0;

  --border: #314438;
}

body {
  margin: 0;
  min-height: 100vh;

  background: var(--background);
  color: var(--text);

  font-family: Galmuri11, monospace;

  font-size: 14px;
}

button,
input {
  font: inherit;
}

.hidden {
  display: none !important;
}


/* =========================================
   최초 안내문
========================================= */

.notice-screen {
  position: fixed;

  inset: 0;

  z-index: 100;

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

  padding: 25px;

  background: #020302;

  transition:
    opacity 2s ease,
    background-color 2s ease;
}

.notice-screen.fade-out {
  opacity: 0;
}

.notice-box {
  width: 100%;
  max-width: 720px;

  line-height: 2;

  color: #a9b5ab;

  text-align: left;
}

.notice-label {
  margin-bottom: 30px;

  color: #6e8f76;

  letter-spacing: 3px;

  font-size: 12px;
}

.notice-box p {
  margin-top: 0;
  margin-bottom: 22px;
}


/* =========================================
   로그인
========================================= */

.login-screen {
  min-height: 100vh;

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

  padding: 20px;

  opacity: 1;

  transition: opacity 1.5s ease;
}

.login-terminal {
  width: 100%;
  max-width: 700px;

  border: 1px solid var(--border);

  background: #080c09;
}

.system-header,
.terminal-footer {
  min-height: 38px;

  padding: 10px 14px;

  display: flex;
  justify-content: space-between;
  gap: 20px;

  color: var(--dim-text);

  font-size: 11px;

  border-bottom: 1px solid var(--border);
}

.terminal-footer {
  border-bottom: none;
  border-top: 1px solid var(--border);
}

.login-content {
  padding: 45px;
}

.system-text {
  margin: 0 0 12px;

  color: var(--primary);

  font-size: 15px;

  letter-spacing: 2px;
}

.login-content h1 {
  margin: 0;

  color: var(--primary-bright);

  font-size: clamp(22px, 5vw, 36px);

  letter-spacing: 3px;
}

.connection-text {
  margin-top: 12px;
  margin-bottom: 40px;

  color: var(--dim-text);

  font-size: 12px;
}

.input-group {
  margin-bottom: 22px;
}

.input-group label {
  display: block;

  margin-bottom: 8px;

  color: var(--dim-text);

  font-size: 11px;
}

.input-group input {
  width: 100%;

  padding: 13px 14px;

  border: 1px solid var(--border);

  outline: none;

  background: #040605;
  color: var(--primary-bright);

  font-size: 16px;
}

.input-group input:focus {
  border-color: var(--primary);
}

#loginForm button,
#roneLogoutButton,
#cromwellLogoutButton {
  border: 1px solid var(--primary);

  background: transparent;
  color: var(--primary-bright);

  padding: 10px 16px;

  min-width: 110px;

  font-family: inherit;
  font-size: 11px;

  letter-spacing: 1px;

  cursor: pointer;

  transition:
    background 0.15s,
    color 0.15s,
    border-color 0.15s;
}

#loginForm button:hover,
#roneLogoutButton:hover {
  background: var(--primary);
  color: #050806;
}


/* =========================================
   부팅 / 로그인 성공 화면
========================================= */

.boot-screen {
  min-height: 100vh;

  padding: 30px;

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

  background: #030504;
}

.boot-terminal {
  width: 100%;
  max-width: 900px;

  color: #a9d4b2;

  line-height: 1.9;

  font-size: 14px;
}

.boot-line {
  margin: 3px 0;
}

.welcome-message {
  margin-top: 30px;

  min-height: 42px;

  color: #e0ffe6;

  font-size: clamp(20px, 5vw, 34px);
}


/* =========================================
   메인 화면
========================================= */

.dashboard {
  min-height: 100vh;

  background: #060907;
}

.dashboard-header {
  min-height: 100px;

  padding: 22px 32px;

  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 30px;

  border-bottom: 1px solid var(--border);
}

.dashboard-label {
  margin: 0 0 7px;

  color: var(--dim-text);

  font-size: 11px;
}

.dashboard-header h1 {
  margin: 0;

  color: var(--primary-bright);

  letter-spacing: 2px;

  font-size: 22px;
}

.user-area {
  display: flex;
  align-items: center;
  justify-content: flex-end;

  gap: 18px;

  min-height: 44px;

  font-size: 11px;

  letter-spacing: 1px;
}

.status-bar {
  min-height: 40px;

  display: flex;
  flex-wrap: wrap;
  align-items: center;

  gap: 30px;

  padding: 10px 32px;

  border-bottom: 1px solid var(--border);

  color: var(--dim-text);

  font-size: 11px;
}

.database-layout {
  display: grid;

  grid-template-columns: 220px 1fr;

  min-height: calc(100vh - 140px);
}

.sidebar {
  padding: 25px 18px;

  border-right: 1px solid var(--border);

  display: flex;
  flex-direction: column;
}

.sidebar-title {
  color: var(--dim-text);

  font-size: 11px;

  margin: 0 0 18px;
}

.nav-button {
  width: 100%;

  padding: 12px;

  margin-bottom: 8px;

  text-align: left;

  border: 1px solid transparent;

  background: transparent;
  color: var(--dim-text);

  cursor: pointer;
}

.nav-button.active {
  border-color: var(--border);

  color: var(--primary-bright);

  background: #0c120e;
}

.nav-button:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.sidebar-bottom {
  margin-top: auto;

  color: #425046;

  font-size: 9px;

  line-height: 1.7;
}

.database-content {
  min-width: 0;

  padding: 30px;
}

.content-header {
  display: flex;
  justify-content: space-between;
  align-items: end;

  gap: 20px;

  margin-bottom: 25px;
  padding-bottom: 20px;

  border-bottom: 1px solid var(--border);
}

.section-number {
  margin: 0 0 7px;

  color: var(--dim-text);

  font-size: 10px;
}

.content-header h2 {
  margin: 0;

  color: var(--primary-bright);

  font-size: 19px;
}

#recordCount {
  color: var(--dim-text);

  font-size: 10px;
}


/* =========================================
   사도 카드
========================================= */

.apostle-grid {
  display: grid;

  grid-template-columns:
    repeat(auto-fill, minmax(260px, 1fr));

  gap: 16px;
}

.apostle-card {
  min-width: 0;

  border: 1px solid var(--border);

  background: #090e0b;
}

.apostle-image {
  width: 100%;
  aspect-ratio: 16 / 10;

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

  overflow: hidden;

  border-bottom: 1px solid var(--border);

  background:
    repeating-linear-gradient(
      0deg,
      #0c110d,
      #0c110d 2px,
      #090d0a 2px,
      #090d0a 4px
    );

  color: #435047;

  font-size: 11px;
}

.apostle-image img {
  width: 100%;
  height: 100%;

  object-fit: cover;
}

.apostle-info {
  padding: 18px;
}

.file-id {
  color: var(--dim-text);

  font-size: 9px;
}

.apostle-name {
  margin: 8px 0 14px;

  color: var(--primary-bright);

  font-size: 18px;
}

.info-row {
  margin: 8px 0;

  display: grid;

  grid-template-columns: 75px 1fr;

  gap: 10px;

  font-size: 11px;
}

.info-label {
  color: var(--dim-text);
}

.private-note {
  margin-top: 15px;

  padding-top: 15px;

  border-top: 1px dashed var(--border);

  color: var(--primary);

  line-height: 1.7;

  font-size: 11px;
}


/* =========================================
   뮤트 / 크롬웰 전용 UI
========================================= */

body.mute-mode {
  --background: #070202;
  --text: #bda7a7;
  --dim-text: #705353;

  --primary: #922828;
  --primary-bright: #dc6262;

  --border: #491616;

  background: #050101;
}

body.mute-mode .boot-screen {
  background: #050000;
}

body.mute-mode .dashboard {
  background:
    linear-gradient(
      rgba(25, 0, 0, 0.2),
      rgba(0, 0, 0, 0.55)
    ),
    #060101;
}

body.mute-mode .apostle-card {
  background: #0d0303;
}


/* =========================================
   CROMWELL GLITCH SYSTEM
========================================= */


/* 뮤트 로그인 시작 시에는 아직 정상 시스템 색상 */

body.mute-login-mode .boot-screen {
  background: #030504;
}

body.mute-login-mode .boot-terminal {
  color: #a9d4b2;
}


/* 시스템이 크롬웰 모드에 잠식된 순간 */

body.mute-login-mode.cromwell-corrupted .boot-screen {
  background: #080101;
}

body.mute-login-mode.cromwell-corrupted .boot-terminal {
  color: #8f3030;
}

body.mute-login-mode.cromwell-corrupted .welcome-message {
  color: #bb3f3f;
}


/* =========================================
   화면 글리치
   화면 자체를 흔드는 것이 아니라
   영상 신호가 깨지는 것처럼 표현
========================================= */

.glitch-active {
  position: relative;
  overflow: hidden;
}


/* 가로 노이즈 */

.glitch-active::before {
  content: "";

  position: fixed;

  top: 0;
  left: 0;

  width: 100%;
  height: 100%;

  pointer-events: none;

  z-index: 9000;

  opacity: 0;

  background:
    repeating-linear-gradient(
      to bottom,
      transparent 0px,
      transparent 7px,
      rgba(120, 0, 0, 0.12) 8px,
      transparent 10px
    );

  animation: cromwellNoise 0.18s steps(2) infinite;
}


/* 순간적으로 잘려나가는 화면 데이터 */

.glitch-active::after {
  content: "";

  position: fixed;

  left: 0;

  width: 100%;
  height: 7px;

  pointer-events: none;

  z-index: 9001;

  background: rgba(130, 15, 15, 0.25);

  box-shadow:
    0 35px rgba(70, 0, 0, 0.15),
    0 100px rgba(130, 0, 0, 0.12),
    0 210px rgba(80, 0, 0, 0.20);

  animation: glitchBar 0.65s steps(1) infinite;
}


@keyframes cromwellNoise {

  0% {
    opacity: 0.08;
  }

  20% {
    opacity: 0.25;
  }

  21% {
    opacity: 0;
  }

  45% {
    opacity: 0.15;
  }

  46% {
    opacity: 0.04;
  }

  70% {
    opacity: 0.3;
  }

  71% {
    opacity: 0;
  }

  100% {
    opacity: 0.08;
  }

}


@keyframes glitchBar {

  0% {
    top: 8%;
  }

  20% {
    top: 65%;
  }

  35% {
    top: 31%;
  }

  50% {
    top: 82%;
  }

  70% {
    top: 17%;
  }

  85% {
    top: 53%;
  }

  100% {
    top: 5%;
  }

}


/* =========================================
   텍스트 자체의 글리치
========================================= */

.text-glitch {
  animation: textGlitch 0.15s steps(2) infinite;
}

@keyframes textGlitch {

  0% {
    text-shadow:
      2px 0 #480000,
      -1px 0 #153b20;
  }

  33% {
    text-shadow:
      -3px 0 #690000,
      2px 0 #132f1b;
  }

  66% {
    text-shadow:
      1px 0 #920000,
      -2px 0 #102a17;
  }

  100% {
    text-shadow:
      none;
  }

}


/* 검열된 이름 */

.censored-text {
  color: #8d2929;

  letter-spacing: 3px;

  text-shadow:
    1px 0 #3c0000,
    -1px 0 #1e0707;
}


/* CRT Scanline */

body::after {
  content: "";

  position: fixed;

  inset: 0;

  pointer-events: none;

  background:
    repeating-linear-gradient(
      to bottom,
      rgba(255,255,255,0.015) 0px,
      rgba(255,255,255,0.015) 1px,
      transparent 1px,
      transparent 4px
    );

  z-index: 9999;
}


/* =========================================
   모바일
========================================= */

@media (max-width: 720px) {

  .login-content {
    padding: 28px 20px;
  }

  .database-layout {
    grid-template-columns: 1fr;
  }

  .sidebar {
    border-right: none;
    border-bottom: 1px solid var(--border);
  }

  .sidebar-bottom {
    display: none;
  }

  .dashboard-header {
    padding: 20px;

    align-items: flex-start;
    flex-direction: column;
  }

  .status-bar {
    padding: 12px 20px;
  }

  .database-content {
    padding: 20px;
  }

}
/* =====================================================
   SPECIES NAVIGATION
===================================================== */

.species-button {
  width: 100%;

  padding: 13px 12px;

  margin-bottom: 6px;

  border: 1px solid transparent;

  background: transparent;

  color: var(--dim-text);

  text-align: left;

  cursor: pointer;

  transition:
    background 0.15s,
    color 0.15s,
    border-color 0.15s;
}


.species-button::before {
  content: "> ";

  opacity: 0;
}


.species-button:hover {
  color: var(--primary-bright);

  border-color: var(--border);

  background: #0a100c;
}


.species-button:hover::before {
  opacity: 1;
}


.species-button.active {
  color: var(--primary-bright);

  border-color: var(--primary);

  background: #0c140f;
}


.species-button.active::before {
  opacity: 1;
}


/* =====================================================
   APOSTLE THUMBNAILS
===================================================== */

.apostle-grid {
  display: grid;

  grid-template-columns:
    repeat(auto-fill, minmax(180px, 1fr));

  gap: 14px;
}


.apostle-card {
  border: 1px solid var(--border);

  background: #080d0a;

  cursor: pointer;

  transition:
    border-color 0.15s,
    background 0.15s;
}


.apostle-card:hover {
  border-color: var(--primary);

  background: #0d1510;
}


.apostle-thumbnail {
  width: 100%;

  aspect-ratio: 4 / 3;

  overflow: hidden;

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

  border-bottom: 1px solid var(--border);

  background:
    repeating-linear-gradient(
      0deg,
      #0a100c,
      #0a100c 2px,
      #080c09 2px,
      #080c09 4px
    );

  color: #465248;

  font-size: 9px;
}


.apostle-thumbnail img {
  width: 100%;
  height: 100%;

  object-fit: cover;
}


.apostle-card-info {
  padding: 13px;
}


.apostle-card-file {
  display: block;

  margin-bottom: 7px;

  color: var(--dim-text);

  font-size: 8px;
}


.apostle-card-name {
  margin: 0 0 6px;

  color: var(--primary-bright);

  font-size: 15px;
}


.apostle-card-species {
  color: var(--dim-text);

  font-size: 9px;
}


/* =====================================================
   EMPTY DATABASE
===================================================== */

.database-empty {
  grid-column: 1 / -1;

  min-height: 250px;

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

  border: 1px dashed var(--border);

  color: var(--dim-text);

  font-size: 11px;
}


/* =====================================================
   APOSTLE DETAIL
===================================================== */

.apostle-detail-view {
  min-width: 0;

  padding: 30px;
}


.detail-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;

  gap: 20px;

  margin-bottom: 20px;

  padding-bottom: 15px;

  border-bottom: 1px solid var(--border);

  color: var(--dim-text);

  font-size: 10px;
}


.back-button {
  padding: 10px 13px;

  border: 1px solid var(--border);

  background: transparent;

  color: var(--primary);

  cursor: pointer;
}


.back-button:hover {
  border-color: var(--primary);

  color: var(--primary-bright);
}


.apostle-file {
  max-width: 1050px;
}


.apostle-file-header {
  display: grid;

  grid-template-columns: 220px 1fr;

  gap: 25px;

  margin-bottom: 25px;
}


.detail-portrait {
  width: 100%;

  aspect-ratio: 4 / 3;

  overflow: hidden;

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

  border: 1px solid var(--border);

  background:
    repeating-linear-gradient(
      to bottom,
      #090e0b,
      #090e0b 2px,
      #070a08 2px,
      #070a08 5px
    );

  color: var(--dim-text);

  font-size: 9px;
}


.detail-portrait img {
  width: 100%;
  height: 100%;

  object-fit: cover;
}


.file-heading {
  padding: 20px;

  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}


.file-heading p {
  margin: 0 0 15px;

  color: var(--dim-text);

  font-size: 9px;
}


.file-heading h2 {
  margin: 0 0 14px;

  color: var(--primary-bright);

  font-size: clamp(22px, 4vw, 36px);

  letter-spacing: 3px;
}


.file-heading span {
  color: var(--primary);

  font-size: 11px;
}


/* =====================================================
   FILE INFORMATION
===================================================== */

.file-information {
  border-top: 1px solid var(--border);
}


.file-row {
  display: grid;

  grid-template-columns: 140px 1fr;

  min-height: 50px;

  border-bottom: 1px solid var(--border);
}


.file-row > span {
  padding: 16px;
}


.file-label {
  color: var(--dim-text);

  border-right: 1px solid var(--border);

  font-size: 10px;
}


.file-row-large {
  min-height: 100px;

  line-height: 1.9;
}


/* =====================================================
   RELATIONSHIP
===================================================== */

.relationship-section {
  margin-top: 30px;

  border: 1px solid var(--border);
}


.relationship-header {
  padding: 13px;

  display: flex;
  justify-content: space-between;

  border-bottom: 1px solid var(--border);

  color: var(--dim-text);

  font-size: 9px;
}


.relationship-image {
  min-height: 300px;

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

  overflow: hidden;

  background: #070b08;

  color: #435047;

  font-size: 10px;
}


.relationship-image img {
  display: block;

  max-width: 100%;
  max-height: 700px;

  object-fit: contain;
}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 720px) {

  .apostle-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }


  .apostle-file-header {
    grid-template-columns: 1fr;
  }


  .detail-portrait {
    max-width: 350px;
  }


  .file-row {
    grid-template-columns: 90px 1fr;
  }


  .apostle-detail-view {
    padding: 20px;
  }

}
/* =====================================================
   CROMWELL DASHBOARD
===================================================== */

body.cromwell-dashboard .dashboard {
  background:
    linear-gradient(
      rgba(30, 0, 0, 0.16),
      rgba(0, 0, 0, 0.55)
    ),
    #050101;
}


body.cromwell-dashboard .sidebar {
  background: #080202;
}


body.cromwell-dashboard .database-content {
  background:
    linear-gradient(
      rgba(80, 0, 0, 0.025),
      transparent
    );
}


/* =====================================================
   CROMWELL NAVIGATION
===================================================== */

body.cromwell-dashboard
.species-button {
  color: #755050;
}


body.cromwell-dashboard
.species-button:hover {
  color: #d66b6b;

  border-color: #5c1d1d;

  background: #130404;
}


body.cromwell-dashboard
.species-button.active {
  color: #ef7777;

  border-color: #922c2c;

  background: #180505;
}


body.cromwell-dashboard
.species-button.active::before {
  content: "[ ";
}


body.cromwell-dashboard
.species-button.active::after {
  content: " ]";
}


/* =====================================================
   CROMWELL TARGET CARDS
===================================================== */

.cromwell-target-card {
  background: #0b0202;

  border-color: #401313;
}


.cromwell-target-card:hover {
  background: #130404;

  border-color: #8d2929;
}


.cromwell-target-card
.apostle-thumbnail {
  background:
    repeating-linear-gradient(
      to bottom,
      #100303,
      #100303 2px,
      #080101 2px,
      #080101 5px
    );

  border-color: #401313;
}


/* =====================================================
   RISK TAG
===================================================== */

.target-risk,
.risk-badge {
  display: inline-block;

  padding: 5px 8px;

  border: 1px solid;

  font-size: 9px;

  letter-spacing: 1px;
}


/* S */

.risk-s {
  color: #ff6868;

  border-color: #aa2525;

  background: rgba(
    120,
    0,
    0,
    0.22
  );

  text-shadow:
    0 0 5px
    rgba(
      220,
      40,
      40,
      0.3
    );
}


/* A */

.risk-a {
  color: #cf6868;

  border-color: #762727;

  background: rgba(
    90,
    10,
    10,
    0.16
  );
}


/* B */

.risk-b {
  color: #b27d6e;

  border-color: #5b3027;

  background: rgba(
    70,
    30,
    20,
    0.13
  );
}


/* C */

.risk-c {
  color: #927b71;

  border-color: #4a3b35;

  background: rgba(
    60,
    50,
    45,
    0.1
  );
}


/* 등급 외 */

.risk-out {
  color: #8d8d8d;

  border-color: #444;

  background: rgba(
    100,
    100,
    100,
    0.06
  );
}


/* =====================================================
   CROMWELL DETAIL
===================================================== */

.cromwell-detail-view {
  min-width: 0;

  padding: 30px;

  background:
    linear-gradient(
      180deg,
      rgba(
        80,
        0,
        0,
        0.04
      ),
      transparent 300px
    );
}


.cromwell-file {
  max-width: 1050px;

  border-top:
    1px solid #4c1616;
}


.cromwell-file-header {
  display: grid;

  grid-template-columns:
    230px 1fr;

  gap: 28px;

  padding: 25px 0;

  border-bottom:
    1px solid #4c1616;
}


.cromwell-file-label {
  margin: 0 0 16px;

  color: #684141;

  font-size: 9px;

  letter-spacing: 2px;
}


.cromwell-file-header h2 {
  margin: 0 0 18px;

  color: #db6969;

  font-size:
    clamp(
      24px,
      4vw,
      40px
    );

  letter-spacing: 3px;
}


/* =====================================================
   CROMWELL PORTRAIT
===================================================== */

.cromwell-portrait {
  aspect-ratio: 4 / 3;

  overflow: hidden;

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

  border:
    1px solid #4c1616;

  background:
    repeating-linear-gradient(
      to bottom,
      #100303,
      #100303 2px,
      #070101 2px,
      #070101 5px
    );

  color: #663939;

  font-size: 9px;
}


.cromwell-portrait img {
  width: 100%;
  height: 100%;

  object-fit: cover;

  filter:
    saturate(0.65)
    contrast(1.1);
}


/* =====================================================
   CROMWELL INFO TABLE
===================================================== */

.cromwell-information {
  border-top:
    1px solid #3f1313;
}


.cromwell-row {
  min-height: 52px;

  display: grid;

  grid-template-columns:
    170px 1fr;

  border-bottom:
    1px solid #3f1313;
}


.cromwell-row > span {
  padding: 17px;
}


.cromwell-field-label {
  border-right:
    1px solid #3f1313;

  color: #6d4444;

  font-size: 9px;

  letter-spacing: 1px;
}


.cromwell-row-large {
  min-height: 140px;

  line-height: 2;
}


.cromwell-row-large
.cromwell-field-label {
  color: #855050;
}


/* =====================================================
   BACK BUTTON
===================================================== */

.cromwell-back-button {
  color: #9c4141;

  border-color: #4b1818;
}


.cromwell-back-button:hover {
  color: #e36b6b;

  border-color: #962d2d;

  background: #100303;
}


/* =====================================================
   CROMWELL S 위험도 강조
===================================================== */

body.cromwell-dashboard
.risk-s {
  animation:
    threatPulse
    2.4s
    infinite;
}


@keyframes threatPulse {

  0%,
  100% {
    opacity: 1;
  }

  48% {
    opacity: 1;
  }

  50% {
    opacity: 0.6;
  }

  52% {
    opacity: 1;
  }

}


/* =====================================================
   MOBILE
===================================================== */

@media (
  max-width: 720px
) {

  .cromwell-file-header {
    grid-template-columns:
      1fr;
  }


  .cromwell-portrait {
    max-width: 350px;
  }


  .cromwell-row {
    grid-template-columns:
      110px 1fr;
  }


  .cromwell-detail-view {
    padding: 20px;
  }

}
/* =====================================================
   RECORD CARD를 button으로 바꾼 것에 대한 초기화
===================================================== */

.record-card {
  width: 100%;
  padding: 0;

  text-align: left;

  font-family: inherit;

  color: inherit;
}


/* =====================================================
   로네 종족 버튼
===================================================== */

.rone-species-button,
.cromwell-risk-button {
  width: 100%;

  margin-bottom: 6px;

  padding: 13px 12px;

  border: 1px solid transparent;

  background: transparent;

  color: var(--dim-text);

  font-family: inherit;

  text-align: left;

  cursor: pointer;
}


.rone-species-button:hover {
  border-color: var(--border);

  color: var(--primary-bright);

  background: #0a100c;
}


.rone-species-button.active {
  border-color: var(--primary);

  color: var(--primary-bright);

  background: #0c140f;
}


.rone-species-button.active::before {
  content: "> ";
}


/* =====================================================
   크롬웰 전용 화면
===================================================== */

.cromwell-dashboard-screen {
  --text: #b49b9b;
  --dim-text: #6d4545;
  --primary: #9d3232;
  --primary-bright: #dd6868;
  --border: #481717;

  background:
    linear-gradient(
      rgba(35, 0, 0, 0.2),
      rgba(0, 0, 0, 0.6)
    ),
    #050101;
}


.cromwell-header {
  background:
    linear-gradient(
      90deg,
      #090101,
      #110202
    );
}


.cromwell-sidebar {
  background: #080202;
}


/* 크롬웰 위험도 버튼 */

.cromwell-risk-button {
  color: #765252;
}


.cromwell-risk-button:hover {
  color: #dd6969;

  border-color: #591c1c;

  background: #120303;
}


.cromwell-risk-button.active {
  color: #f07878;

  border-color: #9d3030;

  background: #190404;
}


.cromwell-risk-button.active::before {
  content: "[ ";
}


.cromwell-risk-button.active::after {
  content: " ]";
}


/* =====================================================
   크롬웰 카드
===================================================== */

.cromwell-target-card {
  background: #0c0202;

  border-color: #421313;
}


.cromwell-target-card:hover {
  background: #150404;

  border-color: #8c2929;
}


.cromwell-target-card
.apostle-thumbnail {
  background:
    repeating-linear-gradient(
      to bottom,
      #100303,
      #100303 2px,
      #080101 2px,
      #080101 5px
    );
}


.target-risk {
  display: inline-block;

  padding: 4px 7px;

  border: 1px solid #762323;

  color: #cf6666;

  font-size: 9px;
}


/* =====================================================
   크롬웰 상세
===================================================== */

.cromwell-detail-view {
  min-width: 0;

  padding: 30px;
}


.cromwell-file {
  max-width: 1050px;
}


.cromwell-file-header {
  display: grid;

  grid-template-columns: 230px 1fr;

  gap: 28px;

  padding: 25px 0;

  border-top: 1px solid #461515;

  border-bottom: 1px solid #461515;
}


.cromwell-file-label {
  margin: 0 0 15px;

  color: #724444;

  font-size: 9px;

  letter-spacing: 2px;
}


.cromwell-file-header h2 {
  margin: 0 0 18px;

  color: #dc6767;

  font-size: clamp(
    24px,
    4vw,
    40px
  );
}


.cromwell-portrait {
  aspect-ratio: 4 / 3;

  overflow: hidden;

  display: flex;

  align-items: center;

  justify-content: center;

  border: 1px solid #481616;

  background: #0d0202;

  color: #704141;

  font-size: 9px;
}


.cromwell-portrait img {
  width: 100%;

  height: 100%;

  object-fit: cover;
}


.risk-badge {
  display: inline-block;

  padding: 7px 10px;

  border: 1px solid #8d2929;

  color: #dd6767;

  background: rgba(
    100,
    0,
    0,
    0.15
  );

  font-size: 10px;
}


.cromwell-information {
  margin-top: 25px;

  border-top: 1px solid #421414;
}


.cromwell-row {
  display: grid;

  grid-template-columns: 170px 1fr;

  min-height: 55px;

  border-bottom: 1px solid #421414;
}


.cromwell-row > span {
  padding: 17px;
}


.cromwell-field-label {
  border-right: 1px solid #421414;

  color: #774848;

  font-size: 10px;
}


.cromwell-row-large {
  min-height: 140px;

  line-height: 2;
}


/* =====================================================
   모바일
===================================================== */

@media (max-width: 720px) {

  .cromwell-file-header {
    grid-template-columns: 1fr;
  }

  .cromwell-row {
    grid-template-columns: 100px 1fr;
  }

}

/* =========================================
   RONE LOGOUT
========================================= */

#roneLogoutButton {
  border-color: #5e8c69;

  color: #a9d9b4;

  background: transparent;
}


#roneLogoutButton:hover {
  border-color: #9dd7aa;

  background: #7faf8a;

  color: #061008;
}


#roneLogoutButton:active {
  background: #587a60;

  transform: translateY(1px);
}

/* =========================================
   CROMWELL DISCONNECT
========================================= */

#cromwellLogoutButton {
  border-color: #682020;

  color: #b95252;

  background: #080101;

  letter-spacing: 1.5px;
}


#cromwellLogoutButton:hover {
  border-color: #c43d3d;

  background: #501010;

  color: #ff8a8a;
}


#cromwellLogoutButton:active {
  background: #300707;

  transform: translateY(1px);
}

.cromwell-dashboard-screen .user-area span {
  color: #a94747;
}

#roneDashboard .user-area span {
  color: var(--primary);
}