:root{
  --bg:#fff2f5;          /* 전체 배경 */
  --card:#fff6f8;        /* 카드/창 내부 */
  --text:#5b5b5b;        /* 기본 텍스트 */
  --muted:#9c9c9c;       /* 보조 텍스트 */

  --border:#ffdae2;      /* 메인 테두리 (1px) */
  --border-soft:#ffdbe5; /* 말랑 테두리 */

  --accent-grad:linear-gradient(180deg,#fff4f7,#ffe7ef); /* 말랑 배지/버튼 면색 */
  --accent-bg:#fff4f7;   /* 연핑크 면 */
  --accent-bg2:#ffe7ef;  /* 살짝 더 진한 면 */
  --accent-strong:#a67785; /* 강조 텍스트 컬러 */
  --accent-shadow:rgba(255,190,205,0.35);

  --ring-start:rgba(255,200,210,0.26);
  --ring-mid:rgba(255,180,195,0.40);

  --petal:#ffd5df;       /* 꽃/하트 효과 */
  --petal-s1:#ffcad7;
  --petal-s2:rgba(255,160,180,0.55);
}

/* 기본 문서 */
body{
  margin:0;
  min-height:100vh;
  background:var(--bg);
  font-family:"Pretendard",-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  color:var(--text);
  overflow:hidden;
  position:relative;
  font-size:12px;
  line-height:1.4;
}

/* 하트/벚꽃 떨어지는 레이어 */
.falling-layer{
  position:fixed;
  inset:0;
  pointer-events:none;
  overflow:hidden;
  z-index:1;
  font-family:inherit;
}

/* 랜딩(입장 카드) */
.landing-wrap{
  position:relative;
  z-index:2;
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
}
.landing-card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:16px;
  padding:24px 24px 16px;
  box-shadow:
    0 6px 20px rgba(255,192,200,0.25),
    0 0 22px rgba(255,180,195,0.28);
  cursor:pointer;
  width:260px;
  max-width:80%;
  transition:transform .15s ease, box-shadow .15s ease;
}
.landing-card:hover{
  transform:translateY(-2px);
  box-shadow:
    0 8px 24px rgba(255,192,200,0.32),
    0 0 28px rgba(255,180,195,0.34);
}
.landing-img{
  width:100%;
  aspect-ratio:1/1;
  background:#fff;
  border:1px solid var(--border);
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:14px;
  color:var(--muted);
  overflow:hidden;
}
.landing-desc{
  margin-top:12px;
  font-size:13px;
  line-height:1.4;
  color:var(--text);
  white-space:pre-line;
}

/* ===========================
   미니홈 창 (window-wrap)
   =========================== */
.window-wrap{
  position:fixed;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:900px;
  max-width:calc(100vw - 20px);
  height:540px;
  max-height:calc(100vh - 20px);

  background:var(--card);
  border:1px solid var(--border);
  border-radius:14px;
  box-shadow:
    0 4px 16px rgba(255,192,200,0.18),
    0 0 22px rgba(255,180,195,0.25);

  display:none;
  flex-direction:column;
  z-index:999;
  overflow:hidden;

  font-size:12px;
  line-height:1.4;
  color:var(--text);
}

/* 상단바 */
.window-header{
  background:#ffe4ea; /* index7 상단바 색 */
  border-bottom:1px solid var(--border);
  border-top-left-radius:14px;
  border-top-right-radius:14px;

  height:38px;
  padding:0 12px;

  display:flex;
  align-items:center;
  justify-content:space-between;

  cursor:move;
  user-select:none;
  flex-shrink:0;
  position:relative;
}

/* 좌측 버튼 묶음 */
.window-left-buttons{
  display:flex;
  align-items:center;
  gap:6px;
}

/* 창 제어 버튼 (최소화/최대화/닫기) - index7 bubble 스타일 */
.win-btn{
  width:14px;
  height:14px;
  border-radius:999px;
  border:1px solid var(--border);
  background:var(--accent-grad);
  box-shadow:none;
  position:relative;
  cursor:pointer;
  user-select:none;
  flex-shrink:0;
  font-size:9px;
  line-height:14px;
  text-align:center;
  color:var(--accent-strong);
  font-weight:600;
}
.win-btn span{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-52%);
  font-size:9px;
  line-height:1;
  font-weight:600;
  color:var(--accent-strong);
}

/* 창 제목 */
.window-title{
  font-size:12px;
  font-weight:600;
  color:var(--accent-strong);
  text-align:center;
  flex:1;
  pointer-events:none;
}

/* 오른쪽 공간(아이콘 자리 비워둠) */
.window-right-space{
  width:42px;
  flex-shrink:0;
}

/* 본체 */
.window-body{
  flex:1;
  display:flex;
  min-height:0;
  background:var(--card);
  color:var(--text);
  font-size:12px;
  line-height:1.4;
}

