/* 앱 화면 배치. 껍데기 규칙은 design/gravitor.css에 있고, 여기엔 앱만의 것만 둬요 */
html, body { background: var(--ground); }
body { margin: 0; }
/* 머리 아래 펼침 판(쓰기 열쇠·에이전트 열쇠·함께 쓰기)은 제 높이만, 남는 높이는 노선도가 가져요 */
.sh { display: flex; flex-direction: column; }
.sh > * { flex: none; }
.sh > .sh-body { flex: 1 1 auto; min-height: 0; }
@media (min-width: 981px) {
  .sh, .g-app[data-room] .sh { height: 100svh; }
}
.conds { grid-column: 1 / -1; list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-4); font-size: var(--t-sm); color: var(--ink-2); }
.conds li::before { content: "○ "; color: var(--ink-3); }
.conds li[data-status="passed"]::before { content: "● "; color: var(--ok); }
.conds li[data-status="failed"]::before { content: "✕ "; color: var(--stop); }
.err { padding: var(--s-5); color: var(--ink-2); }

/* 쓰기(사람용): 열쇠, 내 자리, 줄마다 할 일과 동작 */
.who { color: var(--ink-2); font-size: var(--t-sm); }
.keyform { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: end; padding: var(--s-3) var(--s-4); background: var(--ground-2); border-bottom: 1px solid var(--rule); }
.keyform .g-field { flex: 1 1 260px; }
.me { display: grid; gap: var(--s-2); font-size: var(--t-sm); color: var(--ink-2); }
.me .path { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.me .path li { padding-left: var(--s-3); border-left: 2px solid var(--rule-strong); }
.me .path li:first-child { border-left-color: var(--accent); color: var(--ink); font-weight: 600; }
.me .path .why { display: block; color: var(--ink-3); font-weight: 400; font-size: var(--t-xs); }
.todos { list-style: none; margin: 2px 0 var(--s-2) var(--s-5); padding: 0; display: grid; gap: 2px; font-size: var(--t-sm); }
.todos li { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-2); align-items: center; color: var(--ink-2); }
.todos li::before { content: "○"; color: var(--ink-3); }
.todos li[data-status="done"]::before { content: "●"; color: var(--ok); }
.todos li[data-status="dropped"] { text-decoration: line-through; color: var(--ink-3); }
.todos li[data-status="dropped"]::before { content: "–"; }
.acts { display: flex; flex-wrap: wrap; gap: var(--s-1); margin: 0 0 var(--s-2) var(--s-5); }
.keyform[hidden], .actform[hidden] { display: none; }
.rail-list .act { display: inline-flex; width: auto; grid-template-columns: none; min-height: 0; align-items: center;
  font: 600 var(--t-xs)/1 var(--font-ui); padding: 5px 8px; border-radius: var(--r-sm); border: 1px solid var(--rule-strong); background: transparent; color: var(--ink-2); cursor: pointer; }
.rail-list .act:hover:not(:disabled) { background: var(--ground-3); color: var(--ink); }
.rail-list .act:disabled { opacity: .45; cursor: not-allowed; }
.rail-list .act[data-warn]::after { content: " · 경고"; color: var(--notice); }
.here { color: var(--accent); font-size: var(--t-xs); }
.actform { position: fixed; z-index: 20; inset: auto max(16px, env(safe-area-inset-right, 0px)) calc(16px + env(safe-area-inset-bottom, 0px)) auto; width: min(380px, calc(100vw - 32px)); display: grid; gap: var(--s-2); padding: var(--s-4); background: var(--ground-2); border: 1px solid var(--rule-strong); border-radius: var(--r-md); box-shadow: var(--shadow-float); }
.act-row { display: flex; gap: var(--s-2); }

/* 가입·로그인: 로그인해야 볼 수 있는 곳에서는 화면 전체, 로컬에서는 띄운 창 */
.auth { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; padding: 16px; background: color-mix(in oklch, var(--ground) 92%, transparent); }
.auth[hidden], a.g-btn[hidden], .keys[hidden], .keys-made[hidden], .g-btn[hidden], .g-field[hidden], .space[hidden], #share-owner[hidden], #share-add[hidden] { display: none; }
.space { width: auto; max-width: 14rem; }
#share-owner { display: grid; gap: var(--s-2); }
.auth-card { width: min(380px, calc(100vw - 32px)); box-sizing: border-box; display: grid; gap: var(--s-3); padding: var(--s-5); background: var(--ground-2); border: 1px solid var(--rule-strong); border-radius: var(--r-md); box-shadow: var(--shadow-float); }
.auth-card h1 { margin: 0; font-size: var(--t-lg); }
.auth-card .mark { color: var(--ink-2); font-weight: 600; }
.auth-err { color: var(--stop); min-height: 1em; margin: 0; }
a.g-btn { text-decoration: none; justify-content: center; }

/* 에이전트 열쇠 */
.keys { display: grid; gap: var(--s-2); padding: var(--s-3) var(--s-4); background: var(--ground-2); border-bottom: 1px solid var(--rule); }
.keys h2 { margin: 0; font-size: var(--t-md); }
.keys .g-help { margin: 0; }
.keys-new { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: end; }
.keys-new .g-field { flex: 1 1 260px; }
.keys-made { display: grid; gap: var(--s-2); padding: var(--s-3); border: 1px solid var(--accent); border-radius: var(--r-sm); }
.keys-made p { margin: 0; }
.keys-made code { display: block; overflow-x: auto; white-space: pre; padding: var(--s-2); background: var(--ground-3); border-radius: var(--r-sm); font-size: var(--t-xs); }
.keys-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-1); font-size: var(--t-sm); }
.keys-list li { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; color: var(--ink-2); }
.keys-list .nm { color: var(--ink); font-weight: 600; }