/* 섬으로 보기 (/island): 3D 장면 위에 떠 있는 HUD. 색 토큰은 style.css 것을 그대로 쓰고, 여기서는 하늘색·유리 배경만 더한다 */
:root{--sky:#5E8FA8;--glass:rgba(255,255,255,.86);--sans:"Pretendard Variable",Pretendard,-apple-system,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;--mono:"IBM Plex Mono",ui-monospace,Menlo,monospace}
@media (prefers-color-scheme:dark){:root{--sky:#8FB8CC;--glass:rgba(28,37,32,.86)}}
[hidden]{display:none!important}
.island-root{position:relative;overflow:hidden;background:var(--bg);line-height:1.5;word-break:keep-all;isolation:isolate}
.island-root.full{position:fixed;inset:0;z-index:50;overscroll-behavior:none;touch-action:none}
.island-root.full .rail{touch-action:pan-x}
.island-root.full #card{touch-action:auto}
#card h2{font-weight:750}
#stage{position:absolute;inset:0}
#stage canvas{display:block;width:100%;height:100%;touch-action:none;cursor:pointer}
.hud{position:absolute;left:0;right:0;pointer-events:none;padding-inline:16px;display:flex;gap:10px}
.hud > *{pointer-events:auto}
.top{top:0;padding-top:calc(14px + env(safe-area-inset-top,0px));justify-content:space-between;align-items:center}
.mark{text-decoration:none;display:flex;align-items:center;gap:9px;font-weight:700;letter-spacing:-.01em;background:var(--glass);padding:7px 14px 7px 8px;border-radius:99px;backdrop-filter:blur(8px)}
.mark i{width:26px;height:26px;border-radius:50%;border:2.5px solid var(--ink);display:grid;place-items:center;font-style:normal;font-size:10px;font-weight:800}
.chip{text-decoration:none;font:500 12px/1 var(--mono);color:var(--muted);background:var(--glass);border:1px solid var(--line);border-radius:99px;padding:8px 12px;cursor:pointer;backdrop-filter:blur(8px)}
.chip:focus-visible,.rail button:focus-visible,.copy:focus-visible,#card a:focus-visible{outline:2px solid var(--warm);outline-offset:2px}
#perf{position:absolute;top:calc(62px + env(safe-area-inset-top,0px));right:16px;width:min(280px,calc(100% - 32px));background:var(--glass);border:1px solid var(--line);border-radius:14px;padding:12px 14px;font:500 12px/1.7 var(--mono);color:var(--muted);backdrop-filter:blur(8px);z-index:2}
#perf dl{display:grid;grid-template-columns:auto 1fr;gap:2px 12px;margin:0}
#perf dd{margin:0;text-align:right;color:var(--ink);font-variant-numeric:tabular-nums}
#perf p{margin:8px 0 0;font-family:var(--sans);font-size:12px;line-height:1.55}
#event{position:absolute;left:50%;top:calc(66px + env(safe-area-inset-top,0px));transform:translate(-50%,0);max-width:calc(100% - 32px);width:max-content;text-align:center;background:var(--ink);color:var(--bg);border-radius:14px;padding:10px 18px;font-weight:600;font-size:15px;transition:opacity .4s,transform .4s;pointer-events:none}
#event small{display:block;font:500 11px/1.4 var(--mono);opacity:.7;margin-bottom:2px}
#event.off{opacity:0;transform:translate(-50%,-8px)}
.bottom{bottom:0;padding-bottom:calc(14px + env(safe-area-inset-bottom,0px));flex-direction:column;align-items:flex-start}
#card{width:min(380px,100%);background:var(--card);border:1.5px solid var(--line);border-radius:20px;padding:18px 20px;box-shadow:0 10px 30px rgba(20,30,24,.12);transition:opacity .25s,transform .25s}
#card.off{opacity:0;transform:translateY(10px);pointer-events:none}
.hash{font:500 12px/1 var(--mono);color:var(--muted)}
.hash b{color:var(--leaf);font-weight:500}
.hash.warm b{color:var(--warm)}
.hash.sky b{color:var(--sky)}
#card h2{font-size:21px;line-height:1.35;letter-spacing:-.02em;margin:8px 0 6px;text-wrap:balance}
#card p{margin:0;font-size:14.5px;line-height:1.65;color:var(--muted)}
#card p + p{margin-top:6px}
.app{display:flex;gap:14px;align-items:center;margin-top:12px}
.icon{flex:none;width:52px;height:52px;border-radius:14px;background:linear-gradient(160deg,#F6C28B,#E9974F 55%,#6E9E61);display:grid;place-items:center;color:#fff;font-weight:700;font-size:19px}
.icon.jalga{background:linear-gradient(160deg,#BFE0EE,#5E8FA8 60%,#2F5D73);font-size:16px}
.icon.apt{background:linear-gradient(160deg,#F6EEDD,#C9A57A 60%,#8A6A4F)}
.icon.card{background:linear-gradient(160deg,#FFFFFF,#5E8FA8 70%);color:#1D2A22;font-size:16px}
.icon.mosim{background:linear-gradient(160deg,#F2A0AE,#C94A3C 65%);font-size:16px}
.icon.korea{background:linear-gradient(160deg,#BFE0EE,#C94A3C 70%)}
.icon.saju{background:linear-gradient(160deg,#3B4A6B,#1B2638 70%);color:#FFE9A8;font-size:16px}
.app strong{display:block}
.app span{color:var(--muted);font-size:13px}
.app a{color:var(--ink);font-size:13px}
.pill{display:inline-block;margin-left:6px;font-size:12px;padding:1px 9px;border-radius:99px;background:color-mix(in srgb,var(--leaf) 18%,transparent);color:var(--leaf);font-weight:600}
.pill.sky{background:color-mix(in srgb,var(--sky) 18%,transparent);color:var(--sky)}
.mail{display:flex;gap:8px;align-items:center;margin-top:12px;flex-wrap:wrap}
.mail code{font:500 13px var(--mono);background:color-mix(in srgb,var(--line) 45%,transparent);padding:7px 10px;border-radius:8px;user-select:all}
.copy{font:600 13px var(--sans);border:0;border-radius:8px;padding:8px 12px;background:var(--ink);color:var(--bg);cursor:pointer}
.rail{display:flex;align-items:center;max-width:100%;overflow-x:auto;background:var(--glass);border:1px solid var(--line);border-radius:99px;padding:5px;backdrop-filter:blur(8px);scrollbar-width:none}
.rail button{flex:none;display:flex;align-items:center;gap:7px;border:0;background:transparent;color:var(--muted);font:500 12px/1 var(--mono);padding:8px 11px;border-radius:99px;cursor:pointer;white-space:nowrap}
.rail button::before{content:"";width:9px;height:9px;border-radius:50%;border:2px solid var(--leaf)}
.rail button.head::before{border-color:var(--warm)}
.rail button.seen::before{background:var(--leaf)}
.rail button.head.seen::before{background:var(--warm)}
.rail button.on{background:var(--ink);color:var(--bg)}
.rail .sep{flex:none;font:500 10px/1 var(--sans);color:var(--muted);padding:0 4px;white-space:nowrap;display:flex;align-items:center;gap:4px}
.rail .sep::before,.rail .sep::after{content:"";width:6px;height:2px;background:var(--line)}
.tag{position:absolute;left:0;top:0;pointer-events:none;font:500 11px/1 var(--mono);color:var(--ink);background:var(--glass);border:1px solid var(--line);padding:5px 8px;border-radius:7px;white-space:nowrap;will-change:transform;transition:opacity .3s}
.tag b{color:var(--leaf);font-weight:500}
.tag.warm b{color:var(--warm)}
.tag.sky b{color:var(--sky)}
.tag.way{font-family:var(--sans);background:var(--ink);color:var(--bg);border-color:transparent}
.tag.way b{color:var(--warm);font-family:var(--mono)}
#hint{position:absolute;left:50%;top:calc(66px + env(safe-area-inset-top,0px));transform:translateX(-50%);width:max-content;max-width:calc(100% - 32px);text-align:center;font-size:13px;color:var(--muted);background:var(--glass);border-radius:99px;padding:7px 14px;transition:opacity .6s;pointer-events:none;backdrop-filter:blur(8px)}
#hint.off{opacity:0}
#fail{position:absolute;inset:0;display:grid;place-items:center;padding-inline:16px;text-align:center;color:var(--muted)}
@media (max-width:520px){#hint{top:auto;bottom:calc(64px + env(safe-area-inset-bottom,0px))}#card{padding:15px 16px}#card h2{font-size:19px}#event{font-size:14px}}
@media (prefers-reduced-motion:reduce){#card,#hint,#event,.tag{transition:none}}
#card code{font:500 13px var(--mono);background:color-mix(in srgb,var(--line) 45%,transparent);padding:1px 6px;border-radius:5px}
/* tour mode: watch only */
.island-root.tour .rail{pointer-events:none}
.island-root.tour #stage canvas{cursor:default;touch-action:auto}
.island-root.tour #card{pointer-events:none}
.chip.primary{background:var(--warm);color:#1D2A22;border-color:transparent;font-family:var(--sans);font-weight:700;font-size:13px}
/* picture-in-picture minimap (index): bottom-right, tap to go full screen, – to fold into a pill */
.pip{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));width:min(340px,calc(100vw - 32px));aspect-ratio:16/10;border-radius:18px;overflow:hidden;z-index:40;border:1.5px solid var(--line);box-shadow:0 14px 40px rgba(20,30,24,.22);background:var(--card);opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s ease,width .25s,aspect-ratio .25s}
.pip.in{opacity:1;transform:none}
.pip .island-root{position:absolute;inset:0;height:100%;cursor:pointer}
.pip .island-root.tour .hud,.pip .island-root.tour #hint,.pip .island-root.tour #card,.pip .island-root.tour .tag,.pip .island-root.tour #fail p{display:none}
.pip .island-root.tour #event{top:auto;bottom:10px;left:10px;right:10px;width:auto;max-width:none;transform:none;font-size:11.5px;padding:7px 10px;border-radius:10px;text-align:left}
.pip .island-root.tour #event small{font-size:9.5px}
.pip .island-root.tour #event.off{transform:translateY(6px)}
.pip-bar{position:absolute;left:0;right:0;top:0;display:flex;justify-content:space-between;align-items:center;padding:8px 8px 8px 12px;pointer-events:none;background:linear-gradient(to bottom,rgba(20,30,24,.35),transparent)}
.pip-title{font:600 12px/1 var(--sans);color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.3)}
.pip-btns{display:flex;gap:4px;pointer-events:auto}
.pip-btn{width:28px;height:28px;border-radius:8px;border:0;background:rgba(255,255,255,.88);color:#1D2A22;font:700 14px/1 var(--sans);cursor:pointer}
.pip-btn:hover{background:#fff}
.pip-pill{display:none;border:0;background:var(--ink);color:var(--bg);font:600 14px/1 var(--sans);padding:12px 16px;border-radius:99px;cursor:pointer;white-space:nowrap}
.pip.min{width:auto;aspect-ratio:auto;border:0;box-shadow:0 8px 24px rgba(20,30,24,.2);background:transparent;border-radius:99px;overflow:visible}
.pip.min .island-root,.pip.min .pip-bar{display:none}
.pip.min .pip-pill{display:inline-block}
.pip.full{position:fixed;inset:0;width:auto;height:auto;aspect-ratio:auto;border-radius:0;border:0;box-shadow:none;z-index:50;transition:none}
.pip.full .pip-bar,.pip.full .pip-pill{display:none}
.pip.full .island-root{cursor:default}
@media (max-width:600px){.pip{width:min(46vw,220px);border-radius:14px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px))}.pip .island-root.tour #event{display:none}.pip-title{font-size:11px}.pip-btn{width:26px;height:26px}}
@media (prefers-reduced-motion:reduce){.pip{transition:none;transform:none}}
/* narrow (phone) full screen: the station card folds to one line, tap to expand */
.island-root.narrow.play #card{width:auto;max-width:calc(100% - 0px);padding:10px 14px;border-radius:14px;cursor:pointer}
.island-root.narrow.play #card:not(.open) > :not(.hash):not(h2){display:none}
.island-root.narrow.play #card h2{font-size:16px;margin:4px 0 0;padding-right:22px;position:relative}
.island-root.narrow.play #card h2::after{content:"";position:absolute;right:2px;top:5px;width:8px;height:8px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg)}
.island-root.narrow.play #card.open h2::after{transform:rotate(-135deg);top:9px}
.island-root.narrow.play #card.open p{font-size:13.5px}
.island-root.narrow.play #card .hash{font-size:11px}
.island-root.narrow #event{font-size:13px;padding:8px 14px;max-width:calc(100% - 24px)}
.island-root.narrow #event small{font-size:10px}
.island-root.narrow .hud.bottom{gap:8px}
.tag.say{font-family:var(--sans);font-size:12px;background:var(--card);color:var(--ink);border:1.5px solid var(--line);border-radius:12px;padding:6px 10px;max-width:220px;white-space:normal;text-align:center;line-height:1.35}
.tag.say::after{content:"";position:absolute;left:50%;bottom:-6px;width:10px;height:10px;background:var(--card);border-right:1.5px solid var(--line);border-bottom:1.5px solid var(--line);transform:translateX(-50%) rotate(45deg)}
.pip .pip-btn.sndBtn{font-size:12px}
.pip .island-root.tour .tag.say{display:block}