/* ===== 배경 ===== */
body {
  margin: 0;
  min-height: 100vh;

  background-image: url("MYPHOTO.JPG");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  font-family: "Segoe UI", Arial, sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* ===== 윈도우 ===== */
.window {
  width: 900px;
  border-radius: 16px;

  background: rgba(255,255,255,0.55);
  backdrop-filter: blur(12px);

  box-shadow:
    inset 0 1px 2px rgba(255,255,255,0.9),
    0 20px 50px rgba(0,0,0,0.4);

  overflow: hidden;
}

/* ===== 타이틀 바 ===== */
.titlebar {
  height: 36px;
  display: flex;
  align-items: center;
  padding: 0 12px;

  background: linear-gradient(
    to bottom,
    #e8f4ff,
    #b7ddff
  );
}

.window-buttons {
  display: flex;
  gap: 6px;
}

.btn {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

.close { background: #ff5f57; }
.minimize { background: #ffbd2e; }
.maximize { background: #28c840; }

.title {
  margin-left: 12px;
  font-size: 13px;
  font-weight: bold;
}

/* ===== 툴바 ===== */
.toolbar {
  display: flex;
  gap: 10px;
  padding: 10px;

  background: linear-gradient(
    to bottom,
    rgba(255,255,255,0.8),
    rgba(200,230,255,0.6)
  );
}

.tool-btn {
  padding: 6px 14px;
  border-radius: 8px;
  border: none;

  background: linear-gradient(
    to bottom,
    #ffffff,
    #cce6ff
  );

  box-shadow:
    inset 0 1px 2px rgba(255,255,255,0.9),
    0 2px 6px rgba(0,0,0,0.25);

  cursor: pointer;
}

/* ===== 콘텐츠 ===== */
.content {
  display: flex;
}

/* ===== 사이드바 ===== */
.sidebar {
  width: 220px;
  padding: 20px;

  background: rgba(220,245,255,0.6);
  text-align: center;
}

.profile-pic {
  width: 120px;
  height: 120px;
  margin: 0 auto 10px;

  background: radial-gradient(circle at top left, #9fdf9f, #2f8f2f);
  border-radius: 50%;

  box-shadow: inset 0 2px 4px rgba(255,255,255,0.8);
}

.status {
  font-size: 12px;
  color: green;
}

.icons {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 10px;
}

.icon {
  font-size: 20px;
  cursor: pointer;
}

/* ===== 메인 ===== */
.main {
  flex: 1;
  padding: 20px;
}

.hero-image {
  height: 180px;
  margin: 10px 0;

  background: linear-gradient(
    to right,
    #a6ddff,
    #e6f7ff
  );

  border-radius: 12px;
}

/* ===== 텍스트 박스 ===== */
.text-boxes {
  display: flex;
  gap: 12px;
}

.text-box {
  flex: 1;
  padding: 12px;

  background: rgba(255,255,255,0.7);
  border-radius: 10px;
}

/* ===== 하단 바 ===== */
.bottombar {
  display: flex;
  justify-content: center;
  gap: 20px;
  padding: 12px;

  background: linear-gradient(
    to bottom,
    #dff3ff,
    #bcdfff
  );
}

.lang {
  padding: 10px 30px;
  border-radius: 10px;
  border: none;
  font-weight: bold;
}

.blue {
  background: linear-gradient(to bottom, #8fd3ff, #4faeff);
}

.green {
  background: linear-gradient(to bottom, #b6f5a6, #6adf6a);
}

/* ===== Aero 버튼 인터랙션 ===== */

.tool-btn,
.lang {
  position: relative;
  overflow: hidden;

  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease,
    background 0.15s ease;
}

.tool-btn:hover,
.lang:hover {
  transform: translateY(-1px) scale(1.03);

  box-shadow:
    inset 0 1px 2px rgba(255,255,255,0.9),
    inset 0 -2px 4px rgba(0,0,0,0.15),
    0 6px 14px rgba(0,0,0,0.35);
}

.tool-btn:active,
.lang:active {
  transform: translateY(1px) scale(0.98);

  box-shadow:
    inset 0 3px 6px rgba(0,0,0,0.25),
    inset 0 -1px 1px rgba(255,255,255,0.6);
}

.tool-btn::after,
.lang::after {
  content: "";
  position: absolute;
  inset: 2px;
  border-radius: inherit;

  background: linear-gradient(
    to bottom,
    rgba(255,255,255,0.5),
    transparent
  );

  pointer-events: none;
}