/* ============================================================
   나의 성계 (관계 지도) — 진입 배너 + 모달 + 받은 링크 화면
   ============================================================ */

/* 진입 배너 */
.sky-banner{
  display:flex;align-items:center;gap:13px;width:100%;max-width:420px;
  margin:20px auto 0;padding:14px 16px;cursor:pointer;
  font-family:inherit;text-align:left;
  border-radius:16px;color:#f0ecff;
  background:linear-gradient(135deg,rgba(90,70,200,.28),rgba(180,60,255,.20));
  border:1.5px solid rgba(150,120,255,.5);
  box-shadow:0 0 22px rgba(120,90,240,.22),inset 0 1px 0 rgba(255,255,255,.08);
  transition:transform .14s,box-shadow .2s,border-color .2s;
}
.sky-banner:hover{transform:translateY(-2px);border-color:rgba(170,140,255,.85);
  box-shadow:0 0 34px rgba(140,110,255,.42),inset 0 1px 0 rgba(255,255,255,.12);}
.sky-banner:active{transform:scale(.985);}
.sky-mini{position:relative;width:44px;height:44px;flex-shrink:0;}
.sky-mini i{position:absolute;left:50%;top:50%;border-radius:50%;}
.sky-mini .sun{width:14px;height:14px;margin:-7px 0 0 -7px;background:#ffd76a;
  box-shadow:0 0 14px rgba(255,205,105,.9);}
