/* style.css : XP-ish minimal skin styles (skeleton) */

:root{
  --xp-blue:#61676e;
  --xp-blue2:#c6ccdf;
  --xp-border:#444850;
  --xp-bg:#f4f6f8;
  --xp-shadow:#737785;
  --xp-white:#ffffff;
  --xp-text:#111;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  color:var(--xp-text);
  background:#f6f6f6;
  font:12px/1.5 Tahoma, Arial, sans-serif;
  cursor: url('./images/arrow.gif'), auto;
}

a{ color:#081020; text-decoration:none; }
a:hover{ text-decoration:underline; }

.xp-desktop{ min-height:100%; display:flex; flex-direction:column; }

.xp-topbar{
  display:flex; justify-content:space-between; align-items:center;
  padding:8px 12px;
  background:linear-gradient(to bottom, #4d525d 0%, #9199a3 100%);
  color:#fff;
}
.xp-topbar-title{ font-weight:700; }
.xp-link{ color:#fff; margin-left:10px; }

.xp-layout{
  width:min(1200px, 96vw);
  margin:14px auto;
  display:grid;
  grid-template-columns: 280px 1fr 280px;
  gap:14px;
  align-items:start;
}

@media (max-width: 1024px){
  .xp-layout{ grid-template-columns: 1fr; }
  .xp-col-right, .xp-col-left{ order:2; }
  .xp-col-center{ order:1; }
}

/* Window */
.xp-window{
  border:2px solid var(--xp-border);
  background:var(--xp-bg);
  box-shadow:
    inset 1px 1px 0 var(--xp-white),
    inset -1px -1px 0 var(--xp-shadow);
  border-radius:6px;
  overflow:hidden;
}

.xp-titlebar{
  display:flex; justify-content:space-between; align-items:center;
  padding:4px 6px;
  background:linear-gradient(to bottom, var(--xp-blue) 0%, var(--xp-blue2) 100%);
  color:#fff;
  font-weight:700;
  user-select:none;
}
.xp-title{ font-size:12px; }

.xp-window-controls{ display:flex; gap:4px; }
.xp-btn{
  width:16px; height:14px;
  background:linear-gradient(#fefefe,#eaeaea);
  border:1px solid #6b6b6b;
  box-shadow: inset 1px 1px 0 #fff;
}
.xp-close{ background:linear-gradient(#ffffff,#6087f1); }

.xp-toolbar, .xp-addressbar{
  background:#f6f6f6;
  border-top:1px solid #c9c9c9;
  border-bottom:1px solid #c9c9c9;
  padding:6px;
  display:flex;
  gap:6px;
  align-items:center;
}

.xp-tool{
  display:inline-block;
  padding:3px 8px;
  background:linear-gradient(#fefefe,#dcdcdc);
  border:1px solid #7f7f7f;
  box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 #808080;
  border-radius:3px;
  color:#111;
}
.xp-tool:active{
  box-shadow: inset -1px -1px 0 #fff, inset 1px 1px 0 #808080;
}

.xp-addressbar{ gap:8px; }
.xp-addr-label{ font-weight:700; color:#222; }
.xp-addr-box{
  flex:1;
  display:flex; align-items:center; gap:6px;
  background:#fff;
  border:1px solid #7f7f7f;
  padding:4px 6px;
}
.xp-addr-icon{ width:14px; height:14px; background:rgb(34, 34, 34); display:inline-block; }
.xp-addr-text{ color:#333; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.xp-body{ padding:10px; }
.xp-content{ background:#fff; border-top:1px solid #c9c9c9; }

.xp-panel{ margin-bottom:10px; }
.xp-panel-title{
  font-weight:700;
  padding:4px 6px;
  background:#f5f6f8;
  border:1px solid #d2d3d6;
}
.xp-panel-body{
  padding:8px;
  border:1px solid #c9c9c9;
  border-top:none;
  background:#fff;
}

.xp-profile{ display:flex; gap:8px; }
.xp-avatar{
  width:44px; height:44px;
  background:#f0f0f0;
  border:1px solid #c9c9c9;
  display:flex; align-items:center; justify-content:center;
}

.xp-input, .xp-textarea{
  width:100%;
  border:1px solid #7f7f7f;
  padding:6px 8px;
  font:inherit;
}
/* Protected post */
.xp-protected-row{
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
}
.xp-protected-row .xp-input{
  width:220px;
}
.xp-textarea{ min-height:90px; resize:vertical; }

.xp-search{ display:flex; gap:6px; }
.xp-button{
  padding:6px 10px;
  background:linear-gradient(#fefefe,#dcdcdc);
  border:1px solid #7f7f7f;
  box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 #808080;
}
.xp-button:active{
  box-shadow: inset -1px -1px 0 #fff, inset 1px 1px 0 #808080;
}

.xp-article{ padding:12px 8px; border-bottom:1px solid #e6e6e6; }
.xp-article-title{ margin:0 0 6px 0; font-size:18px; }
.xp-article-meta{ color:#666; font-size:11px; }
.xp-meta{ margin-right:6px; }

.xp-actions{ margin-top:10px; display:flex; gap:8px; }
.xp-button-link{
  display:inline-block;
  padding:4px 10px;
  background:linear-gradient(#fefefe,#dcdcdc);
  border:1px solid #7f7f7f;
  box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 #808080;
  border-radius:3px;
  color:#111;
}

.xp-paging{
  display:flex; gap:8px; justify-content:center;
  padding:14px 0;
}
.xp-page, .xp-page-current{
  padding:4px 10px;
  border:1px solid #c9c9c9;
  background:#f6f6f6;
}

.xp-footer{
  margin-top:auto;
  padding:10px 0;
  text-align:center;
  color:#fff;
  opacity:.9;
}

/* Optional: scrollbar (Chrome/Edge only) */
::-webkit-scrollbar{ width:16px; }
::-webkit-scrollbar-thumb{
  background:#c0c0c0;
  border:2px solid #f0f0f0;
}
::-webkit-scrollbar-track{ background:#e9e9e9; }
/* Particle canvas */
.xp-particles{
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;
  pointer-events: none; /* 클릭 방해 금지 */
}

/* 데스크탑은 캔버스보다 위로 */
.xp-desktop{
  position: relative;
  z-index: 1;
  min-height: 100vh; /* 100% 말고 이게 안전 */
}
/* Playlist panel (left window decoration) */
.xp-playlist .xp-panel-body{
  padding:10px;
}

.xp-playerbar{
  display:flex;
  gap:8px;
  align-items:center;
  padding:6px;
  background:linear-gradient(#fefefe,#e6e6e6);
  border:1px solid #d5d5d5;
  box-shadow: inset 1px 1px 0 #fff;
  border-radius:4px;
}

.xp-player-btn{
  width:28px;
  height:24px;
  line-height:22px;
  text-align:center;
  padding:0;
  background:linear-gradient(#fefefe,#dcdcdc);
  border:1px solid #7f7f7f;
  box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 #808080;
  border-radius:3px;
  cursor:pointer;
}
.xp-player-btn:active{
  box-shadow: inset -1px -1px 0 #fff, inset 1px 1px 0 #808080;
}

.xp-track{
  flex:1;
  min-width:0;
}
.xp-track-title{
  font-weight:700;
  color:#222;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.xp-track-sub{
  font-size:11px;
  color:#666;
}

.xp-eq{
  margin:8px 0 10px;
  height:18px;
  display:flex;
  gap:3px;
  align-items:flex-end;
  padding:6px;
  border:1px solid #c9c9c9;
  background:#fff;
}

.xp-eq-bar{
  display:inline-block;
  width:6px;
  height:6px;
  background:linear-gradient(#b7ff9a,#2fbf2f);
  border:1px solid #2f8f2f;
  animation: xpEq 900ms infinite ease-in-out;
}
.xp-eq-bar:nth-child(2){ animation-delay:120ms; }
.xp-eq-bar:nth-child(3){ animation-delay:240ms; }
.xp-eq-bar:nth-child(4){ animation-delay:360ms; }
.xp-eq-bar:nth-child(5){ animation-delay:180ms; }
.xp-eq-bar:nth-child(6){ animation-delay:300ms; }
.xp-eq-bar:nth-child(7){ animation-delay:420ms; }
.xp-eq-bar:nth-child(8){ animation-delay:80ms; }
.xp-eq-bar:nth-child(9){ animation-delay:200ms; }
.xp-eq-bar:nth-child(10){ animation-delay:340ms; }
.xp-eq-bar:nth-child(11){ animation-delay:460ms; }
.xp-eq-bar:nth-child(12){ animation-delay:260ms; }

@keyframes xpEq{
  0%{ height:4px; }
  30%{ height:14px; }
  60%{ height:7px; }
  100%{ height:4px; }
}

.xp-playlist-list{
  list-style:none;
  padding:0;
  margin:0;
  border:1px solid #c9c9c9;
  background:#fff;
  max-height:120px;
  overflow:auto;
}
.xp-playlist-list li{
  padding:6px 8px;
  border-bottom:1px solid #eee;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  cursor:default;
}
.xp-playlist-list li.is-active{
  background:#eef0f7;
  border-bottom-color:#e2e5f0;
  font-weight:700;
}
/* EQ 영역이 밖으로 새지 않게 */
.xp-eq{
  height: 14px;          /* 원하는 높이로 조절 */
  display: flex;
  align-items: flex-end;
  gap: 2px;
  overflow: hidden;      /* ← 핵심 */
  border: 1px solid #7f7f7f;
  background: #fff;
  padding: 2px;
  box-sizing: border-box;
}

/* 바는 EQ 높이를 절대 넘지 않게 */
.xp-eq-bar{
  width: 6px;
  height: 100%;
  max-height: 100%;      /* ← 안전장치 */
  display: block;
}

/* Right - Picture window */
.xp-window-photo .xp-photo-body{
  padding:10px;
  background:#fff;
  border-top:1px solid #c9c9c9; /* xp-content랑 톤 맞춤 */
}

.xp-photo-img{
  display:block;
  width:100%;
  height:auto;          /* 비율 유지 */
  border:1px solid #c9c9c9;
  background:#f6f6f6;
}
/* ===== Category 정렬 보정 (XP 패널 안) ===== */
.xp-panel-body .tt_category,
.xp-panel-body .category_list,
.xp-panel-body ul {
  margin: 0;
  padding: 0;
}

.xp-panel-body .tt_category ul,
.xp-panel-body .category_list ul {
  margin: 0;
  padding-left: 14px;   /* 1단 들여쓰기 */
}

.xp-panel-body .tt_category li,
.xp-panel-body .category_list li {
  list-style: none;     /* 기본 불릿 제거 */
  margin: 4px 0;
  line-height: 1.35;
  position: relative;
  padding-left: 12px;   /* 커스텀 불릿 자리 */
}

/* 커스텀 불릿(•)로 정렬 통일 */
.xp-panel-body .tt_category li::before,
.xp-panel-body .category_list li::before {
  content: "•";
  position: absolute;
  left: 0;
  top: 0;
}

/* 2단(하위 카테고리) 들여쓰기 */
.xp-panel-body .tt_category li ul,
.xp-panel-body .category_list li ul {
  margin-top: 4px;
  padding-left: 16px;
}

/* 링크 정렬 */
.xp-panel-body .tt_category a,
.xp-panel-body .category_list a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
}

/* (숫자) 카운트가 있으면 살짝 연하게 */
.xp-panel-body .tt_category .c_cnt,
.xp-panel-body .category_list .c_cnt {
  opacity: 0.7;
}

/* 포스트 본문 줄 간격 */
.xp-article,
.xp-article p,
.xp-article li {
  line-height: 2.5;
}
blockquote[data-ke-style="style1"] {
  position: relative !important;
  text-align: center !important;
  margin: 20px auto !important;
  padding: 25px 20px 20px !important;
  border: none !important;
  background: transparent !important;
  line-height: 0 !important;
}

blockquote[data-ke-style="style1"]::before {
  content: "“" !important;
  display: block !important;
  font-size: 48px !important;
  line-height: 1 !important;
  color: #ccc !important;
  font-family: Georgia, serif !important;
  margin-bottom: 0px !important;
}

blockquote[data-ke-style="style1"] p {
  text-align: center !important;
  margin: 4px 0 !important;
  padding: 0 !important;
  line-height: 1.0 !important;
}

blockquote[data-ke-style="style3"],
blockquote[data-ke-style="style4"] {
  font-size: 12px !important;
  line-height: 1.8 !important;
}

blockquote[data-ke-style="style3"] p,
blockquote[data-ke-style="style4"] p {
  font-size: 12px !important;
  line-height: 1.8 !important;
}