/* mingo 허브 전용 보강 — 디자인 시스템(style.css)은 고트랙·고머니와 공유 */
:root { --money: #ffc43d; --income: #2ecc71; --expense: #ff5a1f; --ai: #7aa2ff; }
.logo-mark.hub { color: var(--accent); font-size: 14px; }
.logo-mark.gm { color: var(--money); font-weight: 900; font-size: 18px; }
.logo-mark.ai { color: var(--ai); font-size: 12px; }
/* grid-auto-rows:1fr 은 모든 행을 가장 큰 행(두 칸을 쓰는 고콜)의 높이로 맞춘다 —
   내용이 적은 카드 아래에 빈 공간이 크게 남았다. 행마다 필요한 만큼만 갖게 한다.
   (같은 행의 두 카드는 stretch 로 여전히 서로 높이가 맞는다) */
.hub-grid { display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: auto; gap: var(--sp-3); max-width: 1180px; margin: 0 auto; padding: var(--sp-4); }
.app, .card.sec { display: flex; flex-direction: column; min-height: 100%; box-sizing: border-box; }
.app .line { margin-top: auto; padding-top: var(--sp-3); }
/* 각 앱의 시그니처 색 — 카드 상단 스트립·hover 테두리·로고에 쓴다 (2026-08-31) */
.app.gt { --brand: #ff5a1f; }   /* 고트랙 주황 */
.app.gm { --brand: var(--money); }   /* 고머니 골드 */
.app.gc { --brand: #e64980; }   /* 고콜 핑크 */
.app.ai { --brand: #3fcf8e; }   /* 웹고순이 그린 */
.app { padding: var(--sp-4); background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow); color: var(--text); text-decoration: none; transition: border-color .15s, transform .15s; }
.app:hover { border-color: var(--brand, var(--accent)); transform: translateY(-1px); }
.app-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--sp-3); }
.app-logo { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; font-size: 18px; letter-spacing: -.5px; cursor: pointer; }
.app-logo:hover { filter: brightness(1.18); }
.app-logo .logo-mark { font-size: 14px; } .app-logo .logo-mark.gm { font-size: 17px; }
.app-icon { width: 28px; height: 28px; border-radius: 7px; margin-right: 2px; }
.app-logo b { color: var(--brand, var(--accent)); }
.app .tiles { grid-template-columns: 1fr 1fr; }
.app .tile { background: var(--panel2); box-shadow: none; }
.tile.income::before { background: var(--income); } .tile.expense::before { background: var(--expense); }
.app .tile .v { font-size: 24px; }
.line { margin: var(--sp-3) 0 0; font-size: 13px; line-height: 1.5; min-height: 20px; }
.line .warn { color: var(--expense); font-weight: 700; }
.app.ai .line { margin: 0 0 var(--sp-2); }
.app.ai .app-head { text-decoration: none; color: var(--text); }
.app.ai .app-head:hover .muted { color: var(--brand); }
.ask-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--sp-2); }
.ask-tabs button { height: 28px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel2); color: var(--muted); font-size: 12px; font-weight: 700; }
.ask-tabs button.active { background: var(--brand, var(--ai)); color: #0f1115; border-color: var(--brand, var(--ai)); }
.app.ai .app-head .mini { cursor: pointer; }
.asks { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
.ask .t { overflow: hidden; text-overflow: ellipsis; flex: 1; }
.ask .x { flex: none; width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--line); background: var(--panel); color: var(--expense); font-size: 11px; }
.grid2 { display: grid; grid-template-columns: 1fr 2fr; gap: var(--sp-2); margin: var(--sp-2) 0; }
.modal-box .grid2 label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); }
.modal-box .grid2 input { width: 100%; height: 44px; box-sizing: border-box; padding: 0 12px; background: var(--panel2); border: 1px solid var(--border); border-radius: var(--r-sm); color: var(--text); font-size: 15px; }
/* 아이콘 고르는 판 — 눌러서 고르거나 위 칸에 직접 입력해도 된다(2026-09-05) */
.emopick { display: grid; grid-template-columns: repeat(auto-fill, minmax(38px, 1fr));
  gap: 6px; margin: 0 0 var(--sp-2); }
.emopick button { height: 38px; padding: 0; font-size: 19px; line-height: 1; cursor: pointer;
  background: var(--panel2); border: 1px solid var(--line); border-radius: var(--r-sm); color: var(--text); }