/* 왼쪽 고정 패널 */
.sidebar{
  flex:0 0 220px;
  border-right:1px solid var(--border);
  padding:12px;
  overflow-y:auto;
  position:relative;
}

/* 오른쪽 영역 */
.main-area{
  flex:1;
  display:flex;
  flex-direction:column;
  min-width:0;
}

/* 상단 메뉴 */
.topmenu{
  background:var(--card);
  border-bottom:1px solid var(--border);
  flex-shrink:0;

  display:flex;
  flex-wrap:wrap;
  padding:10px 12px 8px;
  gap:10px;

  font-size:12px;
  line-height:1;
}
.topmenu button{
  appearance:none;
  border:1px solid var(--border);
  background:var(--accent-grad);
  border-radius:8px;
  box-shadow:0 4px 8px rgba(255,192,200,0.28);
  color:var(--accent-strong);
  font-family:inherit;
  font-size:12px;
  cursor:pointer;
  font-weight:600;
  line-height:1;
  padding:6px 10px;
  min-width:70px;
}
.topmenu button.active{
  box-shadow:
    0 0 8px var(--ring-start),
    0 0 18px var(--ring-mid);
  outline:0;
}

/* 컨텐츠 영역 (우측 큰 스크롤) */
.page-view{
  flex:1;
  min-height:0;
  overflow-y:auto;
  padding:16px;
  background:var(--bg);
  border-radius:0 0 14px 14px;
  position:relative;
  font-size:12px;
  line-height:1.5;
  color:var(--text);
}

/* -------- 공지 박스 -------- */
.notice-box{
  background:var(--accent-bg);
  border:1px solid var(--border);
  border-radius:12px;
  padding:12px;
  margin-bottom:16px;
  box-shadow:0 4px 10px rgba(255,192,200,0.22);
}
.notice-title{
  font-size:12px;
  line-height:1.4;
  font-weight:600;
  color:var(--accent-strong);
  margin-bottom:8px;
}
.notice-item{
  font-size:12px;
  line-height:1.4;
  color:var(--text);
  margin-bottom:6px;
  position:relative;
}
.notice-item a{
  color:var(--text);
  text-decoration:none;
  border-bottom:1px dashed var(--border-soft);
  position:relative;
}
.notice-item a:hover{
  background-color:var(--accent-bg2);
  border-bottom-color:var(--border);
}

/* 툴팁 (공지 설명) */
.tooltip{
  position:absolute;
  z-index:9999;
  background:var(--card);
  color:var(--text);
  border:1px solid var(--border);
  border-radius:8px;
  box-shadow:
    0 6px 20px rgba(255,192,200,0.25),
    0 0 22px rgba(255,180,195,0.28);
  font-size:11px;
  line-height:1.4;
  padding:8px 10px;
  max-width:160px;
  display:none;
  pointer-events:none;
  white-space:normal;
}

/* -------- 포토보드 -------- */
.photo-board-wrap{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:12px;
  padding:12px;
  margin-bottom:16px;
  box-shadow:0 4px 10px rgba(255,192,200,0.22);
}
.photo-board-head{
  font-size:12px;
  font-weight:600;
  margin-bottom:10px;
  color:var(--accent-strong);
}
.photo-grid{
  display:flex;
  gap:8px;
  justify-content:space-between;
  flex-wrap:nowrap;
}
.photo-item{
  width:100px;
  height:100px;
  flex:0 0 auto;
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:10px;
  position:relative;
  overflow:hidden;
  cursor:pointer;
  transition:box-shadow .15s ease, filter .15s ease;
  box-shadow:0 0 0 rgba(255,150,180,0);
}
.photo-item:hover{
  box-shadow:
    0 0 8px var(--ring-start),
    0 0 18px var(--ring-mid);
  filter:brightness(1.05);
}
.photo-thumb{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:11px;
  color:var(--muted);
  background:#fff;
}

/* -------- 공용 프리뷰 박스 / ABOUT / DIARY / 등 -------- */
.preview-box{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:12px;
  padding:12px;
  margin-bottom:16px;
  font-size:12px;
  color:var(--text);
  box-shadow:0 4px 10px rgba(255,192,200,0.22);
}
.preview-title{
  font-weight:600;
  font-size:12px;
  margin-bottom:8px;
  color:var(--accent-strong);
}
.preview-text,
.about-text,
.diary-text,
.gallery-text,
.guest-desc,
.guest-full{
  font-size:12px;
  line-height:1.5;
  color:var(--text);
  white-space:pre-line;
}

/* -------- 왼쪽 프로필/카운터/BGM/방명록 박스 -------- */
.panel-block{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:12px;
  padding:10px;
  font-size:12px;
  line-height:1.4;
  color:var(--text);
  box-shadow:0 4px 10px rgba(255,192,200,0.22);
  margin-bottom:12px;
}
.profile-head{
  font-size:12px;
  font-weight:600;
  color:var(--accent-strong);
  margin-bottom:8px;
}
.profile-photo{
  width:64px;
  height:64px;
  border-radius:8px;
  border:1px solid var(--border);
  background:#fff;
  color:var(--muted);
  font-size:11px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  margin-bottom:8px;
}
.profile-info-line{
  font-size:12px;
  color:var(--text);
  margin-bottom:4px;
  word-break:keep-all;
}

