* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; font-family: "Noto Sans KR", system-ui, sans-serif; background: #07101d; color: #fff; }
body { transition: background 2s ease; }
#app {
  position: relative; width: 100vw; height: 100vh; overflow: hidden;
  background:
    radial-gradient(circle at 50% 45%, rgba(255,205,100,.12), transparent 24%),
    radial-gradient(circle at 20% 20%, rgba(75,120,255,.12), transparent 30%),
    #07101d;
}
#space { position: absolute; inset: 0; overflow: hidden; }
.stars, .stars:before, .stars:after {
  position: absolute; inset: 0; content: "";
  background-image:
    radial-gradient(circle, rgba(255,255,255,.8) 0 1px, transparent 1.5px),
    radial-gradient(circle, rgba(255,255,255,.55) 0 1px, transparent 1.5px);
  background-size: 137px 151px, 211px 183px; background-position: 12px 20px, 70px 80px; opacity: .65;
}
.stars:before { transform: translate(80px,40px); opacity: .35; }
.stars:after { transform: translate(-50px,100px); opacity: .25; }

#garden {
  position: absolute; left: 0; right: 0; bottom: 0; height: 29vh; min-height: 170px;
  transition: background 2s ease, filter 2s ease;
  background:
    linear-gradient(to top, rgba(10,28,16,.95), rgba(10,28,16,.05)),
    radial-gradient(ellipse at 20% 100%, #789d5e 0 3%, transparent 4%),
    radial-gradient(ellipse at 75% 100%, #6b8d51 0 4%, transparent 5%);
}
#garden:before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(circle at 8% 72%, #ffd76a 0 3px, transparent 4px),
    radial-gradient(circle at 13% 83%, #ff9eb5 0 4px, transparent 5px),
    radial-gradient(circle at 28% 78%, #ffe37d 0 3px, transparent 4px),
    radial-gradient(circle at 48% 88%, #ffb4c9 0 4px, transparent 5px),
    radial-gradient(circle at 65% 74%, #fff1a2 0 3px, transparent 4px),
    radial-gradient(circle at 82% 84%, #ff9eb5 0 4px, transparent 5px);
  opacity: .75;
}
.season-spring #garden { background: linear-gradient(to top, rgba(25,65,30,.96), rgba(40,110,55,.05)), linear-gradient(120deg, #8bd6e9, #f5f4d2 55%, #86c77b); }
.season-summer #garden { background: linear-gradient(to top, rgba(10,70,38,.96), rgba(20,130,120,.08)), linear-gradient(120deg, #32a9d1, #ffd77b 55%, #58bb6a); }
.season-autumn #garden { background: linear-gradient(to top, rgba(67,36,17,.97), rgba(128,78,30,.05)), linear-gradient(120deg, #8e4f29, #f1a849 55%, #573522); }
.season-winter #garden { background: linear-gradient(to top, rgba(12,28,45,.98), rgba(80,120,160,.06)), linear-gradient(120deg, #7c9eb9, #e9f3fa 55%, #4d718d); }
.season-spring #garden:after, .season-summer #garden:after, .season-autumn #garden:after, .season-winter #garden:after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 55%; opacity: .45;
}
.season-spring #garden:after { background: radial-gradient(ellipse at 20% 100%, #91bf62 0 15%, transparent 16%), radial-gradient(ellipse at 65% 100%, #73a853 0 18%, transparent 19%); }
.season-summer #garden:after { background: radial-gradient(ellipse at 20% 100%, #43a15b 0 18%, transparent 19%), radial-gradient(ellipse at 70% 100%, #2d8e63 0 20%, transparent 21%); }
.season-autumn #garden:after { background: radial-gradient(ellipse at 20% 100%, #b56b32 0 17%, transparent 18%), radial-gradient(ellipse at 70% 100%, #7d4b2d 0 21%, transparent 22%); }
.season-winter #garden:after { background: linear-gradient(to top, rgba(235,245,252,.5), transparent 65%); }

header {
  position: absolute; z-index: 20; left: 0; right: 0; top: 0; height: 66px; padding: 0 28px;
  display: flex; align-items: center; gap: 34px;
  background: linear-gradient(to bottom, rgba(3,9,18,.92), rgba(3,9,18,.35), transparent);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.logo { font-size: 22px; font-weight: 800; letter-spacing: .5px; }
.logo span { font-weight: 400; color: #aab8c8; font-size: 13px; margin-left: 12px; }
nav { display: flex; gap: 25px; font-size: 13px; color: #b8c5d5; }
nav a { cursor: pointer; }
.login { margin-left: auto; border: 1px solid #8190a3; border-radius: 20px; padding: 8px 15px; font-size: 12px; }

.side { position: absolute; z-index: 15; top: 95px; width: 215px; padding: 18px; border: 1px solid rgba(255,255,255,.15); background: rgba(7,15,27,.72); backdrop-filter: blur(12px); border-radius: 14px; }
.left { left: 20px; }

/* 26/9/24/09시 .manse-box 새로 만들기 */
.manse-box { left: 255px; width: 240px; max-height: 70vh; overflow-y: auto; }
.manse-box .cal-tab.active { background: #f1ce8d !important; color: #241b09 !important; font-weight: 700; }
.manse-box .form-row { display: flex; gap: 6px; margin-bottom: 8px; }
.manse-box select { flex: 1; padding: 8px; border-radius: 8px; border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.05); color: #eef5ff; font-size: 11px; }
.manse-box select option { background: #0a1626; color: #eef5ff; }


.manse-result { margin-top: 12px; font-size: 11px; }
.manse-pillar-mini { display: inline-block; text-align: center; margin: 2px; padding: 6px 4px; background: rgba(255,255,255,.05); border-radius: 8px; min-width: 34px; }
/* 26/9/24/09시 .manse-box 새로 만들기 */

/* 26/9/25 오행별 색상 (甲乙寅卯=목/초록, 丙丁巳午=화/빨강, 戊己辰戌丑未=토/노랑, 庚辛申酉=금/흰색, 壬癸亥子=수/검정)만들기 */
.elem-wood { background: #2ecc71 !important; color: #0d2e1a !important; }
.elem-fire { background: #e74c3c !important; color: #fff !important; }
.elem-earth { background: #f1c40f !important; color: #3a2e00 !important; }
.elem-metal { background: #ecf0f1 !important; color: #2c3e50 !important; }
.elem-water { background: #34495e !important; color: #fff !important; }
/* 26/9/25 오행별 색상 (甲乙寅卯=목/초록, 丙丁巳午=화/빨강, 戊己辰戌丑未=토/노랑, 庚辛申酉=금/흰색, 壬癸亥子=수/검정)만들기 */


/* 26/9/26/10시 .manse-box 4x7 그리드 새로 색상 넣기 */
.manse-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; border: 1px solid rgba(255,255,255,.15); border-radius: 10px; overflow: hidden; margin-top: 10px; }
.manse-cell { text-align: center; padding: 6px 2px; font-size: 10px; }
.manse-cell.big { padding: 8px 2px; font-size: 15px; font-weight: 700; border-radius: 0; }
.manse-cell.tg { background: #85B7EB; color: #042C53; }
.manse-cell.hidden-stem { background: rgba(255,255,255,.05); color: #9fb1c4; font-size: 9px; }
.manse-cell.stage { background: #2c5aa0; color: #fff; }
.manse-cell.sinsal { background: #e05a4a; color: #fff; }
.manse-col-label { text-align: center; font-size: 9px; color: #7a8ba0; padding: 3px 0; }
/* 26/9/26/10시 .manse-box 4x7 그리드 새로 색상 넣기 */

/* 26/9/26/23:30 새로 색상 넣기 */
.manse-tg { background: #85B7EB; color: #042C53; font-size: 9px; padding: 2px 0; margin-top: 2px; border-radius: 4px; }
.manse-stage { background: #2c5aa0; color: #fff; font-size: 9px; padding: 2px 0; margin-top: 2px; border-radius: 4px; }
.manse-sinsal { background: #e05a4a; color: #fff; font-size: 9px; padding: 2px 0; margin-top: 2px; border-radius: 4px; }
/* 26/9/26/23:30 새로 색상 넣기 */


.right { right: 20px; }
.side h2 { margin: 0 0 10px; font-size: 18px; }
.side p { font-size: 12px; color: #b9c5d2; line-height: 1.7; margin: 8px 0; }
.season-box { border: 1px solid rgba(255,255,255,.2); padding: 13px; border-radius: 12px; margin-top: 12px; background: rgba(255,255,255,.04); }
.season-name { font-size: 16px; font-weight: 700; }
.season-date { font-size: 11px; color: #b9c5d2; margin-top: 3px; }
.cta { margin-top: 13px; width: 100%; border: 1px solid rgba(255,255,255,.55); background: rgba(255,255,255,.06); color: #fff; border-radius: 20px; padding: 9px; cursor: pointer; }

.universe { position: absolute; z-index: 5; left: 50%; top: 50%; width: min(76vw,820px); height: min(76vw,820px); max-height: 78vh; max-width: 820px; transform: translate(-50%,-46%); }
.orbit { position: absolute; left: 50%; top: 50%; border: 1px solid rgba(210,225,245,.22); border-radius: 50%; transform: translate(-50%,-50%); box-shadow: 0 0 20px rgba(100,160,255,.035) inset; }
.o1 { width: 16%; height: 16%; } .o2 { width: 25%; height: 25%; } .o3 { width: 34%; height: 34%; }
.o4 { width: 44%; height: 44%; } .o5 { width: 55%; height: 55%; } .o6 { width: 66%; height: 66%; }
.o7 { width: 77%; height: 77%; } .o8 { width: 88%; height: 88%; } .o9 { width: 99%; height: 99%; }

.sun {
  position: absolute; z-index: 10; left: 50%; top: 50%; width: 118px; height: 118px; transform: translate(-50%,-50%); border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff6a7 0 8%, #ffd24a 20%, #ff9e16 55%, #e96800 72%, transparent 74%);
  /* 태양빛 줄이기 26/9/20 10시
  box-shadow: 0 0 28px #ffb52e, 0 0 70px rgba(255,166,31,.55), 0 0 130px rgba(255,130,0,.22);
  */
  box-shadow: 0 0 20px #ffb52e, 0 0 35px rgba(255,166,31,.4), 0 0 50px rgba(255,130,0,.15);
  display: flex; align-items: center; justify-content: center; text-align: center; cursor: pointer;
}
.sun b { font-size: 17px; text-shadow: 0 1px 3px #7b2d00; }
.sun small { display: block; font-size: 9px; margin-top: 3px; }
.sunlinks { position: absolute; top: 67%; left: 50%; transform: translateX(-50%); z-index: 11; color: #f5d58a; font-size: 11px; white-space: nowrap; text-shadow: 0 0 8px #000; }

.planet { position: absolute; z-index: 12; left: 50%; top: 50%; width: 38px; height: 38px; border-radius: 50%; cursor: pointer; transform-origin: center; transition: filter .25s; }
.planet:hover { filter: brightness(1.45) drop-shadow(0 0 10px rgba(255,255,255,.7)); z-index: 30; }
/* 행성들에 살짝 더 밝은 테두리/그림자 추가위해 아래로 교체 26/9/18 10시 
.planet .ball { width: 100%; height: 100%; border-radius: 50%; box-shadow: inset -8px -6px 10px rgba(0,0,0,.55), inset 5px 4px 8px rgba(255,255,255,.25), 0 0 8px rgba(255,255,255,.1); }
*/
/* 행성들에 살짝 더 밝은 테두리/그림자 제거 위해 아래로 교체26/9/18 10:20시
.planet .ball { width: 100%; height: 100%; border-radius: 50%; box-shadow: inset -8px -6px 10px rgba(0,0,0,.55), inset 5px 4px 8px rgba(255,255,255,.25), 0 0 12px 4px rgba(255,255,255,.35); background-color: #444; }
*/
.planet .ball { width: 100%; height: 100%; border-radius: 50%; box-shadow: inset -8px -6px 10px rgba(0,0,0,.55), inset 5px 4px 8px rgba(255,255,255,.25), 0 0 12px 4px rgba(255,255,255,.35); }

.planet .label { position: absolute; top: 43px; left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: 10px; color: #dce6f0; text-shadow: 0 1px 4px #000; }
/* 지구파란색 입히기 */
.planet[data-planet="earth"] .label { color: #62d2ff; font-weight: 800; font-size: 12px; text-shadow: 0 0 8px rgba(98,210,255,.8); }
.planet[data-planet="earth"] .ball { box-shadow: 0 0 20px rgba(98,210,255,.6), inset -8px -6px 10px rgba(0,0,0,.55); }

/* 행성들 색 입히기 안됐던것 수정 .mercury .ball -> [data-planet="mercury"] .ball 이렇게 수정
.mercury { margin: -19px; } .mercury .ball { background: radial-gradient(circle at 35% 30%, #ddd, #777 58%, #333); }
.venus { margin: -21px; width: 42px; height: 42px; } .venus .ball { background: radial-gradient(circle at 35% 30%, #ffe18c, #d48a27 55%, #704014); }
.earth { margin: -25px; width: 50px; height: 50px; } .earth .ball { background: radial-gradient(circle at 35% 30%, #62d2ff, #1977bd 45%, #083b76); }
.earth .ball:after { content: ""; display: block; width: 100%; height: 100%; border-radius: 50%; background: radial-gradient(ellipse at 50% 40%, transparent 0 35%, rgba(54,178,83,.8) 36% 44%, transparent 45%), radial-gradient(ellipse at 30% 70%, rgba(54,178,83,.8) 0 12%, transparent 13%); }
.mars { margin: -21px; width: 42px; height: 42px; } .mars .ball { background: radial-gradient(circle at 33% 27%, #ff9d74, #c34d32 55%, #5e211a); }
.jupiter { margin: -32px; width: 64px; height: 64px; } .jupiter .ball { background: repeating-linear-gradient(0deg, #b47b49 0 7px, #e7c49a 7px 13px, #8b5a39 13px 19px, #d9ad78 19px 25px); box-shadow: inset -15px -8px 17px rgba(0,0,0,.45); }
.saturn { margin: -29px; width: 58px; height: 58px; } .saturn .ball { background: radial-gradient(circle at 35% 30%, #eed4a1, #a77b4a 60%, #5f442e); }
.saturn:after { content: ""; position: absolute; left: 50%; top: 50%; width: 86px; height: 24px; border: 3px solid rgba(225,205,158,.7); border-radius: 50%; transform: translate(-50%,-50%) rotate(-16deg); box-shadow: 0 0 0 2px rgba(100,75,45,.4); }
.uranus { margin: -25px; width: 50px; height: 50px; } .uranus .ball { background: radial-gradient(circle at 35% 30%, #a8efff, #4eafd1 58%, #22677e); }
.neptune { margin: -25px; width: 50px; height: 50px; } .neptune .ball { background: radial-gradient(circle at 35% 30%, #6e8cff, #2642a4 58%, #101d5e); }
.pluto { margin: -18px; width: 36px; height: 36px; } .pluto .ball { background: radial-gradient(circle at 35% 30%, #e8d8c7, #927f72 60%, #4d403b); }
*/


/* ============================================================
   행성 색상 및 크기 수정  26/9/20 12시 교체
   HTML 구조:
   <div class="planet" data-planet="mercury">
       <div class="ball"></div>
   </div>

   중요:
   .mercury .ball 방식이 아니라
   [data-planet="mercury"] .ball 방식으로 선택합니다.
   ============================================================ */

/* 수성 */
[data-planet="mercury"] {
  margin: -19px;
  width: 38px;
  height: 38px;
}

[data-planet="mercury"] .ball {
  background: radial-gradient(
    circle at 35% 30%,
    #ddd,
    #777 58%,
    #333
  );
}


/* 금성 */
[data-planet="venus"] {
  margin: -21px;
  width: 42px;
  height: 42px;
}

[data-planet="venus"] .ball {
  background: radial-gradient(
    circle at 35% 30%,
    #ffe18c,
    #d48a27 55%,
    #704014
  );
}


/* 지구 */
[data-planet="earth"] {
  margin: -25px;
  width: 50px;
  height: 50px;
}

[data-planet="earth"] .ball {
  position: relative;
  overflow: hidden;
  background: radial-gradient(
    circle at 35% 30%,
    #62d2ff,
    #1977bd 45%,
    #083b76
  );
}

/* 지구 대륙 */
[data-planet="earth"] .ball::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;

  background:
    radial-gradient(
      ellipse at 55% 35%,
      transparent 0 28%,
      rgba(67, 190, 93, 0.95) 29% 39%,
      transparent 40%
    ),
    radial-gradient(
      ellipse at 30% 70%,
      rgba(57, 178, 82, 0.95) 0 13%,
      transparent 14%
    ),
    radial-gradient(
      ellipse at 72% 66%,
      rgba(68, 184, 87, 0.85) 0 9%,
      transparent 10%
    );
}


/* 화성 */
[data-planet="mars"] {
  margin: -21px;
  width: 42px;
  height: 42px;
}

[data-planet="mars"] .ball {
  background: radial-gradient(
    circle at 33% 27%,
    #ff9d74,
    #c34d32 55%,
    #5e211a
  );
}


/* 목성 */
[data-planet="jupiter"] {
  margin: -32px;
  width: 64px;
  height: 64px;
}

[data-planet="jupiter"] .ball {
  background: repeating-linear-gradient(
    0deg,
    #b47b49 0 7px,
    #e7c49a 7px 13px,
    #8b5a39 13px 19px,
    #d9ad78 19px 25px
  );
}


/* 토성 */
[data-planet="saturn"] {
  margin: -29px;
  width: 58px;
  height: 58px;
}

[data-planet="saturn"] .ball {
  background: radial-gradient(
    circle at 35% 30%,
    #eed4a1,
    #a77b4a 60%,
    #5f442e
  );
}

/* 토성 고리 */
[data-planet="saturn"]::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 86px;
  height: 24px;

  transform: translate(-50%, -50%) rotate(-15deg);

  border: 3px solid rgba(218, 191, 135, 0.8);
  border-radius: 50%;

  pointer-events: none;
}


/* 천왕성 */
[data-planet="uranus"] {
  margin: -25px;
  width: 50px;
  height: 50px;
}

[data-planet="uranus"] .ball {
  background: radial-gradient(
    circle at 35% 30%,
    #a8efff,
    #4eafd1 58%,
    #22677e
  );
}


/* 해왕성 */
[data-planet="neptune"] {
  margin: -25px;
  width: 50px;
  height: 50px;
}

[data-planet="neptune"] .ball {
  background: radial-gradient(
    circle at 35% 30%,
    #6e8cff,
    #2642a4 58%,
    #101d5e
  );
}


/* 명왕성 */
[data-planet="pluto"] {
  margin: -18px;
  width: 36px;
  height: 36px;
}

[data-planet="pluto"] .ball {
  background: radial-gradient(
    circle at 35% 30%,
    #e8d8c7,
    #927f72 60%,
    #4d403b
  );
}


#seasonBadge { position: absolute; z-index: 18; left: 50%; top: 83px; transform: translateX(-50%); text-align: center; }
#seasonBadge .sunicon { font-size: 25px; }
#seasonBadge strong { display: block; font-size: 13px; }
#seasonBadge span { font-size: 10px; color: #aab6c4; }

.planet-list { display: flex; flex-direction: column; gap: 8px; }
.pitem { display: flex; align-items: center; gap: 8px; font-size: 11px; color: #dbe5ee; cursor: pointer; padding: 5px; border-radius: 8px; }
.pitem:hover { background: rgba(255,255,255,.07); }
.pitem-members { font-size: 10px; color: #f1ce8d; margin-top: 2px; }
.dot { width: 22px; height: 22px; border-radius: 50%; flex: none; box-shadow: inset -4px -3px 5px rgba(0,0,0,.45), inset 3px 2px 4px rgba(255,255,255,.2); }
.dot.mer { background: #aaa; } .dot.ven { background: #d99b39; } .dot.ear { background: #258bd0; }
.dot.mar { background: #c65b3e; } .dot.jup { background: #c28b59; } .dot.sat { background: #c9aa78; }
.dot.ura { background: #62c5dd; } .dot.nep { background: #405ac2; } .dot.plu { background: #9b887e; }

.bottom { position: absolute; z-index: 15; left: 50%; bottom: 18px; transform: translateX(-50%); width: min(600px,70vw); padding: 9px 14px; border: 1px solid rgba(255,255,255,.16); border-radius: 28px; background: rgba(6,14,25,.72); backdrop-filter: blur(10px); display: flex; justify-content: space-around; align-items: center; }
.season-btn { border: 0; background: none; color: #b7c4d2; padding: 7px 13px; border-radius: 18px; cursor: pointer; font-size: 11px; }
.season-btn.active { background: rgba(255,255,255,.13); color: #fff; }
.clock { position: absolute; z-index: 15; right: 20px; bottom: 20px; font-size: 11px; color: #d9e3ed; padding: 10px 14px; border: 1px solid rgba(255,255,255,.13); border-radius: 22px; background: rgba(4,12,22,.65); }

.modal { position: fixed; z-index: 100; inset: 0; background: rgba(0,0,0,.58); display: none; align-items: center; justify-content: center; backdrop-filter: blur(6px); }
.modal.show { display: flex; }
.dialog { width: min(390px,90vw); padding: 25px; border: 1px solid rgba(255,255,255,.2); border-radius: 18px; background: linear-gradient(145deg,#17283d,#091322); box-shadow: 0 25px 80px rgba(0,0,0,.55); text-align: center; max-height: 80vh; overflow-y: auto; }
.dialog .planet-big { width: 72px; height: 72px; margin: 0 auto 12px; border-radius: 50%; box-shadow: inset -12px -8px 15px rgba(0,0,0,.5), 0 0 20px rgba(255,255,255,.1); }
.dialog h2 { margin: 6px 0; font-size: 21px; }
.dialog p { font-size: 13px; color: #b8c5d4; line-height: 1.7; }
.destination { margin: 16px 0; padding: 12px; border-radius: 10px; background: rgba(255,255,255,.05); font-size: 12px; }
.actions { display: flex; gap: 9px; }
.actions button { flex: 1; padding: 11px; border-radius: 22px; border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.06); color: #fff; cursor: pointer; }
.actions .go { background: #e6b64e; color: #17110a; border: 0; font-weight: 800; }

/* ⭐ 신규: 등록된 멤버 목록 + 상세보기 */
.member-list { text-align: left; margin: 14px 0; max-height: 200px; overflow-y: auto; }
.member-item { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; background: rgba(255,255,255,.05); border-radius: 10px; margin-bottom: 6px; cursor: pointer; }
.member-item:hover { background: rgba(255,255,255,.1); }
.member-name { font-size: 13px; font-weight: 700; }
.member-arrow { color: #f1ce8d; font-size: 12px; }
.member-detail { text-align: left; background: rgba(255,255,255,.05); border-radius: 12px; padding: 16px; margin: 14px 0; line-height: 1.8; font-size: 13px; }
.member-detail b { color: #f1ce8d; }
.member-empty { font-size: 12px; color: #7a8ba0; padding: 20px 0; }

@media (max-width: 850px) {
  .side { display: none; }
  .universe { width: 90vw; height: 90vw; max-height: none; top: 49%; }
  .bottom { width: 92vw; }
  .clock { display: none; }
  .sun { width: 92px; height: 92px; }
  .sunlinks { top: 64%; font-size: 9px; }
}