/* SEOL Link: 홈 밤하늘이 확대되며 지식그래프 별자리가 열리는 화면 (link/sky.js와 한 쌍) */

/* 1) 홈 밤하늘의 별 하나로 확대해 들어감: 홈 장면은 그 별을 중심으로 화면 밖까지 커지며 사라지고,
      그 별의 빛이 화면을 채운 뒤 별 안쪽(.sk::before)에서 별자리가 열림 */
canvas.layer{transform-origin:var(--sk-ox,50%) var(--sk-oy,27%);transition:transform 1.7s cubic-bezier(.16,1,.3,1),opacity .6s ease}
body.sky-on canvas.layer{transform:scale(18);opacity:0;transition:transform 2.1s cubic-bezier(.7,0,.84,0),opacity .7s ease 1.25s}
body.sky-pre .app,body.sky-pre .chara,body.sky-pre .sisters{opacity:0!important;pointer-events:none!important;transition:opacity .5s ease}
.app{transition:opacity .9s ease .3s}
.sk-seed{position:fixed;z-index:19;left:var(--sk-ox,50%);top:var(--sk-oy,27%);width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;pointer-events:none;opacity:0;transform:scale(.15);
  background:radial-gradient(circle,#fff 0 14%,#dfe6ff 22%,rgba(140,162,255,.85) 34%,rgba(90,116,230,.45) 50%,rgba(40,56,160,.16) 68%,rgba(20,28,90,0) 72%);
  transition:transform 1.7s cubic-bezier(.16,1,.3,1),opacity .5s ease}
.sk-seed.on{opacity:1;transform:scale(2.4);animation:skPulse 1.2s ease-in-out infinite;box-shadow:0 0 14px 4px rgba(150,170,255,.55),0 0 40px 10px rgba(90,116,230,.25)}
.sk-seed.on.zoom{transform:scale(360);opacity:0;animation:none;transition:transform 2.1s cubic-bezier(.7,0,.84,0),opacity .8s ease 1.55s}
@keyframes skPulse{50%{filter:brightness(1.5)}}

/* 2) 별자리 화면 */
.sk{position:fixed;inset:0;z-index:20;color:#EEF0F7;font-family:"IBM Plex Sans KR","Apple SD Gothic Neo","Malgun Gothic",sans-serif;word-break:keep-all;opacity:0;transition:opacity .4s ease;
  --sk-l:#5A74E6;--sk-l2:#9DB0FF;--sk-ink:#EEF0F7;--sk-muted:#9BA3C2;--sk-dim:#6A7299;--sk-line:rgba(120,135,210,.22);--sk-glass:rgba(10,14,40,.72);--sk-glass2:rgba(18,24,64,.86);
}
/* 별의 안쪽: 확대해 들어간 별빛이 남은 깊은 파랑 (홈의 별과 겹치지 않음) */
.sk::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 50% 46%,#24328a 0%,#151d60 30%,#0b1038 62%,#05071c 100%);opacity:0;transition:opacity .9s ease 1.5s}
.sk.in::before{opacity:1}
.sk:not(.in)::before{transition:opacity .7s ease 0s}
.sk[hidden]{display:none}
.sk.in{opacity:1}
:where(.sk) button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;text-align:left}
.sk :focus-visible{outline:2px solid var(--sk-l2);outline-offset:2px;border-radius:6px}
.sk-c{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:grab;touch-action:none}
.sk-c.drag{cursor:grabbing}.sk-c.hov{cursor:pointer}
.sk-ui{opacity:0;transition:opacity .8s ease}
.sk.ready .sk-ui{opacity:1}

