/* ============================================
   XP Image Tools - Windows XP Theme CSS
   Windows XP 스타일 UI 컴포넌트
   ============================================ */

/* ── 폰트 ── */
@import url('https://fonts.googleapis.com/css2?family=Tahoma:wght@400;700&display=swap');

:root {
  /* XP 색상 팔레트 */
  --xp-blue:        #0A246A;
  --xp-blue-mid:    #3169C6;
  --xp-blue-light:  #4A8FD4;
  --xp-blue-btn:    #245EDE;
  --xp-titlebar-from: #0058E6;
  --xp-titlebar-to:   #3A9AF5;
  --xp-titlebar-inactive: #7A96DF;
  --xp-green:       #3A7E00;
  --xp-green-start: #3D9C00;
  --xp-green-dark:  #2A6000;
  --xp-silver:      #ECE9D8;
  --xp-silver-dark: #D4D0C8;
  --xp-silver-mid:  #F1EFE2;
  --xp-white:       #FFFFFF;
  --xp-text:        #000000;
  --xp-text-gray:   #6B6B6B;
  --xp-border-light:#FFFFFF;
  --xp-border-dark: #808080;
  --xp-border-mid:  #AAAAAA;
  --xp-highlight:   #316AC5;
  --xp-highlight-text: #FFFFFF;
  --xp-btn-face:    #ECE9D8;
  --xp-btn-shadow:  #716F64;
  --xp-btn-highlight: #FFFFFF;
  --xp-taskbar-from: #245EDC;
  --xp-taskbar-to:   #3D85F0;
  --xp-red-close:   #C75050;
  --xp-error:       #CC0000;

  /* XP 폰트 */
  --xp-font: 'Tahoma', 'Microsoft Sans Serif', Arial, sans-serif;
  --xp-font-size: 11px;
  --xp-font-size-sm: 10px;
  --xp-font-size-lg: 13px;
}

/* ── XP 창(Window) ── */
.xp-window {
  background: var(--xp-silver);
  border: 2px solid var(--xp-blue);
  border-radius: 8px 8px 4px 4px;
  box-shadow:
    inset 1px 1px 0 var(--xp-border-light),
    2px 2px 0 rgba(0,0,0,0.3),
    4px 4px 8px rgba(0,0,0,0.25);
  font-family: var(--xp-font);
  font-size: var(--xp-font-size);
  overflow: hidden;
}

/* ── 제목 표시줄 ── */
.xp-titlebar {
  background: linear-gradient(180deg,
    #1B7BF5 0%,
    #1B7BF5 4%,
    #1469E0 6%,
    #2485F8 10%,
    #1B6FE8 14%,
    #1B6FE8 80%,
    #1460CE 90%,
    #0A46B0 100%
  );
  padding: 4px 6px 4px 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  user-select: none;
  cursor: default;
  min-height: 28px;
  border-bottom: 1px solid #0040B0;
}

.xp-titlebar.inactive {
  background: linear-gradient(180deg,
    #8BA4D4 0%,
    #7090C0 100%
  );
}

.xp-titlebar-left {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  overflow: hidden;
}

.xp-titlebar-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.xp-titlebar-title {
  color: #FFFFFF;
  font-weight: bold;
  font-size: 12px;
  font-family: var(--xp-font);
  text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── 제목 표시줄 버튼 ── */
.xp-titlebar-buttons {
  display: flex;
  gap: 2px;
  flex-shrink: 0;
}

.xp-btn-titlebar {
  width: 21px;
  height: 21px;
  border: none;
  border-radius: 3px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: bold;
  font-family: var(--xp-font);
  color: #000;
  position: relative;
  flex-shrink: 0;
  transition: filter 0.05s;
}

.xp-btn-titlebar::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 3px;
}

