/* Racing Lap Timer — scoped under .dt-wrap container */
/* 구 iframe 앱(bootstrap)을 페이지 통합하며 재작성: bootstrap/FontAwesome 없이
   .dt-wrap 스코프 자체 스타일. 원본의 vw/vh 비율 디자인은 container query
   단위(cqw/cqh)로 보존 — iframe 시절 vw == 컨테이너 폭이었던 것과 동일하게 동작. */

/* MkDocs overrides: full-width, no margins, hide title (World Builder와 동일) */
.md-typeset .dt-wrap { margin: 0; }
.md-content:has(.dt-wrap) { max-width: none; }
.md-content__inner:has(.dt-wrap) { margin: 0 !important; padding: 0; }
.md-content__inner:has(.dt-wrap)::before { display: none; }
.md-content__inner:has(.dt-wrap) > h1 { display: none; }

.dt-wrap {
  position: relative;
  height: calc(100vh - 88px); /* MkDocs header(48px) + tabs(40px) */
  container-type: size;
  background: #000;
  color: #fff;
  overflow: hidden;
  /* 상단 툴바(36px)와 현황판(8cqw)을 제외한 본문 높이 */
  --aside-height: calc(100cqh - 8cqw - 36px);
}
.dt-wrap * { box-sizing: border-box; }
.dt-wrap hr { margin: 0.35em 0; border: 0; border-top: 1px solid rgba(255, 255, 255, 0.4); }

