/* =========================================================
   Windows 95 / 98 테마
   ---------------------------------------------------------
   '끝나지않는NowLoading' 은 전작보다 이른 시대의 UI 를 씁니다.
   XP Luna 의 둥근 모서리·그라데이션 대신,
   각진 3D 베벨과 회색(#c0c0c0)이 핵심입니다.

   베벨 규칙 (실제 Win95 규칙 그대로)
     튀어나옴: 좌상 흰색 → 좌상안쪽 밝은회색 / 우하 검정 → 우하안쪽 진회색
     눌림    : 그 반대
   ========================================================= */

:root {
  --w95-face: #c0c0c0; /* 창·버튼 바탕 */
  --w95-light: #ffffff; /* 베벨 밝은쪽 */
  --w95-hilight: #dfdfdf; /* 베벨 밝은쪽 안 */
  --w95-shadow: #808080; /* 베벨 어두운쪽 안 */
  --w95-dark: #000000; /* 베벨 어두운쪽 */
  --w95-text: #000000;
  --w95-gray-text: #808080; /* 비활성 글자 */

  --w95-title-1: #000080; /* 활성 타이틀바 (네이비) */
  --w95-title-2: #1084d0; /* 98 의 그라데이션 끝 */
  --w95-title-inactive-1: #808080;
  --w95-title-inactive-2: #b5b5b5;

  --w95-desktop: #008080; /* 그 유명한 청록 바탕 */
  --w95-field: #ffffff; /* 입력창 바탕 */
  --w95-select: #000080; /* 선택 항목 */

  /* 95 는 시스템 폰트가 굴림/Tahoma 계열이었습니다.
     웹폰트를 따로 싣지 않고 사용자 시스템에 있는 것만 씁니다.
     (외부 의존성을 만들지 않기 위함입니다) */
  --w95-font:
    "Gulim", "굴림", "Dotum", "돋움", "MS Sans Serif", Tahoma, sans-serif;
}

/* ── 베벨 유틸 ─────────────────────────────────────────── */

/* 튀어나온 면 (버튼·창) */
.w95-out {
  border: 2px solid;
  border-color: var(--w95-light) var(--w95-dark) var(--w95-dark)
    var(--w95-light);
  box-shadow:
    inset 1px 1px 0 var(--w95-hilight),
    inset -1px -1px 0 var(--w95-shadow);
  background: var(--w95-face);
}

/* 눌린 면 (입력창·목록) */
.w95-in {
  border: 2px solid;
  border-color: var(--w95-shadow) var(--w95-light) var(--w95-light)
    var(--w95-shadow);
  box-shadow:
    inset 1px 1px 0 var(--w95-dark),
    inset -1px -1px 0 var(--w95-hilight);
  background: var(--w95-field);
}

/* ── 바탕 ──────────────────────────────────────────────── */

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  /* 375px 아래로는 더 줄어들지 않게 막습니다.
     그보다 좁으면 글자와 터치 영역이 실용성을 잃습니다.
     (이 폭 미만에서는 브라우저가 가로 스크롤을 제공) */
  min-width: 375px;
  background: var(--w95-desktop);
  font-family: var(--w95-font);
  font-size: 12px;
  color: var(--w95-text);
  /* 95 는 안티앨리어싱이 없었습니다. 픽셀 느낌을 살립니다. */
  -webkit-font-smoothing: none;
  font-smooth: never;
}

/* ── 창 ────────────────────────────────────────────────── */

.w95-window {
  border: 2px solid;
  border-color: var(--w95-light) var(--w95-dark) var(--w95-dark)
    var(--w95-light);
  box-shadow:
    inset 1px 1px 0 var(--w95-hilight),
    inset -1px -1px 0 var(--w95-shadow);
  background: var(--w95-face);
  padding: 3px;
}

.w95-titlebar {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 20px;
  padding: 0 2px 0 3px;
  /* 98 부터 그라데이션이 들어갔습니다. */
  background: linear-gradient(
    90deg,
    var(--w95-title-1) 0%,
    var(--w95-title-2) 100%
  );
  color: #fff;
  font-weight: bold;
  font-size: 12px;
  user-select: none;
}

.w95-titlebar-icon {
  flex: 0 0 auto;
  font-size: 12px;
  line-height: 1;
}

