/* theotrix.com portal · Claude Opus 5.5 (claude-opus-5-5[1m]) · 2026-09-24
   2026-09-25 밤하늘 디자인: 에이전트(빛나는 점)·세계(떠 있는 섬)·게임(창). 제목 글꼴 Bricolage Grotesque(OFL, display-OFL.txt). */
@font-face{font-family:"Bricolage";src:url(/display.woff2) format("woff2");font-weight:500 800;font-display:swap}
:root{
 --bg:#0b1022;--bg-deep:#070b18;--ink:#eef2ff;--muted:#a3aecb;--faint:#6f7a99;
 --line:rgba(170,188,255,.14);--panel:rgba(22,30,58,.66);--panel-solid:#141c38;--field:#162a28;
 --accent:#ffd27a;--accent-ink:#221703;--ok:#6fe39a;--off:#6f7a99;--err:#ff8a80;
 --green:#7fd68f;--sea:#77bfff;
 --display:"Bricolage","Avenir Next","Segoe UI",system-ui,sans-serif;
 --text:-apple-system,"Segoe UI","Apple SD Gothic Neo","Noto Sans KR",system-ui,sans-serif;
 color-scheme:dark}
*{box-sizing:border-box}html{background:var(--bg-deep)}body{margin:0}
body{font-family:var(--text);color:var(--ink);line-height:1.55;min-height:100vh;
 background:url(/sky.svg) center top/1200px auto repeat,radial-gradient(1100px 600px at 80% -10%,rgba(88,110,255,.22),transparent 70%),
 radial-gradient(900px 520px at 5% 30%,rgba(60,200,170,.10),transparent 70%),linear-gradient(180deg,var(--bg) 0%,var(--bg-deep) 100%);background-attachment:fixed}
a{color:inherit}
.bar{display:flex;align-items:center;gap:12px;max-width:1080px;margin:0 auto;padding:18px 20px}
.mark{display:inline-flex;align-items:center;gap:10px;font-family:var(--display);font-weight:800;letter-spacing:.22em;font-size:15px;text-decoration:none}
.glyph{width:22px;height:22px;fill:var(--accent);stroke:var(--accent);stroke-width:1.2;stroke-opacity:.7}
.glyph path{fill:none}
.spacer{flex:1}
main{max-width:1080px;margin:0 auto;padding:40px 20px 72px}
#home{display:grid;gap:40px}
h1,h2,.game strong{font-family:var(--display);text-wrap:balance}
h1{margin:0;font-size:clamp(34px,5.4vw,58px);line-height:1.04;font-weight:800;letter-spacing:-.02em}
h2{margin:0 0 6px;font-size:19px;font-weight:700}
.eyebrow{margin:0 0 14px;color:var(--accent);font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
.lead{margin:14px 0 0;color:var(--muted);max-width:58ch;font-size:17px}
.intro{max-width:720px}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:22px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}

/* gate */
.gate{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:48px;align-items:center;min-height:62vh}
.enter{display:grid;gap:14px;margin-top:30px;max-width:420px}
label{display:grid;gap:6px;font-size:13px;font-weight:600;color:var(--muted);letter-spacing:.02em}
input{font:inherit;font-size:16px;padding:13px 14px;border:1px solid var(--line);border-radius:12px;background:rgba(5,9,22,.6);color:var(--ink)}
input:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:transparent}
#code{font-family:ui-monospace,Menlo,monospace;letter-spacing:.08em}
.error{color:var(--err);margin:0;font-size:14px}.error:empty{display:none}
.isles{position:relative;aspect-ratio:1/0.92;max-width:100%}
.isle{position:absolute;max-width:none;filter:drop-shadow(0 28px 40px rgba(0,0,0,.45))}
.isle.a{width:68%;left:0;top:4%;animation:drift 9s ease-in-out infinite}
.isle.b{width:78%;right:0;bottom:2%;animation:drift 11s ease-in-out -4s infinite;-webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
@keyframes drift{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}

/* buttons */
button,.secondary{font:inherit;cursor:pointer;border-radius:12px;padding:11px 18px;border:1px solid var(--line);background:transparent;color:var(--ink);text-decoration:none;font-weight:600}
button:hover,.secondary:hover{border-color:rgba(170,188,255,.35)}
.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-weight:800}
.primary:hover{filter:brightness(1.06)}
.ghost{padding:8px 14px;font-size:14px}
.lang-switch button{padding:7px 11px!important;color:var(--muted)!important}
.lang-switch button[aria-pressed=true]{background:var(--accent)!important;color:var(--accent-ink)!important}
.lang-switch{border-color:var(--line)!important}

