/* 고요한 밤하늘 · 별빛 명조(제목: 그란디플로라 원, 본문: 마루 부리) · 샴페인 금빛 */
:root{
  --night:#06081a;--ink:#0b0e24;--panel:rgba(255,255,255,.035);--panel-2:rgba(255,255,255,.06);
  --hair:rgba(232,211,162,.16);--line:rgba(255,255,255,.09);
  --gold:#e8d3a2;--gold-2:#cbb27a;--rose:#e9a3b6;--mint:#a6d9cb;
  --text:#ecebf4;--mute:#9b9db8;--faint:#6d7091;
  --serif-d:'Grandiflora One','MaruBuri','AppleMyungjo','Batang',serif;
  --serif:'MaruBuri','AppleMyungjo','Batang',serif;
  --r:16px;color-scheme:dark}
*{box-sizing:border-box}
html{background:var(--night)}
body{margin:0;min-height:100vh;color:var(--text);font-family:var(--serif);font-size:16px;line-height:1.7;letter-spacing:-.005em;word-break:keep-all;overflow-wrap:anywhere;
  background:
    radial-gradient(1px 1px at 12% 18%,rgba(255,255,255,.55),transparent 60%),
    radial-gradient(1px 1px at 78% 9%,rgba(255,255,255,.45),transparent 60%),
    radial-gradient(1.5px 1.5px at 64% 34%,rgba(232,211,162,.5),transparent 60%),
    radial-gradient(1px 1px at 31% 52%,rgba(255,255,255,.35),transparent 60%),
    radial-gradient(1px 1px at 88% 66%,rgba(255,255,255,.4),transparent 60%),
    radial-gradient(1px 1px at 8% 82%,rgba(255,255,255,.35),transparent 60%),
    radial-gradient(90% 50% at 50% -8%,rgba(92,96,170,.28),transparent 70%),
    radial-gradient(70% 40% at 100% 100%,rgba(120,80,140,.12),transparent 70%),
    var(--night);
  background-attachment:fixed;-webkit-font-smoothing:antialiased}