.sk-top{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;gap:12px;padding:16px 20px;z-index:3;flex-wrap:wrap}
.sk-home{display:flex;align-items:baseline;gap:10px;font-family:"Nunito","Gowun Dodum",sans-serif;font-weight:900}
.sk-home .lg{font-size:26px;letter-spacing:.04em;display:flex}
.sk-home .lg span:nth-child(1){color:#E39A3B}.sk-home .lg span:nth-child(2){color:#F2C94C}.sk-home .lg span:nth-child(3){color:#D2334A}.sk-home .lg span:nth-child(4){color:#5A74E6}
.sk-home .ttl{font-size:17px;color:var(--sk-l2)}
.sk-home .who{font-family:"IBM Plex Sans KR",sans-serif;font-weight:400;font-size:13px;color:var(--sk-muted)}
.sk-tabs{display:flex;gap:4px;background:var(--sk-glass);border:1px solid var(--sk-line);border-radius:999px;padding:3px;backdrop-filter:blur(8px)}
.sk-tabs button{padding:5px 14px;border-radius:999px;font-size:13px;color:var(--sk-muted);white-space:nowrap}
.sk-tabs button[aria-selected="true"]{background:var(--sk-l);color:#fff}
.sk-pill{display:inline-flex;align-items:center;gap:6px;background:var(--sk-glass);backdrop-filter:blur(8px);border:1px solid var(--sk-line);border-radius:999px;padding:6px 12px;font-size:12px;color:var(--sk-muted);white-space:nowrap}
.sk-pill:hover{color:var(--sk-ink)}
.sk-pill[aria-pressed="true"]{color:#fff;border-color:var(--sk-l);background:color-mix(in srgb,var(--sk-l) 38%,var(--sk-glass))}
.sk-pill:disabled{opacity:.35;cursor:default}
.sk-search{margin-left:auto;position:relative;width:min(300px,38vw)}
.sk-search input{width:100%;background:var(--sk-glass);backdrop-filter:blur(8px);border:1px solid var(--sk-line);border-radius:999px;color:var(--sk-ink);font:inherit;font-size:13px;padding:7px 14px 7px 32px}
.sk-search input:focus{outline:none;border-color:var(--sk-l)}
.sk-search svg{position:absolute;left:12px;top:50%;translate:0 -50%;color:var(--sk-muted)}
.sk-res{position:absolute;top:calc(100% + 6px);right:0;left:0;max-height:60vh;overflow:auto;background:var(--sk-glass2);backdrop-filter:blur(12px);border:1px solid var(--sk-line);border-radius:12px;padding:4px;display:none;box-shadow:0 12px 40px rgba(0,0,0,.45)}
.sk-res.on{display:block}
.sk-res button{display:block;width:100%;padding:7px 10px;border-radius:8px;font-size:13px}
.sk-res button small{display:block;color:var(--sk-muted);font-size:11px;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sk-res button:hover,.sk-res button.act{background:rgba(120,135,210,.18)}
.sk-res .none{padding:10px;color:var(--sk-muted);font-size:13px}

.sk-ctl{position:absolute;right:20px;top:70px;display:flex;flex-direction:column;gap:8px;align-items:flex-end;z-index:2}
.sk-ctl .row{display:flex;gap:6px}
.sk-stat{position:absolute;left:20px;top:72px;font-size:12px;color:var(--sk-muted);font-family:"IBM Plex Mono",monospace;z-index:2;pointer-events:none}
.sk-legend{position:absolute;left:20px;bottom:18px;display:flex;flex-wrap:wrap;gap:4px 6px;max-width:min(620px,calc(100% - 40px));z-index:2}
.sk-legend button{display:inline-flex;align-items:center;gap:6px;font-size:11px;color:var(--sk-muted);padding:3px 9px;border-radius:999px;background:rgba(10,14,40,.55);border:1px solid transparent}
.sk-legend button i{width:7px;height:7px;border-radius:50%;background:var(--c);box-shadow:0 0 8px var(--c)}
.sk-legend button[aria-pressed="true"]{border-color:var(--c);color:#fff}
.sk-tip{position:absolute;pointer-events:none;background:var(--sk-glass2);backdrop-filter:blur(10px);border:1px solid var(--sk-line);border-radius:10px;padding:7px 11px;font-size:12px;max-width:260px;z-index:4;display:none;box-shadow:0 8px 24px rgba(0,0,0,.4)}
.sk-tip b{display:block;font-size:13px;margin-bottom:2px}.sk-tip span{color:var(--sk-muted)}
.sk-loading{position:absolute;left:50%;top:50%;translate:-50% -50%;font-size:14px;color:var(--sk-muted);letter-spacing:.08em;transition:opacity .5s;pointer-events:none;opacity:0;animation:skFade .6s ease 1.6s forwards}
@keyframes skFade{to{opacity:1}}
.sk.ready .sk-loading{opacity:0;animation:none}

/* 목록 (왼쪽 서랍) */
.sk-list{position:absolute;left:12px;top:110px;bottom:56px;width:270px;z-index:3;background:var(--sk-glass);backdrop-filter:blur(12px);border:1px solid var(--sk-line);border-radius:14px;overflow:auto;padding:10px 6px 20px;font-size:13px;translate:calc(-100% - 20px) 0;transition:translate .45s cubic-bezier(.65,0,.25,1)}
.sk[data-list] .sk-list{translate:0 0}
.sk-list h2{font-size:11px;font-weight:600;color:var(--sk-muted);letter-spacing:.06em;margin:4px 10px 8px}
.sk-tree summary{list-style:none;cursor:pointer;padding:4px 10px;border-radius:6px;color:var(--sk-muted);display:flex;gap:6px;align-items:center;user-select:none}
.sk-tree summary::-webkit-details-marker{display:none}
.sk-tree summary::before{content:"";border:4px solid transparent;border-left:5px solid currentColor;transition:rotate .15s;flex:none;translate:2px 0}
.sk-tree details[open]>summary::before{rotate:90deg}
.sk-tree summary:hover{background:rgba(120,135,210,.14);color:var(--sk-ink)}
.sk-tree summary .n{margin-left:auto;font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--sk-dim)}
.sk-tree .files{padding-left:12px;border-left:1px solid var(--sk-line);margin-left:14px}
.sk-tree .file{display:flex;gap:7px;align-items:center;width:100%;padding:3px 8px;border-radius:6px;color:#C9CEE3;line-height:1.4}
.sk-tree .file i{width:6px;height:6px;border-radius:50%;flex:none;background:var(--c,#8A93B8);box-shadow:0 0 6px var(--c,#8A93B8)}
.sk-tree .file:hover{background:rgba(120,135,210,.14)}
.sk-tree .file[aria-current="true"]{background:color-mix(in srgb,var(--sk-l) 35%,transparent);color:#fff}

/* 노트 (오른쪽 패널) */
.sk-note{position:absolute;top:110px;right:12px;bottom:12px;width:min(580px,44vw);z-index:3;background:var(--sk-glass2);backdrop-filter:blur(14px);border:1px solid var(--sk-line);border-radius:16px;display:flex;flex-direction:column;overflow:hidden;translate:calc(100% + 24px) 0;transition:translate .5s cubic-bezier(.65,0,.25,1);box-shadow:0 20px 60px rgba(0,0,0,.45)}
.sk[data-note] .sk-note{translate:0 0}
.sk[data-note] .sk-ctl{right:calc(min(580px,44vw) + 28px)}
.sk-nh{display:flex;align-items:center;gap:6px;padding:8px 10px;border-bottom:1px solid var(--sk-line);font-size:12px;color:var(--sk-muted)}
.sk-nh .path{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sk-ib{width:28px;height:28px;display:grid!important;place-items:center;border-radius:8px;color:var(--sk-muted)}
.sk-ib:hover{background:rgba(120,135,210,.16);color:var(--sk-ink)}.sk-ib:disabled{opacity:.3}
.sk-nb{overflow:auto;padding:20px 26px 50px;flex:1;line-height:1.75;font-size:15px}
.sk-nb h1{font-family:"Gowun Dodum","IBM Plex Sans KR",sans-serif;font-weight:700;font-size:26px;line-height:1.3;margin:0 0 10px}
.sk-meta{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}
.sk-tag{font-size:11px;font-family:"IBM Plex Mono",monospace;color:var(--sk-l2);background:color-mix(in srgb,var(--sk-l) 20%,transparent);padding:2px 8px;border-radius:999px}
.sk-alias{font-size:12px;color:var(--sk-muted)}
.sk-md h1{font-size:22px}.sk-md h2{font-size:18px;margin:26px 0 8px;padding-bottom:4px;border-bottom:1px solid var(--sk-line)}
.sk-md h3{font-size:16px;margin:18px 0 6px}
.sk-md p{margin:8px 0}.sk-md ul,.sk-md ol{padding-left:22px;margin:6px 0}.sk-md li{margin:2px 0}
.sk-md strong{color:#fff}
.sk-md blockquote{margin:12px 0;padding:8px 14px;border-left:3px solid var(--cc,var(--sk-l));background:color-mix(in srgb,var(--cc,var(--sk-l)) 12%,transparent);border-radius:0 8px 8px 0;color:#D8DCEE}
.sk-md blockquote p{margin:4px 0}
.sk-md .ct{font-weight:600;color:var(--cc,var(--sk-l2));font-size:13px;display:block;margin-bottom:2px}
.sk-md .callout.warning{--cc:#E39A3B}.sk-md .callout.tip{--cc:#3FB98A}
.sk-md code{font-family:"IBM Plex Mono",monospace;font-size:.88em;background:rgba(120,135,210,.14);padding:1px 5px;border-radius:4px}
.sk-md pre{background:rgba(5,8,28,.6);padding:12px;border-radius:8px;overflow:auto}.sk-md pre code{background:none;padding:0}
.sk-md table{border-collapse:collapse;width:100%;font-size:13px;margin:12px 0;display:block;overflow:auto}
.sk-md th,.sk-md td{border:1px solid var(--sk-line);padding:6px 9px;text-align:left;vertical-align:top}
.sk-md th{background:rgba(120,135,210,.12);font-weight:600}
.sk-md hr{border:0;border-top:1px solid var(--sk-line);margin:20px 0}
.sk-md a.ext{color:var(--sk-l2);word-break:break-all}
.sk-md a.wl{color:var(--sk-l2);text-decoration:none;border-bottom:1px dashed color-mix(in srgb,var(--sk-l2) 50%,transparent);cursor:pointer}
.sk-md a.wl:hover{color:#fff;border-bottom-style:solid}
.sk-md .wl.miss{color:var(--sk-muted);border-bottom:1px dotted var(--sk-dim)}
.sk-md .rel{font-size:11px;font-family:"IBM Plex Mono",monospace;color:#F2C94C;background:rgba(242,201,76,.13);padding:1px 6px;border-radius:4px;margin-right:4px}
.sk-md .embed{display:block;padding:10px 14px;border:1px dashed var(--sk-line);border-radius:8px;color:var(--sk-muted);font-size:13px;margin:10px 0}
.sk-md .card{border:1px solid var(--sk-line);border-radius:10px;margin:8px 0;background:rgba(5,8,28,.4)}
.sk-md .card summary{cursor:pointer;padding:8px 12px;font-weight:500;list-style:none}
.sk-md .card summary::before{content:"Q ";font-family:"IBM Plex Mono",monospace;color:#F2C94C;font-size:12px}
.sk-md .card[open] summary{border-bottom:1px solid var(--sk-line)}
.sk-md .card div{padding:8px 12px;color:#D8DCEE}
.sk-md .card div::before{content:"A ";font-family:"IBM Plex Mono",monospace;color:#3FB98A;font-size:12px}
.sk-md .mermaid{background:rgba(5,8,28,.5);border-radius:10px;padding:12px;margin:12px 0;overflow:auto;text-align:center}
.sk-back{margin-top:34px;padding-top:14px;border-top:1px solid var(--sk-line)}
.sk-back h3{font-size:13px;color:var(--sk-muted);font-weight:600;margin:0 0 8px}
.sk-back ul{list-style:none;padding:0;margin:0}
.sk-back button{width:100%;padding:6px 10px;border-radius:8px;font-size:13px}
.sk-back button:hover{background:rgba(120,135,210,.14)}
.sk-back button small{display:block;color:var(--sk-muted);font-size:11px}
.sk-empty{color:var(--sk-muted);font-size:13px}

@media (max-width:900px){
  .sk-top{padding:12px 14px;gap:8px}
  .sk-home .who{display:none}
  .sk-search{order:5;width:100%;margin-left:0}
  .sk-ctl{top:122px;right:14px}
  .sk-stat{top:126px;left:14px}
  .sk-legend{display:none}
  .sk-list{top:120px;left:8px;bottom:8px;width:min(300px,84vw)}
  .sk-note{inset:0;width:auto;border-radius:0;top:0}
  .sk[data-note] .sk-ctl{right:14px}
}
@media (prefers-reduced-motion:reduce){canvas.layer,.sk,.sk-ui,.sk-list,.sk-note{transition-duration:.01ms!important}}