.emopick button:hover { border-color: var(--border); }
.emopick button.on { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.ask { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; border-radius: var(--r-sm); background: var(--panel2); border: 1px solid var(--line); color: var(--text); font-size: 13px; font-weight: 600; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ask:hover { border-color: var(--brand, var(--ai)); }
.ask .ic { flex: none; width: 18px; text-align: center; }
@media (max-width: 400px) { .asks { grid-template-columns: 1fr; } }
.card.sec .kv { list-style: none; margin: 0; padding: 0; }
.card.sec .kv li { display: flex; justify-content: space-between; padding: 6px 0; border-top: 1px solid var(--line); }
.card.sec .kv li:first-child { border-top: 0; }
.card.sec b.on { color: var(--income); } .card.sec b.off { color: var(--expense); }
.mini { height: 28px; display: inline-flex; align-items: center; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel); color: var(--muted); font-size: 12px; font-weight: 700; text-decoration: none; }
.card-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--sp-3); }
.card-head h3 { margin: 0; }
@media (max-width: 640px) { .hub-grid { grid-template-columns: 1fr; grid-auto-rows: auto; } }
/* 900px 미만은 한 줄로 세운다 — 두 칸이면 칸 순서가 좌우로 흩어져 보인다(2026-09-17).
   모바일 칸 순서 자체는 app.js 가 화면 폭을 보고 실제로 옮긴다(CSS order 로는 안 됐다). */
@media (max-width: 899px) {
  .hub-grid { grid-template-columns: 1fr; grid-auto-rows: auto; }
}