/* worlds */
.games{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:24px}
.game{display:grid;grid-template-rows:auto 1fr;text-decoration:none;border:1px solid var(--line);border-radius:22px;overflow:hidden;background:var(--panel-solid);transition:transform .2s,border-color .2s,box-shadow .2s}
.game:hover{transform:translateY(-3px);border-color:rgba(255,210,122,.45);box-shadow:0 18px 50px rgba(0,0,0,.35)}
.game:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.view{position:relative;aspect-ratio:16/10;display:grid;place-items:center;padding:22px 18px 10px;overflow:hidden}
.field .view{background:radial-gradient(80% 90% at 50% 100%,rgba(127,214,143,.28),transparent 70%),linear-gradient(180deg,#1b2d4a,#16323a)}
.sail .view{background:radial-gradient(80% 90% at 50% 100%,rgba(119,191,255,.30),transparent 70%),linear-gradient(180deg,#1a2550,#153457)}
.view img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 18px 24px rgba(0,0,0,.4));transition:transform .4s}
.sail .view img{-webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
.game:hover .view img{transform:translateY(-4px) scale(1.015)}
.body{display:grid;gap:8px;padding:20px 22px 22px;align-content:start}
.kind{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.field .kind{color:var(--green)}.sail .kind{color:var(--sea)}
.game strong{font-size:28px;font-weight:800;letter-spacing:-.01em;line-height:1.1}
.body p{margin:0;color:var(--muted)}
.foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:10px;flex-wrap:wrap}
.status{font-size:13px;color:var(--muted);display:inline-flex;align-items:center}
.status i{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--off);margin-right:8px}
.status.on i{background:var(--ok);box-shadow:0 0 0 4px rgba(111,227,154,.15)}
.play{background:var(--accent);color:var(--accent-ink);font-weight:800;border-radius:12px;padding:10px 16px;font-size:15px}

/* connect + admin */
.how{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1.4fr) auto;gap:24px;align-items:center}
.how p{margin:0;color:var(--muted);font-size:15px}
.flow{list-style:none;margin:0;padding:0;display:flex;gap:8px;align-items:stretch;flex-wrap:wrap}
.flow li{flex:1 1 120px;display:grid;gap:2px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:rgba(5,9,22,.35);position:relative}
.flow li b{font-size:14px}.flow li small{color:var(--faint);font-size:12px}
.admin summary{cursor:pointer;font-weight:600;color:var(--muted);font-size:14px}
.admin[open] summary{margin-bottom:14px}
.note{color:var(--faint);font-size:13px;margin:12px 0 0}
table{width:100%;border-collapse:collapse;font-size:14px}th,td{text-align:left;padding:8px 6px;border-bottom:1px solid var(--line)}th{color:var(--faint);font-weight:600}
td{font-variant-numeric:tabular-nums}
.table-wrap{overflow-x:auto}
footer{text-align:center;color:var(--faint);font-size:12px;padding:24px 16px 36px}
[hidden]{display:none!important}

/* connect guide page */
.guide{max-width:780px;display:grid;gap:22px}
.guide h1{font-size:clamp(30px,4.6vw,44px)}
.back{color:var(--accent);text-decoration:none;font-size:14px;font-weight:600}
.guide .card{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:22px}
.guide ul,.guide ol{margin:0;padding-left:20px;display:grid;gap:8px;color:var(--muted)}.guide p{margin:0 0 10px;color:var(--muted)}
.guide .flow{margin:14px 0}.guide .flow span{padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:rgba(5,9,22,.35);font-size:14px}.guide .flow i{font-style:normal;color:var(--faint);align-self:center}
.os{display:grid;gap:6px;margin-top:10px;background:rgba(5,9,22,.35);border:1px solid var(--line);border-radius:12px;padding:12px 14px;font-size:14px}.os p{margin:0}
code{font-size:13px}

@media (max-width:860px){
 .gate{grid-template-columns:1fr;gap:12px;min-height:0}
 .isles{order:-1;aspect-ratio:1/0.62;max-width:520px;width:100%;margin:0 auto}
 .isle.a{width:58%}.isle.b{width:64%}
 .how{grid-template-columns:1fr}
}
@media (max-width:600px){
 .bar{padding:14px 16px;gap:8px}.mark{font-size:14px;letter-spacing:.18em}
 main{padding:20px 16px 56px}#home{gap:28px}
 .lead{font-size:16px}.enter{margin-top:22px}
 .view{padding:16px 12px 6px}.body{padding:16px 18px 18px}.game strong{font-size:24px}
 .panel{padding:18px}
 .flow li{flex-basis:80px;padding:9px 10px}.flow li small{font-size:11px}
}
@media (prefers-reduced-motion:reduce){.isle{animation:none}.game,.view img{transition:none}}
/* Salmoura = 정식 게임(개발 중) — 맨 위 큰 카드 */
.game.featured{grid-column:1/-1;border-color:rgba(255,210,122,.4)}
.game.featured .view{padding:0;background:none;aspect-ratio:21/9;display:block}
.game.featured .view img{width:100%;height:100%;object-fit:cover;object-position:50% 60%;filter:none}
@media (max-width:640px){.game.featured .view{aspect-ratio:16/10}}
.game.featured strong{font-size:32px}
/* 첫 화면: 살모라(정식 게임) 창을 앞에 크게, 첫들·문장과 돛 섬은 뒤에 작게 */
.isle.a{width:50%;left:-2%;top:0;z-index:1;opacity:.92}
.isle.b{width:54%;right:-2%;bottom:0;z-index:1;opacity:.92}
.isle.s{width:78%;left:11%;top:21%;z-index:2;border-radius:18px;border:1px solid rgba(255,210,122,.45);box-shadow:0 30px 60px rgba(0,0,0,.55);filter:none;animation:drift 10s ease-in-out -2s infinite}
@media (max-width:900px){.isles{aspect-ratio:1/0.74}.isle.a{width:46%}.isle.b{width:50%}.isle.s{width:80%;left:10%;top:19%}}
/* ---- 리뉴얼 09-26: 소개 · 시작 체크리스트 · 실험 세계 · 연결 안내 탭 ---- */
.about{display:grid;gap:22px;margin-top:40px}
.how2 h2,.why h2,.start h2{font-size:clamp(20px,2.4vw,26px);margin-bottom:14px}
.three{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.three li{background:rgba(5,9,22,.45);border:1px solid var(--line);border-radius:14px;padding:16px;display:grid;gap:6px}
.three .ico{font-size:24px}.three b{font-size:16px}.three small{color:var(--muted);font-size:14px;line-height:1.5}
.whylist{list-style:none;margin:0 0 16px;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 22px}
.whylist li{display:grid;gap:4px;padding-left:14px;border-left:2px solid rgba(255,210,122,.5)}.whylist b{font-size:15px}.whylist span{color:var(--muted);font-size:14px}
.checklist{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.checklist li{display:grid;grid-template-columns:30px 1fr;gap:12px;align-items:start;padding:14px;border:1px solid var(--line);border-radius:14px;background:rgba(5,9,22,.45)}
.checklist .mark2{width:26px;height:26px;border-radius:50%;border:2px solid var(--faint);display:grid;place-items:center;font-weight:800;font-size:14px}
.checklist li.done .mark2{background:var(--ok);border-color:var(--ok);color:#06220f}
.checklist li.done b{color:var(--ok)}
.checklist li.optional .mark2{border-style:dashed}
.checklist b{font-size:16px}.checklist p{margin:4px 0 0;color:var(--muted);font-size:14px}
.acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.btn{display:inline-block;padding:9px 14px;font-size:14px;border-radius:10px;text-decoration:none}
.labs{display:grid;gap:8px}.labs .note{margin:0 0 6px;color:var(--muted);font-size:14px}
.games.small{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:14px}
.game.mini{grid-template-columns:120px 1fr;grid-template-rows:none;border-radius:16px}
.game.mini .view{aspect-ratio:auto;padding:8px}.game.mini .body{padding:12px 14px}.game.mini strong{font-size:18px}.game.mini p{font-size:13px;margin:4px 0 6px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.game.mini .foot{margin-top:0}.game.mini .kind{font-size:11px}
.tabs2{display:flex;gap:6px;margin:6px 0 18px;flex-wrap:wrap}.tabs2 button{padding:8px 14px;font-size:14px}.tabs2 button[aria-pressed=true]{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);font-weight:800}
.guide pre,.guide code{font-family:ui-monospace,Menlo,monospace;font-size:13px;background:rgba(5,9,22,.6);border:1px solid var(--line);border-radius:8px;padding:2px 6px;word-break:break-all}
.guide pre{display:block;padding:10px 12px;white-space:pre-wrap;user-select:all}
@media (max-width:860px){.three{grid-template-columns:1fr}.whylist{grid-template-columns:1fr}}
@media (max-width:600px){.game.mini{grid-template-columns:96px 1fr}}

/* Island Life demo card — full width, right below Salmoura (2026-10-18) */
.island .view{background:linear-gradient(180deg,#1d4e6b,#173f57)}
.island .kind{color:#7fd6c4}
.game.wide{grid-column:1/-1}
@media (min-width:820px){.game.wide{grid-template-columns:minmax(0,1.15fr) 1fr;grid-template-rows:none}.game.wide .view{aspect-ratio:16/9;padding:0}.game.wide .view img{object-fit:cover;filter:none}.game.wide .body{align-content:center}}
@media (max-width:819px){.game.wide .view{padding:0}.game.wide .view img{object-fit:cover;filter:none}}

/* Island Life Next card — full width, right below Island Life (2026-10-26) */
.island-next .view{background:linear-gradient(180deg,#24563a,#1b4230)}
.island-next .kind{color:#f2d38a}