/* ceee.dev 로그인 서비스 화면 층 — calm_console.css(정본 design/ 의 바이트 사본) 위에 얹는다. 정본: cumplete/cp-auth auth/static/cere.css (ceee.dev 만 쓴다 — 엔진 사본 없음)
   껍데기 auth/ui.py 가 모든 화면(/ · /apps · /alerts · /account · /oauth/* · /login)에 같은 머리·본문 꼴로 붙인다. 접두 cere-(이 층) · cc-(정본 부품).
   기기 다섯 꼴(2026-10-08 사용자 「모바일/테블릿 가로 세로/PC 반응형으로 각각 구성」 · W-177) — 아래 미디어 블록 순서 그대로(뒤가 이긴다):
     PC           기본 규칙 — 아래 넷이 아닌 화면(넓고 마우스). 머리는 위에 붙는다(sticky).
     태블릿 가로   641–1366px 가로방향 · 높이 501px+ · 터치 (또는 641–1024px 가로방향 창). 머리 한 줄 · 누르는 곳 40px.
     태블릿 세로   641–1024px 세로방향. 탭은 둘째 줄 전폭 · 누르는 곳 44px · 2열.
     폰 가로       가로방향 · 높이 ≤500px. 머리 한 줄(탭은 옆으로 밀기) · 세로 여백 최소 · 2~4열.
     폰 세로       ≤640px. 탭 둘째 줄 전폭 · 1열 · 넓은 표는 카드로 쌓기(table.cere-stack) · 누르는 곳 44px.
   머리를 붙이지 않는 문턱(≤1024px 또는 터치)은 cp_nav(2.2.5)가 낸다 — 여기서는 건드리지 않는다. */

/* ---- 바탕 ---- */
body.cere{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}
body.cere>.cc-main{flex:1 0 auto;width:100%}
.cere .cc-main.cere-narrow{max-width:1040px}
.cere .cc-main.cere-mid{max-width:1240px}
.cere [hidden]{display:none!important}
.cere :focus-visible{outline:none;box-shadow:var(--ring)}
.cere .cere-m,.cere .m{font-size:13px;color:var(--text-3)}
.cere .ok{color:var(--g-text)}.cere .bad{color:var(--red-text)}
.cere .cc-band.cere-ok{background:var(--g-pill);color:var(--g-text)}
.cere .cc-band{line-height:19px;overflow-wrap:anywhere}
.cere code,.cere .cere-mn{font-family:var(--mono);font-size:13px}

/* ---- 머리 — 정본 .cc-top 그대로 + 탭을 .cc-hr1 바로 밑에 둬 좁은 화면에서 둘째 줄로 내린다 ----
   우상단 작업판 단추(cp_nav .cp-wb — 위에 떠 있다) 자리는 cp_nav 의 오른쪽 여백(132px) 대신 머리 끝 칸 .cere-wbsp 가 비운다(둘째 줄 탭이 그 여백에 잘리지 않게). */
body.cere .cc-top .cc-hr1{padding-right:24px}
.cere-wbsp{flex:none;width:96px;height:1px}
.cere-top .cc-brand:hover{text-decoration:none}
.cere-top .cc-tabs{flex:none;margin-left:4px}
.cere-top .cc-tabs a{gap:6px}
.cere-top .cc-hbtn .cere-lbl{display:inline}
.cere-top .cc-hl{flex:none}

/* ---- 입력·단추(정본에 없는 바탕 — 모든 ceee.dev 폼) ---- */
.cere input[type=password],.cere input[type=text],.cere input[type=number],.cere input[type=search],.cere input:not([type]),.cere select{
 height:36px;padding:0 10px;border:1px solid var(--line-strong);border-radius:var(--r-md);background:var(--surface);color:var(--text);
 font-size:14px;min-width:0;outline:none;transition:border-color .12s,box-shadow .12s}
.cere select{padding-right:30px;-webkit-appearance:none;appearance:none;cursor:pointer;
 background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%238A919E' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
 background-repeat:no-repeat;background-position:right 10px center}
.cere input:focus,.cere select:focus{border-color:var(--accent);box-shadow:var(--ring)}
.cere input::placeholder{color:var(--ph)}
.cere input[type=checkbox]{width:16px;height:16px;margin:0;accent-color:var(--accent);vertical-align:-3px;flex:none;cursor:pointer}
.cere main button{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:36px;padding:0 14px;border:1px solid var(--line);border-radius:var(--r-md);
 background:var(--surface);color:var(--text-2);font-size:14px;font-weight:600;cursor:pointer;white-space:nowrap;margin:0}