.sky-mini .orb{width:44px;height:44px;margin:-22px 0 0 -22px;border:1px dashed rgba(180,200,255,.28);}
.sky-mini .p1,.sky-mini .p2{width:7px;height:7px;margin:-3.5px 0 0 -3.5px;}
.sky-mini .p1{background:#7fe8a8;box-shadow:0 0 8px #7fe8a8;animation:skyOrb1 7s linear infinite;}
.sky-mini .p2{background:#ff8a9c;box-shadow:0 0 8px #ff8a9c;animation:skyOrb2 11s linear infinite;}
@keyframes skyOrb1{from{transform:rotate(0) translateX(17px) rotate(0);}to{transform:rotate(360deg) translateX(17px) rotate(-360deg);}}
@keyframes skyOrb2{from{transform:rotate(180deg) translateX(11px) rotate(0);}to{transform:rotate(540deg) translateX(11px) rotate(-360deg);}}
.sky-btxt{flex:1;min-width:0;}
.sky-btxt b{display:block;font-size:14.5px;font-weight:700;letter-spacing:.02em;}
.sky-btxt small{display:block;font-size:11.5px;color:#b8aee8;margin-top:2px;}
.sky-arrow{color:rgba(200,180,255,.7);font-size:15px;flex-shrink:0;}

/* ── 성계 전용 페이지(sky.html) ── */
.sky-body{
  margin:0;min-height:100vh;color:#f0eaff;
  font-family:'Pretendard','Apple SD Gothic Neo','Malgun Gothic',sans-serif;
  background:radial-gradient(130% 80% at 50% -10%,#1b1f3d 0%,#0f1126 55%,#07080f 100%);
  background-attachment:fixed;
}
.top-tabs{display:flex;gap:6px;max-width:440px;margin:0 auto;padding:14px 14px 4px;}
.top-tabs .tt{
  flex:1;text-align:center;text-decoration:none;padding:11px 0;border-radius:12px;
  font-size:13.5px;font-weight:700;letter-spacing:.02em;color:#a79ed6;
  background:rgba(255,255,255,.04);border:1px solid #2c2a52;
  transition:color .18s,border-color .18s,background .18s;
}
.top-tabs .tt:hover{color:#d6cdff;border-color:#453e7d;}
/* 타로 페이지엔 우상단에 언어 토글이 떠 있어서 그 아래로 내린다 */
.scene-wrap .top-tabs{padding-top:50px;}
.top-tabs .tt.on{
  color:#fff;border-color:rgba(150,120,255,.7);
  background:linear-gradient(135deg,rgba(120,90,240,.34),rgba(180,60,255,.24));
  box-shadow:0 0 20px rgba(120,90,240,.28);
}
/* 페이지 모드에선 오버레이가 아니라 그냥 본문 */
.sky-modal.page{
  position:static;inset:auto;z-index:auto;background:none;backdrop-filter:none;
  display:block;opacity:1;visibility:visible;pointer-events:auto;overflow:visible;
  padding:8px 12px 0;transition:none;
}
.sky-modal.page .sky-sheet{transform:none;box-shadow:none;border:none;background:none;padding:8px 0 0;}
.sky-modal.page .sky-close{display:none;}
.sky-foot{max-width:440px;margin:24px auto 0;padding:18px 16px 40px;text-align:center;
  border-top:1px solid rgba(255,255,255,.06);}
.sky-foot p{margin:0;font-size:11.5px;color:#7d76a8;letter-spacing:.02em;}
.sky-foot-note{margin-top:6px !important;color:#5f5989 !important;line-height:1.6;}

/* 모달 */
.sky-modal{
  position:fixed;inset:0;z-index:130;background:rgba(6,6,14,.8);backdrop-filter:blur(6px);
  display:flex;align-items:flex-start;justify-content:center;
  opacity:0;pointer-events:none;transition:opacity .25s;overflow-y:auto;padding:22px 12px 50px;
}
.sky-modal.open{opacity:1;pointer-events:auto;}
.sky-sheet{
  width:100%;max-width:440px;margin:auto;padding:16px 16px 24px;
  background:radial-gradient(120% 90% at 50% 0%,#1b1f3d 0%,#12142a 58%,#0a0b16 100%);
  border:1px solid #2a3059;border-radius:22px;box-shadow:0 24px 70px rgba(0,0,0,.65);
  transform:translateY(16px);transition:transform .3s;
}
.sky-modal.open .sky-sheet{transform:translateY(0);}
.sky-head{display:flex;align-items:center;justify-content:space-between;
  font-size:17px;font-weight:800;color:#f0eaff;letter-spacing:.4px;margin-bottom:10px;}
.sky-head em{font-style:normal;font-size:12.5px;font-weight:400;color:#9d95cc;}
.sky-close{background:none;border:none;color:#a49ad2;font-size:20px;cursor:pointer;padding:4px 6px;}

.sky-guide{text-align:center;font-size:13.5px;color:#c3bbf0;font-weight:600;margin:14px 0 12px;}
.sky-row{display:flex;gap:7px;margin-bottom:9px;}
.sky-row input{font-family:inherit;font-size:14px;color:#f0eaff;background:rgba(255,255,255,.05);
  border:1px solid #3a3460;border-radius:9px;padding:10px 11px;min-width:0;}
.sky-row input[type=text]{flex:1;}
.sky-row input[type=date]{flex:1.25;color-scheme:dark;}
.sky-row input:focus{outline:none;border-color:rgba(150,120,255,.8);background:rgba(255,255,255,.08);}
.sky-go,.sky-addbtn{font-family:inherit;font-weight:700;cursor:pointer;color:#fff;border:none;
  background:linear-gradient(135deg,#7b5be6,#a94fd6);}
.sky-go{width:100%;font-size:15px;border-radius:24px;padding:12px 0;box-shadow:0 6px 18px rgba(123,91,230,.4);}
.sky-addbtn{font-size:13.5px;border-radius:9px;padding:0 16px;flex-shrink:0;}
.sky-go:active,.sky-addbtn:active{transform:scale(.97);}

/* 성계 */
.sky-space{position:relative;height:400px;border-radius:18px;overflow:hidden;cursor:pointer;
  transition:height .35s ease;
  background:
    radial-gradient(40% 32% at 76% 18%,rgba(130,80,230,.22),transparent 72%),
    radial-gradient(44% 36% at 18% 80%,rgba(40,120,210,.18),transparent 72%),
    radial-gradient(72% 62% at 50% 48%,#121830 0%,#0a0e1e 56%,#05060e 100%);
  border:1px solid #232a4d;}
.sky-stars{position:absolute;inset:0;pointer-events:none;}
.sky-stars i{position:absolute;background:#fff;border-radius:50%;animation:skyTw 5s ease-in-out infinite;}
@keyframes skyTw{0%,100%{opacity:.2;}50%{opacity:.8;}}
.sky-paths{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;}
.sky-core{position:absolute;left:50%;top:50%;width:54px;height:54px;margin:-27px 0 0 -27px;border-radius:50%;z-index:5;
  background:radial-gradient(circle at 50% 46%,#fffdf4 0%,#ffe6a0 24%,#ffc457 58%,#e2871f 100%);
  box-shadow:0 0 22px rgba(255,205,105,.9),0 0 60px rgba(255,180,70,.45),0 0 120px rgba(255,160,50,.2);
  animation:skyPulse 5s ease-in-out infinite;}
@keyframes skyPulse{0%,100%{filter:brightness(1);}50%{filter:brightness(1.15);}}
.sky-core-lbl{position:absolute;left:50%;top:calc(50% + 34px);transform:translateX(-50%);z-index:6;
  text-align:center;white-space:nowrap;pointer-events:none;}
.sky-core-lbl b{font-size:12px;font-weight:800;color:#fff3d4;text-shadow:0 1px 6px #000;}
.sky-core-lbl small{display:block;font-size:9.5px;color:#c0a066;}
.sky-empty{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);font-size:11.5px;
  color:#6b73a0;pointer-events:none;}

.sky-pl{position:absolute;left:0;top:0;cursor:pointer;will-change:transform;}
.sky-ball{border-radius:50%;}
.sky-ring{position:absolute;left:50%;top:50%;border-radius:50%;border-style:solid;
  transform:translate(-50%,-50%) rotate(-14deg) scaleY(.24);pointer-events:none;}
.sky-lbl{position:absolute;left:50%;transform:translateX(-50%);text-align:center;white-space:nowrap;pointer-events:none;}
.sky-lbl b{display:block;font-size:11.5px;font-weight:700;color:#f2eeff;text-shadow:0 1px 5px #000,0 0 10px #000;}
.sky-lbl span{display:block;font-size:9.5px;margin-top:1px;font-weight:700;}
.sky-pl.dim{opacity:.28;}
.sky-chip{position:absolute;transform:translate(-50%,-50%);font-size:10px;font-weight:800;
  padding:3px 9px;border-radius:20px;white-space:nowrap;pointer-events:none;z-index:10;
  background:#0b0f22;opacity:0;transition:opacity .2s;}
.sky-chip.on{opacity:1;}

/* 관계 그룹 라벨 (구역 바깥 고정) */
.sky-gchip{position:absolute;transform:translate(-50%,-50%);z-index:8;pointer-events:none;
  font-size:10px;font-weight:700;letter-spacing:.02em;white-space:nowrap;
  padding:3px 9px;border-radius:20px;background:rgba(9,11,24,.88);border:1px solid;}
.sky-gchip b{font-weight:800;}

.sky-privacy{font-size:11px;color:#7c74ad;line-height:1.6;text-align:center;margin:2px 0 12px;}
.sky-share2{flex:1;font-family:inherit;font-size:13px;font-weight:700;cursor:pointer;border-radius:22px;
  padding:12px 10px;color:#d7cffa;background:rgba(255,255,255,.06);border:1px solid #4a4280;}
.sky-cta-wrap{margin-top:14px;}
.sky-cta-wrap:empty{margin:0;}

/* 초대 폼 */
.si-form{display:flex;flex-direction:column;gap:9px;margin-bottom:12px;}
.si-form input{font-family:inherit;font-size:15px;color:#f0eaff;background:rgba(255,255,255,.06);
  border:1px solid #3a3460;border-radius:11px;padding:13px 13px;}
.si-form input[type=date]{color-scheme:dark;}
.si-form input:focus{outline:none;border-color:rgba(255,120,180,.75);}
.si-note{font-size:11.5px;color:#8b83bb;line-height:1.65;margin:0 0 16px;}
.si-note b{color:#c9bdf5;}
.iv-res{margin-top:22px;padding-top:18px;border-top:1px solid #2b2750;}
.iv-rel{font-size:19px;font-weight:800;margin:4px 0 6px;}
.iv-rel b{font-weight:800;}

.sky-legend{text-align:center;font-size:11px;color:#7d86b8;margin:9px 0 0;}
.sky-counts{display:grid;grid-template-columns:repeat(6,1fr);gap:5px;margin-top:12px;}
.sky-cnt{background:rgba(255,255,255,.04);border:1px solid #2b2750;border-radius:11px;padding:9px 2px;text-align:center;}
.sky-cnt b{display:block;font-size:17px;font-weight:800;line-height:1.1;}
.sky-cnt span{font-size:9px;color:#9d95cc;}

/* 상세 */
/* 항상 자리를 차지해서 탭할 때 모달 높이가 안 튀게 함 */
.sky-detail{display:flex;align-items:center;justify-content:center;
  margin-top:13px;background:rgba(255,255,255,.045);
  border:1px solid #302b55;border-radius:14px;padding:14px;
  min-height:224px;}
.sky-detail.show{display:block;}
.sky-detail .sd-hint{font-size:12px;color:#6b649a;text-align:center;line-height:1.6;}
.sd-top{display:flex;gap:12px;align-items:flex-start;}
.sd-img{width:62px;height:93px;object-fit:cover;border-radius:9px;flex-shrink:0;border:1px solid #4a4280;}
.sd-body{flex:1;min-width:0;}
.sd-rel{font-size:11px;font-weight:800;padding:3px 10px;border-radius:20px;display:inline-block;}
.sd-name{font-size:15px;font-weight:800;margin-top:4px;}
.sd-card{font-size:11.5px;}
.sd-line{font-size:12px;line-height:1.6;color:#cec5f0;margin:10px 0 0;}
.sd-acts{display:flex;gap:8px;margin-top:12px;}
.sd-send,.sd-copy{font-family:inherit;font-size:13px;font-weight:700;cursor:pointer;
  border-radius:22px;padding:11px 12px;border:none;}
.sd-send{flex:1.6;color:#fff;background:linear-gradient(135deg,#e6557f,#b94fd6);
  box-shadow:0 5px 16px rgba(230,85,127,.35);}
.sd-copy{flex:1;color:#c8bfe8;background:rgba(255,255,255,.06);border:1px solid #3a3460;}
.sd-send:active,.sd-copy:active{transform:scale(.96);}

.sky-add{margin-top:16px;padding-top:14px;border-top:1px solid #2a2648;}
/* 케미 순위 리스트 */
.sl-head{font-size:12.5px;font-weight:800;color:#e5dcff;margin:2px 0 9px;}
.sl-head em{font-style:normal;font-weight:400;font-size:11px;color:#8b83bb;}
.sl-row{display:flex;align-items:center;gap:9px;padding:9px 4px;cursor:pointer;
  border-bottom:1px solid rgba(255,255,255,.05);}
.sl-row:last-child{border-bottom:none;}
.sl-row:hover{background:rgba(255,255,255,.03);border-radius:9px;}
.sl-rank{flex-shrink:0;width:18px;text-align:center;font-size:12px;font-weight:800;color:#6f68a0;}
.sl-rank.top{color:#ffd76a;font-size:14px;}
.sl-dot{flex-shrink:0;width:16px;height:16px;border-radius:50%;}
.sl-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px;}
.sl-name{font-size:13px;font-weight:700;color:#f0ecff;}
.sl-card{font-size:10.5px;}
.sl-rel{font-size:11px;font-weight:700;}
.sl-desc{font-size:10.5px;color:#8b83bb;line-height:1.45;}
.sl-score{flex-shrink:0;font-size:15px;font-weight:800;}
.sl-del{flex-shrink:0;background:none;border:none;color:#5f5885;font-size:13px;cursor:pointer;padding:4px 2px;}
.sl-del:hover{color:#ff6b9d;}

/* 공유 링크 안의 참여 폼 */
.sky-join{margin-top:16px;padding:16px 14px;border-radius:14px;
  background:linear-gradient(135deg,rgba(120,90,240,.16),rgba(255,90,150,.12));
  border:1px solid rgba(150,120,255,.35);}
.sj-h{font-size:15px;font-weight:800;color:#f2ecff;margin:0 0 5px;text-align:center;}
.sj-s{font-size:11.5px;color:#a99fd6;line-height:1.6;margin:0 0 12px;text-align:center;}
.sj-back{width:100%;margin-top:14px;font-family:inherit;font-size:12.5px;font-weight:700;
  cursor:pointer;color:#b6ace0;background:rgba(255,255,255,.06);
  border:1px solid #4a4280;border-radius:22px;padding:11px 0;}
.sj-back:active{transform:scale(.97);}
/* 상대 지도로 바로 전송되는 상태 표시 (복사·붙여넣기 대체) */
.sj-state{margin-top:14px;padding:11px 12px;border-radius:12px;text-align:center;
  font-size:12.5px;font-weight:700;color:#b6ace0;
  background:rgba(255,255,255,.05);border:1px solid #3b356b;}
.sj-state.ok{color:#8ef0b4;background:rgba(80,220,140,.10);border-color:rgba(120,240,175,.45);}
.sj-state.err{color:#ff9fae;background:rgba(255,90,120,.10);border-color:rgba(255,140,165,.45);}
.sj-retry{font-family:inherit;font-size:12.5px;font-weight:700;cursor:pointer;
  color:#ffd76a;background:none;border:none;text-decoration:underline;padding:0 2px;}

.sky-list{display:block;}
.sky-pill{font-size:11.5px;color:#cec5f0;background:rgba(255,255,255,.05);
  border:1px solid #3a3460;border-radius:20px;padding:5px 10px;cursor:pointer;}
.sky-pill em{font-style:normal;color:#8b82b8;}
.sky-pill:hover{border-color:#ff6b9d;color:#fff;}
.sky-actions{display:flex;gap:8px;margin-top:14px;}
.sky-share,.sky-reset{font-family:inherit;font-size:13px;font-weight:700;cursor:pointer;
  border-radius:22px;padding:12px 10px;}
.sky-share{flex:1.6;color:#fff;border:none;background:linear-gradient(135deg,#7b5be6,#a94fd6);
  box-shadow:0 5px 16px rgba(123,91,230,.35);}
.sky-reset{flex:1;color:#a49ad2;background:rgba(255,255,255,.05);border:1px solid #3a3460;}

/* 받은 링크 화면 */
.sky-incoming{position:fixed;inset:0;z-index:200;background:#07080f;
  display:flex;align-items:center;justify-content:center;padding:22px 16px;overflow-y:auto;}
.si-sheet{width:100%;max-width:400px;text-align:center;margin:auto;}
.si-from{font-size:12px;color:#9d95cc;letter-spacing:.08em;margin:0 0 8px;}
.si-head{font-size:24px;font-weight:800;line-height:1.45;color:#f0eaff;margin:0 0 20px;}
.si-cards{display:flex;justify-content:center;gap:14px;margin-bottom:18px;}
.si-cards figure{margin:0;width:118px;}
.si-cards img{width:100%;aspect-ratio:2/3;object-fit:cover;border-radius:11px;border:1px solid #4a4280;
  box-shadow:0 10px 30px rgba(0,0,0,.6);}
.si-cards figcaption{font-size:12.5px;font-weight:700;color:#e8e2ff;margin-top:8px;}
.si-cards small{display:block;font-size:10.5px;color:#9d95cc;font-weight:400;margin-top:2px;}
.si-score{font-size:26px;font-weight:800;margin-bottom:6px;}
.si-desc{font-size:13px;color:#c3bbea;line-height:1.6;margin:0 0 26px;}
.si-cta{width:100%;font-family:inherit;font-size:15px;font-weight:800;color:#fff;cursor:pointer;
  border:none;border-radius:26px;padding:15px 0;
  background:linear-gradient(135deg,#7b5be6,#e6557f);box-shadow:0 8px 26px rgba(160,80,220,.45);}
.si-cta:active{transform:scale(.97);}
.si-skip{margin-top:10px;background:none;border:none;color:#6f68a0;font-family:inherit;
  font-size:12.5px;cursor:pointer;text-decoration:underline;text-underline-offset:3px;}

@media (max-width:360px){
  .sky-space{height:350px;}
  .sky-counts{grid-template-columns:repeat(3,1fr);}
}