/* hub-ui.css — objectcorp.com 공용 애플 스타일 (2026-10-21, 사용자 지시 "애플 스타일로 전체 앱들 디자인 수정")
   intent·로드맵: D:\objectcorp\intent\2026-10-21-apple-style\  · 되돌리기: D:\objectcorp\scripts\rollback-apple-style.ps1
   - 색 이름(--ap-*)과 밝음/어둠 값은 hub-theme.js 가 정한다. 이 파일은 모양·글자·움직임만 (색은 --ap-* 만 쓴다).
   - 각 앱은 자기 <style> 뒤에 <link href="https://objectcorp.com/hub-ui.css?v=…"> 한 줄 → 같은 우선순위면 이 파일이 이긴다.
   - 폭 기준 @media 를 쓰지 않는다 (다른 도메인 앱에서는 hub-theme.js 배치 고정이 이 파일 규칙을 못 바꾼다). 폰 전용은 html[data-layout=mobile].
   - 2026-10-16 기준값(본문 13px · 컨트롤 32px · 글자 12px)은 유지, 모서리·색·그림자만 애플식으로. */

:root{
  --ui-font:13px;            /* 본문 (macOS 본문 13pt) */
  --ui-ctl-h:32px;           /* 버튼·입력창·선택 상자 높이 */
  --ui-ctl-font:12px;
  --ui-ctl-radius:9px;
  --ui-xs-h:24px;
  --ui-icon:12px;
  --ui-radius:16px;          /* 묶음 카드(패널) */
  --ui-card-radius:12px;     /* 작은 카드 */
  --ap-font:-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Pretendard Variable","Pretendard","Malgun Gothic",system-ui,sans-serif;
  --ap-ease:cubic-bezier(.2,.8,.2,1);
}