.xp-btn-minimize {
  background: linear-gradient(180deg, #F0C060 0%, #E0A030 40%, #D09020 100%);
  box-shadow: inset 0 1px 0 #F8D880, 0 1px 0 #806010;
}

.xp-btn-maximize {
  background: linear-gradient(180deg, #80C840 0%, #60A820 40%, #4A8810 100%);
  box-shadow: inset 0 1px 0 #A8E860, 0 1px 0 #306010;
}

.xp-btn-close {
  background: linear-gradient(180deg, #E86060 0%, #C83030 40%, #A02020 100%);
  box-shadow: inset 0 1px 0 #F89090, 0 1px 0 #601010;
  color: white;
}

.xp-btn-titlebar:hover {
  filter: brightness(1.15);
}

.xp-btn-titlebar:active {
  filter: brightness(0.85);
}

/* ── 메뉴바 ── */
.xp-menubar {
  background: var(--xp-silver);
  border-bottom: 1px solid var(--xp-silver-dark);
  padding: 2px 4px;
  display: flex;
  gap: 0;
}

.xp-menu-item {
  padding: 3px 8px;
  cursor: default;
  font-family: var(--xp-font);
  font-size: var(--xp-font-size);
  color: var(--xp-text);
  border: 1px solid transparent;
  border-radius: 2px;
  white-space: nowrap;
}

.xp-menu-item:hover,
.xp-menu-item.active {
  background: var(--xp-highlight);
  color: var(--xp-highlight-text);
  border-color: var(--xp-blue-mid);
}

/* ── 툴바 ── */
.xp-toolbar {
  background: var(--xp-silver);
  border-bottom: 1px solid var(--xp-silver-dark);
  padding: 3px 6px;
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

.xp-toolbar-sep {
  width: 1px;
  height: 22px;
  background: linear-gradient(180deg, transparent, var(--xp-border-dark) 20%, var(--xp-border-dark) 80%, transparent);
  margin: 0 4px;
}

/* ── XP 버튼 ── */
.xp-btn {
  background: linear-gradient(180deg,
    #FFFFFF 0%,
    #F0EDE0 40%,
    #D8D5C8 100%
  );
  border: 1px solid var(--xp-btn-shadow);
  border-radius: 3px;
  padding: 4px 12px;
  font-family: var(--xp-font);
  font-size: var(--xp-font-size);
  color: var(--xp-text);
  cursor: pointer;
  white-space: nowrap;
  box-shadow:
    inset 0 1px 0 var(--xp-btn-highlight),
    inset -1px -1px 0 var(--xp-btn-shadow);
  min-height: 23px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  transition: none;
  position: relative;
}

.xp-btn:hover {
  background: linear-gradient(180deg,
    #FFFFFF 0%,
    #F8F0D0 40%,
    #E8D890 100%
  );
  border-color: #245EDE;
}

.xp-btn:active,
.xp-btn.pressed {
  background: linear-gradient(180deg,
    #C8C5B8 0%,
    #D8D5C8 100%
  );
  box-shadow:
    inset 1px 1px 0 var(--xp-btn-shadow),
    inset -1px -1px 0 var(--xp-btn-highlight);
  padding: 5px 11px 3px 13px;
}

.xp-btn:focus {
  outline: 1px dotted #000;
  outline-offset: -3px;
}

.xp-btn-primary {
  background: linear-gradient(180deg,
    #4A8FFF 0%,
    #2060D0 40%,
    #1040B0 100%
  );
  color: white;
  border-color: #0030A0;
  box-shadow:
    inset 0 1px 0 #80B0FF,
    inset -1px -1px 0 #001880;
}

.xp-btn-primary:hover {
  background: linear-gradient(180deg,
    #60A0FF 0%,
    #3070E0 40%,
    #2050C0 100%
  );
}

.xp-btn-primary:active {
  background: linear-gradient(180deg,
    #1040B0 0%,
    #2060D0 100%
  );
}

/* ── 입력 필드 ── */
.xp-input {
  border: 2px solid;
  border-color: var(--xp-btn-shadow) var(--xp-btn-highlight) var(--xp-btn-highlight) var(--xp-btn-shadow);
  background: white;
  padding: 3px 5px;
  font-family: var(--xp-font);
  font-size: var(--xp-font-size);
  color: var(--xp-text);
  outline: none;
  min-height: 21px;
  box-shadow: inset 1px 1px 3px rgba(0,0,0,0.15);
}

.xp-input:focus {
  border-color: var(--xp-highlight);
  box-shadow: inset 1px 1px 3px rgba(0,0,0,0.2);
}

.xp-input:disabled {
  background: var(--xp-silver);
  color: var(--xp-text-gray);
}

/* ── 체크박스 ── */
.xp-checkbox-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  user-select: none;
  font-family: var(--xp-font);
  font-size: var(--xp-font-size);
}

.xp-checkbox {
  width: 13px;
  height: 13px;
  border: 2px solid;
  border-color: var(--xp-btn-shadow) var(--xp-btn-highlight) var(--xp-btn-highlight) var(--xp-btn-shadow);
  background: white;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
  box-shadow: inset 1px 1px 2px rgba(0,0,0,0.2);
}

.xp-checkbox:checked::after {
  content: '✔';
  position: absolute;
  top: -3px;
  left: -1px;
  font-size: 12px;
  color: #000;
  line-height: 1;
}

.xp-checkbox:focus {
  outline: 1px dotted #000;
}

/* ── 라디오 버튼 ── */
.xp-radio {
  width: 13px;
  height: 13px;
  border: 2px solid;
  border-color: var(--xp-btn-shadow) var(--xp-btn-highlight) var(--xp-btn-highlight) var(--xp-btn-shadow);
  background: white;
  appearance: none;
  -webkit-appearance: none;
  border-radius: 50%;
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
}

.xp-radio:checked::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 5px;
  height: 5px;
  background: #000;
  border-radius: 50%;
}

/* ── 패널 / 그룹박스 ── */
.xp-groupbox {
  border: 1px solid var(--xp-border-dark);
  border-radius: 2px;
  padding: 12px 10px 8px;
  position: relative;
  background: var(--xp-silver);
  box-shadow:
    inset 1px 1px 0 var(--xp-border-light),
    -1px -1px 0 var(--xp-border-light);
}

.xp-groupbox-title {
  position: absolute;
  top: -8px;
  left: 8px;
  background: var(--xp-silver);
  padding: 0 4px;
  font-family: var(--xp-font);
  font-size: var(--xp-font-size);
  font-weight: bold;
  color: var(--xp-text);
}

/* ── 상태 표시줄 ── */
.xp-statusbar {
  background: var(--xp-silver);
  border-top: 1px solid var(--xp-border-dark);
  padding: 3px 8px;
  font-family: var(--xp-font);
  font-size: var(--xp-font-size-sm);
  color: var(--xp-text);
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 22px;
}

.xp-statusbar-panel {
  border: 1px solid;
  border-color: var(--xp-btn-shadow) var(--xp-btn-highlight) var(--xp-btn-highlight) var(--xp-btn-shadow);
  padding: 1px 6px;
  flex: 1;
}

/* ── 진행 표시줄 ── */
.xp-progressbar {
  height: 16px;
  background: white;
  border: 2px solid;
  border-color: var(--xp-btn-shadow) var(--xp-btn-highlight) var(--xp-btn-highlight) var(--xp-btn-shadow);
  padding: 1px;
  overflow: hidden;
}

.xp-progressbar-fill {
  height: 100%;
  background: linear-gradient(180deg, #3A8CE0 0%, #1868C0 50%, #3A8CE0 100%);
  background-size: 20px 100%;
  animation: xpProgress 1s linear infinite;
  transition: width 0.3s ease;
}

@keyframes xpProgress {
  0%   { background-position: 0 0; }
  100% { background-position: 20px 0; }
}

/* ── 셀렉트 박스 ── */
.xp-select {
  border: 2px solid;
  border-color: var(--xp-btn-shadow) var(--xp-btn-highlight) var(--xp-btn-highlight) var(--xp-btn-shadow);
  background: white;
  padding: 2px 20px 2px 5px;
  font-family: var(--xp-font);
  font-size: var(--xp-font-size);
  color: var(--xp-text);
  cursor: pointer;
  min-height: 21px;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M0 0L6 8L12 0z' fill='%23000'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 4px center;
  background-size: 8px;
}

.xp-select:focus {
  outline: none;
  border-color: var(--xp-highlight);
}

/* ── 탭 ── */
.xp-tabs {
  display: flex;
  gap: 0;
  margin-bottom: -1px;
  padding-left: 4px;
}

.xp-tab {
  padding: 5px 14px 6px;
  background: var(--xp-silver-dark);
  border: 1px solid var(--xp-border-dark);
  border-bottom: none;
  border-radius: 4px 4px 0 0;
  font-family: var(--xp-font);
  font-size: var(--xp-font-size);
  cursor: pointer;
  margin-right: 2px;
  position: relative;
  box-shadow: inset 1px 1px 0 var(--xp-border-light);
}

.xp-tab.active {
  background: var(--xp-silver);
  z-index: 1;
  border-bottom: 1px solid var(--xp-silver);
  font-weight: bold;
}

.xp-tab-content {
  display: none;
  border: 1px solid var(--xp-border-dark);
  padding: 10px;
  background: var(--xp-silver);
}

.xp-tab-content.active {
  display: block;
}

/* ── 툴팁 ── */
.xp-tooltip {
  position: absolute;
  background: #FFFFE1;
  border: 1px solid #000;
  padding: 2px 6px;
  font-family: var(--xp-font);
  font-size: var(--xp-font-size-sm);
  color: #000;
  pointer-events: none;
  white-space: nowrap;
  z-index: 9999;
  box-shadow: 1px 1px 0 rgba(0,0,0,0.3);
}

/* ── 스크롤바 ── */
.xp-scrollable {
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--xp-silver-dark) var(--xp-silver);
}

.xp-scrollable::-webkit-scrollbar { width: 16px; }
.xp-scrollable::-webkit-scrollbar-track {
  background: var(--xp-silver);
  border-left: 1px solid var(--xp-border-dark);
}
.xp-scrollable::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #E0DDD0 0%, #C8C5B8 50%, #E0DDD0 100%);
  border: 1px solid var(--xp-border-dark);
  box-shadow: inset 1px 1px 0 #FFF;
}

/* ── 인포 패널 (파란 XP 스타일) ── */
.xp-info-panel {
  background: linear-gradient(180deg, #2466D3 0%, #1A50BC 100%);
  color: white;
  padding: 8px 12px;
  font-family: var(--xp-font);
  font-size: var(--xp-font-size);
  border-bottom: 1px solid #0030A0;
}

/* ── 드래그 커서 ── */
.xp-window.dragging { cursor: move; user-select: none; }

/* ── 반응형 조정 ── */
@media (max-width: 600px) {
  .xp-titlebar-title { font-size: 11px; }
  .xp-btn { padding: 3px 8px; }
}