.w95-titlebar-text {
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.w95-title-btns {
  display: flex;
  gap: 2px;
  flex: 0 0 auto;
}

/* 타이틀바 버튼은 16x14 의 작은 정사각형이었습니다. */
.w95-title-btn {
  width: 16px;
  height: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid;
  border-color: var(--w95-light) var(--w95-dark) var(--w95-dark)
    var(--w95-light);
  background: var(--w95-face);
  color: var(--w95-text);
  font-size: 9px;
  font-weight: bold;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}

.w95-title-btn:active {
  border-color: var(--w95-dark) var(--w95-light) var(--w95-light)
    var(--w95-dark);
}

.w95-window-body {
  padding: 8px;
}

/* ── 버튼 ──────────────────────────────────────────────── */

.w95-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-width: 75px;
  min-height: 23px;
  padding: 3px 12px;
  font-family: var(--w95-font);
  font-size: 12px;
  color: var(--w95-text);
  text-decoration: none;
  background: var(--w95-face);
  border: 2px solid;
  border-color: var(--w95-light) var(--w95-dark) var(--w95-dark)
    var(--w95-light);
  box-shadow:
    inset 1px 1px 0 var(--w95-hilight),
    inset -1px -1px 0 var(--w95-shadow);
  cursor: pointer;
}

/* 누르면 베벨이 뒤집히고 내용이 1px 밀립니다. (실제 동작) */
.w95-button:active:not(:disabled) {
  border-color: var(--w95-dark) var(--w95-light) var(--w95-light)
    var(--w95-dark);
  box-shadow:
    inset 1px 1px 0 var(--w95-shadow),
    inset -1px -1px 0 var(--w95-hilight);
  padding: 4px 11px 2px 13px;
}

.w95-button:focus-visible {
  outline: 1px dotted var(--w95-text);
  outline-offset: -4px;
}

.w95-button:disabled {
  color: var(--w95-gray-text);
  /* 95 의 비활성 글자는 흰 그림자가 함께 찍혔습니다. */
  text-shadow: 1px 1px 0 var(--w95-light);
  cursor: default;
}

/* ── 입력 ──────────────────────────────────────────────── */

.w95-input,
.w95-select {
  padding: 3px 4px;
  font-family: var(--w95-font);
  font-size: 12px;
  color: var(--w95-text);
  background: var(--w95-field);
  border: 2px solid;
  border-color: var(--w95-shadow) var(--w95-light) var(--w95-light)
    var(--w95-shadow);
  box-shadow:
    inset 1px 1px 0 var(--w95-dark),
    inset -1px -1px 0 var(--w95-hilight);
}

.w95-input:focus,
.w95-select:focus {
  outline: none;
}

/* ── 그룹 상자 ─────────────────────────────────────────── */

.w95-group {
  position: relative;
  margin: 14px 0 10px;
  padding: 12px 10px 10px;
  /* 홈이 파인 테두리 — 95 의 groupbox */
  border: 1px solid var(--w95-shadow);
  border-right-color: var(--w95-light);
  border-bottom-color: var(--w95-light);
}

.w95-group::after {
  content: "";
  position: absolute;
  inset: 1px;
  border: 1px solid var(--w95-light);
  border-right-color: var(--w95-shadow);
  border-bottom-color: var(--w95-shadow);
  pointer-events: none;
}

.w95-group-title {
  position: absolute;
  top: -7px;
  left: 8px;
  padding: 0 4px;
  background: var(--w95-face);
  font-size: 12px;
  z-index: 1;
}

/* ── 목록 ──────────────────────────────────────────────── */

.w95-list {
  list-style: none;
  margin: 0;
  padding: 2px;
  background: var(--w95-field);
  border: 2px solid;
  border-color: var(--w95-shadow) var(--w95-light) var(--w95-light)
    var(--w95-shadow);
  box-shadow:
    inset 1px 1px 0 var(--w95-dark),
    inset -1px -1px 0 var(--w95-hilight);
  overflow-y: auto;
}

.w95-list li {
  padding: 3px 5px;
  cursor: default;
}

.w95-list li.selected {
  background: var(--w95-select);
  color: #fff;
}

/* ── 스크롤바 ──────────────────────────────────────────── */

::-webkit-scrollbar {
  width: 16px;
  height: 16px;
}

::-webkit-scrollbar-track {
  /* 95 스크롤 트랙의 그 체크무늬 */
  background-color: #dfdfdf;
  background-image: linear-gradient(
    45deg,
    #fff 25%,
    transparent 25%,
    transparent 75%,
    #fff 75%
  );
  background-size: 2px 2px;
}

::-webkit-scrollbar-thumb {
  background: var(--w95-face);
  border: 2px solid;
  border-color: var(--w95-light) var(--w95-dark) var(--w95-dark)
    var(--w95-light);
  box-shadow:
    inset 1px 1px 0 var(--w95-hilight),
    inset -1px -1px 0 var(--w95-shadow);
}