/* ── 글자: 애플 기기는 시스템 글꼴(SF + Apple SD Gothic Neo), 나머지는 Pretendard. 크기별 자간 ── */
html,body{font-family:var(--ap-font)}
html{background:var(--ap-bg,#f2f2f7)}
body{background:var(--ap-bg,#f2f2f7);color:var(--ap-label,#1d1d1f);font-size:var(--ui-font);line-height:1.45;letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
button,input,select,textarea{font-family:inherit;letter-spacing:inherit}
h1{font-size:24px;font-weight:700;letter-spacing:-.022em;line-height:1.2;margin:0 0 4px}
h2{font-size:15px;font-weight:600;letter-spacing:-.012em;margin:0}
a{-webkit-tap-highlight-color:transparent}

/* ── 버튼: 회색 채움(기본) · 강조 채움(주요) · 빨간 글자(위험). 누르는 순간 살짝 눌림 ── */
.btn{display:inline-flex;align-items:center;justify-content:center;text-align:center;gap:6px;
  height:var(--ui-ctl-h);min-height:var(--ui-ctl-h);max-height:var(--ui-ctl-h);box-sizing:border-box;
  padding:0 13px;font-size:var(--ui-ctl-font);line-height:30px;border-radius:var(--ui-ctl-radius);font-weight:500;white-space:nowrap;cursor:pointer;
  background:var(--ap-fill);color:var(--ap-label);border:1px solid transparent;-webkit-tap-highlight-color:transparent;
  transition:transform .12s var(--ap-ease),background-color .15s ease,color .15s ease,opacity .15s ease}
.btn:hover{background:var(--ap-fill3)}
.btn:active{transform:scale(.97)}
.btn.primary,.btn.go,.btn.send,button.primary{background:var(--ap-accent);color:#fff;border-color:transparent;font-weight:600}
.btn.primary:hover,.btn.go:hover,.btn.send:hover,button.primary:hover{background:var(--ap-accent-hover)}
.btn.danger{background:var(--ap-fill);color:var(--ap-red);border-color:transparent}
.btn:disabled,.btn[disabled],.btn.disabled{opacity:.38;cursor:default;transform:none}
.btn.xs,.btn.sm{height:var(--ui-xs-h);min-height:var(--ui-xs-h);max-height:var(--ui-xs-h);padding:0 9px;font-size:11px;line-height:22px;border-radius:7px}
.btn.big{height:auto;min-height:44px;max-height:none;font-size:14px;border-radius:12px}
.btn svg{width:var(--ui-icon);height:var(--ui-icon);flex:0 0 var(--ui-icon)}

/* ── 입력창·선택 상자: 테두리 없는 회색 채움(색은 hub-theme.js), 초점이면 강조 고리 ── */
select,input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=color]):not([type=hidden]){
  height:var(--ui-ctl-h);min-height:var(--ui-ctl-h);max-height:var(--ui-ctl-h);box-sizing:border-box;
  padding:0 10px;font-size:var(--ui-ctl-font);line-height:30px;border-radius:var(--ui-ctl-radius);border:1px solid transparent;
  transition:box-shadow .15s ease,border-color .15s ease}
select{padding-right:22px}
textarea{font-size:var(--ui-ctl-font);padding:8px 10px;border-radius:var(--ui-ctl-radius);line-height:1.5;box-sizing:border-box;border:1px solid transparent}
input[type=checkbox],input[type=radio]{width:16px;height:16px;margin:0;cursor:pointer}

/* ── 칩·배지 ── */
.chip{display:inline-flex;align-items:center;gap:5px;padding:4px 11px;font-size:12px;font-weight:500;border-radius:999px;cursor:pointer;
  color:var(--ap-label);border:1px solid transparent;transition:transform .12s var(--ap-ease),background-color .15s ease}
.chip:active{transform:scale(.96)}
.chip.on,.chip.active{background-color:var(--ap-accent)!important;color:#fff!important}
.badge{display:inline-block;padding:2px 8px;border-radius:999px;font-size:11px;font-weight:600;background:var(--ap-fill);color:var(--ap-label2)}
.badge.active,.badge.ok,.badge.on{background:color-mix(in srgb,var(--ap-green) 16%,transparent);color:color-mix(in srgb,var(--ap-green) 70%,var(--ap-label))}
.badge.suspended,.badge.err,.badge.danger,.badge.off{background:color-mix(in srgb,var(--ap-red) 14%,transparent);color:color-mix(in srgb,var(--ap-red) 78%,var(--ap-label))}
.badge.pending,.badge.warn{background:color-mix(in srgb,var(--ap-orange) 16%,transparent);color:color-mix(in srgb,var(--ap-orange) 72%,var(--ap-label))}

/* ── 표: 머리글은 옅은 글자, 줄 사이 머리카락 선 ── */
table{font-size:12.5px;border-collapse:collapse}
th{font-size:12px;padding:9px 12px;color:var(--ap-label2);font-weight:600;border-bottom:.5px solid var(--ap-sep)}
td{padding:10px 12px;border-bottom:.5px solid var(--ap-sep)}

/* ── 묶음 카드: 회색 바탕 위 흰(어둠: 짙은 회색) 판, 테두리 대신 아주 옅은 그림자 ── */
.panel{border-radius:var(--ui-radius);background:var(--ap-bg2);border-color:transparent;box-shadow:var(--ap-shadow)}
.card{border-radius:var(--ui-card-radius);background:var(--ap-bg2);border-color:var(--ap-sep)}
.field label,.hint,.note,.muted,.status,.est{font-size:12px}

/* ── 반투명 상단 막대: 내용이 막대 밑으로 지나가며 비친다 (페이지 맨 위 머리글만) ── */
body > header,body > .topbar,body > .top-bar,body > .menubar,body > .appbar,.ap-bar{
  background:var(--ap-bar)!important;-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);
  border-bottom:.5px solid var(--ap-sep)!important;box-shadow:none}

/* ── 초점 표시(키보드) · 스크롤바 ── */
a:focus-visible,button:focus-visible,.btn:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--ap-accent-soft);outline-offset:1px}
html[data-layout=pc] ::-webkit-scrollbar{width:11px;height:11px}
html[data-layout=pc] ::-webkit-scrollbar-thumb{background:var(--ap-fill3);border:3px solid transparent;background-clip:padding-box;border-radius:10px}
html[data-layout=pc] ::-webkit-scrollbar-thumb:hover{background-color:var(--ap-label3)}
html[data-layout=pc] ::-webkit-scrollbar-track{background:transparent}

/* ── 움직임: 메뉴·팝업은 누른 자리에서 부드럽게 나타남 ── */
@keyframes ap-pop{from{opacity:0;transform:scale(.97) translateY(-4px)}to{opacity:1;transform:none}}
.me-menu,[role=menu],.dropdown,.popover,.ctxmenu,.context-menu,.popup-menu,.menu-pop{animation:ap-pop .18s var(--ap-ease);transform-origin:top right}

/* ── 기기 설정 존중: 동작 줄이기 · 투명도 줄이기 · 대비 높이기 ── */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .btn:active,.chip:active{transform:none}
}
@media (prefers-reduced-transparency: reduce){
  body > header,body > .topbar,body > .top-bar,body > .menubar,body > .appbar,.ap-bar{background:var(--ap-bg2)!important;-webkit-backdrop-filter:none;backdrop-filter:none}
}
@media (prefers-contrast: more){
  .panel,.card{border:1px solid var(--ap-sep-strong)}
  .btn{border-color:var(--ap-sep-strong)}
}