.cere main button:hover{background:var(--surface-2);color:var(--text)}
.cere main button.cc-pri{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.cere main button.cc-pri:hover{background:var(--accent-hover)}
.cere main button.cere-dng{color:var(--red-text);border-color:var(--red-line)}
.cere main button.cere-dng:hover{background:var(--red-weak)}
.cere main button.cere-sm{height:30px;padding:0 10px;font-size:13px}
.cere form{margin:0}
.cere fieldset{margin:0;padding:12px 14px 14px;border:1px solid var(--line);border-radius:var(--r-md);min-width:0;display:grid;gap:10px}
.cere legend{padding:0 6px;font-size:13px;font-weight:600;color:var(--text-2)}

/* ---- 폼 배치 ---- */
.cere-form{display:grid;gap:12px}
.cere-form label,.cere-f{display:grid;gap:6px;font-size:13px;font-weight:500;color:var(--text-3)}
.cere-form label input:not([type=checkbox]),.cere-form label select,.cere-f input:not([type=checkbox]),.cere-f select{width:100%}
.cere .cere-ck{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:400;color:var(--text-2);cursor:pointer}
.cere-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.cere-acts{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.cere-in{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap;vertical-align:middle}     /* 표 칸·한 줄 안의 작은 폼 */
.cere-in input[type=password]{width:132px}
.cere-fg{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px 16px;align-items:end}  /* 설정 칸 여럿 */

/* ---- 카드 부속 ---- */
.cere .cc-card .cc-ch h2 .cc-sub,.cere .cc-card .cc-ch h2 .m,.cere .cc-card .cc-ch h2 .cere-m{font-weight:400;margin-left:6px}
.cere-cf{padding:12px 16px;border-top:1px solid var(--line-soft)}
.cere .cc-card>.cc-tbw{border-radius:0 0 var(--r-lg) var(--r-lg)}
.cere table.cc-tb td{white-space:nowrap}
.cere table.cc-tb td.cere-wrap,.cere table.cc-tb td.tx{white-space:normal;min-width:220px;overflow-wrap:anywhere;padding-top:8px;padding-bottom:8px;line-height:18px}
.cere table.cc-tb td.cere-act{text-align:right}
.cere table.cc-tb td .cere-in{margin:3px 8px 3px 0}
.cere table.cc-tb td.cere-empty{color:var(--text-3);text-align:center;height:56px}
.cere-kv{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:8px 16px;font-size:14px;margin:0}
.cere-kv dt{color:var(--text-3);white-space:nowrap}.cere-kv dd{margin:0;min-width:0;overflow-wrap:anywhere}

/* ---- 격자 — 기기마다 열 수가 다르다(아래 미디어 블록) ---- */
.cc-kpi.cere-k5{grid-template-columns:repeat(5,minmax(0,1fr))}
.cere-g2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:start}
.cere-g3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:start}
.cere-col{display:flex;flex-direction:column;gap:16px;min-width:0}
.cere-g2>*,.cere-g3>*{min-width:0}

/* ---- 첫 화면 — 앱 칸 · 관리 칸 ---- */
.cere-apps{display:grid;grid-template-columns:repeat(auto-fill,minmax(208px,1fr));gap:12px}
.cere-app{display:flex;flex-direction:column;gap:6px;padding:14px 16px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);
 box-shadow:var(--sh-card);color:var(--text);min-width:0;transition:border-color .12s,background .12s}