::-webkit-scrollbar-corner {
  background: var(--w95-face);
}

/* ── 작업 표시줄 ───────────────────────────────────────── */

.w95-taskbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 500;
  display: flex;
  align-items: center;
  gap: 3px;
  height: 28px;
  padding: 2px 3px;
  background: var(--w95-face);
  border-top: 2px solid var(--w95-light);
}

.w95-start {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
  height: 22px;
  padding: 0 6px;
  font-weight: bold;
  font-size: 12px;
  /* 좁아져도 '시 / 작' 으로 쪼개지지 않게 합니다. */
  white-space: nowrap;
  background: var(--w95-face);
  border: 2px solid;
  border-color: var(--w95-light) var(--w95-dark) var(--w95-dark)
    var(--w95-light);
  box-shadow:
    inset 1px 1px 0 var(--w95-hilight),
    inset -1px -1px 0 var(--w95-shadow);
  cursor: pointer;
}

.w95-tasks {
  display: flex;
  gap: 3px;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
}

.w95-task {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 22px;
  padding: 0 8px;
  max-width: 160px;
  min-width: 0;
  font-family: var(--w95-font);
  font-size: 12px;
  background: var(--w95-face);
  border: 2px solid;
  border-color: var(--w95-light) var(--w95-dark) var(--w95-dark)
    var(--w95-light);
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  /* <a> 로도 쓰이므로 링크 기본 꾸밈을 지웁니다.
     (밑줄과 방문 색이 그대로 보이던 문제) */
  color: var(--w95-text);
  text-decoration: none;
}

/* 방문·활성 상태에서도 색이 바뀌지 않게 */
.w95-task:link,
.w95-task:visited,
.w95-task:hover,
.w95-task:active {
  color: var(--w95-text);
  text-decoration: none;
}

.w95-task-icon {
  flex: 0 0 auto;
  line-height: 1;
}

.w95-task-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.w95-task.active {
  border-color: var(--w95-dark) var(--w95-light) var(--w95-light)
    var(--w95-dark);
  /* 눌린 작업 버튼은 점 무늬 바탕이었습니다. */
  background-color: var(--w95-hilight);
  background-image: linear-gradient(
    45deg,
    #fff 25%,
    transparent 25%,
    transparent 75%,
    #fff 75%
  );
  background-size: 2px 2px;
  font-weight: bold;
}

.w95-tray {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 22px;
  padding: 0 7px;
  flex: 0 0 auto;
  font-size: 12px;
  border: 1px solid;
  border-color: var(--w95-shadow) var(--w95-light) var(--w95-light)
    var(--w95-shadow);
}

/* ---------------------------------------------------------
   작업 표시줄 — 좁은 화면 대응
   전작과 같은 단계로 줄입니다.
     넓음  : 전체 라벨
     좁음  : 말줄임
     더 좁음: 아이콘만 (title 로 확인 가능)
   --------------------------------------------------------- */
@media (max-width: 760px) {
  .w95-task {
    /* 남는 폭을 나눠 갖고 말줄임으로 줄어듭니다. */
    flex: 1 1 auto;
    max-width: 130px;
    padding: 0 6px;
  }
}

/* 376~560px — 라벨을 말줄임으로 최대한 남깁니다.
   버튼이 남는 폭을 나눠 갖고, 넘치는 글자만 …으로 잘립니다. */
@media (max-width: 560px) {
  .w95-task {
    flex: 1 1 0;
    min-width: 0;
    max-width: none;
    padding: 0 5px;
  }

  .w95-task-icon {
    font-size: 13px;
  }

  /* 시작 버튼은 어느 폭에서도 글자를 남깁니다.
     여기가 '시작' 이라는 걸 알아볼 수 있어야 95 화면다워집니다. */
  .w95-start {
    padding: 0 6px;
  }

  .w95-taskbar {
    gap: 2px;
    padding: 2px;
  }

  .w95-tray {
    padding: 0 5px;
    font-size: 11px;
  }
}

/* 375px — 최소 폭. 말줄임으로도 글자가 한두 자만 남아 뜻이 없으므로
   아이콘만 남깁니다. ('시작'은 그대로 둡니다)
   body 에 min-width:375px 가 있어 이보다 좁아지지 않습니다. */
@media (max-width: 375px) {
  .w95-task-label {
    display: none;
  }

  .w95-task {
    flex: 0 1 auto;
    min-width: 30px;
    max-width: 44px;
    padding: 0 4px;
    justify-content: center;
  }
}