main{max-width:520px;margin:0 auto;padding:max(36px,env(safe-area-inset-top)) 18px max(56px,env(safe-area-inset-bottom))}
h1{font-family:var(--serif-d);font-weight:400;font-size:2rem;letter-spacing:-.02em;margin:0 0 10px;line-height:1.3;
  background:linear-gradient(180deg,#fff 0%,#f3ead6 55%,var(--gold) 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
h1::before{content:'✦';display:block;font-size:.8rem;letter-spacing:.6em;color:var(--gold);-webkit-text-fill-color:var(--gold);margin-bottom:14px;opacity:.85}
h2{font-family:var(--serif-d);font-weight:400;font-size:1.12rem;letter-spacing:-.01em;margin:0 0 12px;color:#f4efe2}
a{color:var(--gold);text-underline-offset:3px;text-decoration-thickness:1px}
.sub{color:var(--mute);margin:0 0 22px;font-size:.95rem;line-height:1.75}
.seg{display:inline-flex;background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:3px;margin-bottom:14px}
.seg button{border:0;background:none;color:var(--mute);padding:7px 16px;border-radius:999px;font:inherit;cursor:pointer}
.seg button[aria-pressed=true]{background:var(--gold);color:var(--night)}
button:focus-visible,input:focus-visible,textarea:focus-visible,a:focus-visible,summary:focus-visible{outline:1.5px solid var(--gold);outline-offset:3px}
::selection{background:rgba(232,211,162,.3)}

/* 하늘 */
#sky{position:relative;border-radius:22px;border:1px solid var(--hair);background:#03040e;overflow:hidden;touch-action:manipulation;
  box-shadow:0 0 0 1px rgba(0,0,0,.6),0 30px 60px -20px rgba(0,0,0,.7),0 0 80px -10px rgba(110,110,200,.18)}
#sky::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
#sky canvas.bg{position:absolute;inset:0;width:100%;height:100%;display:block}
#sky canvas.bg.fade{animation:bgin 1.6s ease}
#sky canvas.bg.fade.quick{animation-duration:.8s}
@keyframes bgin{from{opacity:0}to{opacity:1}}
#sky svg{position:relative;display:block;width:100%;height:auto}
/* 이름은 평소에 숨기고, 별자리를 누르거나(터치) 마우스를 올리거나 키보드로 고르면 보인다 */
.nm{font-family:var(--serif);paint-order:stroke;stroke:#02030a;stroke-width:2px;stroke-linejoin:round;opacity:0;letter-spacing:.02em;transition:opacity .2s;pointer-events:none}
.c.sel .nm,.c:focus-visible .nm{opacity:.95}
@media (hover:hover){.c:hover .nm{opacity:.95}}
/* 별자리 선은 평소엔 거의 보이지 않고, 고르거나 마우스를 올리면 이어진다 */
.c polyline,.cd polyline{stroke-opacity:.13;transition:stroke-opacity .25s}
.demo .cd polyline{stroke-opacity:.3}
.c:hover polyline,.c:focus-visible polyline,.c.sel polyline{stroke-opacity:.75}
.tw{animation:tw 4.5s ease-in-out infinite}
@keyframes tw{50%{opacity:.2}}
.ss{opacity:0;animation:ss 17s linear infinite}
@keyframes ss{0%{opacity:0;transform:translate(320px,40px)}2%{opacity:1}7%{opacity:0;transform:translate(150px,125px)}100%{opacity:0}}
.c{cursor:pointer}
.c:focus{outline:none}
.c:focus-visible rect{stroke:var(--gold);stroke-width:2;stroke-dasharray:4 4}
.cd{pointer-events:none}
/* 주인 별: 하늘 가운데, 선과 이름이 늘 보이고 후광이 천천히 숨 쉰다 */
.own polyline,.demo .cd.own polyline{stroke-opacity:.5}
.c.own:hover polyline,.c.own:focus-visible polyline,.c.own.sel polyline{stroke-opacity:.9}
.own .nm{font-weight:700}
.demo .own .nm{opacity:.95}
/* 눌러서 켜 둔 별(또는 "닉네임 켜기")은 이름이 계속 보인다 */
.c.show .nm{opacity:.95}
.own .halo{animation:halo 6s ease-in-out infinite;transform-origin:200px 300px}
@keyframes halo{50%{opacity:.55;transform:scale(1.08)}}
.c.new{animation:pop .9s ease-out}
@keyframes pop{0%{opacity:0;filter:drop-shadow(0 0 0 #fff)}40%{opacity:1;filter:drop-shadow(0 0 10px #fff)}100%{filter:none}}
@media (prefers-reduced-motion:reduce){.tw,.ss,.c.new,.own .halo,#sky canvas.bg.fade{animation:none}}

/* 카드: 유리처럼 은은하게 비치는 판 */
.card{position:relative;background:linear-gradient(180deg,var(--panel-2),var(--panel));border:1px solid var(--line);border-radius:var(--r);padding:22px 20px;margin-top:16px;
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 20px 40px -24px rgba(0,0,0,.8)}
.card::before{content:'';position:absolute;left:20px;right:20px;top:-1px;height:1px;background:linear-gradient(90deg,transparent,rgba(232,211,162,.45),transparent)}
.msg{min-height:3.2em;margin:0;white-space:pre-line;word-break:break-word}
.msg b{color:var(--gold)}
label,.lbl{display:block;font-size:.88rem;color:var(--mute);margin:16px 0 6px;letter-spacing:.01em}
input[type=text],input[type=date],textarea{width:100%;background:rgba(3,4,14,.55);border:1px solid var(--line);border-radius:12px;color:var(--text);padding:12px 14px;font:inherit;transition:border-color .2s,box-shadow .2s}
input[type=text]::placeholder,textarea::placeholder{color:var(--faint)}
input[type=text]:focus,input[type=date]:focus,textarea:focus{outline:none;border-color:rgba(232,211,162,.55);box-shadow:0 0 0 3px rgba(232,211,162,.1)}
textarea{resize:vertical;min-height:84px}
.cnt{text-align:right;font-size:.78rem;color:var(--faint);margin-top:4px}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.grid button{border:1px solid var(--line);background:rgba(3,4,14,.45);color:var(--text);border-radius:12px;padding:10px 2px 8px;font:inherit;font-size:.82rem;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:5px;transition:border-color .2s,background .2s}
.grid button svg{width:34px;height:34px;color:var(--mute)}
.grid button[aria-pressed=true]{border-color:var(--gold);background:rgba(232,211,162,.08)}
.grid button[aria-pressed=true] svg{color:var(--gold)}
.grid button small{font-size:.66rem;color:var(--faint);margin-top:-3px;letter-spacing:0}
.grid button[aria-pressed=true] small{color:var(--gold-2)}
.lbl small{color:var(--faint)}
.need-sign{border-color:rgba(232,211,162,.45);box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 0 40px -12px rgba(232,211,162,.25)}
.need-sign h2{color:var(--gold)}
.sw{display:flex;gap:12px;margin-top:6px}
.sw button{width:30px;height:30px;border-radius:50%;border:2px solid transparent;cursor:pointer}
.sw button[aria-pressed=true]{border-color:#fff;box-shadow:0 0 0 2px var(--night) inset}
.go{display:block;width:100%;margin-top:20px;border:0;background:linear-gradient(180deg,#f2e2bb,var(--gold) 55%,var(--gold-2));color:#1a1408;font:inherit;font-family:var(--serif);font-weight:700;letter-spacing:.02em;padding:14px;border-radius:14px;cursor:pointer;text-align:center;text-decoration:none;
  box-shadow:0 10px 30px -12px rgba(232,211,162,.55),inset 0 1px 0 rgba(255,255,255,.5);transition:transform .15s,box-shadow .2s}
.go:hover{box-shadow:0 14px 34px -12px rgba(232,211,162,.7),inset 0 1px 0 rgba(255,255,255,.5)}
.go:active{transform:translateY(1px)}
.go:disabled,.cp:disabled{opacity:.6;cursor:wait}
/* 로그인 버튼 (카카오·구글 공식 색) */
.login{position:relative;display:flex;align-items:center;justify-content:center;width:100%;min-height:50px;margin-top:10px;padding:12px 16px;border-radius:12px;font-family:-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo','Malgun Gothic',Roboto,sans-serif;font-size:15px;font-weight:600;text-decoration:none;cursor:pointer}
.login .logo{position:absolute;left:18px;top:50%;transform:translateY(-50%);width:20px;height:20px}
.login.kakao{background:#FEE500;color:rgba(0,0,0,.85)}
.login.google{background:#fff;color:#1f1f1f;border:1px solid #747775}
.login:hover{filter:brightness(.97)}
.out-tip{margin:8px 2px 0;text-align:center}
.out-guide{margin-top:12px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;font-size:.92rem;line-height:1.6}
.out-guide p{margin:0}
button.login{font:inherit;font-size:15px;font-weight:600;font-family:-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic",Roboto,sans-serif}
.login.dev{background:none;color:var(--mute);border:1px dashed var(--line);font-weight:400}
.link-btn{display:block;margin:14px auto 0;border:0;background:none;color:var(--mute);font:inherit;font-size:.88rem;text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(155,157,184,.4);cursor:pointer}
.link-btn:hover{color:var(--text)}
.row{display:flex;gap:8px;align-items:center}
code{flex:1;min-width:0;background:rgba(3,4,14,.55);border:1px solid var(--line);border-radius:12px;padding:10px 12px;font-size:.84rem;overflow-x:auto;white-space:nowrap;color:var(--mute)}
.cp{border:1px solid rgba(232,211,162,.5);background:rgba(232,211,162,.04);color:var(--gold);border-radius:12px;padding:9px 14px;font:inherit;cursor:pointer;white-space:nowrap;transition:background .2s}
.cp:hover{background:rgba(232,211,162,.1)}
.chk{display:flex;gap:10px;align-items:center;margin-top:14px;color:var(--text);font-size:.95rem}
.chk input{width:18px;height:18px;accent-color:var(--gold)}
details.adm{margin-top:14px;color:var(--mute);font-size:.9rem}
details.adm summary{cursor:pointer}
details.adm p{margin:8px 0}
ul{list-style:none;margin:0;padding:0}
li{padding:14px 0;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between}
li:first-child{border-top:0}
li small{color:var(--faint)}
li .who{flex:1;min-width:0}
li .m{white-space:pre-line;word-break:break-word}
li .acts{display:flex;gap:2px;flex:none;align-items:flex-start}
li .acts button{border:0;background:none;color:var(--mute);cursor:pointer;font:inherit;font-size:.88rem;padding:2px 6px;border-radius:6px}
li .acts button:hover{color:var(--rose)}
.sub.small{font-size:.88rem;margin:0 0 10px}
.lock{font-size:.8rem;color:var(--mint);margin-left:4px}
.blk{color:var(--mute);font-size:.9rem;margin:12px 0 0;display:flex;gap:8px;align-items:center}
.blk:empty{display:none}
.cp.danger{border-color:rgba(233,163,182,.55);color:var(--rose);background:rgba(233,163,182,.04)}
.rep{flex-basis:100%;background:rgba(3,4,14,.55);border:1px solid var(--line);border-radius:12px;padding:12px 14px;font-size:.9rem}
.rep p{margin:0 0 6px;color:var(--mute)}
.rep fieldset{border:0;margin:0 0 8px;padding:0}
.rep legend{color:var(--mute);font-size:.85rem;padding:0;margin-bottom:4px}
.rep label{display:inline-flex;align-items:center;gap:4px;margin:2px 12px 2px 0;color:var(--text);font-size:.9rem}
.rep input[type=text]{margin-bottom:8px}
.note{color:var(--mint);font-size:.9rem;min-height:1.4em;margin:10px 0 0}
/* 약관·개인정보처리방침 같은 글 페이지 */
.doc h2{margin:30px 0 10px;padding-top:22px;border-top:1px solid var(--line)}
.doc h2:first-of-type{border-top:0;padding-top:0}
.doc p{margin:0 0 10px;color:#d9d8e6}
.doc ul.plain{list-style:disc;padding-left:1.3em;margin:0 0 10px}
.doc ul.plain li{display:list-item;border:0;padding:3px 0}
.foot{margin-top:40px;text-align:center;font-size:.82rem;color:var(--faint)}
.foot a{color:var(--faint);margin:0 10px;text-decoration:none}
.foot a:hover{color:var(--mute)}
/* 공유 버튼 */
.share{display:block;width:100%;margin-top:10px;padding:13px;border:0;border-radius:12px;font:inherit;font-weight:700;cursor:pointer}
.share.kakao{background:#FEE500;color:rgba(0,0,0,.85)}
.share.insta{background:linear-gradient(45deg,#f9ce34,#ee2a7b 55%,#6228d7);color:#fff}
.share:disabled{opacity:.6;cursor:wait}
.share-row{margin-top:10px}
.share-row .cp{flex:1}
#lk{display:block;margin-top:10px;color:var(--mute)}
/* 인스타 스토리 미리보기 창 */
.sheet{position:fixed;inset:0;z-index:50;background:rgba(2,3,12,.8);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;padding:16px}
.sheet-box{width:100%;max-width:380px;max-height:100%;overflow:auto;background:#0e1129;border:1px solid var(--line);border-radius:20px;padding:20px}
.sheet-box img{display:block;width:62%;margin:0 auto 14px;border-radius:12px;border:1px solid var(--line)}
.steps{margin:0 0 4px;padding-left:1.3em;font-size:.9rem;color:var(--text)}
.steps li{display:list-item;border:0;padding:3px 0}
.cp.wide{display:block;width:100%;margin-top:10px;padding:12px}
a.share{text-align:center;text-decoration:none}
a.share[hidden]{display:none}
/* 하늘 배경 고르기 */
.bgs{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.bgopt{display:flex;flex-direction:column;align-items:center;gap:4px;padding:6px 4px 8px;border:1px solid var(--line);border-radius:12px;background:rgba(3,4,14,.45);color:var(--text);font:inherit;font-size:.8rem;cursor:pointer}
.bgopt canvas{display:block;width:100%;aspect-ratio:5/8;height:auto;border-radius:8px;background:#05071a}
.bgopt small{font-size:.72rem;color:var(--mute)}
.bgopt[aria-pressed=true]{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold)}
.bgopt[aria-pressed=true] small{color:var(--gold)}
.bgopt.locked{cursor:default}
/* 잠긴 하늘은 미리 보여 주지 않고 어둡게 비워 둔다 */
.bgopt{position:relative}
.bgopt.locked canvas{background:linear-gradient(180deg,#020309,#05061a)}
.bgopt .q{position:absolute;left:0;right:0;top:34%;text-align:center;font-style:normal;font-family:var(--serif-d);font-size:1.5rem;color:rgba(232,211,162,.28)}
.bgopt.locked span{color:var(--mute)}
/* 새 하늘 해금 연출: 하늘이 환하게 밝아졌다가 가라앉으며 새 배경이 나타난다 */
#sky canvas.bg.fade.unlock{animation:unlockin 2.6s ease-out}
@keyframes unlockin{0%{opacity:0;filter:brightness(2.6) saturate(1.4)}30%{opacity:1;filter:brightness(1.9) saturate(1.3)}100%{opacity:1;filter:none}}
.unlock-banner{position:absolute;left:50%;top:38%;z-index:5;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:4px;padding:18px 26px;border-radius:16px;background:rgba(5,7,26,.62);border:1px solid rgba(232,211,162,.5);box-shadow:0 0 40px rgba(232,211,162,.3);text-align:center;white-space:nowrap;pointer-events:none;animation:bannerin 4.2s ease forwards}
.unlock-banner span{font-size:.95rem;color:var(--text)}
.unlock-banner b{font-family:var(--serif-d);font-weight:400;font-size:1.5rem;color:var(--gold)}
@keyframes bannerin{0%{opacity:0;transform:translate(-50%,-40%) scale(.9)}15%{opacity:1;transform:translate(-50%,-50%) scale(1)}80%{opacity:1}100%{opacity:0;transform:translate(-50%,-55%)}}
@media (prefers-reduced-motion:reduce){#sky canvas.bg.fade.unlock{animation:none}.unlock-banner{animation:bannerfade 4s ease forwards}@keyframes bannerfade{0%,85%{opacity:1}100%{opacity:0}}}
/* 봇 방지 확인 칸 (필요할 때만 보인다) */
.human{display:flex;justify-content:center;margin-top:12px}
.human:empty{display:none}
/* 받은 별 고르기와 한 번에 지우기 */
li .selbox{display:flex;align-items:flex-start;padding-top:3px;flex:none}
li .selbox input{width:18px;height:18px;accent-color:var(--gold)}
.bulk{display:flex;align-items:center;gap:10px;margin:0 0 8px;padding:10px 12px;border:1px solid rgba(233,163,182,.5);border-radius:12px;background:rgba(233,163,182,.06);font-size:.9rem}
.bulk[hidden]{display:none}
.bulk .link-btn{margin:0 0 0 auto}
/* 불러오는 중: 별 하나가 숨 쉬듯 반짝인다 */
.loading{display:flex;flex-direction:column;align-items:center;gap:18px;padding:90px 0 60px;color:var(--mute);font-size:.9rem;letter-spacing:.08em}
.loading i{width:10px;height:10px;border-radius:50%;background:#fff;box-shadow:0 0 12px 3px rgba(232,211,162,.8),0 0 40px 10px rgba(232,211,162,.25);animation:breathe 1.8s ease-in-out infinite}
@keyframes breathe{50%{transform:scale(.55);opacity:.5}}
@media (prefers-reduced-motion:reduce){.loading i{animation:none}}
/* 주인이 로그인 안 된 브라우저로 자기 하늘을 열었을 때의 작은 안내 */
.owner-hint{margin:22px 0 0;text-align:center;font-size:.86rem;color:var(--faint)}
.owner-hint a{color:var(--mute)}
.note.warn{color:var(--rose)}
/* 이 기기에서 마지막으로 쓴 로그인 방법 표시 */
.login .recent{position:absolute;right:12px;top:50%;transform:translateY(-50%);padding:2px 8px;border-radius:999px;background:rgba(0,0,0,.72);color:#f3ead6;font-size:11px;font-weight:600;letter-spacing:.02em}
.other-login{margin:16px 0 0;padding:12px 14px;border:1px solid var(--line);border-radius:12px;font-size:.86rem;line-height:1.65;color:var(--mute)}
.other-login b{color:var(--text);font-weight:700}

/* 하늘 위 작은 버튼: 닉네임 켜기/끄기, 하늘만 크게 보기 */
.sky-tools{display:flex;justify-content:flex-end;gap:6px;margin:0 0 8px;transition:opacity .4s}
.tool{border:1px solid var(--hair);background:rgba(5,7,26,.55);color:var(--text);font:inherit;font-size:.76rem;padding:6px 11px;border-radius:999px;cursor:pointer;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:border-color .2s,color .2s}
.tool[aria-pressed=true]{border-color:rgba(232,211,162,.6);color:var(--gold)}
.tool:disabled{opacity:.45;cursor:default}
.tool.icon{width:32px;height:32px;padding:0;display:grid;place-items:center}
.sky-tools svg{position:static;display:block;width:16px;height:16px}
.tool.close{display:none}

/* 하늘만 크게 보기: 세로를 꽉 채우고, 넘치는 좌우는 밀어서 본다 */
body.immersive{overflow:hidden}
body.immersive .sky-wrap{position:fixed;inset:0;z-index:60;background:#000;overflow-x:auto;overflow-y:hidden;overscroll-behavior:contain;scrollbar-width:none}
body.immersive .sky-wrap::-webkit-scrollbar{display:none}
body.immersive #sky{width:62.5vh;width:62.5dvh;margin:0 auto;border:0;border-radius:0;box-shadow:none}
body.immersive #sky::after{display:none}
body.immersive .sky-tools{position:fixed;z-index:61;margin:0;top:calc(env(safe-area-inset-top) + 12px);right:12px}
body.immersive .tool[data-act=immersive]{display:none}
body.immersive .tool.close{display:grid}
body.tools-idle .sky-tools{opacity:0;pointer-events:none}

/* 별자리 궁합 */
.zod{border:1px solid var(--hair);background:rgba(232,211,162,.06);color:var(--gold);border-radius:999px;font:inherit;font-size:.78rem;line-height:1;padding:3px 7px;cursor:pointer;vertical-align:1px;transition:background .2s}
.zod[aria-expanded=true]{background:rgba(232,211,162,.2);border-color:rgba(232,211,162,.5)}
.compat-card{margin-top:10px;padding:16px;border-radius:14px;border:1px solid var(--hair);background:linear-gradient(180deg,rgba(232,211,162,.08),rgba(232,211,162,.02));text-align:center}
.compat-card p{margin:0}
.compat-card .pair{display:flex;justify-content:center;align-items:center;gap:8px;font-size:.84rem;color:var(--mute)}
.compat-card .pair i{font-style:normal;color:var(--faint)}
.compat-card .score{font-family:var(--serif-d);font-size:.95rem;color:var(--mute);margin-top:6px}
.compat-card .score b{font-size:1.9rem;font-weight:400;margin-left:4px;background:linear-gradient(180deg,#fff,#f3ead6 55%,#e8d3a2);-webkit-background-clip:text;background-clip:text;color:transparent}
.compat-card .ttl{font-family:var(--serif-d);font-weight:400;color:var(--gold);margin-top:2px}
.compat-card .desc{font-size:.9rem;color:var(--text);margin-top:6px;line-height:1.65}
.compat-card .fun{font-size:.72rem;color:var(--faint);margin-top:10px}
.compat-none{font-size:.85rem;color:var(--mute);margin:8px 0 0}
.compat-sheet .kicker{text-align:center;color:var(--gold);font-size:.86rem;letter-spacing:.04em;margin:0 0 4px}
.compat-sheet .compat-card{border:0;background:none;padding:12px 4px}
.compat-sheet .compat-card .score b{font-size:2.6rem}
.compat-sheet .go{margin-top:12px}
.compat-sheet .link-btn{display:block;text-align:center;margin-top:12px}
.sel-compat{font-size:.8rem;color:var(--gold-2);margin-left:4px}
li > .compat-card,li > .compat-none{flex-basis:100%;margin-top:0}

/* 일본어·중국어: 그 언어의 명조체를 먼저 쓴다 (i18n.js가 글꼴을 불러온다) */
:root:lang(ja){--serif-d:'Noto Serif JP','Grandiflora One','MaruBuri',serif;--serif:'Noto Serif JP','MaruBuri',serif}
:root:lang(zh-CN){--serif-d:'Noto Serif SC','Grandiflora One','MaruBuri',serif;--serif:'Noto Serif SC','MaruBuri',serif}
/* 영어 별자리 이름(Sagittarius 등)이 칸을 넘지 않게 */
.grid button{word-break:break-word;text-align:center;line-height:1.3}
/* 언어 고르기 */
.langs{display:flex;justify-content:center;flex-wrap:wrap;gap:4px 14px;margin-top:10px}
.langs a{margin:0;color:var(--faint);text-decoration:none}
.langs a[aria-current=true]{color:var(--gold-2)}
/* 전체화면 버튼: 하늘 오른쪽 위 구석 */
#sky .sky-full{position:absolute;top:10px;right:10px;z-index:4}
#sky .sky-full svg{position:static;display:block;width:16px;height:16px}
body.immersive #sky .sky-full{display:none}
/* 메시지 목록의 날짜가 "10월 / 15일"로 끊기지 않게 */
li .when{white-space:nowrap}
/* 날짜는 삭제·신고 버튼 아래 오른쪽에 (한 줄로) */
li .acts{flex-wrap:wrap;justify-content:flex-end;max-width:7.5em}
li .acts .when{order:2;flex-basis:100%;text-align:right;font-size:.74rem;color:var(--faint);padding:2px 6px 0}

/* 별빛 도착 시간 */
.arrive{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.arrive button{border:1px solid var(--line);background:var(--panel);color:var(--mute);padding:6px 13px;border-radius:999px;font:inherit;font-size:.86rem;cursor:pointer}
.arrive button[aria-pressed=true]{background:var(--gold);border-color:var(--gold);color:var(--night)}
#fd{margin-top:8px;color-scheme:dark}
#fd[hidden]{display:none}
.arr-note{font-size:.82rem;color:var(--gold-2);margin:8px 0 0}
.travel{color:var(--gold-2)}
.travel small{color:var(--mute)}
.arrived{color:var(--gold);font-size:.78rem;word-break:keep-all}
li .travel{font-size:.9rem;word-break:keep-all}
li .travel small{display:block;margin-top:2px}
.next-arrive{display:block;margin-top:4px;font-size:.84rem;color:var(--gold-2);word-break:keep-all}
/* 휴대폰 알림: 제목 옆 켜기·끄기 스위치 */
.push-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
.push-head h2{margin:0}
.switch{position:relative;flex:none;width:52px;height:30px;padding:0;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.08);cursor:pointer;transition:background .2s,border-color .2s}
.switch span{position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:var(--mute);transition:transform .2s,background .2s}
.switch[aria-checked=true]{background:var(--gold);border-color:var(--gold)}
.switch[aria-checked=true] span{transform:translateX(22px);background:var(--night)}
.switch:disabled{opacity:.35;cursor:default}
.switch:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.push .sub.small{margin:0}
.push .note:empty{display:none}
.push .push-test{width:fit-content;margin:10px 0 0 auto;padding:0;font-size:.82rem}
/* 계정 삭제 */
.link-btn.del-account{margin-top:6px;color:var(--rose);opacity:.75;font-size:.8rem}
.del-sheet h2{margin-bottom:8px}
.del-sheet .chk{margin:14px 0 4px}
.cp.danger:disabled{opacity:.4;cursor:default}