/* ── 상단 얇은 툴바 (World Builder .wb-toolbar와 동일 스펙) ── */
.dt-toolbar {
  height: 36px;
  flex-shrink: 0;
  z-index: 50;
  position: relative;
  background: rgba(255,255,255,0.92);
  border-bottom: 1px solid #ccc;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
  color: #333;
  overflow-x: auto;
  overflow-y: hidden;
}
.dt-toolbar-sep {
  width: 1px;
  height: 20px;
  background: #ddd;
  flex-shrink: 0;
}
.dt-toolbar-btn {
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 4px 10px;
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
  line-height: 1.4;
  box-shadow: 0 1px 2px rgba(0,0,0,0.15);
  transition: filter 0.15s;
  flex-shrink: 0;
}
.dt-toolbar-btn:hover { filter: brightness(1.12); }
.dt-toolbar-btn:disabled { opacity: 0.45; cursor: default; }
.dt-toolbar-btn:disabled:hover { filter: none; background: transparent; }
/* 툴바 버튼 변형 (World Builder 관례: 주요 = 솔리드, 나머지 = 테두리 + 역할색) */
.dt-toolbar-btn.dt-btn-solid { background: var(--md-primary-fg-color); font-weight: bold; }
.dt-toolbar-btn.dt-btn-outline {
  background: transparent;
  border: 1.5px solid currentColor;
  box-shadow: none;
  font-weight: bold;
}
.dt-toolbar-btn.dt-btn-outline:hover {
  filter: none;
  background: color-mix(in srgb, currentColor 12%, transparent);
}
.dt-toolbar-btn.dt-btn-purple { color: var(--md-primary-fg-color); }
.dt-toolbar-btn.dt-btn-red { color: #d32f2f; }
[data-md-color-scheme="slate"] .dt-toolbar-btn.dt-btn-red { color: #ef5350; }
.dt-toolbar .btn-icon {
  width: 26px;
  height: 26px;
  padding: 0;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
  color: #333;
  cursor: pointer;
  flex-shrink: 0;
}
.dt-toolbar .btn-icon:hover { background: #f0f0f0; }

/* ── 버튼 (bootstrap 클래스명 유지 — JS가 btn-warning/btn-dark를 토글) ── */
.dt-wrap .btn {
  display: inline-block;
  border: 1px solid transparent;
  border-radius: 0.375em;
  padding: 0.375em 0.75em;
  font-size: 1em;
  font-family: inherit;
  line-height: 1.5;
  text-align: center;
  cursor: pointer;
  color: #fff;
  background: transparent;
  transition: background 0.15s, opacity 0.15s;
}
.dt-wrap .btn:hover { opacity: 0.88; }
.dt-wrap .btn-primary { background: #0d6efd; }
.dt-wrap .btn-secondary { background: #6c757d; }
.dt-wrap .btn-success { background: #198754; }
.dt-wrap .btn-info { background: #0dcaf0; color: #000; }
.dt-wrap .btn-warning { background: #ffc107; color: #000; }
.dt-wrap .btn-danger { background: #dc3545; }
.dt-wrap .btn-dark { background: #212529; }

/* ── FontAwesome 대체 글리프 (JS의 fa-* 클래스 토글 유지) ── */
.dt-wrap i.fas { font-style: normal; line-height: 1; }
.dt-wrap i.fa-play::before { content: '▶'; }
.dt-wrap i.fa-pause::before { content: '❚❚'; letter-spacing: -0.1em; }
.dt-wrap i.fa-sync-alt::before { content: '⟳'; font-weight: bold; }
.dt-wrap i.fa-chevron-right::before { content: '❯'; }
.dt-wrap i.fa-chevron-left::before { content: '❮'; }
.dt-wrap i.fa-download::before { content: '⭳'; }
.dt-wrap i.fa-trash::before { content: '🗑'; }

/* ── 상단 현황판 ── */
.dt-header {
  color: #fff;
  background-color: rgb(77, 5, 143);
  text-align: center;
  height: 8cqw;
  font-size: 1cqw;
}
.dt-header-grid {
  display: grid;
  grid-template-columns: 4fr 1fr 2fr 1fr 1fr 1fr 2fr; /* 구 bootstrap col-4/1/2/1/1/1/2 */
  height: 100%;
  padding: 0 0.75em;
  column-gap: 0.75em;
}
.header-item { height: 100%; overflow: hidden; }
.header-item-name {
  font-size: 1.4em;
  text-align: center;
  height: 30%;
  display: flex;
  justify-content: center;
  align-items: end;
  overflow: hidden;
  color: yellow;
  font-weight: 800;
}
.header-item-value {
  font-size: 2.5em;
  height: 47%;
  display: flex;
  justify-content: center;
  align-items: center;
  line-height: 110%;
  font-weight: 700;
}
.remaining-time-button {
  font-size: 1em;
  height: 23%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  line-height: 110%;
  font-weight: 700;
  padding: 0;
  margin: 0;
}
.remaining-time-button .btn { color: aquamarine; padding: 0 0.4em; }

/* ── 좌측: 랭킹 + 세팅 ── */
.dt-aside-main { display: flex; overflow: hidden; }
.dt-aside {
  width: 20cqw;
  height: var(--aside-height);
  background-color: #000;
  color: #fff;
  padding-top: 5px;
  margin: 0;
}
.dt-wrap .ranking {
  height: 100%;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  scrollbar-width: none; /* 스크롤은 되지만 스크롤바는 숨김 (Firefox) */
}
.dt-wrap .ranking::-webkit-scrollbar { display: none; } /* Chrome/Safari */
.dt-wrap .ranking-item {
  /* 레이서 수가 적으면 늘어나고(max 4cqw) 많으면 줄어든다(min 2.5cqw, 이후 스크롤) */
  flex: 1 1 0;
  min-height: 2.5cqw;
  max-height: 4cqw;
  overflow: hidden;
  margin-bottom: 3.5px;
}
.dt-wrap .ranking-item .btn-dark,
.dt-wrap .ranking-item .btn-warning {
  width: 100%;
  border-radius: 0;
  text-align: right;
  height: 100%;
  font-weight: 700;
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2px;
}
.dt-wrap .ranking-medal {
  width: 13%;
  font-size: 2.5cqw;
  text-shadow: 2px 2px 2px grey;
  padding: 0;
  text-align: center;
}
.dt-wrap .ranking-racer {
  font-size: 1.5cqw;
  flex: 1;
  min-width: 0;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dt-wrap .ranking-record {
  width: 30%;
  font-size: 1.2cqw;
  text-align: center;
}
/* ── 메인: 타이머 + 로그 ── */
.dt-main {
  color: #fff;
  background-color: #000;
  width: 80cqw;
  margin: 0;
  display: flex;
  position: relative;
}
.dt-wrap .main-pannel {
  width: 66cqw;
  margin: 0;
  position: relative;
  transition: width 0.3s ease;
}
.dt-wrap .main-pannel.expanded { width: 80cqw; }
.dt-wrap #logs-toggle-btn {
  position: absolute;
  right: 15cqw;
  top: 50%;
  transform: translateY(-50%);
  z-index: 30;
  background-color: rgb(44, 44, 44);
  color: #fff;
  border: none;
  padding: 10px 5px;
  cursor: pointer;
  transition: right 0.3s ease;
}
.dt-wrap #logs-toggle-btn:hover { background-color: rgb(80, 80, 80); }
.dt-wrap #logs-toggle-btn.collapsed { right: 0; }
.dt-wrap .main-logs {
  width: 15cqw;
  position: relative;
  color: #fff;
  background-color: rgb(44, 44, 44);
  height: var(--aside-height);
  transition: width 0.3s ease, opacity 0.3s ease;
  overflow: hidden;
}
.dt-wrap .main-logs.collapsed { width: 0; opacity: 0; }
.dt-wrap .main-nav {
  display: flex;
  justify-content: space-between;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
}
.dt-wrap .main-nav-time {
  width: 200px;
  background-color: #000;
  text-align: center;
  font-size: 14.5px;
}
.dt-wrap .main-window { height: var(--aside-height); }

/* ── 타이머 창 ── */
.dt-wrap .timer-window {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  flex-direction: column;
  position: relative;
}
.dt-wrap .timer-window > * { position: relative; z-index: 2; }
.dt-wrap .window-body {
  width: 100%;
  font-size: 13cqw;
  font-weight: 800;
  text-align: center;
  margin: 0 auto;
}
.dt-wrap .timer-window-current-record { height: 80%; padding: 5cqw 0; }
.dt-wrap .timer-window-prev-record {
  width: 100%;
  text-align: center;
  color: aquamarine;
  font-weight: 700;
  font-size: 2.5cqw;
  line-height: 1.2;
  height: 3.2cqw;
  overflow: hidden;
  margin-top: -7cqw;
  margin-bottom: 3cqw;
}
.dt-wrap .window-footer { width: 100%; font-size: 1cqw; }
.dt-wrap #ready-control { display: flex; justify-content: end; padding: 0 5cqw; }
.dt-wrap #driving-control { display: flex; justify-content: space-between; padding: 0 5cqw; }
.dt-wrap #offtrack-control { display: flex; justify-content: space-between; padding: 0 5cqw; }
.dt-wrap .window-footer .btn { font-size: 1.2cqw; }

/* ── 변경 하이라이트 애니메이션 ── */
.dt-wrap .change-effect-yellow { animation: dt-colorChangeYellow 1s ease-in-out; }
.dt-wrap .change-effect-gray { animation: dt-colorChangeGray 1s ease-in-out; }
@keyframes dt-colorChangeYellow {
  0%, 100% { background-color: transparent; }
  50% { background-color: #ffcc00; }
}
@keyframes dt-colorChangeGray {
  0%, 100% { background-color: transparent; }
  50% { background-color: #6c6c6c; }
}
.dt-wrap #status-value { font-size: 2.2em; }

/* ── 로그 패널 ── */
.dt-wrap .logs-title {
  font-size: 1.2cqw;
  text-align: center;
  font-weight: 700;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.dt-wrap .logs-list { height: 100%; overflow: auto; }
.dt-wrap .log-item { position: relative; font-size: 1cqw; margin: 0.5em; }
.dt-wrap .log-item hr { margin: 0; padding: 0; }
.dt-wrap .log-item-row {
  width: 100%;
  margin: 0;
  padding: 0;
  font-size: 0.8em;
  display: flex;
}
.dt-wrap .log-item-row div { margin: 0 0.3em; }
.dt-wrap .log-item-delete {
  color: red;
  position: absolute;
  bottom: 0;
  right: 0;
  background-color: inherit;
  border: none;
  cursor: pointer;
}
.dt-wrap .log-item-racer, .dt-wrap .log-item-record { font-weight: 900; }
.dt-wrap #download-logs-button {
  background-color: inherit;
  color: gainsboro;
  font-size: 0.8cqw;
  border: none;
  cursor: pointer;
}
.dt-wrap #log-delete-btn {
  font-size: 0.9cqw;
  color: red;
  display: flex;
  align-items: center;
}

/* ── 모달: World Builder 전역 모달 클래스(custom-world-builder.css) 재사용 ──
   .modal-overlay / .modal-dialog / .modal-footer / .modal-hint / .modal-error /
   .modal-choice-btn / .cloud-project-row 등 — 스타일 단일 소스로 통일 */

/* 모달이 타이머 영역만 덮게 — .dt-wrap(position:relative) 내부 absolute.
   전체화면(dt-fullscreen)에서는 wrap이 fixed inset 0이라 그대로 전체를 덮는다. */
.dt-wrap .modal-overlay { position: absolute; z-index: 500; }

/* 설정 모달 — WB 폼 문법(라벨 12px/600/#555, 컨트롤 13px)으로 통일된 행 레이아웃 */
#dtSettingModal .dt-setting-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
#dtSettingModal .dt-setting-row:last-child { margin-bottom: 0; }
/* 종속 옵션(바로 위 설정에 딸린 항목): 들여쓰기 + └ 표시, 비활성화되면 라벨도 흐리게 */
#dtSettingModal .dt-setting-row.dt-setting-sub { margin-left: 14px; }
#dtSettingModal .dt-setting-row.dt-setting-sub::before {
  content: "└"; color: #bbb; font-size: 11px; line-height: 1;
}
#dtSettingModal .dt-setting-row:has(select:disabled) label,
#dtSettingModal .dt-setting-row:has(input:disabled) label,
#dtSettingModal .dt-setting-row:has(select:disabled) .dt-setting-unit,
#dtSettingModal .dt-setting-row:has(input:disabled) .dt-setting-unit {
  opacity: 0.4;
}
#dtSettingModal .dt-setting-row label {
  flex: 1;
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  color: #555;
}
#dtSettingModal .dt-setting-row input[type="number"],
#dtSettingModal .dt-setting-row select {
  width: 92px;
  padding: 6px 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 13px;
  background: #fff;
  color: #333;
  box-sizing: border-box;
}
#dtSettingModal .dt-setting-unit {
  width: 26px;
  font-size: 11px;
  color: #999;
}

/* Racers 모달 — 추가 입력줄 + 목록 (글자 크기·버튼은 WB 모달 문법과 통일) */
#dtRacersModal .dt-racer-add { display: flex; gap: 8px; }
#dtRacersModal .dt-racer-add input[type="text"] { flex: 1; width: auto; } /* WB .modal-body input 스타일 상속 */
#dtRacersModal #racerList {
  list-style: none;
  padding: 0;
  margin: 12px 0 0;
  max-height: 40vh;
  overflow-y: auto;
}
#dtRacersModal #racerList li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  color: #333;
  background: #fafafa;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 6px 10px;
  margin-top: 6px;
}
#dtCloudProjectList { max-height: 40vh; overflow-y: auto; }

/* ── 클라우드 저장 상태 (상단 툴바 내) ── */
.dt-cloud-status {
  font-size: 12px;
  color: #888;
  align-self: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 16em;
  flex-shrink: 1;
}
.dt-cloud-status.error { color: #e53935; }

/* ── Fullscreen mode (World Builder와 동일한 가짜 풀스크린) ── */
body.dt-fullscreen .md-header,
body.dt-fullscreen .md-tabs,
body.dt-fullscreen .md-sidebar,
body.dt-fullscreen .md-footer {
  display: none !important;
}
body.dt-fullscreen .md-main__inner { margin: 0; }
body.dt-fullscreen .md-content { max-width: none; }
body.dt-fullscreen { overflow: hidden; }
body.dt-fullscreen .dt-wrap {
  position: fixed;
  inset: 0;
  height: 100vh;
  z-index: 1000;
  /* 툴바가 숨겨지므로 본문 높이에서 36px 차감 해제 */
  --aside-height: calc(100cqh - 8cqw);
}
body.dt-fullscreen .physicar-chat-container,
body.dt-fullscreen .physicar-chat-overlay { display: none !important; }

/* 전체화면에서는 상단 툴바 숨김 — 대신 반투명 축소 버튼만 표시 */
body.dt-fullscreen .dt-toolbar { display: none; }
.dt-full-exit-btn {
  display: none;
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 60;
  width: 32px;
  height: 32px;
  padding: 0;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  cursor: pointer;
  opacity: 0.55;
  transition: opacity 0.15s;
}
.dt-full-exit-btn:hover { opacity: 1; }
body.dt-fullscreen .dt-full-exit-btn { display: flex; }

/* ── Desktop Only (모바일 차단 — 기존 관례 유지) ── */
.dt-mobile-block { display: none; }
@media (max-width: 768px), (pointer: coarse) {
  .dt-mobile-block {
    display: flex;
    position: relative;
    min-height: 60vh;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 24px;
  }
  .dt-mobile-block ~ * { display: none !important; }
  .dt-mobile-block-inner h2 { margin: 16px 0 8px; font-size: 20px; }
  .dt-mobile-block-inner p { font-size: 14px; color: #888; line-height: 1.6; }
}
/* ── Sign-in 게이트 — RTL 관례 ── */
.dt-signin-block { display: none; }
body.dt-signed-out .dt-signin-block {
  display: flex;
  position: relative;
  min-height: 60vh;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
}
body.dt-signed-out .dt-wrap { display: none !important; }
.dt-signin-block-inner h2 { margin: 16px 0 8px; font-size: 20px; }
.dt-signin-block-inner p { font-size: 14px; color: #888; line-height: 1.6; }

/* 언어별 안내 (html[lang]에 따라 전환) */
.dt-i18n-ko { display: none; }
html[lang="ko"] .dt-i18n-en { display: none; }
html[lang="ko"] .dt-i18n-ko { display: block; }

/* ── 클라우드 프로젝트 목록/상태 공용 스타일 (임시 복제) ──
   원본은 custom-world-builder.css의 미출시 개정판에 있음 — World Builder 개편이
   배포되면 이 블록을 제거하고 공용 정의로 일원화할 것. */

.modal-choice-btn.cloud-project-row {
  position: relative;
  padding-right: 64px; /* 리네임 + 삭제 아이콘 자리 */
}

.cloud-project-row .cloud-project-del {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  font-size: 13px;
  color: #999;
  padding: 4px;
  border-radius: 4px;
  line-height: 1;
}

.cloud-project-row .cloud-project-del:hover {
  color: #e53935;
  background: #ffebee;
}

.cloud-project-row .cloud-project-ren {
  position: absolute;
  top: 50%;
  right: 36px;
  transform: translateY(-50%);
  font-size: 13px;
  color: #999;
  padding: 4px;
  border-radius: 4px;
  line-height: 1;
}

.cloud-project-row .cloud-project-ren:hover {
  color: var(--md-primary-fg-color);
  background: #f1edf9;
}

.cloud-project-row .cloud-project-rename-input {
  display: block;
  width: 100%;
  padding: 4px 6px;
  font-size: 13px;
  border: 1px solid var(--md-primary-fg-color);
  border-radius: 4px;
  box-sizing: border-box;
}

.wb-cloud-status {
  font-size: 12px;
  color: #888;
  white-space: nowrap;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  align-self: center;
}

.wb-cloud-status.error { color: #e53935; }