/* onidot AI 허브. 휴대폰 폭(375px)이 기본이고 넓은 화면에서도 한 열이다. 색과 글꼴은 onidot 로그인 화면(clients.css)을 따른다. */
:root {
  color-scheme: light;
  --ink: #202821;
  --muted: #5b6458;
  --paper: #f5f4ef;
  --card: #ffffff;
  --line: #c5cabe;
  --accent: #245136;
  --wait-ink: #6b3d00;
  --wait-bg: #fff3d6;
  --wait-line: #c27c0e;
  --danger: #813324;
  --off: #8a8f87;
  font-family: ui-serif, Georgia, serif;
  color: var(--ink);
  background: var(--paper);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-size: 1rem; line-height: 1.55; background: var(--paper); overflow-x: hidden; }
a { color: var(--accent); text-underline-offset: .2em; }
p, h1, h2, li, code, span { overflow-wrap: anywhere; }
code { font-family: ui-monospace, monospace; font-size: .9em; }
:focus-visible { outline: 3px solid #86621a; outline-offset: 3px; }

.top { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem 1rem; padding: .75rem 1rem; border-bottom: 1px solid var(--line); background: var(--card); }
.brand { font-weight: bold; text-decoration: none; color: var(--ink); margin-right: auto; }
.top nav { display: flex; gap: .25rem; }
.top nav a { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 .6rem; text-decoration: none; border-radius: .2rem; }
.top nav a[aria-current="page"] { background: var(--paper); font-weight: bold; color: var(--ink); }
.who { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .75rem; width: 100%; min-width: 0; color: var(--muted); font-size: .875rem; }
.who .email { min-width: 0; overflow-wrap: anywhere; }
.who form { margin: 0; }

main { max-width: 44rem; margin: 0 auto; padding: 1rem 1rem 4rem; }
h1 { font-size: clamp(1.5rem, 6vw, 2.25rem); line-height: 1.3; letter-spacing: -.02em; margin: .5rem 0 1rem; }
h2 { font-size: 1.15rem; margin: 0; }
.summary { margin: .25rem 0 1rem; color: var(--muted); }
.notice { padding: .75rem 1rem; border-left: 4px solid var(--accent); background: var(--card); }

.device { margin: 0 0 1.25rem; padding: 1rem; background: var(--card); border: 1px solid var(--line); border-radius: .4rem; min-width: 0; }
.device-status { margin: .15rem 0 .75rem; color: var(--muted); font-size: .9rem; }
.device.off { background: #eceae4; color: var(--off); border-style: dashed; }
.device.off h2 { color: var(--off); }
.device.off .session { background: transparent; border-color: #d3d4cf; color: var(--off); }
.empty { margin: 0; color: var(--muted); }

.sessions { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.session { margin: 0; padding: .7rem .8rem; border: 1px solid var(--line); border-left-width: 4px; border-radius: .3rem; background: var(--paper); min-width: 0; }
.session p { margin: 0; }
.session .state { font-size: .85rem; font-weight: bold; color: var(--accent); }
.session .host { font-weight: bold; }
.session .place { font-family: ui-monospace, monospace; font-size: .85rem; }
.session .activity { margin-top: .2rem; }
.session .work { margin-top: .3rem; font-size: .9rem; }
.session .work-title { font-weight: bold; }
.session .progress { white-space: nowrap; color: var(--muted); }
.session .human { display: inline-block; padding: 0 .35rem; border-radius: .2rem; background: var(--wait-bg); color: var(--wait-ink); font-size: .8rem; }
.session .timing { margin-top: .3rem; color: var(--muted); font-size: .8rem; }

/* 확인 기다림이 가장 눈에 띈다. */
.session.waiting { background: var(--wait-bg); border-color: var(--wait-line); border-left-width: 8px; }
.session.waiting .state { color: var(--wait-ink); font-size: 1rem; }
.session.waiting .state::before { content: "● "; }
.session.running { border-left-color: var(--accent); }
.session.crashed { border-left-color: var(--danger); }
.session.crashed .state { color: var(--danger); }
.session.ended, .session.stale { border-left-color: var(--line); }
.session.ended .state, .session.stale .state { color: var(--muted); }

label { display: block; margin: 1rem 0 .4rem; font-weight: bold; }
input, button { font: inherit; }
input:not([type=checkbox]) { display: block; width: 100%; min-height: 2.75rem; padding: .6rem; border: 1px solid #7b8578; border-radius: .2rem; background: #fff; color: var(--ink); }
button, .action { display: inline-block; min-height: 2.75rem; padding: .6rem 1rem; border: 1px solid var(--accent); border-radius: .2rem; background: var(--accent); color: #fff; margin-top: .75rem; cursor: pointer; text-decoration: none; max-width: 100%; }
button.secondary { background: #fff; color: var(--accent); }
button.danger { background: var(--danger); border-color: var(--danger); }
button.quiet { margin: 0; min-height: 2.75rem; padding: 0 .4rem; background: none; border: none; color: var(--accent); text-decoration: underline; text-underline-offset: .2em; }
.confirm { display: flex; align-items: flex-start; gap: .6rem; font-weight: normal; }
.confirm input { width: 1.25rem; height: 1.25rem; flex-shrink: 0; margin-top: .15rem; }
.device form { border-top: 1px solid var(--line); margin-top: 1rem; padding-top: .25rem; }

@media (min-width: 40rem) {
  .who { width: auto; }
  main { padding-top: 2rem; }
}