/* 방문자수 */
.counter-num{
  font-weight:600;
  font-size:13px;
  color:var(--accent-strong);
  text-shadow:
    0 0 2px #ffe6ed,
    0 0 6px rgba(255,185,195,0.42);
}

/* BGM */
.bgm-wrap{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.bgm-title{
  font-size:12px;
  line-height:1.4;
  color:var(--text);
  word-break:keep-all;
}
.bgm-controls{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  line-height:1;
  color:var(--text);
}
.bgm-btn{
  width:28px;
  height:28px;
  border-radius:8px;
  background:var(--accent-grad);
  border:1px solid var(--border-soft);
  box-shadow:0 4px 8px rgba(255,192,200,0.28);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  flex-shrink:0;
  font-family:inherit;
}
.icon-play{
  width:0;
  height:0;
  border-top:6px solid transparent;
  border-bottom:6px solid transparent;
  border-left:9px solid var(--accent-strong);
}
.icon-pause{
  width:8px;
  height:10px;
  display:none;
  position:relative;
}
.icon-pause::before,
.icon-pause::after{
  content:"";
  position:absolute;
  top:0;
  width:3px;
  height:10px;
  border-radius:1px;
  background:var(--accent-strong);
  box-shadow:0 0 4px rgba(255,190,205,0.6);
}
.icon-pause::before{ left:0; }
.icon-pause::after{ right:0; }
.bgm-status{
  font-size:12px;
  color:var(--muted);
}

/* 방명록 */
.guest-wrap label{
  display:block;
  margin-bottom:4px;
  font-size:12px;
  font-weight:600;
  color:var(--accent-strong);
}
.guest-wrap textarea{
  width:100%;
  min-height:60px;
  resize:vertical;
  font-family:inherit;
  font-size:12px;
  line-height:1.4;
  color:var(--text);
  border:1px solid var(--border);
  border-radius:8px;
  padding:8px;
  background:#fff;
  box-sizing:border-box;
  outline:none;
}
.guest-wrap textarea:focus{
  box-shadow:
    0 0 8px var(--ring-start),
    0 0 18px var(--ring-mid);
  border-color:var(--border);
}
.guest-send{
  margin-top:8px;
  width:100%;
  border:1px solid var(--border);
  border-radius:8px;
  background:var(--accent-grad);
  font-size:12px;
  font-weight:600;
  color:var(--accent-strong);
  padding:6px 10px;
  cursor:pointer;
  box-shadow:0 4px 8px rgba(255,192,200,0.28);
  font-family:inherit;
}
.guest-list{
  margin-top:10px;
  border-top:1px solid var(--border);
  padding-top:8px;
  max-height:120px;
  overflow-y:auto;
  font-size:12px;
  word-break:break-word;
}
.guest-item{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:8px;
  padding:6px 8px;
  margin-bottom:6px;
  line-height:1.4;
  color:var(--text);
  box-shadow:0 4px 8px rgba(255,192,200,0.22);
}

/* 스크롤바 커스텀 (연핑크) */
.sidebar::-webkit-scrollbar,
.page-view::-webkit-scrollbar,
.guest-list::-webkit-scrollbar{
  width:6px;
}
.sidebar::-webkit-scrollbar-track,
.page-view::-webkit-scrollbar-track,
.guest-list::-webkit-scrollbar-track{
  background:#ffeef4;
  border-radius:4px;
}
.sidebar::-webkit-scrollbar-thumb,
.page-view::-webkit-scrollbar-thumb,
.guest-list::-webkit-scrollbar-thumb{
  background:#ffc4d5;
  border-radius:4px;
  box-shadow:0 0 8px rgba(255,150,180,.5);
}

/* 반응형: 모바일에서 폰트 11px 유지 */
@media(max-width:480px){
  .window-wrap{
    width:90vw;
    height:80vh;
    font-size:11px;
  }
  .window-title{
    font-size:11px;
  }
  .topmenu button{
    font-size:11px;
    padding:5px 8px;
    min-width:auto;
  }
  .page-view{
    font-size:11px;
  }
  .sidebar{
    font-size:11px;
  }
  .profile-info-line,
  .bgm-title,
  .guest-wrap label{
    font-size:11px;
  }
  .guest-wrap textarea,
  .guest-send,
  .guest-item,
  .notice-item,
  .photo-board-head{
    font-size:11px;
  }
}

/* 유틸 */
.hidden{ display:none !important; }

.minimizing{
  animation:minishrink .18s forwards ease;
}
@keyframes minishrink{
  to{
    opacity:0;
    transform:translate(-50%,-50%) scale(.8);
  }
}