/* orke 홈페이지와 문서 페이지의 공용 스타일 원본. 원격 기기 예시는 HTML, 제품 사진은 PNG다. */
@layer components {
:root {
  --g0:#ffffff; --g1:#ffffff; --g2:#f2f8f5; --g3:#e9f2ed; --g4:#d9e6de;
  --line:#d9e6de; --line2:#bdd3c5;
  --t:#142b23; --tm:#53665d; --td:#61746a;
  --brand:#1c8d5e; --live:#14734b; --busy:#995900; --focus:#1c8d5e; --danger:#b42318;
  --sans:'IBM Plex Sans KR',system-ui,'Segoe UI',sans-serif;
  --head:'Gothic A1','IBM Plex Sans KR',system-ui,sans-serif;
  --mono:'IBM Plex Mono','Cascadia Mono',Consolas,monospace;
}
* { box-sizing:border-box }
html,body { margin:0 }
body { background:var(--g1);color:var(--t);font-family:var(--sans);font-size:16px;line-height:1.7;-webkit-font-smoothing:antialiased;color-scheme:light }
a { color:var(--t);text-decoration:none;transition:color .2s }
a:hover { color:var(--live) }
a:focus-visible,button:focus-visible,summary:focus-visible { outline:3px solid var(--focus);outline-offset:5px }
.page { min-width:320px;container:page / inline-size }
.wrap { width:100%;max-width:1312px;margin:0 auto;padding:0 64px }
h1,h2,h3 { font-family:var(--head);font-weight:800;letter-spacing:-.045em;margin:0;text-wrap:pretty;word-break:keep-all }
p { margin:0;word-break:keep-all;text-wrap:pretty }
figure { margin:0 }
code { font-family:var(--mono);font-size:.92em;color:var(--t);background:var(--g3);border:1px solid var(--line);border-radius:3px;padding:1px 6px;white-space:nowrap }
.num { font-family:var(--mono);font-size:12px;letter-spacing:.14em;color:var(--td) }
.nav { position:sticky;top:0;z-index:40;background:var(--g1);border-bottom:1px solid var(--line) }
.nav-in { min-height:76px;display:flex;align-items:center;justify-content:space-between;gap:28px }
.brand { display:flex;align-items:center;gap:11px;font-family:var(--head);font-weight:800;font-size:19px;letter-spacing:-.04em;white-space:nowrap }
.brand:hover { color:var(--t) }
.nav-links { display:flex;gap:28px;font-size:14px }
.nav-links a { padding:8px 0;color:var(--tm);white-space:nowrap }
.nav-links a:hover { color:var(--live) }
.btn { display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:42px;padding:0 18px;border:1px solid var(--line2);border-radius:7px;font-size:14px;font-weight:500;white-space:nowrap }
.btn:hover { border-color:var(--live) }
.mark .ring { transform-origin:256px 256px }
.skip { position:absolute;left:16px;top:-64px;z-index:60;padding:10px 14px;background:var(--t);color:var(--g0);border-radius:4px;font-size:14px;font-weight:600 }
.skip:focus { top:12px;color:var(--g0) }
.foot { border-top:1px solid var(--line);padding:64px 0 32px;background:var(--g1) }
.foot-grid { display:grid;grid-template-columns:5fr 7fr;gap:48px }
.foot-description { margin-top:20px;color:var(--tm);font-size:15px;max-width:330px }
.foot-cols { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px }
.foot .foot-h { margin:0 0 18px;font-family:var(--sans);font-size:14px;letter-spacing:0;color:var(--t);font-weight:600 }
.foot ul { list-style:none;margin:0;padding:0;display:grid;gap:9px;font-size:14px }
.foot ul a { color:var(--tm) }
.foot ul a:hover { color:var(--live) }
.foot .ph { color:var(--busy);font-family:var(--mono);font-size:13px }
.foot-bottom { margin-top:48px;padding-top:24px;border-top:1px solid var(--line);font-size:13px;color:var(--td) }

/* 실물 터치 UI의 기하를 기기별 컨테이너 단위로 축소한다. 화면은 설명용이며 조작 요소가 아니다. */
.remote-preview { max-width:1320px;margin-inline:auto }
.remote-devices { position:relative;display:flow-root;padding:16px 0 4.5%;isolation:isolate }
.remote-device { container-type:inline-size;background:#0a0d10;border:1px solid #46504c;box-shadow:0 22px 65px #0005,0 1px 0 #748078 inset;padding:10px;overflow:hidden }
.remote-tablet { width:84%;border-radius:24px }
.remote-device-screen { display:flex;flex-direction:column;overflow:hidden;background:#1c2026;border:1px solid #333941;border-radius:14px;color:#dce2e9;font:400 1.48cqw/1.6 var(--sans);letter-spacing:0 }
.remote-tablet .remote-device-screen { aspect-ratio:1.62 }
.remote-appbar { display:flex;align-items:center;gap:2cqw;min-height:4.7cqw;padding:0 1.6cqw;border-bottom:1px solid #343941;flex-shrink:0 }
.remote-appbar strong { font-size:1.7cqw;font-weight:600 }
.remote-menu { font-size:1.8cqw;color:#b4bec9 }
.remote-appbar-actions { margin-left:auto;display:flex;align-items:center;gap:2.6cqw;white-space:nowrap }
.remote-tablet-workspace { flex:1;display:grid;grid-template-columns:24% 41% 35%;min-height:0 }
.remote-sidebar { border-right:1px solid #343941;padding:1.5cqw .8cqw }
.remote-group-label { display:flex;justify-content:space-between;color:#9cadbe;font-size:1.3cqw;padding:0 .7cqw .9cqw }
.remote-session { padding:1cqw .8cqw;border:1px solid transparent;border-radius:.6cqw;margin-bottom:.5cqw;line-height:1.7 }
.remote-session strong { display:flex;justify-content:space-between;font-size:1.4cqw;font-weight:600 }
.remote-session strong>span { color:#93b3ce;font-size:1.1cqw;font-weight:400 }
.remote-session.is-current { background:#282f38;border-color:#424d59 }
.remote-session-meta { display:flex;align-items:center;gap:.5cqw;color:#bbcad7;font-size:1.15cqw }
.remote-session-meta i { width:.5cqw;height:.5cqw;border-radius:50%;background:#f5b356 }
.remote-session-meta.is-idle i { background:#7c91a2 }
.remote-session small { display:block;font-size:1.05cqw;color:#8a9bad;white-space:nowrap;overflow:hidden;text-overflow:ellipsis }
.remote-git-label { margin-top:2cqw }
.remote-repository { border-color:#3b444e }
.remote-open-repository { border:1px solid #3b444e;border-radius:.5cqw;text-align:center;padding:.8cqw;margin-top:1cqw }
.remote-pane { min-width:0;display:flex;flex-direction:column;overflow:hidden }
.remote-terminal-pane { border-right:.7cqw solid #11151a }
.remote-pane-title { display:flex;align-items:center;justify-content:space-between;min-height:4.7cqw;padding:0 1.3cqw;border-bottom:1px solid #475261;flex-shrink:0 }
.remote-pane-title>span { color:#93a7ba;font-size:1.1cqw }
.remote-terminal { position:relative;flex:1;min-height:0;overflow:hidden;background:#080b10;padding:2cqw 1.7cqw;font:1.35cqw/1.85 var(--mono),var(--sans);color:#d4dce5 }
.remote-agent-name { color:#f0f3f7;font-weight:500;font-size:1.65cqw }
.remote-terminal-muted { color:#8391a3 }
.remote-prompt { color:#eef2f7;margin:2.4cqw 0 1.7cqw;padding-top:1.3cqw;border-top:1px solid #303844 }
.remote-terminal p { word-break:normal;text-wrap:wrap }
.remote-terminal-block { margin:1.7cqw 0 }
.remote-terminal-file { display:flex;justify-content:space-between;gap:.5cqw;font-size:1.12cqw;white-space:nowrap }
.remote-terminal-file>span,.remote-terminal-success { color:#91c4a5 }
.remote-terminal-success { margin:2cqw 0 1.2cqw }
.remote-keybar { display:flex;align-items:center;justify-content:space-around;min-height:4.5cqw;border-top:1px solid #343941;flex-shrink:0;font:500 1.25cqw/1 var(--mono),var(--sans) }
.remote-keybar>span:last-child { border-left:1px solid #343941;padding-left:1cqw;color:#9db4ca }
.remote-git-toolbar { display:flex;gap:.7cqw;padding:.9cqw 1cqw }
.remote-git-toolbar>span { display:grid;place-items:center;width:4.5cqw;height:4cqw;border:1px solid #3b444e;border-radius:.5cqw;font-size:1.7cqw }
.remote-git-branch { display:flex;justify-content:space-between;background:#292f39;margin:0 1cqw 1cqw;padding:.7cqw 1cqw;border:1px solid #424b59;border-radius:.5cqw;font-size:1.3cqw }
.remote-git-columns { display:flex;justify-content:space-between;padding:.4cqw 1.5cqw .4cqw 4cqw;border-block:1px solid #343941;color:#9fb1c3;font-size:1.15cqw }
.remote-commit { display:flex;align-items:center;gap:.8cqw;padding:.8cqw 1.3cqw;font-size:1.1cqw;white-space:nowrap }
.remote-commit>i { position:relative;width:.65cqw;height:.65cqw;border:1px solid #83b1df;border-radius:50%;margin-right:.6cqw }
.remote-commit>i:after { content:"";position:absolute;top:100%;left:50%;height:2.3cqw;border-left:1px solid #598ab6 }
.remote-commit.is-last>i:after { display:none }
.remote-commit>small { margin-left:auto;font-size:1cqw;color:#9db0c2 }
.remote-commit b { border:1px solid #6a8eaf;border-radius:.25cqw;font:500 .8cqw var(--mono);padding:.1cqw .3cqw;margin-right:.5cqw;color:#c5ddf2 }
.remote-commit-detail { display:flex;flex-direction:column;gap:.6cqw;margin-top:3cqw;padding:1.5cqw 1.3cqw;border-top:1px solid #414a56;font-size:1.15cqw }
.remote-commit-detail strong { font-weight:500 }.remote-commit-detail>span { color:#91a3b6;font-size:1.05cqw }
.remote-commit-detail em { color:#91c4a5;font-style:normal;margin-left:1cqw }.remote-commit-detail del { color:#dfa4a0;text-decoration:none }
.remote-diff-file { background:#242b34;padding:.5cqw 1.3cqw;font:1.05cqw/1.7 var(--mono) }
.remote-diff { font:1.12cqw/1.9 var(--mono);padding-top:.5cqw;background:#151a22;flex:1 }
.remote-diff>* { display:block;white-space:pre;padding-inline:1.3cqw;text-decoration:none }
.remote-diff del { background:#3b252c;color:#dfa4a0 }.remote-diff ins { background:#1f382e;color:#9bcbb0 }
.remote-git-footer { display:flex;gap:1.5cqw;padding:.5cqw 1cqw;font-size:.95cqw;color:#92a5b8;border-top:1px solid #343941 }
.remote-phone { position:absolute;right:0;bottom:0;width:25.5%;padding:7px;border-radius:29px;box-shadow:-18px 16px 60px #0008,0 1px 0 #748078 inset }
.remote-phone .remote-device-screen { aspect-ratio:.51;border-radius:21px;font-size:3.3cqw }
.remote-phone .remote-appbar { min-height:12cqw;gap:3.5cqw;padding-inline:3cqw }
.remote-phone .remote-menu { font-size:4.4cqw }.remote-phone .remote-appbar strong { font-size:4.3cqw }
.remote-phone .remote-appbar-actions { gap:3cqw;font-size:3cqw }.remote-disabled { color:#79899b }
.remote-phone .remote-pane-title { min-height:12cqw;padding-inline:3.5cqw;font-size:3.8cqw }.remote-phone .remote-pane-title>span { font-size:3cqw }
.remote-phone .remote-terminal { padding:5cqw 3.5cqw;font-size:3.35cqw;line-height:1.9 }
.remote-phone .remote-agent-name { font-size:4.2cqw }.remote-phone .remote-terminal-muted { font-size:3.1cqw }
.remote-phone .remote-prompt { margin:6cqw 0 5cqw;padding-top:4cqw }.remote-phone .remote-terminal-success { margin:6cqw 0 }
.remote-phone .remote-terminal-block { margin:5cqw 0 }.remote-phone .remote-phone-input { margin-top:11cqw;white-space:nowrap }
.remote-cursor { display:inline-block;width:1.7cqw;height:3.8cqw;vertical-align:middle;background:#b7c6d4;margin-left:1cqw }
.remote-phone .remote-keybar { min-height:12cqw;font-size:2.8cqw }.remote-phone .remote-keybar>span:last-child { padding-left:2cqw }
.cinema-home .remote-preview figcaption { margin-top:26px;color:#91a79a;font-size:12px }
/* JS가 모션을 준비한 때만 후속 장면을 표시한다. 비활성·미지원 환경은 완성된 정지 화면이다. */
.remote-demo-followup,.remote-demo-only { display:none }
.is-demo-ready .remote-demo-followup,.is-demo-ready .remote-demo-only { display:block }
.remote-demo-followup { position:absolute;inset:9cqw 1.7cqw 1cqw;background:#080b10 }
.remote-demo-followup>.remote-terminal-success:first-child { margin-top:0 }
.remote-demo-commit { background:#283440 }
.remote-typed-input { display:inline-block }
.remote-phone-ack { color:#a7b9cb;margin-top:4cqw }
.remote-demo-caption { display:flex;align-items:center;gap:18px }
.remote-demo-toggle { display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:96px;min-height:36px;padding:6px 10px;border:1px solid #485b50;border-radius:3px;background:#19221e;color:#c3d2c7;font:12px/1.5 var(--sans);cursor:pointer }
.remote-demo-toggle[hidden] { display:none }
.remote-demo-toggle:hover { background:#24322a;border-color:#809d8c }
.remote-demo-toggle [data-remote-symbol] { width:12px;text-align:center }
@keyframes lift { to { transform:translateY(0) } }
@keyframes fade { to { opacity:1 } }
@keyframes rise { to { opacity:1;transform:translateY(0) } }
/* 문서 페이지도 좁은 화면에서 공용 내비를 두 줄로 배치한다. 홈은 별도 스타일이 이를 덮는다. */
@container page (max-width:1100px) {
  .wrap { padding-inline:36px }
  .nav-in { gap:22px }
  .nav-links { gap:22px }
}
@container page (max-width:760px) {
  .wrap { padding-inline:24px }
  .nav-in { flex-wrap:wrap;gap:12px;padding-block:18px;min-height:108px }
  .nav-in>.btn { margin-left:auto;font-size:12px;min-height:35px;padding-inline:12px }
  .nav-links { order:3;flex-basis:100%;gap:22px }
  .nav-links a { font-size:12px;padding-block:4px }
  .brand { font-size:18px }
}
    /* ── 문서 페이지(개인정보 처리방침·이용약관·지원) 전용 ── */
    .nav-links a.on{color:var(--t)}
    kbd{font-family:var(--mono);font-size:.85em;color:var(--t);background:var(--g2);border:1px solid var(--line2);border-bottom-width:2px;border-radius:4px;padding:1px 7px;white-space:nowrap}
    .ph{color:var(--busy);font-family:var(--mono);font-size:.95em}
    .doc{padding:96px 0 150px}
    .doc-head{max-width:860px}
    .doc-head .h1{font-size:40px;line-height:1.15;margin-top:16px;overflow:hidden}
    .doc-head .h1 span{display:block;transform:translateY(110%);animation:lift .9s cubic-bezier(.2,.7,.1,1) forwards}
    .doc-head .lead{margin-top:22px;font-size:16px;color:var(--tm);max-width:680px;opacity:0;animation:fade .8s .4s forwards}
    .doc-head .meta{margin-top:26px;font-family:var(--mono);font-size:12.5px;color:var(--td);display:flex;gap:20px;flex-wrap:wrap;opacity:0;animation:fade .8s .6s forwards}
    .doc-grid{display:grid;grid-template-columns:240px minmax(0,1fr);gap:80px;margin-top:80px;align-items:start}
    .toc{position:sticky;top:88px;font-size:13.5px;display:grid;gap:11px}
    .toc a{color:var(--td);position:relative;padding-left:18px;word-break:keep-all}
    .toc a::before{content:"";position:absolute;left:0;top:.8em;width:6px;height:1px;background:var(--td);transition:width .25s,background .25s}
    .toc a:hover{color:var(--t)}
    .toc a:hover::before{width:11px;background:var(--live)}
    .body{max-width:780px}
    .body h2{font-size:22px;line-height:1.3;margin-top:60px;padding-top:26px;border-top:1px solid var(--line);display:grid;grid-template-columns:56px 1fr;gap:12px;align-items:baseline}
    .body h2:first-child{margin-top:0;padding-top:0;border-top:0}
    .body h3{font-size:16px;font-family:var(--sans);font-weight:600;margin-top:24px;letter-spacing:0}
    .body p{color:var(--tm);font-size:15px;margin-top:14px}
    .body ul{margin:14px 0 0;padding:0;list-style:none;display:grid;gap:9px;color:var(--tm);font-size:14.5px}
    .body li{padding-left:18px;position:relative;word-break:keep-all}
    .body li::before{content:"";position:absolute;left:0;top:.85em;width:6px;height:1px;background:var(--td)}
    .body li b{color:var(--t);font-weight:600}
    .tbl{overflow-x:auto;margin-top:22px}
    .body table{width:100%;min-width:640px;border-collapse:collapse;font-size:14px;line-height:1.6}
    .body th{text-align:left;font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--td);font-weight:500;padding:10px 14px 10px 0;border-bottom:1px solid var(--line2);white-space:nowrap}
    .body th:nth-child(1){width:15%}.body th:nth-child(2){width:18%}.body th:nth-child(3){width:33%}.body th:nth-child(4){width:16%}.body th:nth-child(5){width:18%}
    .body td{padding:13px 14px 13px 0;border-bottom:1px solid var(--line);color:var(--tm);vertical-align:top;word-break:keep-all}
    .body td:first-child{color:var(--t);font-weight:500}
    .note{margin-top:22px;border:1px solid var(--line);background:var(--g0);padding:18px 20px;border-radius:4px}
    .note .num{display:block;margin-bottom:8px}
    .note p{margin-top:0;font-size:15px}
    /* 홈의 경고 아이콘도 class="warn" 이라 문서 범위(.doc)로 한정한다 — 전역으로 두면 그 아이콘이 상자로 그려진다(실측). */
    .doc .warn{margin-top:22px;border:1px solid rgba(255,159,10,.35);background:var(--g0);padding:18px 20px;border-radius:4px}
    .doc .warn .num{display:block;margin-bottom:8px;color:var(--busy)}
    .doc .warn p{margin-top:0;font-size:15px;color:var(--t)}
    .cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:56px}
    .card{border:1px solid var(--line);border-radius:6px;padding:24px;background:var(--g0);transition:border-color .3s,transform .3s;opacity:0;transform:translateY(24px);animation:rise .8s cubic-bezier(.2,.7,.1,1) forwards}
    .card:nth-child(2){animation-delay:.12s}.card:nth-child(3){animation-delay:.24s}
    .card:hover{border-color:var(--line2);transform:translateY(-2px)}
    .card .num{display:block}
    .card b{display:block;font-size:16.5px;font-weight:600;margin-top:10px;word-break:keep-all}
    .card p{margin-top:8px;color:var(--tm);font-size:14px}
    .card a.big{display:inline-block;margin-top:12px;font-family:var(--mono);font-size:13px;color:var(--live)}
    .doc-support .doc-grid{margin-top:88px}
    .doc-support .body{max-width:800px}
    .doc-support .body h2{margin-top:64px;padding-top:0;border-top:0}
    .faq{margin-top:24px;border-top:1px solid var(--line2)}
    .faq details{border-bottom:1px solid var(--line)}
    .faq summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:1fr 24px;gap:16px;align-items:center;padding:20px 0;font-size:16px;font-weight:600;word-break:keep-all;transition:color .2s}
    .faq summary::-webkit-details-marker{display:none}
    .faq summary:hover{color:var(--live)}
    .faq summary svg{color:var(--td);transition:transform .3s cubic-bezier(.2,.7,.2,1)}
    .faq details[open] summary svg{transform:rotate(45deg);color:var(--live)}
    .faq .ans{padding:0 0 24px;color:var(--tm);font-size:15px;max-width:720px;animation:fade .5s forwards}
    .faq .ans p{margin-top:0;font-size:15px}
    .faq .ans p + p{margin-top:12px}
    .faq .ans ul{margin:12px 0 0;padding:0;list-style:none;display:grid;gap:8px}
    .faq .ans li{padding-left:18px;position:relative}
    .faq .ans li::before{content:"";position:absolute;left:0;top:.85em;width:6px;height:1px;background:var(--td)}
    .keys{margin-top:28px;border-top:1px solid var(--line2)}
    .keys div{display:grid;grid-template-columns:220px 1fr;gap:20px;padding:14px 0;border-bottom:1px solid var(--line);font-size:15px;color:var(--tm);align-items:baseline}
    .keys div span:first-child{display:flex;gap:6px;flex-wrap:wrap}
    .paths{margin-top:28px;border-top:1px solid var(--line2)}
    .paths div{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;padding:14px 0;border-bottom:1px solid var(--line);font-size:14.5px;color:var(--tm);align-items:baseline}
    .paths code{white-space:normal;word-break:break-all}
    @media (prefers-reduced-motion:reduce){.doc-head .h1 span,.doc-head .lead,.doc-head .meta,.card{animation:none;opacity:1;transform:none}}
    @container page (max-width:1100px){.doc-grid,.doc-support .doc-grid{grid-template-columns:1fr;gap:40px}.toc{position:static;grid-template-columns:repeat(2,minmax(0,1fr))}.cards{grid-template-columns:1fr}}
    @container page (max-width:760px){.doc{padding:64px 0 96px}.doc-head .h1{font-size:34px}.toc{grid-template-columns:1fr}.body h2{font-size:20px;grid-template-columns:44px 1fr}.keys div,.paths div{grid-template-columns:1fr;gap:6px}}

    /* ── Blazor 셸: 앱이 뜨기 전 index.html 이 그리는 로딩 화면 ── */
    /* App.razor 의 FocusOnNavigate 가 라우트마다 h1 에 초점을 준다 — 스크린 리더용이지 테두리를 그리라는 뜻은 아니다. */
    h1:focus{outline:none}
    #app{min-height:100vh}
    .boot{min-height:100vh;display:grid;place-items:center;background:var(--g1);color:var(--td);font-family:var(--mono);font-size:12px;letter-spacing:.16em}
    .boot .mark{width:36px;height:36px;margin-bottom:18px}
    #blazor-error-ui{display:none;position:fixed;left:0;right:0;bottom:0;padding:14px 20px;background:#2a1f1f;color:var(--t);border-top:1px solid var(--danger);font-size:14px;z-index:100}
    #blazor-error-ui .dismiss{position:absolute;right:14px;top:10px;cursor:pointer;color:var(--tm)}


@media (prefers-reduced-motion:reduce) {
  .remote-demo-followup,.remote-demo-only { display:none!important }
  .remote-demo-toggle { display:none!important }
  .cinema-home [data-reveal].reveal-pending { opacity:1 }
  *,*::before,*::after { animation:none!important;transition:none!important;scroll-behavior:auto!important }
}
}