/* 상단 바로가기 */
.tabs.quick { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.tabs.quick a { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 999px; color: var(--muted); font-size: 13px; font-weight: 700; text-decoration: none; white-space: nowrap; }
.tabs.quick a:hover { background: var(--panel); color: var(--text); }
.tabs.quick .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); }
.tabs.quick .dot.gt { background: var(--accent); } .tabs.quick .dot.gm { background: var(--money); } .tabs.quick .dot.ai { background: #3fcf8e; } .tabs.quick .dot.sec { background: var(--ai); }
.tabs.quick .dot.gc { background: #e64980; }
.tabs.quick .dot.gd { background: #14b8a6; }   /* 고명함 — 아이콘과 같은 청록 */
.user #dateText { margin-right: 8px; }
/* 폰: 메뉴가 6개(설명서 추가)가 되며 알약 안에서 두 줄로 꺾였다(2026-08-30).
   한 줄로 고정하고, 아주 좁은 화면에서만 옆으로 스크롤되게 한다(스크롤바는 숨김). */
@media (max-width: 640px) {
  .tabs.quick { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; -webkit-overflow-scrolling: touch;
                scrollbar-width: none; }
  .tabs.quick::-webkit-scrollbar { display: none; }
  .tabs.quick a { flex: none; padding: 0 9px; font-size: 12px; }
  .user #dateText { display: none; }
}
@media (max-width: 400px) { .tabs.quick a span.dot { display: none; } .tabs.quick a { padding: 0 7px; } }
/* 푸터는 공통 style.css 로 옮겼다 */

/* 고순이 위젯 */
/* 고순이 섹션도 다른 앱 카드와 같은 상자 안에 — 제목이 상자 밖에 있으면 간격이 달라 보인다 (2026-08-30) */
.gs { max-width: 1180px; margin: var(--sp-3) auto 0; padding: 0 var(--sp-4); box-sizing: border-box; }   /* 그리드와 같은 바깥 폭 */
.gs-box { padding: var(--sp-4); background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow); }
.gs .card { background: var(--panel2); box-shadow: none; }
.gs-head { display: flex; justify-content: space-between; align-items: center; margin: 0 0 var(--sp-3); }
.gs-head h2 { margin: 0; font-size: 18px; font-weight: 800; letter-spacing: -.5px; display: inline-flex; align-items: center; gap: 6px; }
.gs-head h2 .muted { font-weight: 600; letter-spacing: 0; }
/* 폰에서는 제목 옆 부연(고순이 · 옵시디안 · 구글 캘린더)을 감춘다 —
   갱신 버튼과 함께 두 줄로 접혀 보기 나빴다 (2026-09-11) */
@media (max-width: 430px) { .gs-head h2 .muted { display: none; } }
/* 아래 고순이 섹션 로고도 위 웹고순이 카드와 같은 초록으로 — 마크업은 같은데 색이 달라
   같은 서비스가 둘로 보였다(2026-09-09) */
.gs-head h2 b { color: #3fcf8e; }
.gs-head .mini { cursor: pointer; }
.gs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.gs-grid .card.wide { grid-column: 1 / -1; }
.gs-list { list-style: none; margin: 0; padding: 0; font-size: 13px; }
.gs-list li { display: flex; gap: 8px; align-items: baseline; padding: 6px 0; border-top: 1px solid var(--line); cursor: pointer; }
.gs-list li:first-child { border-top: 0; }
.gs-list li:hover .t { color: var(--accent); }
.gs-list .d { flex: none; color: var(--muted); font-variant-numeric: tabular-nums; min-width: 52px; }
.gs-list .t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gs-list .pill { flex: none; font-size: 11px; padding: 1px 7px; border-radius: 999px; background: var(--panel2); color: var(--muted); }
.gs-grp { margin: 6px 0; } .gs-grp .h { font-weight: 700; font-size: 13px; display: flex; gap: 6px; align-items: center; cursor: pointer; } .gs-grp .h:hover { color: var(--accent); }
.gs-grp ul { margin: 2px 0 0 12px; padding: 0; list-style: none; font-size: 12px; color: var(--muted); }
.gs-grp li { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gs-sum { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.gs-sum span { font-size: 12px; padding: 3px 9px; border-radius: 999px; background: var(--panel2); color: var(--muted); }
.gs-sum span b { color: var(--text); }
.cloud { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; line-height: 1.6; }
.cloud a { color: var(--text); text-decoration: none; cursor: pointer; white-space: nowrap; }
.cloud a:hover { color: var(--accent); }
.cloud a.w { color: hsl(var(--wh), 60%, 70%); }
html.light .cloud a.w { color: hsl(var(--wh), 55%, 40%); }
.gs .empty { color: var(--muted); font-size: 13px; padding: 6px 0; }
/* 왼쪽 최근 활동, 오른쪽엔 지금 챙길 것 / 다가오는 일정 을 위아래로 (2026-08-30) */
.gs-grid.top2 { grid-template-columns: 1fr 1fr; align-items: stretch; }
.gs-stack { display: flex; flex-direction: column; gap: var(--sp-3); min-width: 0; }
.gs-stack > .card { flex: 1; }
@media (max-width: 640px) { .gs-grid, .gs-grid.top2 { grid-template-columns: 1fr; } }

/* 고콜 — 통화 기록 카드 */
/* 고콜 색은 .app.gc { --brand } 로 통일 */

/* 안내문(빈 상태)은 2열 그리드에서 한 칸만 차지해 오른쪽이 비어 보인다 — 전체 폭을 쓰게 한다 */
.asks > p { grid-column: 1 / -1; margin: 0; }

/* 고순이 카드도 다른 앱 카드처럼 클릭 가능함을 커서로 알린다 */
.app { cursor: pointer; }
.app.ai { cursor: pointer; }
.app.ai a, .app.ai button { cursor: pointer; }


/* ── 폭·여백 (2026-08-28) — 고머니와 같은 1180px 기준 ── */
@media (min-width: 900px) {
  .hub-grid { gap: var(--sp-4); }
  .hub-grid .app, .hub-grid .card.sec { padding: var(--sp-5) 28px; }
  .gs-box { padding: var(--sp-5) 28px; }
}
/* 배치: 고트랙·고머니 / 웹고순이·보안 / 고콜(두 칸 전체)
   마지막 줄에 혼자 남는 카드는 가로로 펴야 아래가 비지 않는다 */
.hub-grid .app.gc { grid-column: 1 / -1; }
.hub-grid .app.gc .tiles { grid-template-columns: repeat(2, 1fr); }
/* 상대 이름은 숫자보다 길다 — 타일 숫자 크기 그대로 쓰면 넘친다 */
.hub-grid .app.gc #gc_who { font-size: 19px; line-height: 1.35; white-space: normal; }
.hub-grid .app.gc .line { color: var(--muted); line-height: 1.6; }

/* 상단 헤더도 본문(1180px)과 같은 선에서 시작 — 고머니·고콜과 동일 */
.top { padding-left: max(var(--sp-4), calc((100% - 1180px) / 2));
       padding-right: max(var(--sp-4), calc((100% - 1180px) / 2)); }


/* 모바일: 상단 메뉴는 2줄까지 접히고, 고순이 대시보드는 한 칸으로 */
@media (max-width: 640px) {
  .tabs.quick { justify-content: flex-start; row-gap: 6px; }
  .gs { padding: 0 var(--sp-3); }
  .hub-grid { padding: var(--sp-3); }
}


/* 고순이 대시보드 카드가 화면 밖으로 넘치던 문제 — 그리드 자식이 줄어들 수 있게 한다.
   최근 활동 목록의 긴 제목(nowrap)이 칸을 밀어내고 있었다. */
.hub-grid > *, .gs-grid > * { min-width: 0; }
.gs-list .t { overflow-wrap: anywhere; }

/* 모바일 칸 순서는 app.js 가 화면 폭(900px 미만)을 보고 실제로 자리를 옮긴다(2026-09-17).
   예전엔 여기서 order 로 고트랙·고머니·웹고순이·지난7일·고콜 순을 잡았는데(2026-08-31),
   '다가오는 일정' 처럼 부모가 다른 칸은 order 로 못 옮기고, 이 규칙이 남아 있으면 새 순서를 덮어쓴다.
   (PC 는 고트랙·고머니 / 고순이·보안 / 고콜 두 칸 배치 그대로) */

/* 허브의 앱 이름은 모두 아이콘과 같은 서체로 — 카드도, 하단 고순이 섹션 제목도.
   예전엔 .gs-head 만 빠져 같은 GoSooni 가 위아래로 다른 글꼴이었다(2026-09-09). */
.app-logo > span:first-of-type,
.gs-head h2 > span:first-of-type { font-family: "PoppinsLogo", "Pretendard Variable", Pretendard, sans-serif; }

/* 고콜 카드 하단: 월별 통화량 막대 + 자주 통화한 상대 */
.gc-more { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4);
           margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: 1px solid var(--line); }
.gc-more > * { min-width: 0; }
.gc-more h4 { margin: 0 0 var(--sp-2); font-size: 12px; font-weight: 700; color: var(--muted); }
.gc-bars { display: flex; align-items: flex-end; gap: 10px; height: 76px; }
.gc-bar { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center;
          justify-content: flex-end; gap: 3px; }
.gc-bar i { width: 100%; max-width: 26px; border-radius: 4px 4px 0 0; background: #e64980; opacity: .8; }
.gc-bar span { color: var(--muted); font-size: 11px; }
.gc-bar b { position: absolute; opacity: 0; }
.gc-top { list-style: none; margin: 0; padding: 0; font-size: 13px; }
.gc-top li { display: flex; align-items: center; gap: 8px; padding: 3px 0; }
.gc-top .t { flex: 0 0 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gc-top .track { flex: 1; height: 8px; border-radius: 4px; background: rgba(230,73,128,.13); overflow: hidden; }
.gc-top .track i { display: block; height: 100%; border-radius: 4px; background: #e64980; opacity: .8; min-width: 3px; }
.gc-top b { flex: none; min-width: 34px; text-align: right; color: var(--muted); font-weight: 700; font-variant-numeric: tabular-nums; }
@media (max-width: 640px) { .gc-more { grid-template-columns: 1fr; } }

/* 고콜 카드: 최근 통화 3건 목록 */
/* 이번 달 통화 타일 — 옆(최근 통화)보다 짧아 빈칸이 컸다(2026-09-17 지시).
   사람 수·시간·지난달 대비·이달 1위를 줄로 채운다. */
.tile.gc-month { align-items: stretch; text-align: left; }
.gc-mstat { list-style: none; margin: 10px 0 0; padding: 8px 0 0; border-top: 1px solid var(--line); }
.gc-mstat li { display: flex; align-items: baseline; gap: 8px; padding: 3px 0; font-size: 13px; }
.gc-mstat .mk { color: var(--muted); font-size: 12px; white-space: nowrap; }
.gc-mstat .mv { margin-left: auto; text-align: right; font-weight: 700;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
.gc-mstat .mv .muted { font-weight: 600; }
.gc-mstat b.up { color: #e64980; }
.gc-mstat b.dn { color: var(--muted); }
/* 줄 수가 옆 타일과 달라 아래가 비었다 — 목록을 남는 자리만큼 늘려 채운다(2026-09-18 지시) */
.tile.gc-recent { display: flex; flex-direction: column; text-align: left; }
.tile.gc-recent ul { list-style: none; margin: 6px 0 0; padding: 0;
  flex: 1; display: flex; flex-direction: column; justify-content: space-between; }
.tile.gc-recent li { display: flex; align-items: baseline; gap: 8px; padding: 3px 0; font-size: 13px; }
.tile.gc-recent li + li { border-top: 1px solid var(--line); }
.tile.gc-recent .w { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tile.gc-recent .d { margin-left: auto; flex: none; color: var(--muted); font-size: 12px; }

/* 보안 카드: 로그인된 기기 목록 (이름 지정·개별 로그아웃) */
/* 위 여백이 margin+padding 으로 두 번 붙어 "로그인된 기기" 줄과 목록 사이가 32px 이나 떴다.
   바로 위 .kv 목록과 같은 리듬으로 잇는다. */
.devs { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); font-size: 13px; }
/* 열을 고정한다 — flex 로 두면 버튼이 하나뿐인 행(지금 쓰는 기기)에서
   날짜와 버튼이 오른쪽으로 밀려 줄마다 위치가 어긋난다. */
.devs li { display: grid; grid-template-columns: 1fr auto 138px; align-items: center;
           gap: 10px; padding: 7px 0; }
.devs li + li { border-top: 1px solid var(--line); }
.devs .d-name { min-width: 0; font-weight: 700; overflow: hidden;
                text-overflow: ellipsis; white-space: nowrap; }
.devs .d-app { margin-left: 4px; color: var(--muted); font-weight: 400; font-size: 11px; }
.devs .d-sub { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums;
               white-space: nowrap; }
/* 두 자리를 고정 — 버튼이 하나뿐인 줄에서도 나머지 줄과 같은 자리에 선다 */
.devs .d-btns { display: grid; grid-template-columns: auto auto; gap: 4px; justify-content: end; }
.devs .mini { flex: none; height: 26px; padding: 0 10px; font-size: 11px;
               white-space: nowrap; cursor: pointer; }
.devs .mini.danger { color: var(--danger); border-color: rgba(255,107,107,.4); }
/* 지금 쓰는 기기 표시 — 이름 칸 자체를 초록 바탕으로 칠한다(2026-09-18 지시).
   전에는 이름 뒤에 '현재' 알약을 붙였는데, 이름 칸이 overflow:hidden 이라
   이름이 길면 알약이 '…' 뒤로 밀려 아예 보이지 않았다. */
.devs li.cur .d-name { background: rgba(46,204,113,.18); color: var(--walk);
                       padding: 3px 9px; border-radius: 8px;
                       box-shadow: inset 0 0 0 1px rgba(46,204,113,.35); }
@media (max-width: 420px) {
  .devs li { grid-template-columns: 1fr 138px; row-gap: 2px; }
  .devs .d-sub { grid-column: 1; grid-row: 2; }
  .devs .d-btns { grid-column: 2; grid-row: 1 / span 2; }
}

/* 앱 접근 권한(관리자) */
/* ── 보안 설정: 앱 접근 권한 표 ──────────────────────────────
   예전엔 체크박스가 한 줄에 흘러 넘쳐 사람마다 줄바꿈 위치가 달랐고, 글자 크기도
   라벨(14px)·체크박스 글자(상속 안 됨)·설명(12px)이 뒤섞여 지저분했다.
   이름 한 칸 + 앱 5칸의 격자로 고정해 어느 계정이 무엇을 쓰는지 한눈에 보이게 한다(2026-09-09). */
.acl-head, .acl-row { display: grid; grid-template-columns: 88px repeat(5, minmax(0, 1fr)); gap: 4px;
  align-items: center; padding: 8px 0; font-size: 13px; }
.acl-head { padding-bottom: 6px; border-bottom: 1px solid var(--border); color: var(--muted);
  font-weight: 700; font-size: 12px; }
.acl-head span { text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acl-row { border-top: 1px solid var(--line); }
.acl-row:first-of-type { border-top: 0; }
.acl-row > b { font-weight: 700; color: var(--text); font-size: 13px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acl-row > b .who-tag { display: block; font-weight: 500; font-size: 11px; color: var(--muted); }
/* .modal-box label(클래스1+요소1) 이 .acl-app(클래스1) 보다 우선순위가 높아
   justify-content:space-between 과 세로 여백이 그대로 먹었다 — 체크박스가 칸 가운데가
   아니라 왼쪽에 붙어 머리글과 어긋나 보였다. .modal-box 를 붙여 우선순위를 넘긴다(2026-09-09). */
.modal-box .acl-app, .acl-app { display: flex; align-items: center; justify-content: center;
  gap: 0; margin: 0; font-size: 13px; cursor: pointer; }
.modal-box .acl-app input, .acl-app input { flex: none; width: 18px; height: 18px; margin: 0;
  accent-color: var(--accent); cursor: pointer; }
.acl-app input:disabled { cursor: default; opacity: .45; }
@media (max-width: 520px) {
  .acl-head, .acl-row { grid-template-columns: 62px repeat(5, minmax(0, 1fr)); font-size: 12px; }
  .acl-head { font-size: 11px; }
}

/* 로그인 화면의 설명서 링크 — 로그인하지 않아도 시스템을 볼 수 있게.
   로그인 버튼 바로 아래, 카드 안에 둔다 */
.login-guide { margin: 14px 0 0; padding-top: 14px; border-top: 1px solid var(--line);
  text-align: center; font-size: 14px; }
.login-guide a { display: inline-block; padding: 6px 4px; color: var(--muted); text-decoration: none; }
.login-guide a:hover { color: var(--text); }

/* 위키 인덱스 — 종류(사람·회사·프로젝트·장소·기술·기타) 범례 (2026-08-30) */
.klegend { display: flex; flex-wrap: wrap; gap: 4px 12px; width: 100%; margin: 0 0 8px; font-size: 11px; color: var(--muted); }
.klegend span { display: inline-flex; align-items: center; gap: 5px; }
.klegend i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }

/* 고순이 카드 윗줄(최근 활동·챙길 것·일정)과 아랫줄(워드맵·위키) 사이 간격 — 다른 카드들과 같은 간격 (2026-08-30) */
.gs-grid + .gs-grid { margin-top: var(--sp-3); }
/* 앱 카드는 넓은 화면에서 간격 16px(--sp-4)인데 고순이 카드는 12px 이라 미묘하게 달랐다 — 같은 조건에서 같은 값으로 */
@media (min-width: 900px) { .gs-grid { gap: var(--sp-4); } .gs-grid + .gs-grid { margin-top: var(--sp-4); } .gs-stack { gap: var(--sp-4); } }

/* ── 통합 검색 · 주간 리포트 · 시스템 상태 (2026-08-31) ── */
/* 검색 결과에서 노트를 열면 노트창이 검색창 뒤로 깔려 안 보였다 — 둘 다 z-index 50 인데
   검색창이 HTML 에서 뒤에 있어 위로 올라온다. 노트창을 한 단 올린다. 닫으면 검색 결과로
   돌아오므로 여러 노트를 이어서 볼 수 있다(2026-09-07). */
#noteModal { z-index: 60; }

/* 구분마다 5건만 펴 두고 나머지는 '더 보기' 로 연다 */
.srch-grp li.hid { display: none; }
.srch-more { margin: 6px 0 2px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--border);
  background: var(--panel2); color: var(--muted); font-size: 12px; font-weight: 700; cursor: pointer; }
.srch-more:hover { color: var(--text); border-color: var(--accent); }

/* 검색은 본문 맨 윗줄(고트랙·고머니 카드 위)에 가로로 편다. 예전엔 헤더 안에 있었는데,
   헤더에 로고·앱탭 6개·계정 아이콘까지 있어 폭이 좁아지면 검색이 세 번째 줄로 접혀
   헤더가 통째로 두세 줄이 됐다. 본문으로 내리니 헤더는 한 줄로 유지된다(2026-09-07). */
.hsearch { grid-column: 1 / -1; display: flex; align-items: center; height: 40px; border-radius: 999px;
  background: var(--panel); border: 1px solid var(--border); box-shadow: var(--shadow); overflow: hidden; }
.hsearch:focus-within { border-color: var(--accent); }
.hsearch input { flex: 1; min-width: 0; height: 100%; padding: 0 16px; border: 0; background: transparent; color: var(--text); font-size: 14px; outline: none; }
.hsearch input::placeholder { color: var(--muted); }
.hsearch button { width: 44px; height: 100%; border: 0; background: transparent; color: var(--muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.hsearch button:hover { color: var(--text); }
.modal-box.wide { max-width: 720px; }
.srch-grp { margin: 10px 0 0; }
.srch-grp h4 { margin: 0 0 6px; font-size: 12px; color: var(--muted); letter-spacing: .3px; }
.srch-grp ul { list-style: none; margin: 0; padding: 0; }
.srch-grp li { display: flex; gap: 10px; align-items: baseline; padding: 7px 0; border-top: 1px solid var(--line); cursor: pointer; font-size: 13px; }
.srch-grp li:first-child { border-top: 0; }
.srch-grp li:hover .t { color: var(--accent); }
.srch-grp .d { flex: none; color: var(--muted); font-variant-numeric: tabular-nums; min-width: 78px; font-size: 12px; }
.srch-grp .t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.srch-grp .s { flex: none; color: var(--muted); font-size: 12px; max-width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.srch-grp .amt { flex: none; font-weight: 700; font-variant-numeric: tabular-nums; }
.srch-empty { color: var(--muted); font-size: 13px; padding: 12px 0; }
.wk-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: var(--sp-3); }
.wk-tiles .tile { padding: 18px 8px; text-align: center; background: var(--panel2); box-shadow: none; }
.wk-tiles .k { font-size: 12px; color: var(--muted); } .wk-tiles .v { margin-top: 4px; font-size: clamp(16px, 1.6vw, 22px); font-weight: 800; letter-spacing: -.3px; }
/* 막대 영역이 카드 남는 높이를 채운다 (옆 카드와 키를 맞추느라 아래가 비지 않게) */
.wk-bars { flex: 1; display: grid; grid-template-columns: repeat(7, 1fr); grid-template-rows: 1fr auto; gap: 8px; align-items: stretch; min-height: 150px; margin-top: 4px; }
.wk-bar { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 2px 4px; border-radius: 10px; }
.wk-bar:hover { background: var(--panel2); }
.wk-bar .stk { flex: 1; width: 100%; max-width: 34px; display: flex; flex-direction: column-reverse; gap: 2px; justify-content: flex-start; }
.wk-bar .stk i { display: block; width: 100%; border-radius: 4px; min-height: 0; }
.wk-bar .stk i.w { background: var(--walk); } .wk-bar .stk i.dr { background: var(--drive); opacity: .85; }
.wk-bar .stk i.z { height: 2px !important; background: var(--line); opacity: 1; }
.wk-bar .dw { font-size: 12px; font-weight: 700; color: var(--muted); }
.wk-bar .km { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.wk-bar .won { font-size: 11px; color: var(--money); font-variant-numeric: tabular-nums; }
.wk-bar.today .dw { color: var(--text); }
.wk-bar.today { background: var(--panel2); outline: 1px solid var(--line); }
.wk-legend { display: flex; gap: 12px; font-size: 11px; color: var(--muted); margin-top: 4px; align-self: end; }
.wk-legend i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 4px; vertical-align: -1px; }
@media (max-width: 640px) { .wk-bar .km, .wk-bar .won { display: none; } .wk-bars { min-height: 120px; } .wk-tiles { grid-template-columns: 1fr 1fr; } }
#sys_kv li { align-items: center; }
.sbadge { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; background: var(--panel2); }
.sbadge i { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.sbadge.ok { color: var(--income); } .sbadge.ok i { background: var(--income); }
.sbadge.bad { color: var(--expense); } .sbadge.bad i { background: var(--expense); }
.sbadge.warn { color: var(--warn); } .sbadge.warn i { background: var(--warn); }
.gs-list li.appt .d { color: var(--warn); font-weight: 800; min-width: 62px; }
.gs-list li.appt .t small { color: var(--muted); margin-left: 6px; }

/* 보안·시스템 상태는 고순이 섹션 아래 맨 밑 (2026-08-30) */
.hub-grid.bottom { padding-top: var(--sp-3); }

/* 상단 그리드 → 고순이 상자 → 하단 그리드 사이도 카드 간격(sp-3)과 같게 */
main.hub-grid { padding-bottom: 0; }

/* 자동 새로고침 (푸터, 2026-08-31) */
.foot-refresh { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); }
.foot-refresh select { height: 26px; border-radius: 6px; background: var(--panel2); color: var(--text); border: 1px solid var(--line); padding: 0 6px; font-size: 12px; }
.foot-refresh #afNow { height: 26px; padding: 0 8px; }
.foot-refresh #afStamp { font-variant-numeric: tabular-nums; }

/* 지금 챙길 것 — 약속 줄 액션 버튼 (2026-08-31) */
.gs-list li.appt { display: flex; align-items: center; gap: 8px; }
.gs-list li.appt .t { flex: 1; min-width: 0; cursor: pointer; }
.gs-list li.appt .ap-btns { flex: none; display: inline-flex; gap: 4px; }
.ap-b { width: 24px; height: 24px; border-radius: 6px; border: 1px solid var(--line); background: var(--panel2); color: var(--muted); font-size: 12px; cursor: pointer; line-height: 1; }
.ap-b:hover { color: var(--text); border-color: var(--accent); }

/* 테두리 hover 효과를 모든 카드에 통일 (2026-08-31) */
.card { transition: border-color .15s, transform .15s; }
.card:hover { border-color: var(--hoverc, var(--accent)); transform: translateY(-1px); }
/* 카드별 hover 색 지정 (2026-08-31): 파랑=--ai, 초록=#3fcf8e */
#weekCard, #secCard, #sysCard { --hoverc: var(--ai); }
.gsc-green { --hoverc: #3fcf8e; }
.gsc-blue { --hoverc: var(--ai); }

/* 지금 챙길 것 — 할일/묵은메모/Inbox 탭 (2026-08-31) */
.gst-tabs { display: flex; gap: 6px; margin: 2px 0 8px; flex-wrap: wrap; }
.gst-tabs button { height: 28px; padding: 0 11px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel); color: var(--muted); font-size: 12px; font-weight: 700; cursor: pointer; }
.gst-tabs button b { color: var(--muted); margin-left: 3px; }
.gst-tabs button:hover { border-color: var(--ai); }
.gst-tabs button.on { background: var(--ai); border-color: var(--ai); color: #0f1115; }
.gst-tabs button.on b { color: #0f1115; }
.gst-list .gs-list li { cursor: pointer; }
.gst-list .gs-list li:hover .t { color: var(--ai); }

/* 검색 결과에서 연 노트 보기 (2026-09-01) */
.note-view { max-height: 60vh; overflow: auto; margin: 0 0 var(--sp-3); padding: var(--sp-3);
             background: var(--panel2); border: 1px solid var(--line); border-radius: var(--r-sm);
             white-space: pre-wrap; word-break: break-word; font: 13px/1.7 inherit; color: var(--text); }
.srch-grp li[data-note] { cursor: pointer; }

/* 고콜 카드 — 녹음 종류(통화·회의·메모) 요약 칩 (2026-09-01) */
.gc-kinds { display: flex; gap: 6px; flex-wrap: wrap; margin: var(--sp-2) 0 0; }
.gc-kinds .kchip { height: 28px; padding: 0 11px; border-radius: 999px; border: 1px solid var(--line);
                   background: var(--panel2); color: var(--muted); font-size: 12px; font-weight: 700; cursor: pointer; }
.gc-kinds .kchip:hover { border-color: #e64980; color: var(--text); }
.gc-kinds .kchip b { color: #e64980; margin-left: 4px; }


/* ---------- 화면 잠금 ---------- */
.lock { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center;
  background: var(--bg); }
.lock.hidden { display: none; }
.lock-box { width: 100%; max-width: 320px; padding: var(--sp-5); text-align: center; }
.lock-logo { font-size: 20px; font-weight: 800; margin-bottom: var(--sp-4); }
.lock-box h3 { margin: 0 0 var(--sp-2); font-size: 18px; }
.pin-row { display: flex; gap: 10px; justify-content: center; margin: var(--sp-4) 0 var(--sp-2); }
.pin-cell { width: 52px; height: 60px; text-align: center; font-size: 26px; font-weight: 700;
  padding: 0; border-radius: var(--r); caret-color: transparent; }
.pin-cell:focus { border-color: var(--accent); }
/* 입력한 숫자는 가리되, 브라우저가 '비밀번호 저장' 을 권하지 않게 password 타입은 쓰지 않는다 */
.pin-cell, .pin-mask { -webkit-text-security: disc; text-security: disc; }
.lock-box .row { margin-top: var(--sp-2); }