:root {
  --bg: #f5f7fb;
  --surface: #ffffff;
  --surface-soft: #f8f9fd;
  --sidebar: #0b1020;
  --sidebar-soft: #151b2f;
  --text: #131728;
  --muted: #73798d;
  --muted-2: #a5aabc;
  --line: #e7e9f2;
  --purple: #5b5cf0;
  --purple-2: #7778ff;
  --purple-soft: #eeefff;
  --green: #15b77e;
  --green-soft: #e8f9f3;
  --blue: #2878ed;
  --blue-soft: #e9f2ff;
  --amber: #f3a31b;
  --amber-soft: #fff5de;
  --red: #e55266;
  --red-soft: #fff0f2;
  --shadow: 0 14px 40px rgba(38, 43, 70, .07);
  --radius: 18px;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; background: var(--bg); color: var(--text); font-family: Pretendard, "Noto Sans KR", "Apple SD Gothic Neo", Inter, system-ui, sans-serif; font-size: 16px; line-height: 1.55; }
button, input, textarea { font: inherit; }
button { color: inherit; }
button, .project-card { -webkit-tap-highlight-color: transparent; }
button:focus-visible, input:focus-visible, textarea:focus-visible, [role="button"]:focus-visible { outline: 3px solid var(--purple); outline-offset: 2px; }
.sidebar button:focus-visible { outline-color: #9a9bff; }
body.modal-open { overflow: hidden; }
.is-invisible { visibility: hidden; }

.app-shell { min-height: 100vh; }
.sidebar { position: fixed; inset: 0 auto 0 0; z-index: 20; display: flex; width: 250px; flex-direction: column; padding: 28px 18px 20px; overflow-y: auto; color: #fff; background: var(--sidebar); }
.brand { display: flex; align-items: center; gap: 12px; height: 40px; padding: 0 10px; font-size: .96rem; font-weight: 800; letter-spacing: .22em; }
.brand-mark { position: relative; width: 28px; height: 28px; border-radius: 9px; background: linear-gradient(145deg, var(--purple-2), var(--purple)); box-shadow: 0 8px 20px rgba(91,92,240,.35); }
.brand-mark:before { content: ""; position: absolute; inset: 7px; border: 2px solid #fff; border-radius: 50%; opacity: .95; }
.brand-mark i { position: absolute; width: 18px; height: 7px; left: 5px; bottom: 4px; border-bottom: 2px solid #61efbd; border-radius: 50%; transform: rotate(-12deg); }
.side-nav { display: grid; gap: 6px; margin-top: 44px; }
.nav-item { display: flex; align-items: center; gap: 13px; width: 100%; height: 46px; padding: 0 13px; border: 0; border-radius: 12px; color: #8e96ad; background: transparent; cursor: pointer; font-size: .91rem; font-weight: 600; text-align: left; transition: .18s ease; }
.nav-item:hover { color: #dfe3f4; background: rgba(255,255,255,.045); }
.nav-item.active { color: #fff; background: linear-gradient(90deg, rgba(91,92,240,.30), rgba(91,92,240,.12)); box-shadow: inset 3px 0 0 #7677ff; }
.nav-icon { width: 22px; font-size: 1.13rem; text-align: center; }
.nav-count { margin-left: auto; min-width: 24px; padding: 2px 7px; border-radius: 8px; color: #9098b2; background: rgba(255,255,255,.07); font-size: .75rem; text-align: center; }
.nav-count.accent { color: #bfc0ff; background: rgba(91,92,240,.2); }
.lock-dot { margin-left: auto; width: 7px; height: 7px; border-radius: 50%; background: #f3a31b; box-shadow: 0 0 0 4px rgba(243,163,27,.11); }
.side-bottom { display: grid; gap: 16px; margin-top: auto; }
.storage-card { width:100%; padding: 16px; border: 1px solid rgba(255,255,255,.065); border-radius: 14px; color:inherit; background: rgba(255,255,255,.03); cursor:pointer; text-align:left; }
.storage-card:hover { border-color:rgba(119,120,255,.45); background:rgba(255,255,255,.05); }
.storage-card.warning .storage-head strong { color:#ffcb6f; }
.storage-head { display: flex; justify-content: space-between; color: #b6bdd0; font-size: .76rem; }
.storage-head strong { color: #fff; }

.storage-card small { color: #8089a0; font-size: .7rem; }
.profile-card { display:flex; align-items:center; width:100%; padding:9px; border:1px solid rgba(255,255,255,.055); border-radius:13px; color:#fff; background:rgba(255,255,255,.025); }
.avatar { display: grid; width: 36px; height: 36px; place-items: center; border-radius: 11px; color: #fff; background: linear-gradient(145deg, #7568dd, #3f4db6); font-size: .75rem; font-weight: 800; }
.profile-copy { display: grid; margin-left: 11px; }
.profile-copy strong { font-size: .8rem; }
.profile-copy small { color: #7f879d; font-size: .69rem; }
.logout-button { display:grid; width:36px; height:36px; margin-left:auto; place-items:center; border:0; border-radius:10px; color:#7f879d; background:transparent; cursor:pointer; }
.logout-button:hover { color:#fff; background:rgba(229,82,102,.18); }
.logout-button svg,.notification-button svg { width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.sync-popover { position:fixed; z-index:45; bottom:82px; left:228px; width:320px; padding:16px; border:1px solid var(--line); border-radius:16px; color:var(--text); background:var(--surface); box-shadow:0 22px 60px rgba(4,8,20,.25); }
.sync-popover-head { display:flex; justify-content:space-between; gap:12px; padding-bottom:11px; border-bottom:1px solid var(--line); }.sync-popover-head > div { display:grid; }.sync-popover-head strong { font-size:.82rem; }.sync-popover-head small { color:var(--muted); font-size:.62rem; }.sync-popover-head button { border:0; color:var(--purple); background:none; cursor:pointer; font-size:.65rem; font-weight:700; }
#syncProjectList { display:grid; gap:8px; padding:12px 0; }#syncProjectList > div { display:flex; justify-content:space-between; gap:8px; font-size:.65rem; }#syncProjectList span { display:flex; align-items:center; min-width:0; }#syncProjectList i { width:6px; height:6px; flex:0 0 6px; margin-right:7px; border-radius:50%; background:var(--green); }#syncProjectList i.warning { background:var(--amber); }#syncProjectList small { color:var(--muted); white-space:nowrap; }.sync-popover > p { margin:0; color:var(--muted); font-size:.59rem; }

.workspace { min-height: 100vh; margin-left: 250px; }
.topbar { position: sticky; top: 0; z-index: 15; display: flex; align-items: center; justify-content: space-between; min-height: 76px; padding: 14px 38px; border-bottom: 1px solid rgba(225,228,238,.9); background: rgba(245,247,251,.88); backdrop-filter: blur(18px); }
.breadcrumb { display: flex; align-items: center; gap: 9px; font-size: .82rem; }
.breadcrumb button { padding:5px 3px; border:0; color:var(--muted-2); background:none; cursor:pointer; font-size:inherit; }.breadcrumb button:hover { color:var(--purple); }.breadcrumb button:last-child { max-width:420px; overflow:hidden; color:var(--text); font-weight:650; text-overflow:ellipsis; white-space:nowrap; }
.breadcrumb b { color: #c5c8d3; font-weight: 400; }
.breadcrumb strong { font-weight: 650; }
.top-actions { display: flex; align-items: center; gap: 10px; }
.global-search { display: flex; align-items: center; width: 220px; height: 40px; padding: 0 11px; border: 1px solid var(--line); border-radius: 11px; color: #9ca1b3; background: rgba(255,255,255,.8); }
.global-search input { min-width: 0; flex: 1; border: 0; outline: 0; background: transparent; font-size: .8rem; }
.global-search kbd { padding: 2px 6px; border: 1px solid #dddfea; border-radius: 5px; color: #9ba0b2; background: #f8f9fc; font-family: inherit; font-size: .65rem; }
.icon-button { display: grid; width: 40px; height: 40px; place-items: center; border: 1px solid var(--line); border-radius: 11px; background: rgba(255,255,255,.8); cursor: pointer; }
.notification-button { position: relative; }
.notification-badge { position:absolute; top:-5px; right:-5px; display:grid; min-width:18px; height:18px; place-items:center; padding:0 4px; border:2px solid var(--surface); border-radius:9px; color:#fff; background:var(--red); font-size:.55rem; font-weight:800; }
.primary-button, .outline-button, .text-button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; border-radius: 11px; cursor: pointer; font-weight: 650; transition: transform .15s ease, box-shadow .15s ease, background .15s ease; }
.primary-button { min-height: 40px; padding: 0 16px; border: 1px solid var(--purple); color: #fff; background: linear-gradient(135deg, #6869f5, #5354df); box-shadow: 0 8px 18px rgba(91,92,240,.18); font-size: .82rem; }
.primary-button:hover { transform: translateY(-1px); box-shadow: 0 10px 22px rgba(91,92,240,.25); }
.outline-button { min-height: 39px; padding: 0 14px; border: 1px solid var(--line); background: var(--surface); font-size: .79rem; }
.text-button { padding: 5px; border: 0; color: var(--purple); background: none; font-size: .78rem; }
.text-button span { transition: transform .15s ease; }
.text-button:hover span { transform: translateX(3px); }
.mobile-menu { display: none; width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }

.main-content { max-width: 1560px; margin: 0 auto; padding: 38px 42px 60px; }
.view { display: none; animation: viewIn .3s ease both; }
.view.active { display: block; }
@keyframes viewIn { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }
.page-heading { margin-bottom: 28px; }
.page-heading h1 { margin: 2px 0 5px; font-size: clamp(1.75rem, 3vw, 2.2rem); line-height: 1.25; letter-spacing: -.045em; }
.page-heading p { margin: 0; color: var(--muted); font-size: .91rem; }
.dashboard-heading, .inline-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 22px; }
.eyebrow { display: flex; align-items: center; gap: 8px; margin-bottom: 8px !important; color: #9297a9 !important; font-size: .68rem !important; font-weight: 750; letter-spacing: .12em; text-transform: uppercase; }
.eyebrow span { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px var(--green-soft); }
.eyebrow.danger span { background: var(--red); box-shadow: 0 0 0 4px var(--red-soft); }

.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 16px; }
.guest-mode .metric-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
.metric-card { position: relative; display: flex; align-items: center; min-height: 128px; padding: 22px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: 0 5px 20px rgba(39,43,69,.035); }
.metric-icon { display: grid; width: 43px; height: 43px; flex: 0 0 43px; place-items: center; margin-right: 14px; border-radius: 13px; font-weight: 800; }
.metric-card.violet .metric-icon { color: var(--purple); background: var(--purple-soft); }
.metric-card.green .metric-icon { color: var(--green); background: var(--green-soft); }
.metric-card.amber .metric-icon { color: var(--amber); background: var(--amber-soft); }
.metric-card.blue .metric-icon { color: var(--blue); background: var(--blue-soft); }
.metric-copy { position: relative; z-index: 2; display: grid; }
.metric-copy span { color: var(--muted); font-size: .74rem; }
.metric-copy strong { margin: 1px 0 -1px; font-size: 1.65rem; letter-spacing: -.04em; }
.metric-copy small { color: #a0a4b4; font-size: .67rem; white-space: nowrap; }
.metric-copy small b { color: var(--green); font-weight: 700; }
.amber .metric-copy small b { color: var(--amber); }

@keyframes rotate { to { transform: rotate(360deg); } }
.mini-ring { display: grid; width: 42px; height: 42px; place-items: center; margin-left: auto; border: 4px solid #fff0cc; border-top-color: var(--amber); border-right-color: var(--amber); border-radius: 50%; transform: rotate(20deg); }
.mini-ring span { color: var(--amber); font-size: .65rem; font-weight: 800; transform: rotate(-20deg); }

.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(280px, .75fr); gap: 18px; margin-top: 18px; }
.panel { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: 0 5px 20px rgba(39,43,69,.035); }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 22px 23px 17px; }
.panel-head.compact { padding-bottom: 13px; }
.panel-head h2, .panel h2 { margin: 0; font-size: .96rem; letter-spacing: -.025em; }
.panel-head p { margin: 3px 0 0; color: var(--muted); font-size: .7rem; }
.project-list { padding: 0 10px 10px; }
.project-row { display: grid; grid-template-columns: 44px minmax(140px,1.4fr) minmax(96px,.8fr) 78px 62px 18px; align-items: center; gap: 12px; width: 100%; min-height: 75px; padding: 10px 11px; border: 0; border-top: 1px solid #f0f1f6; background: transparent; cursor: pointer; text-align: left; }
.project-row:hover { border-radius: 13px; background: #fafaff; }
.project-symbol { display: grid; width: 38px; height: 38px; place-items: center; overflow: hidden; border-radius: 12px; color: white; font-size: .78rem; font-weight: 850; box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); }
.project-symbol img { width: 100%; height: 100%; object-fit: cover; }
.project-symbol.large { width: 48px; height: 48px; border-radius: 15px; font-size: .95rem; }
.project-symbol.atlas { background: linear-gradient(145deg, #6c70ee, #4348c9); }.project-symbol.pulse { background: linear-gradient(145deg, #30c498, #10936f); }.project-symbol.mono { background: linear-gradient(145deg, #2d354d, #111624); }.project-symbol.relay { background: linear-gradient(145deg, #f2934e, #d85c3e); }.project-symbol.luma { background: linear-gradient(145deg, #ec62a7, #b43e89); }.project-symbol.airflow { background: linear-gradient(145deg, #1d84cf, #14618f); }
.project-symbol.naru { background: linear-gradient(145deg, #87bfff, #6b72db); }.project-symbol.habit { background: linear-gradient(145deg, #5b70f4, #3247c4); }

.login-gate { position: fixed; z-index: 1000; inset: 0; display: grid; place-items: center; padding: 20px; background: radial-gradient(circle at 50% 20%, #202a50 0, #0b1020 58%); }
.login-gate[hidden] { display: none; }
.login-card { width: min(420px, 100%); padding: 34px; border: 1px solid rgba(255,255,255,.12); border-radius: 22px; color: #f4f6ff; background: rgba(19,25,46,.94); box-shadow: 0 30px 90px rgba(0,0,0,.42); }
.login-brand { display: grid; margin-bottom: 24px; }
.login-card h1 { margin: 8px 0; font-size: 1.6rem; }
.login-card > p:not(.eyebrow) { margin: 0 0 24px; color: #aeb6cc; font-size: .78rem; line-height: 1.7; }
.login-card form { display: grid; gap: 14px; }
.login-card label { display: grid; gap: 7px; color: #cfd5e5; font-size: .72rem; font-weight: 700; }
.login-card input { height: 46px; padding: 0 13px; border: 1px solid #39425c; border-radius: 10px; color: #fff; background: #11182b; }
.login-card .primary-button { height: 46px; justify-content: center; margin-top: 4px; }
.guest-login { height: 42px; border: 1px solid #39425c; border-radius: 10px; color: #cfd5e5; background: transparent; cursor: pointer; font-weight: 700; }
.form-error { margin: 0 !important; color: #f58da0 !important; font-size: .68rem !important; }
.notification-popover { position: fixed; z-index: 70; top: 72px; right: 22px; width: min(370px, calc(100vw - 28px)); overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); box-shadow: 0 20px 60px rgba(30,35,58,.2); }.notification-head { display: flex; align-items: center; justify-content: space-between; padding: 16px; border-bottom: 1px solid var(--line); }.notification-head > div { display: grid; }.notification-head strong { font-size: .82rem; }.notification-head small { color: var(--muted); font-size: .62rem; }.notification-head button { border: 0; color: var(--purple); background: none; cursor: pointer; font-size: .65rem; font-weight: 700; }.notification-row { display: grid; grid-template-columns: 9px 1fr; gap: 10px; padding: 13px 16px; border: 0; border-bottom: 1px solid var(--line); background: transparent; cursor: pointer; text-align: left; }.notification-row:hover { background: var(--surface-soft); }.notification-row > i { width: 8px; height: 8px; margin-top: 5px; border-radius: 50%; background: var(--purple); }.notification-row > span { display: grid; gap: 3px; }.notification-row strong { font-size: .7rem; }.notification-row small { color: var(--muted); font-size: .61rem; }

.project-main { display: grid; }
.project-main strong { font-size: .82rem; }
.project-main small { color: var(--muted); font-size: .7rem; }
.tech-stack { display: flex; }
.tech-stack i { display: grid; width: 26px; height: 26px; place-items: center; margin-left: -4px; border: 2px solid var(--surface); border-radius: 8px; color: #697087; background: #f0f2f8; font-size: .55rem; font-style: normal; font-weight: 800; }
.project-status { display: inline-flex; align-items: center; gap: 6px; width: max-content; padding: 4px 7px; border-radius: 8px; font-size: .65rem; font-weight: 700; white-space: nowrap; }
.project-status i { width: 6px; height: 6px; border-radius: 50%; }
.project-status.live { color: #12825f; background: var(--green-soft); }.project-status.live i { background: var(--green); }
.project-status.develop { color: #6c59d9; background: var(--purple-soft); }.project-status.develop i { background: var(--purple); }
.project-status.pause { color: #8a8591; background: #f0f1f5; }.project-status.pause i { background: #9ba0ad; }
.project-status.stopped { color: #a3610b; background: var(--amber-soft); }.project-status.stopped i { background: var(--amber); }
.updated { color: #9ba0b0; font-size: .66rem; }
.row-arrow { color: #c0c3cf; font-size: 1.25rem; }
.right-column { display: grid; gap: 18px; }
.icon-plain { border: 0; color: #a8abba; background: none; cursor: pointer; }
.notice-panel { padding-bottom: 9px; }
.notice-item { display: flex; align-items: center; gap: 10px; width: calc(100% - 20px); min-height: 54px; margin: 0 10px; padding: 10px 12px; border: 0; border-top: 1px solid #f0f1f6; background: transparent; cursor: pointer; text-align: left; }
.notice-item.featured { display: block; width: calc(100% - 28px); min-height: 124px; margin: 0 14px 6px; padding: 17px; border: 1px solid #dddfff; border-radius: 13px; background: linear-gradient(145deg, #f5f5ff, #fbfbff); }
.notice-item.featured strong { display: block; margin: 9px 0 2px; font-size: .85rem; }
.notice-item.featured p { margin: 0 0 8px; color: var(--muted); font-size: .7rem; }
.notice-item small { display: block; color: #a1a5b4; font-size: .64rem; }
.notice-item > span:nth-child(2) { display: grid; flex: 1; }
.notice-item > span:last-child { color: #c0c3cf; }
.notice-badge { padding: 4px 7px; border-radius: 6px; color: var(--purple); background: var(--purple-soft); font-size: .61rem; font-weight: 750; }
.notice-dot { width: 8px; height: 8px; border-radius: 50%; }.notice-dot.bug { background: var(--red); }.notice-dot.system { background: var(--blue); }
.quick-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 0 14px 14px; }
.quick-grid button { display: grid; min-height: 64px; place-items: center; gap: 2px; padding: 8px; border: 1px solid var(--line); border-radius: 12px; color: #686e81; background: #fbfbfd; cursor: pointer; font-size: .66rem; }
.quick-grid button:hover { color: var(--purple); border-color: #d9d9ff; background: #f7f7ff; }
.quick-grid button span { font-size: 1.05rem; }

.filter-bar { display: flex; justify-content: space-between; gap: 18px; margin-bottom: 18px; }
.segmented { display: inline-flex; padding: 4px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.segmented button { min-height: 32px; padding: 0 13px; border: 0; border-radius: 8px; color: var(--muted); background: transparent; cursor: pointer; font-size: .76rem; }
.segmented button.active { color: var(--text); background: #f0f1f8; font-weight: 700; }
.segmented.small button { padding: 0 10px; font-size: .7rem; }
.project-card-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; }
.project-card { min-height: 260px; padding: 22px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); cursor: pointer; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.project-card:hover { transform: translateY(-4px); border-color: #d8d9ef; box-shadow: var(--shadow); }
.project-card-top { display: flex; align-items: flex-start; margin-bottom: 19px; }
.project-card-top .project-status { margin-left: 11px; }
.project-card-top > button { margin-left: auto; border: 0; color: #a4a8b7; background: none; cursor: pointer; letter-spacing: 2px; }
.project-card h2 { margin: 0 0 7px; font-size: 1rem; }
.project-card > p { min-height: 50px; margin: 0 0 16px; color: var(--muted); font-size: .76rem; }
.project-url { padding: 9px 11px; overflow: hidden; border-radius: 9px; color: #60667c; background: var(--surface-soft); font-size: .7rem; text-overflow: ellipsis; white-space: nowrap; }
.project-url span { margin-right: 6px; color: var(--purple); }
.project-meta { display: flex; align-items: flex-start; justify-content: space-between; gap:10px; margin-top: 17px; }
.project-meta span { display: flex; flex-wrap:wrap; gap: 5px; }
.project-meta b { padding: 3px 7px; border-radius: 6px; color: #72778a; background: #f0f1f5; font-size: .6rem; font-weight: 650; }
.project-meta small { color: #a6aab8; font-size: .64rem; }

.local-project-card { border-color: #cfe7f6; background: linear-gradient(145deg, var(--surface), #f5fbff); }
.stopped-project-card { background: #fafafc; }
.stopped-project-card .project-url { color: #a6aab8; text-decoration: line-through; }

.vault-state { display: flex; align-items: center; gap: 8px; padding: 7px 11px; border: 1px solid #ffd8ad; border-radius: 10px; color: #9a6313; background: #fff9ed; font-size: .72rem; font-weight: 700; }
.vault-state span { width: 7px; height: 7px; border-radius: 50%; background: var(--amber); }
.vault-state.open span { background: var(--green); }
.security-banner { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; padding: 15px 18px; border: 1px solid #f1dfb8; border-radius: 14px; background: linear-gradient(90deg,#fff9ec,#fffdfa); }
.shield-icon { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 11px; color: #ab7115; background: var(--amber-soft); }
.security-banner strong { display: block; font-size: .78rem; }
.security-banner p { margin: 2px 0 0; color: #897a68; font-size: .7rem; }
.vault-layout { display: grid; grid-template-columns: minmax(0,1.5fr) minmax(240px,.55fr); gap: 18px; }
.vault-panel { min-height: 525px; }
.vault-lock { display: grid; max-width: 390px; min-height: 520px; align-content: center; justify-items: center; margin: 0 auto; padding: 42px 20px; text-align: center; }
.lock-visual { position: relative; display: grid; width: 84px; height: 84px; place-items: center; margin-bottom: 22px; border: 1px solid #dddfff; border-radius: 28px; color: var(--purple); background: linear-gradient(145deg,#f5f5ff,#ececff); box-shadow: 0 18px 45px rgba(91,92,240,.13); font-size: 1.8rem; }
.lock-visual i { position: absolute; top: 8px; right: 8px; width: 9px; height: 9px; border: 2px solid #fff; border-radius: 50%; background: var(--green); }
.vault-lock h2 { margin: 0 0 6px; font-size: 1.25rem; }
.vault-lock > p:not(.eyebrow) { margin: 0 0 22px; color: var(--muted); font-size: .77rem; }
.vault-lock form { display: grid; width: 100%; gap: 12px; }
.vault-lock label, .form-modal label { display: grid; gap: 7px; color: #565c70; font-size: .72rem; font-weight: 700; text-align: left; }
input, textarea, select { width: 100%; border: 1px solid var(--line); border-radius: 11px; color: var(--text); background: var(--surface); }
.vault-lock input, .form-modal input { height: 44px; padding: 0 13px; }
.vault-lock form .primary-button { height: 44px; }
.vault-lock > small { margin-top: 12px; color: #acafbd; font-size: .64rem; }
.vault-aside { display: grid; align-content: start; gap: 18px; }

.tags h2, .release-summary h3, .notice-filter h3 { margin: 0; font-size: .88rem; }

.vault-content { padding-bottom: 18px; }
.credential-list { display: grid; gap: 14px; padding: 0 22px; }
.credential-list article { position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.credential-list .credential-head { display: flex; align-items: center; gap: 11px; }
.credential-list .credential-head { justify-content: space-between; padding: 16px 18px; background: var(--surface-soft); }
.credential-identity { display: flex; align-items: center; gap: 11px; }.credential-identity > span:last-child { display: grid; }.credential-list strong { font-size: .78rem; }.credential-list small { color: var(--muted); font-size: .63rem; }
.secret-table { display: grid; }.secret-row { display: grid; grid-template-columns: minmax(150px,1fr) minmax(110px,.8fr) minmax(150px,1.1fr) 66px; align-items: center; gap: 12px; min-height: 48px; padding: 9px 18px; border-top: 1px solid var(--line); font-size: .67rem; }.secret-row strong { overflow-wrap: anywhere; }.secret-source { color: var(--muted); }.secret-value { overflow: hidden; font-family: ui-monospace, monospace; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.reveal-secret { min-height: 30px; padding: 0 9px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); cursor: pointer; font-size: .63rem; }
.vault-summary, .vault-guide, .vault-access { padding: 20px; }.vault-access h3 { margin: 0; font-size: .86rem; }.vault-access ul { display: grid; gap: 9px; margin: 14px 0 0; padding: 0; list-style: none; }.vault-access li { display: flex; justify-content: space-between; gap: 10px; color: var(--muted); font-size: .66rem; }.vault-access li strong { color: var(--text); font-weight: 700; }.vault-access li.failed strong { color: #d4566e; }.vault-access li small { flex-shrink: 0; color: var(--muted-2); }.vault-summary h3, .vault-guide h3 { margin: 0; font-size: .86rem; }.vault-summary > div { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 15px 0; }.vault-summary span { display: grid; gap: 3px; padding: 13px; border-radius: 10px; color: var(--muted); background: var(--surface-soft); font-size: .62rem; }.vault-summary strong { color: var(--text); font-size: 1.1rem; }.vault-summary p { margin: 0; color: var(--muted); font-size: .68rem; line-height: 1.65; }.vault-guide ul { display: grid; gap: 11px; margin: 15px 0 0; padding: 0; list-style: none; }.vault-guide li { display: flex; gap: 8px; color: var(--muted); font-size: .68rem; }.vault-guide li span { color: var(--green); font-weight: 800; }

.board-layout { display: grid; grid-template-columns: minmax(0,1.55fr) minmax(240px,.5fr); gap: 18px; }
.board-panel { overflow: hidden; }
.board-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 17px; border-bottom: 1px solid var(--line); }
.board-toolbar > label { display: flex; align-items: center; width: 220px; height: 37px; padding: 0 11px; border: 1px solid var(--line); border-radius: 10px; color: var(--muted); }
.board-toolbar input { height: 100%; border: 0; outline: 0; background: transparent; font-size: .74rem; }
.board-table { padding: 0 10px 10px; }
.table-row { display: grid; grid-template-columns: 75px minmax(220px,1fr) 84px 45px; align-items: center; gap: 11px; width: 100%; min-height: 72px; padding: 10px 12px; border: 0; border-bottom: 1px solid #eff0f5; background: transparent; text-align: left; }
button.table-row { cursor: pointer; }.button.table-row:hover, button.table-row:hover { background: #fafaff; }
.table-row > span:nth-child(2) { display: grid; }.table-row strong { font-size: .76rem; }.table-row small { color: var(--muted); font-size: .66rem; }
.table-row > span:nth-child(n+3) { color: #999eae; font-size: .67rem; }
.table-head { min-height: 42px; color: #9ba0b0; font-size: .65rem; font-weight: 700; }
.category { width: max-content; padding: 4px 7px; border-radius: 7px; font-size: .62rem !important; font-weight: 700; }.category.idea { color: #705ce1; background: var(--purple-soft); }.category.memo { color: #167c60; background: var(--green-soft); }.category.request { color:#b56113; background:var(--amber-soft); }.category.resource { color: #246db5; background: var(--blue-soft); }
.board-side { display: grid; align-content: start; gap: 18px; }
.pinned { padding-bottom: 15px; }.pinned .panel-head > span { color: var(--purple); font-size: .72rem; font-weight: 700; }.pinned article { margin: 0 14px; padding: 16px; border: 1px solid #e1e2ff; border-radius: 13px; background: #f8f8ff; }.pinned article > small { color: var(--purple); font-size: .58rem; font-weight: 800; letter-spacing: .11em; }.pinned article > strong { display: block; margin: 4px 0 11px; font-size: .78rem; }.pinned ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }.pinned li { display: flex; align-items: center; gap: 8px; color: #6f7486; font-size: .68rem; }.pinned li i { width: 12px; height: 12px; border: 1px solid #ccd0df; border-radius: 3px; }
.pinned-post { display: grid; width: calc(100% - 28px); margin: 0 14px 8px; padding: 15px; border: 1px solid #e1e2ff; border-radius: 13px; color: var(--text); background: #f8f8ff; cursor: pointer; text-align: left; }.pinned-post small { color: var(--purple); font-size: .56rem; font-weight: 800; letter-spacing: .1em; }.pinned-post strong { margin: 4px 0; font-size: .76rem; }.pinned-post span { color: var(--muted); font-size: .65rem; }
.tags { padding: 20px; }.tags div { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; }.tags button { padding: 5px 9px; border: 0; border-radius: 8px; color: #71768a; background: var(--surface-soft); cursor: pointer; font-size: .65rem; }
.empty-state { padding: 28px; color: var(--muted); font-size: .72rem; text-align: center; }.empty-state.compact { padding: 18px; }
.form-modal select { height: 44px; padding: 0 12px; }.form-modal textarea { padding: 12px 13px; resize: vertical; }.post-detail-summary { color: var(--muted); }.post-detail-body { margin: 20px 0; color: var(--text); font-size: .78rem; line-height: 1.8; white-space: pre-wrap; }.post-detail-tags, .change-tags { display: flex; flex-wrap: wrap; gap: 6px; }.post-detail-tags span { padding: 4px 8px; border-radius: 7px; color: var(--purple); background: var(--purple-soft); font-size: .62rem; }.post-detail-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 18px; }.post-detail-footer small { color: var(--muted); }

.notice-layout { display: grid; grid-template-columns: minmax(0,1.45fr) minmax(240px,.5fr); gap: 30px; }
.notice-feed { position: relative; display: grid; gap: 17px; padding-left: 26px; }.notice-feed:before { content: ""; position: absolute; top: 9px; bottom: 20px; left: 6px; width: 1px; background: #dfe2ec; }
.changelog-card { position: relative; padding: 24px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: 0 5px 20px rgba(39,43,69,.035); }.timeline-dot { position: absolute; top: 29px; left: -25px; width: 11px; height: 11px; border: 3px solid var(--bg); border-radius: 50%; background: #adb1c0; box-shadow: 0 0 0 1px #d9dce7; }.changelog-card.major .timeline-dot { background: var(--purple); box-shadow: 0 0 0 4px var(--purple-soft); }.release-meta { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; color: #9ca1b1; font-size: .65rem; }.release-version { padding: 4px 8px; border-radius: 7px; color: var(--purple); background: var(--purple-soft); font-weight: 800; }.release-version.patch { color: #167d61; background: var(--green-soft); }.release-version.system { color: #286ead; background: var(--blue-soft); }.changelog-card h2 { margin: 0 0 6px; font-size: 1rem; }.changelog-card > p { margin: 0 0 16px; color: var(--muted); font-size: .75rem; }.changelog-card ul { display: grid; gap: 8px; margin: 0 0 20px; padding: 0; list-style: none; color: #5e6477; font-size: .7rem; }.changelog-card li span { display: inline-block; min-width: 35px; margin-right: 7px; padding: 2px 5px; border-radius: 5px; color: var(--purple); background: var(--purple-soft); font-size: .54rem; font-weight: 800; text-align: center; }.changelog-card li span.fix { color: #b75a69; background: var(--red-soft); }.release-project { display: flex; align-items: center; gap: 8px; padding-top: 15px; border-top: 1px solid var(--line); color: #666c7e; font-size: .67rem; font-weight: 700; }.release-project .project-symbol { width: 26px; height: 26px; border-radius: 8px; font-size: .55rem; }
.notice-side { display: grid; align-content: start; gap: 18px; }.release-summary { padding: 20px; }.release-summary > div { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin-top: 16px; }.release-summary span { display: grid; gap: 3px; padding: 11px 7px; border-radius: 10px; color: var(--muted); background: var(--surface-soft); font-size: .62rem; text-align: center; }.release-summary strong { color: var(--text); font-size: 1rem; }.notice-filter { display: grid; padding: 20px 12px 12px; }.notice-filter h3 { padding: 0 8px 11px; }.notice-filter button { display: flex; align-items: center; gap: 9px; min-height: 43px; padding: 0 9px; border: 0; border-radius: 10px; color: #676d80; background: transparent; cursor: pointer; font-size: .69rem; text-align: left; }.notice-filter button.active { color: var(--text); background: var(--surface-soft); font-weight: 700; }.notice-filter button b { margin-left: auto; color: #a2a6b5; }.notice-filter .project-symbol, .all-symbol { width: 27px; height: 27px; border-radius: 8px; font-size: .56rem; }.all-symbol { display: grid; place-items: center; color: var(--purple); background: var(--purple-soft); font-size: .85rem; }

/* Project detail */
.detail-back { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 18px; padding: 0; border: 0; color: var(--muted); background: none; cursor: pointer; font-size: .76rem; font-weight: 650; }
.detail-back:hover { color: var(--purple); }
.detail-hero { display: flex; align-items: center; justify-content: space-between; gap: 22px; padding: 26px 28px; }
.detail-identity { display: flex; align-items: center; gap: 18px; min-width: 0; }
.detail-symbol { width: 66px; height: 66px; flex: 0 0 66px; border-radius: 20px; font-size: 1.3rem; }
.detail-kicker { display: flex; align-items: center; gap: 10px; margin-bottom: 7px; color: var(--muted); font-size: .67rem; }
.detail-identity h1 { margin: 0 0 3px; font-size: 1.65rem; letter-spacing: -.04em; }
.detail-identity p { max-width: 700px; margin: 0; color: var(--muted); font-size: .79rem; }
.detail-hero-actions { display: flex; flex: 0 0 auto; gap: 9px; }
.detail-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 14px 0 22px; }
.detail-facts article { display: grid; gap: 3px; min-width: 0; padding: 15px 17px; border: 1px solid var(--line); border-radius: 13px; background: var(--surface); }
.detail-facts span { color: var(--muted); font-size: .64rem; }
.detail-facts strong { font-size: .74rem; line-height:1.55; overflow-wrap:anywhere; white-space:normal; }
.detail-tabs { display: flex; gap: 25px; margin-bottom: 16px; padding: 0 4px; border-bottom: 1px solid var(--line); }
.detail-tabs button { display: flex; align-items: center; gap: 7px; min-height: 44px; padding: 0 2px; border: 0; border-bottom: 2px solid transparent; color: var(--muted); background: none; cursor: pointer; font-size: .78rem; font-weight: 650; }
.detail-tabs button.active { color: var(--purple); border-bottom-color: var(--purple); }
.detail-tabs button span { min-width: 21px; padding: 1px 6px; border-radius: 7px; background: var(--surface-soft); font-size: .6rem; text-align: center; }
.detail-tabs button.active span { background: var(--purple-soft); }
.detail-tab-panel { display: none; }
.detail-tab-panel.active { display: block; animation: viewIn .25s ease both; }
.docs-layout { display: grid; grid-template-columns: 250px minmax(380px, 1fr) 190px; align-items: stretch; gap: 14px; }
.docs-sidebar, .doc-viewer, .doc-outline { min-height: 630px; }
.docs-sidebar { padding: 18px 12px; }
.docs-sidebar-head { display: flex; align-items: flex-start; justify-content: space-between; padding: 0 6px 14px; }
.docs-sidebar-head h2 { font-size: .86rem; }
.docs-sidebar-head p { margin: 2px 0 0; color: var(--muted); font-size: .61rem; }
.docs-sidebar-head > span { padding: 3px 6px; border-radius: 5px; color: #7e8497; background: var(--surface-soft); font-size: .52rem; font-weight: 800; letter-spacing: .06em; }
.docs-search { display: flex; align-items: center; height: 37px; margin-bottom: 13px; padding: 0 10px; border: 1px solid var(--line); border-radius: 9px; color: var(--muted); }
.docs-search input { height: 100%; border: 0; outline: 0; background: transparent; font-size: .68rem; }
.docs-tree { display: grid; gap: 4px; }
.docs-group-label { display: block; padding: 12px 9px 5px; color: #9da2b2; font-size: .58rem; font-weight: 800; letter-spacing: .09em; }
.doc-link { display: flex; align-items: center; gap: 9px; width: 100%; min-height: 40px; padding: 6px 9px; border: 0; border-radius: 9px; color: #646a7c; background: transparent; cursor: pointer; font-size: .69rem; text-align: left; }
.doc-link:before { content: "◇"; color: #a4a9b8; font-size: .75rem; }
.doc-link:hover { background: var(--surface-soft); }
.doc-link.active { color: var(--purple); background: var(--purple-soft); font-weight: 700; }
.doc-link.active:before { content: "◆"; color: var(--purple); }
.doc-link[hidden] { display: none; }
.doc-viewer { display: flex; flex-direction: column; padding: 28px 34px 20px; }
.doc-viewer-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.doc-viewer-head h2 { margin: 6px 0 4px; font-size: 1.4rem; }
.doc-viewer-head p { margin: 0; color: var(--muted); font-size: .65rem; }
.doc-type { padding: 4px 7px; border-radius: 6px; color: var(--purple); background: var(--purple-soft); font-size: .55rem; font-weight: 800; letter-spacing: .09em; }
.doc-body { flex: 1; padding: 22px 0 28px; color: #4f566a; font-size: .81rem; line-height: 1.8; }
.doc-body h3 { margin: 26px 0 8px; color: var(--text); font-size: 1rem; letter-spacing: -.02em; }
.doc-body h3:first-child { margin-top: 0; }
.doc-body p { margin: 0 0 13px; }
.doc-body ul, .doc-body ol { display: grid; gap: 5px; margin: 8px 0 18px; padding-left: 20px; }
.doc-body code { padding: 2px 5px; border-radius: 5px; color: #5357c9; background: var(--purple-soft); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .72rem; }
.doc-body pre { margin: 13px 0 19px; padding: 15px 17px; overflow-x: auto; border: 1px solid #252d40; border-radius: 11px; color: #d8def2; background: #111725; line-height: 1.6; }
.doc-body pre code { padding: 0; color: inherit; background: transparent; }
.doc-table-wrap { margin: 12px 0 22px; overflow-x: auto; border: 1px solid var(--line); border-radius: 11px; }
.doc-body table { width: 100%; border-collapse: collapse; font-size: .7rem; line-height: 1.55; }
.doc-body th, .doc-body td { min-width: 120px; padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.doc-body th { color: var(--text); background: var(--surface-soft); font-size: .64rem; }
.doc-body tr:last-child td { border-bottom: 0; }

.doc-footer { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding-top: 15px; border-top: 1px solid var(--line); }
.doc-footer > span { color: #a0a4b3; font-size: .61rem; }
.doc-outline { padding: 20px 17px; }
.doc-outline h3 { margin: 0 0 12px; font-size: .75rem; }
.doc-outline nav { display: grid; gap: 4px; padding-bottom: 17px; border-bottom: 1px solid var(--line); }
.doc-outline nav button { padding: 5px 0; border: 0; color: var(--muted); background: none; cursor: pointer; font-size: .64rem; text-align: left; }
.doc-outline nav button:first-child { color: var(--purple); font-weight: 700; }
.doc-info { display: grid; grid-template-columns: 1fr auto; gap: 9px; margin-top: 17px; font-size: .62rem; }
.doc-info span { color: var(--muted); }.doc-info strong { font-size: .65rem; }.doc-info i { display: inline-block; width: 6px; height: 6px; margin-right: 5px; border-radius: 50%; background: var(--green); }
.operations-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.operation-card { min-height: 310px; padding: 22px; }
.section-title { margin-bottom: 20px; }
.section-title > div { display: flex; align-items: center; gap: 11px; }
.section-title h2 { font-size: .86rem; }.section-title p { margin: 2px 0 0; color: var(--muted); font-size: .64rem; }
.section-icon { display: grid; width: 35px; height: 35px; place-items: center; border-radius: 10px; font-size: .8rem; font-weight: 800; }.section-icon.purple { color: var(--purple); background: var(--purple-soft); }.section-icon.green { color: var(--green); background: var(--green-soft); }.section-icon.blue { color: var(--blue); background: var(--blue-soft); }.section-icon.amber { color: var(--amber); background: var(--amber-soft); }
.environment-list, .resource-list { display: grid; gap: 9px; }
.environment-item, .resource-item { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px; padding: 12px 13px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface-soft); }
.environment-item { color:inherit; text-decoration:none; transition:.16s ease; }.environment-item:hover { border-color:#cfd0ff; background:var(--purple-soft); transform:translateY(-1px); }
.environment-item div, .resource-item div { display: grid; }.environment-item strong, .resource-item strong { font-size: .72rem; }.environment-item small, .resource-item small { color: var(--muted); font-size: .6rem; }.environment-item > span { display: inline-flex; align-items: center; gap: 5px; color: var(--green); font-size: .61rem; font-weight: 700; }.environment-item > span:before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--green); }
.resource-item > span { padding: 4px 7px; border-radius: 7px; color: #666c80; background: var(--surface); font-size: .58rem; font-weight: 700; }
.service-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.service-item { display: flex; align-items: center; gap: 9px; min-height: 61px; padding: 10px; border: 1px solid var(--line); border-radius: 11px; }
.service-logo { display: grid; width: 31px; height: 31px; flex: 0 0 31px; place-items: center; border-radius: 9px; color: var(--purple); background: var(--purple-soft); font-size: .62rem; font-weight: 900; }
.service-item div { display: grid; }.service-item strong { font-size: .68rem; }.service-item small { color: var(--muted); font-size: .58rem; }
.health-summary { display: flex; align-items: center; gap: 15px; padding: 17px; border-radius: 13px; background: var(--green-soft); }.health-summary > div:last-child { display: grid; }.health-summary > div:last-child strong { font-size: .72rem; }.health-summary p { margin: 0; color: #5f8f80; font-size: .6rem; }
.operation-meta { display: grid; grid-template-columns: 110px 1fr; gap: 10px; margin: 18px 0 0; font-size: .68rem; }.operation-meta dt { color: var(--muted); }.operation-meta dd { margin: 0; font-weight: 700; text-align: right; }
.changes-layout { display: grid; grid-template-columns: minmax(0, 1fr) 280px; align-items: start; gap: 14px; }
.project-change-list { padding: 6px 24px; }
.project-change { display: grid; grid-template-columns: 78px 1fr; gap: 18px; padding: 24px 0; border-bottom: 1px solid var(--line); }.project-change:last-child { border-bottom: 0; }
.change-version { display: grid; align-content: start; gap: 5px; }.change-version strong { color: var(--purple); font-size: .74rem; }.change-version span { color: var(--muted); font-size: .6rem; }.project-change h2 { margin: 0 0 5px; font-size: .9rem; }.project-change p { margin: 0 0 10px; color: var(--muted); font-size: .7rem; }.change-tags { display: flex; flex-wrap: wrap; gap: 5px; }.change-tags span { padding: 3px 6px; border-radius: 6px; color: #6a6f82; background: var(--surface-soft); font-size: .56rem; }
.change-summary { padding: 22px; }.change-summary h2 { font-size: .88rem; }.change-summary > div { display: grid; grid-template-columns: repeat(3,1fr); gap: 7px; margin: 16px 0; }.change-summary > div span { display: grid; gap: 3px; padding: 10px 4px; border-radius: 9px; color: var(--muted); background: var(--surface-soft); font-size: .58rem; text-align: center; }.change-summary > div strong { color: var(--text); font-size: .95rem; }.change-summary > p { margin: 0 0 15px; color: var(--muted); font-size: .64rem; }.change-summary .outline-button { width: 100%; }

.modal-backdrop { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 20px; background: rgba(8,12,24,.62); backdrop-filter: blur(9px); }.modal-backdrop[hidden] { display: none; }.modal { position: relative; width: min(560px,100%); max-height: 90vh; overflow-y: auto; padding: 28px; border: 1px solid rgba(255,255,255,.4); border-radius: 22px; background: var(--surface); box-shadow: 0 28px 90px rgba(10,12,28,.25); animation: modalIn .24s ease both; }@keyframes modalIn { from { opacity:0; transform:scale(.97) translateY(8px);} }.modal-close { position: absolute; top: 15px; right: 16px; width: 34px; height: 34px; border: 0; border-radius: 10px; color: var(--muted); background: var(--surface-soft); cursor: pointer; font-size: 1.2rem; }.modal-actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 22px; }.form-modal > h2 { margin: 4px 0; }.form-modal > p:not(.eyebrow) { margin: 0 0 20px; color: var(--muted); font-size: .74rem; }.form-modal form { display: grid; gap: 14px; }.form-modal textarea { min-height: 95px; padding: 11px 13px; resize: vertical; }
.guest-owner-note { margin:0; padding:10px 12px; border-radius:9px; color:#746839; background:var(--amber-soft); font-size:.65rem; }.post-detail-actions { display:flex; flex-wrap:wrap; gap:7px; }.danger-button { min-height:39px; padding:0 14px; border:1px solid #ffd4da; border-radius:11px; color:var(--red); background:var(--red-soft); cursor:pointer; font-size:.79rem; font-weight:650; }
.sidebar-backdrop { position:fixed; inset:0; z-index:19; border:0; background:rgba(5,8,18,.52); backdrop-filter:blur(2px); }
.toast { position: fixed; right: 28px; bottom: 28px; z-index: 80; display: flex; align-items: center; gap: 10px; min-width: 260px; padding: 13px 16px; border: 1px solid #dfe1eb; border-radius: 13px; background: var(--surface); box-shadow: var(--shadow); opacity: 0; pointer-events: none; transform: translateY(16px); transition: .25s ease; }.toast.show { opacity: 1; transform: none; }.toast > span { display: grid; width: 24px; height: 24px; place-items: center; border-radius: 50%; color: #fff; background: var(--green); font-size: .7rem; }.toast p { margin: 0; font-size: .73rem; }

body.dark { --bg:#0f1423; --surface:#171d2d; --surface-soft:#1d2436; --text:#eef1fa; --muted:#9ca4b8; --muted-2:#757e94; --line:#2b3348; --shadow:0 16px 45px rgba(0,0,0,.22); }.dark .topbar { background:rgba(15,20,35,.86); border-bottom-color:#252d40; }.dark .global-search,.dark .icon-button { background:#171d2d; }.dark .global-search kbd { border-color:#333c51; background:#20283a; }.dark .project-row { border-color:#242c3e; }.dark .project-row:hover,.dark button.table-row:hover { background:#1c2335; }.dark .tech-stack i { border-color:var(--surface); background:#252d40; color:#aeb5c7; }.dark .notice-item { border-color:#242c3e; }.dark .notice-item.featured { border-color:#3b3e6a; background:linear-gradient(145deg,#22253e,#1a2032); }.dark .security-banner { border-color:#514328; background:#242216; }.dark .security-banner p { color:#b4a78f; }.dark .vault-state { border-color:#5b4725; background:#292313; }.dark .changelog-card li,.dark .table-row strong { color:#dce0eb; }

@media (max-width: 1180px) { .metric-grid { grid-template-columns: 1fr 1fr; }.project-card-grid { grid-template-columns: 1fr 1fr; }.dashboard-grid { grid-template-columns: 1fr; }.right-column { grid-template-columns: 1fr 1fr; }.project-row { grid-template-columns: 44px minmax(140px,1fr) 85px 70px 50px 18px; }.docs-layout { grid-template-columns: 230px minmax(0,1fr); }.doc-outline { display: none; } }
@media (max-width: 860px) { .sidebar { width:min(82vw,280px); transform: translateX(-100%); transition: transform .25s ease; box-shadow: 18px 0 60px rgba(0,0,0,.2); }.sidebar.open { transform: none; }.workspace { margin-left: 0; }.topbar { padding: 12px 20px; }.mobile-menu { display: block; }.breadcrumb { min-width:0; flex:1; margin:0 10px; }.breadcrumb button:last-child { max-width:30vw; }.global-search { width: 180px; }.main-content { padding: 30px 22px 50px; }.vault-layout,.board-layout,.notice-layout,.changes-layout { grid-template-columns: 1fr; }.vault-aside,.board-side,.notice-side { grid-template-columns: 1fr 1fr; }.project-row { grid-template-columns: 44px 1fr 78px 18px; }.project-row .tech-stack,.project-row .updated { display:none; }.detail-facts { grid-template-columns: 1fr 1fr; }.docs-layout { grid-template-columns: 210px minmax(0,1fr); }.doc-viewer { padding: 24px; }.operations-grid { grid-template-columns: 1fr; }.sync-popover { left:16px; bottom:16px; width:min(340px,calc(100vw - 32px)); } }
@media (max-width: 640px) { .topbar { min-height: 66px; padding: 10px 14px; }.top-actions { gap: 7px; }.global-search,.top-actions > .icon-button:first-of-type { display:none; }.primary-button { padding:0 12px; }.topbar .primary-button { font-size:0; }.topbar .primary-button span { font-size:1rem; }.main-content { padding: 24px 14px 42px; }.dashboard-heading,.inline-heading { align-items:flex-start; flex-direction:column; }.metric-grid,.project-card-grid { grid-template-columns:1fr; }.metric-card { min-height:110px; }.right-column,.vault-aside,.board-side,.notice-side { grid-template-columns:1fr; }.project-row { grid-template-columns: 40px 1fr 18px; min-height:70px; }.project-row .project-status { display:none; }.filter-bar { align-items:stretch; flex-direction:column; }.segmented { overflow-x:auto; }.segmented button { white-space:nowrap; }.board-toolbar { align-items:stretch; flex-direction:column; }.board-toolbar > label { width:100%; }.table-row { grid-template-columns:66px minmax(170px,1fr); }.table-row > span:nth-child(n+3),.table-head > span:nth-child(n+3) { display:none; }.modal { padding:22px; }.toast { right:14px; bottom:14px; left:14px; min-width:0; }.quick-grid { grid-template-columns:repeat(4,1fr); }.quick-grid button { min-height:58px; }.notice-feed { padding-left:20px; }.timeline-dot { left:-19px; }.detail-hero { align-items:flex-start; flex-direction:column; padding:21px; }.detail-identity { align-items:flex-start; }.detail-symbol { width:52px; height:52px; flex-basis:52px; border-radius:16px; }.detail-identity h1 { font-size:1.25rem; }.detail-hero-actions { width:100%; }.detail-hero-actions button { flex:1; }.detail-facts { grid-template-columns:1fr; }.detail-tabs { gap:17px; overflow-x:auto; }.detail-tabs button { white-space:nowrap; }.docs-layout { grid-template-columns:1fr; }.docs-sidebar { min-height:0; }.docs-tree { grid-template-columns:1fr 1fr; }.docs-group-label { grid-column:1/-1; }.doc-viewer { min-height:560px; padding:21px; }.doc-viewer-head h2 { font-size:1.15rem; }.doc-footer > span { display:none; }.operation-card { min-height:0; }.service-grid { grid-template-columns:1fr; }.project-change { grid-template-columns:1fr; gap:8px; } }
@media (max-width: 640px) { .secret-row { grid-template-columns: 1fr auto; }.secret-source { grid-column: 1; }.secret-value { grid-column: 1; }.secret-row .reveal-secret { grid-column: 2; grid-row: 1 / span 3; }.quick-grid { grid-template-columns:repeat(3,1fr); } }
@media (max-width: 640px) { .breadcrumb b,.breadcrumb #breadcrumbHome { display:none; }.breadcrumb button:last-child { max-width:38vw; }.notification-popover { right:8px; left:8px; width:auto; }.modal-backdrop { align-items:end; padding:0; }.modal { width:100%; max-height:92vh; padding:22px 18px max(22px,env(safe-area-inset-bottom)); border-radius:22px 22px 0 0; }.post-detail-footer { align-items:flex-start; flex-direction:column; }.post-detail-actions { width:100%; }.post-detail-actions button { flex:1; }.quick-grid button { font-size:.6rem; }.table-row { min-width:0; }.board-panel { overflow:hidden; } }
@media (prefers-reduced-motion: reduce) { *,*:before,*:after { scroll-behavior:auto!important; animation:none!important; transition:none!important; } }

/* Mingginew Hub branding */
.brand { gap: 10px; padding: 0 4px; font-size: .93rem; letter-spacing: -.02em; white-space: nowrap; }
.brand-mark { flex-shrink: 0; }
.brand-mark:before { content: "M"; inset: 0; display: grid; place-items: center; border: 0; border-radius: 0; color: #fff; font-size: 17px; font-weight: 800; }
.brand-mark i { display: none; }

/* Readable layouts across desktop, tablet and phone. */
/* 작은 보조 글자도 배경 대비 4.5:1 이상(WCAG AA) */
:root { --muted: #626b80; --muted-2: #687286; }
body.dark { --muted-2: #868ea4; }
.main-content { max-width: 1600px; padding: 28px clamp(20px, 3vw, 48px) 64px; }
.data-status { display:flex; justify-content:flex-end; align-items:center; gap:12px; min-height:32px; margin-bottom:20px; color:var(--muted); font-size:.78rem; }
.data-status .error { color:var(--red); }
.page-heading { margin-bottom:24px; }
.eyebrow #dashboardDate { width:auto; height:auto; border-radius:0; background:none; box-shadow:none; }
.metric-card { padding:22px 20px; min-height:132px; }
.metric-copy { min-width:0; gap:4px; }
.metric-copy span { font-size:.82rem; }
.metric-copy strong { font-size:2rem; line-height:1.15; font-variant-numeric:tabular-nums; }
.metric-copy small { white-space:normal; font-size:.73rem; color:var(--muted); }
.dashboard-grid { grid-template-columns:minmax(0, 1.6fr) minmax(300px, 1fr); align-items:start; gap:24px; margin-top:24px; }
.right-column { align-content:start; }
.panel-head h2, .panel h2 { font-size:1.05rem; }
.panel-head p { font-size:.8rem; }
.project-row { grid-template-columns:42px minmax(0,1fr) auto 16px; gap:14px; min-height:96px; padding:16px 12px; }
.project-row .tech-stack, .project-row .updated { display:none; }
.project-main { min-width:0; gap:5px; }
.project-main strong { font-size:.94rem; overflow-wrap:anywhere; }
.project-main small { font-size:.8rem; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; line-height:1.6; }
.project-status { font-size:.74rem; padding:5px 9px; }
.project-card { display:flex; flex-direction:column; min-height:270px; text-align:left; }
.project-card h2 { overflow-wrap:anywhere; font-size:1.08rem; }
.project-card p { font-size:.85rem; line-height:1.7; }
.project-card .project-url { overflow-wrap:anywhere; font-size:.78rem; }
.project-meta { margin-top:auto; padding-top:16px; gap:12px; flex-wrap:wrap; }
.project-meta small { font-size:.75rem; }
.results-count { margin:0 0 14px; font-size:.82rem; color:var(--muted); }
.notice-item strong { font-size:.85rem; line-height:1.6; }
.notice-item.featured p { font-size:.8rem; line-height:1.6; }
.notice-item small, .quick-grid button { font-size:.75rem; }
.quick-grid button { min-height:76px; }
.segmented { max-width:100%; overflow-x:auto; }
.segmented button { min-height:40px; flex-shrink:0; }
.project-card:focus-visible, a:focus-visible, select:focus-visible { outline:3px solid var(--purple); outline-offset:3px; }
.doc-viewer, .docs-layout, .doc-body, .detail-identity, .detail-facts > div { min-width:0; }
.doc-body { font-size:.95rem; overflow-wrap:anywhere; }
.doc-body img { max-width:100%; height:auto; }
.doc-body pre { max-width:100%; }
.doc-link { font-size:.82rem; min-height:44px; }
.docs-sidebar { max-height:75vh; overflow:auto; }
.environment-item small, .detail-facts strong, .operation-meta dd { overflow-wrap:anywhere; }
.table-row strong { font-size:.9rem; overflow-wrap:anywhere; }
.table-row small { font-size:.78rem; }
button, a, input, select { touch-action:manipulation; }
@media (min-width:861px) and (max-width:1250px) {
  .dashboard-grid { grid-template-columns:1fr; }
  .right-column { grid-template-columns:1fr 1fr; }
  .metric-grid, .guest-mode .metric-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:860px) {
  .dashboard-grid { grid-template-columns:1fr; }
  .metric-grid, .guest-mode .metric-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .sidebar { height:100dvh; overflow-y:auto; }
  .topbar { position:sticky; top:0; z-index:18; }
  .project-card-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:640px) {
  .main-content { padding:18px 16px 40px; }
  .topbar { flex-wrap:wrap; gap:8px; }
  .top-actions { display:contents; }
  .global-search { display:flex; order:5; width:100%; margin:0; height:44px; }
  .global-search input { font-size:16px; }
  .global-search kbd { display:none; }
  .breadcrumb { margin:0; }
  .icon-button, .mobile-menu { width:44px; height:44px; }
  .data-status { justify-content:flex-start; margin-bottom:16px; font-size:.74rem; }
  .page-heading h1 { font-size:1.65rem; }
  .page-heading p { font-size:.85rem; }
  .metric-grid, .guest-mode .metric-grid { gap:10px; }
  .metric-card { min-height:142px; padding:15px; align-items:flex-start; flex-direction:column; gap:10px; border-radius:16px; }
  .metric-icon { width:30px; height:30px; flex-basis:30px; margin:0; border-radius:9px; }
  .metric-copy strong { font-size:1.8rem; }
  .metric-copy span { font-size:.78rem; }
  .metric-copy small { font-size:.7rem; }
  .mini-ring { display:none; }
  .guest-mode .metric-card.blue { grid-column:1/-1; flex-direction:row; align-items:center; min-height:96px; }
  .guest-mode .metric-card.blue .metric-copy { grid-template-columns:auto 1fr; align-items:center; column-gap:16px; width:100%; }
  .guest-mode .metric-card.blue .metric-copy strong { grid-column:2; grid-row:1/3; text-align:right; }
  .dashboard-grid { gap:16px; margin-top:16px; }
  .right-column { grid-template-columns:1fr; gap:16px; }
  .panel-head { padding:18px 16px 14px; }
  .project-row { grid-template-columns:36px minmax(0,1fr) 16px; gap:10px; padding:14px 6px; }
  .project-row .project-status { display:inline-flex; grid-column:2; grid-row:2; justify-self:start; }
  .project-row .project-symbol { grid-row:1/3; align-self:start; width:34px; height:34px; }
  .project-row .row-arrow { grid-column:3; grid-row:1/3; }
  .project-main small { -webkit-line-clamp:2; }
  .project-card-grid { grid-template-columns:1fr; }
  .project-card { min-height:0; padding:20px; }
  .project-card-top { margin-bottom:12px; }
  .table-row { grid-template-columns:58px minmax(0,1fr); gap:10px; padding:14px 12px; }
  .table-row > span:nth-child(3) { display:block; grid-column:2; font-size:.74rem; }
  .table-head { display:none; }
  .docs-sidebar { max-height:260px; }
  .docs-tree { grid-template-columns:1fr; }
  .doc-viewer { padding:20px 16px; min-height:360px; }
  .detail-facts { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .detail-tabs button, .outline-button, .text-button { min-height:44px; }
  input, textarea, select { font-size:16px!important; }
  .notification-popover { top:120px; }
}

@media (max-width:860px) { .sidebar { box-shadow:none; } .sidebar.open { box-shadow:18px 0 60px rgba(0,0,0,.2); } }

.quick-grid { grid-template-columns:repeat(auto-fit,minmax(100px,1fr)); }
.storage-card > small { display:block; margin-top:10px; }
/* Long production release titles must not set the minimum grid width. */
.dashboard-grid > *, .right-column > *, .notice-layout > *, .board-layout > *, .changes-layout > * { min-width:0; }
.notice-item, .changelog-card, .notice-filter button { overflow-wrap:anywhere; }
.notice-item > span:nth-child(2) { min-width:0; }
.release-meta { flex-wrap:wrap; }
.release-version { max-width:100%; overflow-wrap:anywhere; }
.project-change { grid-template-columns: minmax(0,110px) minmax(0,1fr); }
.project-change > *, .change-version, .change-summary, .vault-layout > *, .credential-identity, .credential-identity > span { min-width:0; }
.project-change h2, .project-change p, .change-version strong, .change-tags span { overflow-wrap:anywhere; word-break:break-word; }
.change-tags span { max-width:100%; }
.secret-row { grid-template-columns:minmax(0,1fr) auto; gap:8px 16px; padding:16px 18px; }
.secret-row > strong { grid-column:1; font-size:.82rem; }
.secret-source { grid-column:1; overflow-wrap:anywhere; font-size:.75rem; }
.secret-value { grid-column:1/-1; padding:12px; border-radius:8px; background:var(--surface-soft); white-space:pre-wrap; overflow-wrap:anywhere; word-break:break-word; overflow:auto; max-height:240px; text-overflow:clip; user-select:text; font-size:.82rem; font-weight:500; }
.secret-actions { grid-column:2; grid-row:1/3; display:flex; gap:6px; }
.secret-actions button { min-height:44px; padding:0 12px; border:1px solid var(--line); border-radius:8px; background:var(--surface); cursor:pointer; font-size:.78rem; }
.credential-identity strong { overflow-wrap:anywhere; }
@media(max-width:640px) {
 .project-change { grid-template-columns:minmax(0,1fr); }
 .project-change-list { padding:0 16px; }
 .project-change p { font-size:.84rem; line-height:1.75; }
 .credential-list { padding:0 12px; }
 .secret-row { padding:14px 12px; }
 .secret-actions { grid-column:1/-1; grid-row:auto; }
 .secret-row .secret-value { grid-column:1/-1; }
 .secret-actions button { flex:1; }
 .vault-content .panel-head { flex-wrap:wrap; }
}

.vault-project-toggle { width:100%; border:0; text-align:left; cursor:pointer; color:var(--text); font:inherit; }
.vault-project-toggle:hover { background:var(--purple-soft); }
.vault-project-action { flex-shrink:0; font-size:.8rem; color:var(--purple); font-weight:700; }
.vault-project-toggle .project-symbol { flex-shrink:0; }

/* 공지사항: 접힌 한 줄 목록·날짜 묶음·검색과 종류 필터·더 보기 */
.notice-main { display:grid; align-content:start; min-width:0; }
.notice-toolbar { margin-bottom:12px; border-bottom:0; }
.notice-feed { gap:10px; }
.notice-date { margin:14px 0 0; color:var(--muted); font-size:.75rem; font-weight:700; }
.notice-date:first-child { margin-top:0; }
.changelog-card { padding:0; }
.changelog-card summary { display:flex; align-items:center; gap:12px; padding:14px 18px; border-radius:var(--radius); cursor:pointer; list-style:none; }
.changelog-card summary::-webkit-details-marker { display:none; }
.changelog-card summary:focus-visible { outline:3px solid var(--purple); outline-offset:2px; }
.changelog-card .timeline-dot { top:22px; }
.changelog-card .release-version { flex-shrink:0; min-width:64px; font-size:.68rem; text-align:center; white-space:nowrap; }
.notice-summary-main { display:grid; flex:1; gap:4px; min-width:0; }
.notice-summary-main strong { font-size:.85rem; line-height:1.5; }
.notice-summary-main small { display:flex; align-items:center; gap:6px; color:var(--muted); font-size:.72rem; }
.notice-summary-main .project-symbol { flex-shrink:0; width:20px; height:20px; border-radius:6px; font-size:.5rem; }
.notice-chevron { flex-shrink:0; color:var(--muted); font-size:1.1rem; transition:transform .2s ease; }
.changelog-card[open] .notice-chevron { transform:rotate(90deg); }
.changelog-body { padding:0 18px 16px; }
.changelog-body p { margin:0 0 12px; color:var(--muted); font-size:.78rem; line-height:1.7; white-space:pre-wrap; }
.changelog-body .change-tags:empty { display:none; }
.notice-more { justify-self:center; width:auto; margin-top:16px; }
@media (min-width: 861px) { .notice-side { position:sticky; top:96px; } }
@media (max-width: 860px) {
  .notice-side { order:-1; grid-template-columns:1fr; }
  .notice-filter { display:flex; gap:6px; overflow-x:auto; padding:12px; }
  .notice-filter h3 { display:none; }
  .notice-filter button { flex-shrink:0; border:1px solid var(--line); white-space:nowrap; }
}
@media (max-width: 640px) {
  .notice-side .release-summary { display:none; }
  .notice-toolbar { padding:12px; gap:10px; }
  .changelog-card summary { padding:13px 14px; gap:10px; }
  .changelog-body { padding:0 14px 14px; }
}

/* 다크 모드에서 선택된 분류 버튼이 흰 바탕·흰 글자로 보이지 않던 문제 (프로젝트·게시판·공지 공통) */
.dark .segmented button.active { color:var(--text); background:#2c3550; }