/* 내용 상자 — 테두리 있는 둥근 칸 + 왼쪽 위 보라 이름표 (1번 예시의 "ABOUT ME")
   <section class="win">
     <header class="win-bar"><span class="win-title">제목</span></header>
     <div class="win-body">내용</div>
   </section>
   .win.light = 조금 진한 칸 */

.win {
  background: var(--pane);
  border: var(--bw) solid var(--line);
  border-radius: var(--r-md);
  min-width: 0;
  overflow: hidden;
}
.win.light { background: var(--pane-2); }

.win-bar { display: flex; align-items: center; gap: 8px; padding: 14px 18px 0; }
.win-title {
  display: inline-block; padding: 0 10px; border-radius: 4px;
  background: var(--accent); color: var(--accent-ink);
  font-family: var(--pixel); font-size: 12px; line-height: 1.9; letter-spacing: .06em; text-transform: uppercase;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%;
}
.win-deco, .win-ctrl { display: none; }

.win-body { padding: 12px 18px 18px; }
.win-body.tight { padding: 8px 0 0; }

/* 사진 */
.frame { border: var(--bw) solid var(--line); border-radius: var(--r-md); overflow: hidden; background: var(--pane-2); }
.frame .handle { display: none; }