.cere-app:hover{border-color:var(--accent-line);background:var(--surface-2);text-decoration:none}
.cere-app .cere-code{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:17px;font-weight:700;letter-spacing:.02em}
.cere-app .cere-code::after{content:"";margin-left:auto;width:8px;height:8px;border-radius:50%;background:var(--g-dot);box-shadow:0 0 0 3px var(--g-pill)}
.cere-app.cere-old .cere-code::after{background:var(--n-dot);box-shadow:0 0 0 3px var(--n-pill)}
.cere-app .cere-host{font-size:13px;color:var(--text-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cere-app .cere-seen{font-size:12px;color:var(--text-3);font-variant-numeric:tabular-nums}
.cere-links{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.cere-link{display:flex;align-items:flex-start;gap:12px;padding:14px 16px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);
 box-shadow:var(--sh-card);color:var(--text);min-width:0}
.cere-link:hover{border-color:var(--accent-line);background:var(--surface-2);text-decoration:none}
.cere-link .cere-ico{flex:none;display:inline-grid;place-items:center;width:32px;height:32px;border-radius:var(--r-md);background:var(--accent-weak);color:var(--on-weak)}
.cere-link b{display:block;font-size:15px;line-height:22px}
.cere-link span.cere-d{display:block;font-size:13px;line-height:19px;color:var(--text-3);margin-top:2px}
.cere-link.cere-out .cere-ico{background:var(--red-weak);color:var(--red-text)}

/* ---- 로그인 — 이름·메뉴 없음(게이트 방어 규칙 그대로): 표식 하나 · 비밀번호 칸 · 화살표 ---- */
body.cere-login{display:grid;place-items:center;padding:24px}
.cere-lgc{width:min(360px,100%);padding:28px 24px 22px;display:flex;flex-direction:column;align-items:center;gap:18px}
.cere-lgc .cc-mark{width:36px;height:36px;border-radius:10px}
.cere-lgr{display:flex;gap:8px;width:100%}
.cere .cere-lgr input[type=password]{flex:1;height:44px;font-size:16px;padding:0 14px}
.cere .cere-lgr button{width:44px;height:44px;padding:0;flex:none;font-size:18px}
.cere-lgm{min-height:18px;font-size:13px;line-height:19px;color:var(--text-3);font-variant-numeric:tabular-nums}

/* ---- 표 → 카드 쌓기(폰 세로에서만 켜진다 — 아래 블록). 칸마다 data-l="이름" ---- */

/* ================= 태블릿 가로 ================= */
@media (min-width:641px) and (max-width:1366px) and (orientation:landscape) and (min-height:501px) and (pointer:coarse),
       (min-width:641px) and (max-width:1024px) and (orientation:landscape) and (min-height:501px){
 .cere-top .cc-tabs a{height:36px;padding:0 14px}
 .cere-top .cc-hbtn{height:36px}
 .cere-top .cc-hl .cp-sw>summary{height:36px}
 .cere main button{height:40px}
 .cere main button.cere-sm{height:34px}
 .cere input[type=password],.cere input[type=text],.cere input[type=number],.cere input[type=search],.cere input:not([type]),.cere select{height:40px}
 .cere-apps{grid-template-columns:repeat(4,minmax(0,1fr))}
 .cere-links{grid-template-columns:repeat(5,minmax(0,1fr))}
 .cere-link{flex-direction:column;gap:10px}
}
@media (min-width:641px) and (max-width:1024px) and (orientation:landscape) and (min-height:501px){
 .cere-top .cc-now{display:none}
 .cere-top .cc-tabs a{padding:0 11px}
 .cere-g3{grid-template-columns:repeat(2,minmax(0,1fr))}
 .cere-apps{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* ================= 태블릿 세로 ================= */
@media (min-width:641px) and (max-width:1024px) and (orientation:portrait){
 body.cere .cc-top .cc-hr1{flex-wrap:wrap;gap:0 14px;padding:8px 24px 0}
 .cere-top .cc-tabs{order:10;flex-basis:100%;margin:0 0 12px;display:grid;grid-template-columns:repeat(5,minmax(0,1fr))}
 .cere-top .cc-tabs a{height:44px;padding:0 6px}
 .cere-top .cc-hbtn{height:40px}
 .cere-top .cc-hl .cp-sw>summary{height:40px}
 .cere main button{height:44px}
 .cere main button.cere-sm{height:40px}
 .cere input[type=password],.cere input[type=text],.cere input[type=number],.cere input[type=search],.cere input:not([type]),.cere select{height:44px}
 .cere-in input[type=password]{width:150px}
 .cc-kpi.cere-k5{grid-template-columns:repeat(5,minmax(0,1fr))}
 .cere-g2{grid-template-columns:minmax(0,1fr)}
 .cere-g2.cere-keep{grid-template-columns:repeat(2,minmax(0,1fr))}
 .cere-g3{grid-template-columns:repeat(2,minmax(0,1fr))}
 .cere-g3>.cere-span{grid-column:1/-1}
 .cere-apps{grid-template-columns:repeat(3,minmax(0,1fr))}
 .cere-links{grid-template-columns:repeat(3,minmax(0,1fr))}
 .cere-fg{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ================= 폰 세로 ================= */
@media (max-width:640px){
 body.cere .cc-top .cc-hr1{flex-wrap:wrap;gap:0 10px;padding:10px 16px 0;min-height:0}
 .cere-wbsp{width:92px}
 body.cere .cp-wb{top:10px;height:40px}
 .cere-top .cc-hl{gap:10px;flex-wrap:nowrap}
 .cere-top .cc-hl .cp-sw>summary{height:40px}
 .cere-top .cc-brand{font-size:16px}
 .cere-top .cc-now{display:none}
 .cere-top .cc-hbtn{height:40px;width:40px;padding:0;justify-content:center}
 .cere-top .cc-hbtn .cere-lbl{display:none}
 .cere-top .cc-tabs{order:10;flex-basis:100%;margin:10px 0 12px;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));flex-wrap:nowrap}
 .cere-top .cc-tabs a{height:44px;padding:0 2px;font-size:13px}
 .cere-top .cc-pop{position:fixed;left:16px;right:16px;top:64px;width:auto}
 .cere .cc-main{padding:16px 16px 28px;gap:12px}
 .cere .cc-ptitle h1{font-size:18px;line-height:26px}
 .cere .cc-card .cc-ch{padding:10px 14px}
 .cere .cc-card .cc-cb{padding:14px}
 .cere main button{height:44px}
 .cere main button.cere-sm{height:40px}
 .cere input[type=password],.cere input[type=text],.cere input[type=number],.cere input[type=search],.cere input:not([type]),.cere select{height:44px;font-size:16px}
 .cere-row>input,.cere-row>select{flex:1 1 140px}
 .cere-acts>button{flex:1 1 auto}
 .cere-in{display:flex;width:100%}
 .cere-in input[type=password]{width:auto;flex:1 1 120px}
 .cc-kpi.cere-k5{grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
 .cc-kpi.cere-k5>.cc-t{grid-column:span 2;padding:10px 12px}
 .cc-kpi.cere-k5>.cc-t:nth-child(n+4){grid-column:span 3}
 .cc-kpi.cere-k5 .cc-v{font-size:20px;line-height:26px}
 .cere-g2,.cere-g3{grid-template-columns:minmax(0,1fr);gap:12px}
 .cere-col{gap:12px}
 .cere-apps{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
 .cere-app{padding:12px 14px}
 .cere-links{grid-template-columns:minmax(0,1fr);gap:8px}
 .cere-link{align-items:center;padding:12px 14px}
 .cere-fg{grid-template-columns:minmax(0,1fr)}
 .cere-kv{grid-template-columns:minmax(0,1fr);gap:2px}
 .cere-kv dd{margin-bottom:8px}
 /* 넓은 표 → 카드 쌓기 */
 .cere table.cere-stack,.cere table.cere-stack tbody,.cere table.cere-stack tr,.cere table.cere-stack td{display:block;width:auto}
 .cere table.cere-stack thead{display:none}
 .cere table.cere-stack tr{padding:12px 14px;border-bottom:1px solid var(--line-soft)}
 .cere table.cere-stack tr:last-child{border-bottom:0}
 .cere table.cere-stack td{height:auto;min-height:0;padding:3px 0;border:0;white-space:normal;overflow-wrap:anywhere;text-align:left;min-width:0}
 .cere table.cere-stack td[data-l]{display:grid;grid-template-columns:minmax(5.5em,34%) minmax(0,1fr);gap:10px;align-items:baseline}
 .cere table.cere-stack td[data-l]::before{content:attr(data-l);font-size:13px;font-weight:600;color:var(--text-3);white-space:nowrap}
 .cere table.cere-stack td.cere-head{font-weight:700;font-size:15px;padding-bottom:6px}
 .cere table.cere-stack td.cere-act{padding-top:8px}
 .cere table.cere-stack td.cere-act .cere-in,.cere table.cere-stack td .cere-in{margin:4px 0}
 .cere table.cere-stack td.cc-n{font-family:var(--mono)}
 .cere table.cere-stack td.cere-empty{text-align:center}
 /* 로그인 */
 body.cere-login{place-items:start stretch;padding:18vh 16px 24px}
 .cere-lgc{width:100%;padding:28px 20px 22px}
 .cere .cere-lgr input[type=password],.cere .cere-lgr button{height:48px}
 .cere .cere-lgr button{width:48px}
}

/* ================= 폰 가로 (폰 세로 뒤 — 둘 다 맞는 작은 폰 가로는 이것이 이긴다) ================= */
@media (orientation:landscape) and (max-height:500px){
 body.cere .cc-top .cc-hr1{flex-wrap:nowrap;gap:10px;padding:0 16px;min-height:56px}
 body.cere .cp-wb{top:12px;height:32px;right:16px}
 .cere-wbsp{width:88px}
 .cere-top .cc-hl{gap:10px}
 .cere-top .cc-hl .cp-sw>summary{height:36px}
 .cere-top .cc-brand{font-size:15px}
 .cere-top .cere-bn{display:none}
 .cere-top .cc-now{display:none}
 .cere-top .cc-tabs{order:0;flex:0 1 auto;flex-basis:auto;min-width:0;margin:0;display:flex;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
 .cere-top .cc-tabs::-webkit-scrollbar{display:none}
 .cere-top .cc-tabs a{flex:none;height:36px;padding:0 12px;font-size:14px}
 .cere-top .cc-hbtn{height:36px;width:36px;padding:0;justify-content:center}
 .cere-top .cc-hbtn .cere-lbl{display:none}
 .cere-top .cc-pop{position:fixed;left:auto;right:16px;top:60px;width:296px;max-height:calc(100vh - 72px);overflow:auto}
 .cere .cc-main{padding:12px 16px 20px;gap:12px}
 .cere .cc-ptitle h1{font-size:17px;line-height:24px}
 .cere .cc-card .cc-ch{min-height:40px;padding:8px 14px}
 .cere .cc-card .cc-cb{padding:12px 14px}
 .cere main button{height:40px}
 .cere main button.cere-sm{height:34px}
 .cere input[type=password],.cere input[type=text],.cere input[type=number],.cere input[type=search],.cere input:not([type]),.cere select{height:40px;font-size:16px}
 .cc-kpi.cere-k5{grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
 .cc-kpi.cere-k5>.cc-t{grid-column:auto;padding:8px 12px}
 .cc-kpi.cere-k5 .cc-v{font-size:18px;line-height:24px}
 .cere-g2{grid-template-columns:repeat(2,minmax(0,1fr))}
 .cere-g2.cere-wide{grid-template-columns:minmax(0,1fr)}
 .cere-g3{grid-template-columns:repeat(2,minmax(0,1fr))}
 .cere-g3>.cere-span{grid-column:1/-1}
 .cere-apps{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
 .cere-app{padding:10px 12px;gap:4px}
 .cere-links{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
 .cere-link{padding:10px 12px}
 .cere-fg{grid-template-columns:repeat(3,minmax(0,1fr))}
 .cere-in{display:inline-flex;width:auto}
 .cere-in input[type=password]{width:132px;flex:none}
 /* 폰 세로의 카드 쌓기를 되돌린다(가로는 표 그대로 · 옆으로 밀기) */
 .cere table.cere-stack{display:table;width:100%}
 .cere table.cere-stack thead{display:table-header-group}
 .cere table.cere-stack tbody{display:table-row-group}
 .cere table.cere-stack tr{display:table-row;padding:0;border:0}
 .cere table.cere-stack td{display:table-cell;height:38px;padding:0 10px;border-bottom:1px solid var(--line-soft);white-space:nowrap}
 .cere table.cere-stack td[data-l]::before{content:none}
 .cere table.cere-stack td.cere-wrap,.cere table.cere-stack td.tx{white-space:normal}
 /* 로그인 — 위쪽 · 가로 한 줄(키보드가 아래 반을 덮는다) */
 body.cere-login{place-items:start center;padding:16px}
 .cere-lgc{flex-direction:row;flex-wrap:wrap;justify-content:center;width:min(460px,100%);padding:16px;gap:12px}
 .cere-lgc .cc-mark{width:32px;height:32px}
 .cere-lgr{flex:1;width:auto;min-width:220px}
 .cere-lgm{flex-basis:100%;text-align:center;min-height:0}
}

/* ================= 화면별 규칙 — 화면마다 자기 구역 안에서만(기기 문턱은 위 머리말과 같은 미디어 식) ================= */
/* ---- 화면: 로그인 · 접속관리 · 연결 앱 ---- */
/* 로그인 — 카드 하나(표식 · 비밀번호 칸 · 화살표). 배치는 위 「로그인」 바탕 + 기기 블록.
   격자 열을 minmax(0,1fr) 로 — auto 열은 비밀번호 칸의 고유 폭만큼 커져 폰 세로에서 2px 넘친다 */
body.cere-login{grid-template-columns:minmax(0,1fr)}
.cere-login .cere-lgc.cc-card{margin:0 auto;padding-bottom:28px}
.cere-lgc .cc-mark svg{width:18px;height:18px}
.cere-lgc .cere-lgm:empty{display:none}
/* 직원 로그인(cp_auth 2.4.0 — /login?staff=1): 아이디 칸이 비밀번호 줄 위 · 높이는 비밀번호 칸과 같게(폰 세로 48px).
   열은 minmax(0,1fr) — auto 열은 비밀번호 칸의 고유 폭(한글 글꼴 20자 ≈ 348px)만큼 커져 폰 세로에서 카드를 넘친다(위 body.cere-login 과 같은 까닭) */
.cere-lgs{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;width:100%;min-width:0}
.cere .cere-lgs input[type=text]{width:100%;height:44px;font-size:16px;padding:0 14px}
@media (max-width:640px){.cere .cere-lgs input[type=text]{height:48px}}
@media (orientation:landscape) and (max-height:500px){.cere-lgs{flex:1;width:auto;min-width:220px}}
/* 접속관리 — 폼 카드 셋은 같은 높이 · 단추 줄은 카드 바닥 · 최근 접속 표 */
.cere-acg{align-items:stretch}
.cere-acg>.cc-card{display:flex;flex-direction:column}
.cere-acg>.cc-card>.cc-cb{flex:1 0 auto;display:flex;flex-direction:column}
.cere-acg .cere-form{flex:1 0 auto;display:flex;flex-direction:column;gap:12px}
.cere-acg .cere-acts{margin-top:auto}
.cere-acg .cere-lop{margin:0 0 12px;font-size:13px;line-height:19px;color:var(--text-3)}
.cere-log td.cere-ua{font-size:13px;color:var(--text-3);min-width:280px}
.cere-log td>.cc-pill{justify-self:start}
.cere-log time,.cere-apt time,.cere-acg time{font-variant-numeric:tabular-nums}
/* 연결 앱 — 앱 코드(상태 점) · 주소 · 마지막 신호(KST · 얼마 전) · 빼기 */
.cere-apt th.cere-act{text-align:right}
.cere-apc{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:14px;font-weight:700;letter-spacing:.02em}
.cere-apc .cc-dot{background:var(--g-dot);box-shadow:0 0 0 3px var(--g-pill)}
.cere-apc .cc-dot.cere-old{background:var(--n-dot);box-shadow:0 0 0 3px var(--n-pill)}
.cere-sig{display:inline-flex;align-items:center;flex-wrap:wrap;gap:4px 8px;font-variant-numeric:tabular-nums}
/* 전폭(.cere-span)이 되는 기기(태블릿 세로 · 폰 가로 · 좁은 가로 창)에서 로그아웃 카드는 칸과 단추를 한 줄로 */
@media (min-width:641px) and (max-width:1024px) and (orientation:landscape) and (min-height:501px){
 .cere-acg>.cere-span{grid-column:1/-1}
 .cere-acg>.cere-lo .cere-form{flex-direction:row;flex-wrap:wrap;align-items:flex-end}
 .cere-acg>.cere-lo .cere-form>label{flex:1 1 260px}
 .cere-acg>.cere-lo .cere-acts{margin-top:0}
}
@media (min-width:641px) and (max-width:1024px) and (orientation:portrait){
 .cere-acg>.cere-lo .cere-form{flex-direction:row;flex-wrap:wrap;align-items:flex-end}
 .cere-acg>.cere-lo .cere-form>label{flex:1 1 260px}
 .cere-acg>.cere-lo .cere-acts{margin-top:0}
}
@media (max-width:640px){
 .cere-apc{font-size:15px}
 .cere-apt table.cere-stack td.cere-act .cere-in{margin:6px 0 0}
}
@media (orientation:landscape) and (max-height:500px){
 .cere-login .cere-lgc.cc-card{padding-bottom:16px}
 .cere-lgc .cc-mark svg{width:16px;height:16px}
 .cere-acg>.cere-lo .cere-form{flex-direction:row;flex-wrap:wrap;align-items:flex-end}
 .cere-acg>.cere-lo .cere-form>label{flex:1 1 240px}
 .cere-acg>.cere-lo .cere-acts{margin-top:0}
}
/* ---- 끝: 로그인 · 접속관리 · 연결 앱 ---- */
/* ---- 화면: 알림관리 ---- */
/* 배치(auth/alerts.py render): 제목 줄(봇 알약·설정값) · 오늘 타일 다섯 · [분류 | 설정] · 엔진 · [태그 규칙·시험·심장박동 | 생존 감시] · 원장.
   표는 모두 table.cere-stack.cere-al-fx — 폰 세로에서 짧은 카드(첫 줄 이름·상태 cere-al-r · 둘째 줄 cere-al-2 · 폼·본문 한 줄씩 cere-al-f). */
.cere-al-meta{display:inline-flex;flex-wrap:wrap;align-items:center;gap:4px 12px}
.cere-al-meta b{font-family:var(--mono);font-size:13px;font-weight:600;color:var(--text-2)}
.cc-kpi.cere-al-k .cc-s{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cc-kpi.cere-al-k>.cc-t.cere-al-g .cc-v{color:var(--g-text)}
.cc-kpi.cere-al-k>.cc-t.cere-al-a .cc-v{color:var(--a-text)}
.cc-kpi.cere-al-k>.cc-t.cere-al-r{background:var(--red-weak);border-color:var(--red-line)}
.cc-kpi.cere-al-k>.cc-t.cere-al-r .cc-v,.cc-kpi.cere-al-k>.cc-t.cere-al-r .cc-k{color:var(--red-text)}
.cere table.cere-al-fx td .cere-in{flex-wrap:nowrap;gap:4px}
.cere table.cere-al-cls th,.cere table.cere-al-cls td,.cere table.cere-al-eng th,.cere table.cere-al-eng td{padding-left:8px;padding-right:8px}
.cere table.cere-al-fx td .cere-in button.cere-sm{padding:0 9px}
.cere table.cere-al-fx td .cere-in select{padding-right:26px;background-position:right 8px center}
.cere table.cere-al-fx td.cere-head b{font-weight:700}
.cere table.cere-al-eng td.cere-head,.cere table.cere-al-beat td.cere-head{font-weight:700}
.cere table.cere-al-log td.cere-al-e{font-weight:600}
.cere table.cere-al-log td.cere-al-n{white-space:normal;min-width:120px;max-width:280px;overflow-wrap:anywhere;line-height:17px}
.cere table.cere-al-fx td .cere-in{margin:3px 0}
.cere-al-fb{padding:10px 16px;border-bottom:1px solid var(--line-soft)}
.cere-al-flt select{min-width:128px}
.cere-al-flt a{margin-left:4px}
.cere-al-add>input[name=scope]{flex:1 1 220px}
.cere-al-set .cere-ck{margin-top:-2px}

/* 태블릿 세로 — 한 열. 엔진 표는 폼 열이 넓어 「상태」 칸만 접는다(알약 위 · 태그 아래 — 폰 가로도 같다) */
@media (min-width:641px) and (max-width:1024px) and (orientation:portrait){
 .cere table.cere-al-eng td.cere-al-r{white-space:normal;line-height:18px;padding-top:6px;padding-bottom:6px}
 .cere table.cere-al-eng td.cere-al-r .cere-m{display:block}
 .cere table.cere-al-eng td.cere-al-r .cc-pill{white-space:normal;height:auto;min-height:22px;line-height:16px;padding-top:3px;padding-bottom:3px}
}

/* 폰 세로 — 표를 짧은 카드로(이름 · 상태가 첫 줄, 시각들이 둘째 줄, 폼·본문은 전폭 한 줄씩) */
@media (max-width:640px){
 .cere-al-meta{gap:4px 10px}
 .cc-kpi.cere-al-k .cc-s{display:none}
 .cere table.cere-al-fx tr{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
 .cere table.cere-al-fx tr::before{content:"";order:2;flex-basis:100%;height:0;margin-top:-6px}
 .cere table.cere-al-fx td,.cere table.cere-al-fx td[data-l]{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:0;min-width:0;order:1}
 .cere table.cere-al-fx td[data-l]::before{font-weight:500}
 .cere table.cere-al-fx td.cere-head{order:0;flex:0 1 auto;padding:0}
 .cere table.cere-al-fx td.cere-al-2{order:3}
 .cere table.cere-al-fx td.cere-al-r{margin-left:auto}
 .cere table.cere-al-fx td.cere-al-f{order:4;flex:1 1 100%}
 .cere table.cere-al-fx td.cere-al-f[data-l]{display:grid;grid-template-columns:5em minmax(0,1fr);gap:10px}
 .cere table.cere-al-fx td.cere-al-n{order:5;flex:1 1 100%}
 .cere table.cere-al-fx td.cere-al-n:empty{display:none}
 .cere table.cere-al-fx td.cere-empty{flex:1 1 100%;justify-content:center}
 .cere table.cere-al-fx td .cere-in{margin:0;flex-wrap:nowrap}
 .cere table.cere-al-fx td .cere-in select{flex:1 1 auto;min-width:0}
 .cere table.cere-al-fx td.cere-act .cere-in{width:auto}
 .cere table.cere-al-log tr::before{content:none}
 .cere table.cere-al-log td.cere-al-2{order:1;flex:0 1 auto;font-size:13px;color:var(--text-3)}
 .cere table.cere-al-log td.cere-al-n{min-width:0;max-width:none}
 .cere table.cere-al-log td.cere-al-f{line-height:19px}
 .cere-al-set .cere-fg{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
 .cere-al-set .cere-fg>label:first-child,.cere-al-set .cere-fg>.cere-al-wide{grid-column:1/-1}
 .cere-al-add>input[name=scope]{flex:1 1 100%}
 .cere-al-add>select{flex:1 1 120px}
 .cere-al-add>button{flex:1 1 auto}
 .cere-al-flt>select{flex:1 1 100%;min-width:0}
 .cere-al-flt>button{flex:1 1 auto}
 .cere-al-fb{padding:10px 14px}
}

/* 폰 가로 — 표 그대로 옆으로 밀기(둘 다 맞는 작은 폰 가로에서 위 카드 꼴을 되돌린다) */
@media (orientation:landscape) and (max-height:500px){
 .cere table.cere-al-fx tr{display:table-row}
 .cere table.cere-al-fx tr::before{content:none}
 .cere table.cere-al-fx td,.cere table.cere-al-fx td[data-l],.cere table.cere-al-fx td.cere-al-f[data-l]{display:table-cell;padding:0 8px}
 .cere table.cere-al-eng td.cere-al-r{white-space:normal;line-height:18px;padding-top:6px;padding-bottom:6px}
 .cere table.cere-al-eng td.cere-al-r .cere-m{display:block}
 .cere table.cere-al-eng td.cere-al-r .cc-pill{white-space:normal;height:auto;min-height:22px;line-height:16px;padding-top:3px;padding-bottom:3px}
 .cere table.cere-al-fx td.cere-al-n:empty{display:table-cell}
 .cere table.cere-al-fx td .cere-in{display:inline-flex;width:auto}
 .cere-al-set .cere-fg{grid-template-columns:repeat(3,minmax(0,1fr))}
 .cere-al-set .cere-fg>label:first-child{grid-column:auto}
 .cere-al-flt>select{flex:0 1 auto}
 .cere-al-flt>button{flex:none}
 .cere-al-add>input[name=scope]{flex:1 1 220px}
}
/* ---- 끝: 알림관리 ---- */
/* ---- 화면: OAuth 동의 · MCP 연결 · 오류 ---- */
/* 동의(/oauth/authorize) — 「요청」 카드 | 「승인」 카드(.cere-g2.cere-wide — PC·태블릿 가로 2열 · 태블릿 세로·폰 1열) · 오류 · MCP 연결(/oauth/grants) */
.cere-oa-who{margin:0 0 12px;font-size:16px;line-height:24px;color:var(--text)}
.cere-oa-who b{font-weight:700}
.cere-oa .cc-band{margin:0 0 12px}
.cere-oa .cc-band,.cere-oa-who,.cere-oa-note,.cere-oa-pd{word-break:keep-all}   /* 한국어 낱말 중간에서 끊지 않는다(긴 주소는 overflow-wrap 이 끊는다) */
.cere-oa-pills{display:inline-flex;flex-wrap:wrap;gap:4px 6px;vertical-align:middle;max-width:100%}
.cere-oa-pills .cc-pill{height:auto;min-height:22px;padding:3px 8px;line-height:16px;white-space:normal}
.cere fieldset.cere-oa-perms{gap:12px}
.cere-oa-pg{display:grid;grid-template-columns:minmax(0,1fr);gap:6px 16px}
.cere .cere-oa-pg .cere-ck{align-items:flex-start;min-height:36px;padding:2px 0}
.cere .cere-oa-pg .cere-ck input{margin-top:2px}
.cere-oa-pt{display:flex;flex-direction:column;gap:1px;min-width:0}
.cere-oa-pt b{font-size:14px;line-height:20px;font-weight:600;color:var(--text)}
.cere-oa-pd{font-size:13px;line-height:19px;color:var(--text-3)}
.cere-oa-del .cere-oa-pt b{color:var(--red-text)}
.cere-oa-cust{display:flex;padding-top:10px;border-top:1px solid var(--line-soft)}
.cere-oa-note{margin:0;line-height:18px}
.cere-oa-acts .cere-oa-deny{margin-left:auto}
.cere table.cere-oa-tb td{height:auto;padding-top:7px;padding-bottom:7px}
.cere table.cere-oa-tb th.cere-act{text-align:right}
.cere table.cere-oa-tb td.cere-oa-sc{min-width:180px}
.cere table.cere-oa-tb td.cere-oa-nm{white-space:normal;overflow-wrap:anywhere;min-width:120px;line-height:18px}
.cere table.cere-oa-tb td .cere-in{flex-wrap:nowrap}
.cere-oa-tm{display:flex;flex-direction:column;line-height:18px}
.cere-oa-all{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px 12px}
.cere-oa-all .cere-f{flex:0 1 300px}
@media (pointer:coarse){
 .cere .cere-oa-pg .cere-ck{min-height:40px}
}
/* 태블릿 세로 — 1열 카드가 넓다: 권한 2열 */
@media (min-width:641px) and (max-width:1024px) and (orientation:portrait){
 .cere-oa-pg{grid-template-columns:repeat(2,minmax(0,1fr))}
 .cere .cere-oa-pg .cere-ck{min-height:44px}
}
/* 폰 세로 — 1열 · 단추는 꽉 찬 줄 · 표는 카드 쌓기(칸 여백은 쌓기 꼴로) */
@media (max-width:640px){
 .cere-oa-who{font-size:15px;line-height:22px}
 .cere .cere-oa-pg .cere-ck{min-height:44px}
 .cere-oa-acts>button,.cere-oa-cust>button,.cere-oa-all>button{flex:1 1 100%}
 .cere-oa-acts .cere-oa-deny{margin-left:0}
 .cere-oa-all .cere-f{flex:1 1 100%}
 .cere table.cere-oa-tb td{padding:3px 0}
 .cere table.cere-oa-tb td.cere-oa-sc,.cere table.cere-oa-tb td.cere-oa-nm{min-width:0}
 .cere table.cere-oa-tb td.cere-head{padding-bottom:6px}
 .cere table.cere-oa-tb td.cere-act{padding-top:8px}
}
/* 폰 가로 — 세로 여백 최소: 권한 2열 · 이름과 설명 한 줄 · 단추는 한 줄(폰 세로 규칙을 되돌린다) */
@media (orientation:landscape) and (max-height:500px){
 .cere-oa-who{margin-bottom:8px;font-size:15px}
 .cere-oa .cc-band{margin-bottom:8px;padding:8px 12px}
 .cere fieldset.cere-oa-perms{gap:8px;padding:8px 12px 10px}
 .cere-oa-pg{grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 16px}
 .cere .cere-oa-pg .cere-ck{min-height:40px;align-items:center;padding:0}
 .cere .cere-oa-pg .cere-ck input{margin-top:0}
 .cere-oa-pt{display:block;line-height:17px}
 .cere-oa-pd{margin-left:6px}
 .cere-oa-cust{padding-top:8px}
 .cere-oa-acts>button,.cere-oa-cust>button,.cere-oa-all>button{flex:0 1 auto}
 .cere-oa-acts .cere-oa-deny{margin-left:auto}
 .cere-oa-all .cere-f{flex:0 1 300px}
 .cere table.cere-oa-tb td{padding:5px 10px}
 .cere table.cere-oa-tb td.cere-oa-sc{min-width:180px}
}
/* ---- 끝: OAuth 동의 · MCP 연결 · 오류 ---- */

/* 터치 화면 공통 — iOS 는 16px 아래 글자 칸에 들어가면 화면을 키운다 */
@media (pointer:coarse){
 .cere input[type=password],.cere input[type=text],.cere input[type=number],.cere input[type=search],.cere input:not([type]),.cere select{font-size:16px}
}
@media print{.cere-top,.cere .cc-foot{display:none}}