/* ─────────────────────────────────────────────────────────────────
J Tech International · Web Controls Library
tokens & shell
───────────────────────────────────────────────────────────────── */
:root {
/* brand */
--navy: #0B2C4A;
--navy-2: #143b5e;
--teal: #0E7C7B;
--teal-bright: #16a4a2;
--teal-soft: #5fd0cf;
--teal-wash: rgba(14, 124, 123, 0.08);
--ink: #101820;
--paper: #F4F4F2;
--paper-2: #FAFAF8;
--surface: #ffffff;
--muted: #5a6b7a;
--muted-2: #8794a3;
--line: #e6e6e2;
--line-strong: #d2d3cc;
/* status (brand-aligned) */
--ok: #0E7C7B;
--info: #0B2C4A;
--warn: #b07a1a;
--warn-wash:#fbf4e3;
--danger: #c64545;
--danger-wash:#fbeae9;
/* accent (tweakable) */
--accent: var(--teal);
--accent-bright: var(--teal-bright);
--accent-soft: var(--teal-soft);
--accent-wash: var(--teal-wash);
/* radius (tweakable: sharp/normal/soft) */
--r-1: 2px;
--r-2: 4px;
--r-3: 6px;
--r-pill: 999px;
/* density (tweakable) */
--pad-y: 10px;
--pad-x: 16px;
--gap-1: 8px;
--gap-2: 14px;
--gap-3: 22px;
--gap-4: 34px;
--row-h: 38px;
--row-h-sm:32px;
--row-h-lg:46px;
--fs-body: 15px;
--fs-sm: 14px;
--fs-xs: 13px;
--fs-mono: 13px;
/* typography — brand mandate: Noto Sans KR 으로 통일. mono 안 씀. */
--font-sans: 'Noto Sans KR',
-apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', sans-serif;
--font-mono: 'Noto Sans KR', sans-serif;
/* motion */
--t-1: 90ms;
--t-2: 160ms;
--t-3: 240ms;
--ease: cubic-bezier(.2,.7,.2,1);
/* surfaces & shadow */
--bg: var(--paper);
--bg-elev: var(--surface);
--fg: var(--ink);
--fg-muted: var(--muted);
--border: var(--line);
--border-strong: var(--line-strong);
--shadow-1: 0 1px 0 rgba(16,24,32,0.04), 0 1px 2px rgba(16,24,32,0.06);
--shadow-2: 0 2px 6px rgba(16,24,32,0.06), 0 8px 24px rgba(16,24,32,0.06);
--shadow-pop:0 24px 64px -16px rgba(11,44,74,0.28),
0 2px 6px rgba(16,24,32,0.08);
}
/* dark theme */
[data-theme="dark"] {
--bg: #07182a;
--bg-elev: #0B2C4A;
--fg: #eef3f9;
--fg-muted: #8aa0b5;
--border: rgba(255,255,255,0.08);
--border-strong: rgba(255,255,255,0.18);
--paper-2: #0d2540;
--surface: #0B2C4A;
--muted: #8aa0b5;
--muted-2: #5e7591;
--line: rgba(255,255,255,0.08);
--line-strong: rgba(255,255,255,0.18);
--shadow-1: 0 1px 0 rgba(0,0,0,0.4), 0 1px 2px rgba(0,0,0,0.5);
--shadow-2: 0 2px 6px rgba(0,0,0,0.4), 0 12px 36px rgba(0,0,0,0.45);
--shadow-pop:0 24px 64px -16px rgba(0,0,0,0.7),
0 2px 6px rgba(0,0,0,0.5);
--warn-wash:#3a2c11;
--danger-wash:#3a1717;
--accent-wash:rgba(95,208,207,0.10);
}
/* accent variants */
[data-accent="navy"] { --accent: #1c4f80; --accent-bright:#2a6aaa; --accent-soft:#7eb2e0; --accent-wash:rgba(28,79,128,0.10); }
[data-accent="sapphire"]{ --accent: #2546a8; --accent-bright:#3a5fd1; --accent-soft:#9ab1f0; --accent-wash:rgba(37,70,168,0.10); }
[data-accent="teal"] { --accent: var(--teal); --accent-bright:var(--teal-bright); --accent-soft:var(--teal-soft); --accent-wash:var(--teal-wash); }
/* radius variants */
[data-radius="sharp"] { --r-1:1px; --r-2:2px; --r-3:3px; }
[data-radius="soft"] { --r-1:4px; --r-2:8px; --r-3:12px; }
/* density variants */
[data-density="compact"] {
--pad-y:7px; --pad-x:12px; --gap-1:5px; --gap-2:10px; --gap-3:16px; --gap-4:26px;
--row-h:30px; --row-h-sm:26px; --row-h-lg:38px;
--fs-body:13px; --fs-sm:12px; --fs-xs:11px; --fs-mono:11.5px;
}
[data-density="spacious"] {
--pad-y:14px; --pad-x:20px; --gap-1:10px; --gap-2:18px; --gap-3:30px; --gap-4:46px;
--row-h:46px; --row-h-sm:38px; --row-h-lg:54px;
--fs-body:16px; --fs-sm:15px; --fs-xs:14px; --fs-mono:14px;
}
/* ───── base ───── */
* { box-sizing: border-box; }
html, body {
margin: 0; padding: 0;
background: var(--bg);
color: var(--fg);
font-family: var(--font-sans);
font-size: var(--fs-body);
line-height: 1.55;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
body { min-height: 100vh; }
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-bright); }
::selection { background: var(--accent); color: #fff; }
/* utility text */
.mono { font-family: var(--font-mono); font-size: var(--fs-mono); }
.muted { color: var(--fg-muted); }
.eyebrow {
font-family: var(--font-sans);
font-size: 12px; letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--accent);
font-weight: 500;
}
.en { color: var(--fg-muted); font-weight: 400; font-size: 0.85em; letter-spacing: 0.02em; }
/* ─────────────────────────────────────────────────────────────────
APP SHELL
───────────────────────────────────────────────────────────────── */
.app {
display: grid;
grid-template-columns: 260px 1fr;
grid-template-rows: 60px 1fr;
grid-template-areas:
"topbar topbar"
"side main";
min-height: 100vh;
}
.app[data-layout="top"] {
grid-template-columns: 1fr;
grid-template-areas:
"topbar"
"main";
}
/* ── top bar ── */
.topbar {
grid-area: topbar;
position: sticky; top: 0; z-index: 40;
background: var(--bg);
border-bottom: 1px solid var(--border);
display: grid;
grid-template-columns: 260px 1fr auto;
align-items: center;
padding: 0 20px 0 0;
height: 60px;
backdrop-filter: saturate(140%) blur(8px);
}
.app[data-layout="top"] .topbar { grid-template-columns: auto 1fr auto; }
.topbar .brand {
display: flex; align-items: center; gap: 10px;
padding: 0 18px;
border-right: 1px solid var(--border);
height: 100%;
}
.app[data-layout="top"] .topbar .brand { border-right: none; padding-right: 0; }
.topbar .brand img { height: 24px; display: block; }
.topbar .brand .vbadge {
font-family: var(--font-mono); font-size: 12px;
color: var(--fg-muted); padding: 2px 8px;
border: 1px solid var(--border); border-radius: var(--r-1);
letter-spacing: 0.04em;
}
.topbar .crumbs {
display: flex; align-items: center; gap: 10px;
padding: 0 20px; font-family: var(--font-mono); font-size: 12px; color: var(--fg-muted);
}
.topbar .crumbs .sep { opacity: 0.5; }
.topbar .crumbs .cur { color: var(--fg); }
.topbar .actions { display: flex; align-items: center; gap: 6px; }
/* topbar tab nav (alt layout) */
.toptabs {
display: none; overflow-x: auto; gap: 2px;
padding: 0 12px; height: 100%; align-items: stretch;
}
.app[data-layout="top"] .toptabs { display: flex; }
.app[data-layout="top"] .sidewrap { display: none; }
.toptabs a {
display: inline-flex; align-items: center; padding: 0 14px;
font-size: var(--fs-sm); color: var(--fg-muted); border-bottom: 2px solid transparent;
white-space: nowrap;
}
.toptabs a.is-active { color: var(--fg); border-bottom-color: var(--accent); }
/* ── sidebar ── */
.sidewrap {
grid-area: side;
border-right: 1px solid var(--border);
position: sticky; top: 60px; align-self: start;
height: calc(100vh - 60px);
overflow: hidden auto;
background: var(--bg);
}
.side-inner { padding: 20px 14px 80px; }
.side-group {
margin-bottom: 20px;
}
.side-label {
font-family: var(--font-mono);
font-size: 11px; letter-spacing: 0.18em;
color: var(--fg-muted); text-transform: uppercase;
padding: 4px 10px 8px;
display: flex; justify-content: space-between;
}
.side-label .count { opacity: 0.5; }
.side-nav { display: grid; gap: 1px; }
.side-nav a {
display: grid; grid-template-columns: 26px 1fr auto;
align-items: center;
padding: 7px 12px;
border-radius: var(--r-2);
color: var(--fg);
font-size: var(--fs-sm);
line-height: 1.35;
}
.side-nav a:hover { background: var(--accent-wash); color: var(--fg); }
.side-nav a.is-active { background: var(--accent-wash); color: var(--accent); }
.side-nav a .n {
font-family: var(--font-mono); font-size: 11px; color: var(--fg-muted);
letter-spacing: 0.06em;
}
.side-nav a.is-active .n { color: var(--accent); }
.side-nav a .badge {
font-family: var(--font-mono); font-size: 10.5px;
color: var(--fg-muted); letter-spacing: 0.04em;
}
/* ── main ── */
.main { grid-area: main; min-width: 0; }
.main-inner {
max-width: 1240px;
padding: 28px 32px 120px;
margin: 0 auto;
}
/* ─────────────────────────────────────────────────────────────────
SECTION
───────────────────────────────────────────────────────────────── */
section.sec {
padding: 40px 0;
border-bottom: 1px solid var(--border);
scroll-margin-top: 72px;
}
section.sec:first-of-type { padding-top: 16px; }
.sec-head {
display: grid;
grid-template-columns: 60px 1fr auto;
align-items: baseline;
gap: 20px;
margin-bottom: 22px;
padding-bottom: 14px;
border-bottom: 1px dashed var(--border);
}
.sec-head .sec-num {
font-family: var(--font-mono); font-size: 13px; color: var(--fg-muted);
letter-spacing: 0.14em;
}
.sec-head h2 {
margin: 0; font-size: 26px; font-weight: 600; letter-spacing: -0.015em;
color: var(--fg);
display: flex; align-items: baseline; gap: 12px;
}
.sec-head h2 .en {
font-size: 15px; font-weight: 400; color: var(--fg-muted);
letter-spacing: 0.01em;
}
.sec-head .sec-meta {
font-family: var(--font-mono); font-size: 12px; color: var(--fg-muted);
text-align: right;
}
/* sub-section title row */
.sub {
display: grid;
grid-template-columns: 60px 1fr auto;
align-items: baseline;
gap: 20px;
margin: 30px 0 12px;
font-size: var(--fs-sm);
}
.sub .sub-num { font-family: var(--font-mono); color: var(--fg-muted); font-size: 12px; letter-spacing: 0.12em; }
.sub .sub-title { font-weight: 600; color: var(--fg); font-size: 16px; }
.sub .sub-title .en { font-weight: 400; margin-left: 8px; font-size: 14px; }
.sub .sub-meta { font-family: var(--font-mono); font-size: 12px; color: var(--fg-muted); text-align: right; }
/* block = component example row */
.block {
display: grid;
grid-template-columns: 260px 1fr 300px;
gap: 0;
border: 1px solid var(--border);
border-radius: var(--r-3);
background: var(--bg-elev);
margin-bottom: 12px;
overflow: hidden;
}
.block-side {
padding: 18px 18px;
background: var(--paper-2);
border-right: 1px solid var(--border);
}
.block-side .b-label {
font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.16em;
text-transform: uppercase; color: var(--fg-muted);
margin-bottom: 8px;
}
.block-side .b-name {
font-size: 16px; font-weight: 600; color: var(--fg);
margin-bottom: 4px;
}
.block-side .b-name .en { display: block; font-size: 13px; font-weight: 400; margin-top: 3px; }
.block-side .b-note {
font-family: var(--font-mono); font-size: 13px; color: var(--fg-muted);
line-height: 1.6;
margin-top: 12px;
padding-top: 12px;
border-top: 1px dashed var(--border);
}
.block-side .b-note::before { content: '// '; color: var(--accent); }
.block-stage {
padding: 24px 26px;
display: flex; flex-wrap: wrap; gap: var(--gap-2);
align-items: center;
min-height: 90px;
background:
linear-gradient(var(--bg-elev), var(--bg-elev)) padding-box,
repeating-linear-gradient(90deg, var(--border) 0 1px, transparent 1px 8px) border-box;
border-left: 0;
position: relative;
}
.block-stage[data-stack="col"] { flex-direction: column; align-items: flex-start; }
.block-stage[data-stack="grid"] { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.block-code {
padding: 14px 16px;
background: var(--paper-2);
border-left: 1px solid var(--border);
font-family: var(--font-mono);
font-size: 12.5px;
color: var(--fg-muted);
line-height: 1.7;
overflow: hidden;
position: relative;
}
.block-code pre { margin: 0; white-space: pre-wrap; word-break: break-word; font-family: inherit; font-size: inherit; }
.block-code .tok-k { color: var(--accent); }
.block-code .tok-a { color: #9d6b2a; }
.block-code .tok-s { color: var(--ink); opacity: 0.85; }
[data-theme="dark"] .block-code .tok-s { color: #cfd6e0; }
.block-code .copy {
position: absolute; top: 10px; right: 10px;
font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.14em;
color: var(--fg-muted); cursor: pointer;
border: 1px solid var(--border); border-radius: var(--r-1);
padding: 3px 8px; background: var(--bg-elev);
text-transform: uppercase;
}
.block-code .copy:hover { color: var(--accent); border-color: var(--accent); }
.block.narrow { grid-template-columns: 260px 1fr; }
.block.narrow .block-code { display: none; }
.block.full { grid-template-columns: 260px 1fr; }
.block.full .block-code { display: none; }
/* sub-stage frame inside block-stage */
.frame {
border: 1px dashed var(--border);
border-radius: var(--r-2);
padding: 14px;
background: var(--bg-elev);
}
/* ─────────────────────────────────────────────────────────────────
BUTTONS
───────────────────────────────────────────────────────────────── */
.btn {
display: inline-flex; align-items: center; justify-content: center;
gap: 7px;
font-family: var(--font-sans);
font-size: var(--fs-sm); font-weight: 500;
height: var(--row-h);
padding: 0 var(--pad-x);
border-radius: var(--r-2);
border: 1px solid transparent;
background: transparent; color: var(--fg);
cursor: pointer;
transition: background var(--t-1) var(--ease), border-color var(--t-1) var(--ease), color var(--t-1) var(--ease), box-shadow var(--t-1) var(--ease);
white-space: nowrap;
user-select: none;
letter-spacing: -0.005em;
}
.btn:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
.btn svg { width: 16px; height: 16px; }
/* sizes */
.btn-xs { height: var(--row-h-sm); padding: 0 12px; font-size: 13px; }
.btn-sm { height: var(--row-h-sm); padding: 0 14px; }
.btn-md { /* default */ }
.btn-lg { height: var(--row-h-lg); padding: 0 22px; font-size: 16px; }
/* variants */
.btn-primary {
background: var(--navy); color: #fff; border-color: var(--navy);
}
.btn-primary:hover { background: var(--navy-2); border-color: var(--navy-2); }
.btn-primary.accent { background: var(--accent); border-color: var(--accent); }
.btn-primary.accent:hover { background: var(--accent-bright); border-color: var(--accent-bright); }
.btn-secondary {
background: var(--bg-elev); color: var(--fg); border-color: var(--border-strong);
}
.btn-secondary:hover { background: var(--paper-2); border-color: var(--fg); }
.btn-ghost { color: var(--fg); }
.btn-ghost:hover { background: var(--accent-wash); }
.btn-danger { background: var(--danger); color: #fff; border-color: var(--danger); }
.btn-danger:hover { background: #b03939; border-color: #b03939; }
.btn-link {
height: auto; padding: 0; border: none; color: var(--accent);
background: transparent;
}
.btn-link:hover { color: var(--accent-bright); text-decoration: underline; text-underline-offset: 3px; }
.btn[disabled], .btn.is-disabled { opacity: 0.45; cursor: not-allowed; pointer-events: none; }
.btn.is-loading { position: relative; color: transparent !important; }
.btn.is-loading::after {
content: ''; position: absolute; width: 12px; height: 12px;
border-radius: 50%;
border: 1.5px solid currentColor; border-top-color: transparent;
color: var(--fg);
animation: spin 0.8s linear infinite;
}
.btn-primary.is-loading::after { color: #fff; }
/* icon-only button */
.iconbtn {
width: var(--row-h); height: var(--row-h);
padding: 0;
display: inline-flex; align-items: center; justify-content: center;
background: transparent; border: 1px solid transparent;
border-radius: var(--r-2);
color: var(--fg-muted); cursor: pointer;
transition: background var(--t-1) var(--ease), color var(--t-1) var(--ease), border-color var(--t-1) var(--ease);
}
.iconbtn:hover { background: var(--accent-wash); color: var(--fg); }
.iconbtn.bordered { border-color: var(--border-strong); }
.iconbtn svg { width: 18px; height: 18px; }
/* button group */
.btngroup {
display: inline-flex; border: 1px solid var(--border-strong); border-radius: var(--r-2);
overflow: hidden;
}
.btngroup .btn { border-radius: 0; border: none; border-right: 1px solid var(--border); }
.btngroup .btn:last-child { border-right: none; }
.btngroup .btn.is-active { background: var(--accent-wash); color: var(--accent); }
/* split button (primary + dropdown) */
.splitbtn { display: inline-flex; }
.splitbtn .btn { border-radius: var(--r-2) 0 0 var(--r-2); }
.splitbtn .iconbtn {
border: 1px solid var(--navy); border-left: 1px solid rgba(255,255,255,0.18);
border-radius: 0 var(--r-2) var(--r-2) 0;
background: var(--navy); color: #fff;
width: var(--row-h);
}
.splitbtn .iconbtn:hover { background: var(--navy-2); }
/* ─────────────────────────────────────────────────────────────────
INPUTS
───────────────────────────────────────────────────────────────── */
.field { display: grid; gap: 6px; min-width: 240px; }
.field-label {
font-size: var(--fs-sm); color: var(--fg);
display: flex; align-items: baseline; gap: 6px;
font-weight: 500;
}
.field-label .req { color: var(--danger); }
.field-label .opt { color: var(--fg-muted); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 400; }
.field-help { font-size: 13px; color: var(--fg-muted); }
.field-help.err { color: var(--danger); }
.field-help.ok { color: var(--ok); }
.input {
height: var(--row-h);
padding: 0 14px;
border: 1px solid var(--border-strong);
border-radius: var(--r-2);
background: var(--bg-elev);
color: var(--fg);
font-family: var(--font-sans);
font-size: var(--fs-sm);
width: 100%;
transition: border-color var(--t-1) var(--ease), box-shadow var(--t-1) var(--ease), background var(--t-1) var(--ease);
}
.input::placeholder { color: var(--muted-2); }
.input:hover { border-color: var(--fg-muted); }
.input:focus {
outline: none; border-color: var(--accent);
box-shadow: 0 0 0 3px var(--accent-wash);
}
.input.is-error {
border-color: var(--danger);
box-shadow: 0 0 0 3px var(--danger-wash);
}
.input.is-success {
border-color: var(--ok);
}
.input[disabled] { background: var(--paper-2); color: var(--fg-muted); cursor: not-allowed; }
textarea.input {
height: auto; min-height: 100px; padding: 12px 14px; line-height: 1.6; resize: vertical;
}
/* input with affix */
.input-wrap {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
border: 1px solid var(--border-strong);
border-radius: var(--r-2);
background: var(--bg-elev);
transition: border-color var(--t-1) var(--ease), box-shadow var(--t-1) var(--ease);
height: var(--row-h);
overflow: hidden;
}
.input-wrap:hover { border-color: var(--fg-muted); }
.input-wrap:focus-within {
border-color: var(--accent);
box-shadow: 0 0 0 3px var(--accent-wash);
}
.input-wrap .input {
border: none !important; height: 100%; padding: 0 4px;
background: transparent; box-shadow: none !important;
}
.input-wrap .prefix, .input-wrap .suffix {
display: inline-flex; align-items: center; gap: 4px;
padding: 0 12px;
font-family: var(--font-mono); font-size: 13px; color: var(--fg-muted);
height: 100%;
}
.input-wrap .prefix { border-right: 1px solid var(--border); background: var(--paper-2); }
.input-wrap .suffix { border-left: 1px solid var(--border); background: var(--paper-2); }
.input-wrap .suffix.bare, .input-wrap .prefix.bare { background: transparent; border: none; }
.input-wrap .suffix .kbd { margin-left: 2px; }
/* native select */
.select {
appearance: none; -webkit-appearance: none;
background:
var(--bg-elev)
url("data:image/svg+xml;utf8,")
no-repeat right 10px center;
padding-right: 28px;
cursor: pointer;
}
[data-theme="dark"] .select {
background-image: url("data:image/svg+xml;utf8,");
}
/* check / radio / switch */
.check, .radio {
display: inline-flex; align-items: center; gap: 10px;
font-size: var(--fs-sm); color: var(--fg);
cursor: pointer; user-select: none;
}
.check input, .radio input { position: absolute; opacity: 0; pointer-events: none; }
.check .box, .radio .box {
width: 18px; height: 18px;
border: 1.5px solid var(--border-strong);
background: var(--bg-elev);
display: inline-flex; align-items: center; justify-content: center;
transition: all var(--t-1) var(--ease);
flex-shrink: 0;
}
.check .box { border-radius: 3px; }
.radio .box { border-radius: 50%; }
.check:hover .box, .radio:hover .box { border-color: var(--accent); }
.check input:checked + .box {
background: var(--accent); border-color: var(--accent);
}
.check input:checked + .box::after {
content: ''; width: 10px; height: 6px;
border: 1.5px solid #fff; border-top: none; border-right: none;
transform: rotate(-45deg) translate(1px, -1px);
}
.check input:indeterminate + .box {
background: var(--accent); border-color: var(--accent);
}
.check input:indeterminate + .box::after {
content: ''; width: 10px; height: 1.5px; background: #fff;
}
.radio input:checked + .box {
border-color: var(--accent); border-width: 5px;
}
.check input:disabled + .box, .radio input:disabled + .box { opacity: 0.45; }
.switch { position: relative; display: inline-block; width: 38px; height: 22px; flex-shrink: 0; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch .track {
position: absolute; inset: 0; cursor: pointer;
background: var(--border-strong);
border-radius: var(--r-pill);
transition: background var(--t-2) var(--ease);
}
.switch .track::after {
content: ''; position: absolute;
left: 2px; top: 2px;
width: 18px; height: 18px; background: #fff; border-radius: 50%;
transition: transform var(--t-2) var(--ease);
box-shadow: 0 1px 2px rgba(0,0,0,0.15);
}
.switch input:checked + .track { background: var(--accent); }
.switch input:checked + .track::after { transform: translateX(16px); }
.switch input:disabled + .track { opacity: 0.45; cursor: not-allowed; }
.switch-row { display: inline-flex; align-items: center; gap: 10px; }
/* slider */
.slider {
-webkit-appearance: none; appearance: none;
width: 240px; height: 22px; background: transparent;
}
.slider::-webkit-slider-runnable-track {
height: 5px; background: var(--border-strong); border-radius: var(--r-pill);
}
.slider::-webkit-slider-thumb {
-webkit-appearance: none; appearance: none;
width: 18px; height: 18px; background: var(--accent);
border-radius: 50%; border: 2px solid var(--bg-elev);
margin-top: -6.5px;
box-shadow: 0 1px 4px rgba(11,44,74,0.3);
cursor: pointer;
}
.slider::-moz-range-track { height: 5px; background: var(--border-strong); border-radius: var(--r-pill); }
.slider::-moz-range-thumb {
width: 18px; height: 18px; background: var(--accent);
border-radius: 50%; border: 2px solid var(--bg-elev); cursor: pointer;
}
/* segmented control */
.segmented {
display: inline-flex;
background: var(--paper-2);
border: 1px solid var(--border);
border-radius: var(--r-2);
padding: 3px;
gap: 2px;
}
.segmented button {
border: none; background: transparent; cursor: pointer;
padding: 4px 14px; height: calc(var(--row-h) - 10px);
font-family: var(--font-sans); font-size: var(--fs-sm); color: var(--fg-muted);
border-radius: calc(var(--r-2) - 1px);
transition: background var(--t-1) var(--ease), color var(--t-1) var(--ease);
}
.segmented button.is-active {
background: var(--bg-elev); color: var(--fg);
box-shadow: 0 0 0 1px var(--border), 0 1px 2px rgba(16,24,32,0.06);
font-weight: 500;
}
/* ─────────────────────────────────────────────────────────────────
BADGE / CHIP / KBD / AVATAR
───────────────────────────────────────────────────────────────── */
.badge {
display: inline-flex; align-items: center; gap: 6px;
font-family: var(--font-sans);
font-size: 12px; font-weight: 500;
letter-spacing: 0.02em;
padding: 3px 10px;
border-radius: var(--r-pill);
background: var(--paper-2);
color: var(--fg-muted);
border: 1px solid var(--border);
line-height: 1.5;
}
.badge .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.badge.tone-ok { color: var(--ok); background: var(--accent-wash); border-color: transparent; }
.badge.tone-warn { color: var(--warn); background: var(--warn-wash); border-color: transparent; }
.badge.tone-error { color: var(--danger); background: var(--danger-wash); border-color: transparent; }
.badge.tone-info { color: var(--info); background: rgba(11,44,74,0.06); border-color: transparent; }
[data-theme="dark"] .badge.tone-info { color: var(--accent-soft); background: rgba(95,208,207,0.10); }
.badge.solid.tone-ok { background: var(--ok); color: #fff; }
.badge.solid.tone-warn { background: var(--warn); color: #fff; }
.badge.solid.tone-error { background: var(--danger); color: #fff; }
.badge.solid.tone-info { background: var(--info); color: #fff; }
.chip {
display: inline-flex; align-items: center; gap: 8px;
height: 28px; padding: 0 10px 0 12px;
font-size: 13px;
background: var(--bg-elev);
border: 1px solid var(--border-strong);
border-radius: var(--r-pill);
color: var(--fg);
}
.chip .x {
width: 18px; height: 18px; border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center;
color: var(--fg-muted); cursor: pointer;
font-size: 14px;
}
.chip .x:hover { background: var(--accent-wash); color: var(--danger); }
.kbd {
display: inline-flex; align-items: center; justify-content: center;
min-width: 22px; height: 22px; padding: 0 6px;
font-family: var(--font-mono); font-size: 12px; color: var(--fg);
background: var(--bg-elev); border: 1px solid var(--border-strong);
border-bottom-width: 2px;
border-radius: 4px;
line-height: 1;
}
.avatar {
width: 34px; height: 34px; border-radius: 50%;
background: var(--navy);
color: #fff;
display: inline-flex; align-items: center; justify-content: center;
font-size: 13px; font-weight: 600;
position: relative;
flex-shrink: 0;
}
.avatar.lg { width: 48px; height: 48px; font-size: 16px; }
.avatar.sm { width: 26px; height: 26px; font-size: 11px; }
.avatar .status {
position: absolute; right: -1px; bottom: -1px;
width: 11px; height: 11px; border-radius: 50%;
background: var(--ok); border: 2px solid var(--bg-elev);
}
.avatar .status.away { background: var(--warn); }
.avatar .status.busy { background: var(--danger); }
.avatar .status.off { background: var(--muted-2); }
.avatar.teal { background: var(--accent); }
.avatar.paper { background: var(--paper-2); color: var(--navy); border: 1px solid var(--border-strong); }
.avatar-stack { display: inline-flex; }
.avatar-stack .avatar { border: 2px solid var(--bg-elev); margin-left: -8px; }
.avatar-stack .avatar:first-child { margin-left: 0; }
/* ─────────────────────────────────────────────────────────────────
FEEDBACK — banner, toast, tooltip, progress
───────────────────────────────────────────────────────────────── */
.banner {
display: grid;
grid-template-columns: 26px 1fr auto;
gap: 14px;
padding: 14px 16px;
border-radius: var(--r-2);
border: 1px solid var(--border);
background: var(--bg-elev);
align-items: flex-start;
font-size: var(--fs-sm);
}
.banner .ic {
width: 22px; height: 22px; border-radius: 50%;
background: var(--paper-2);
color: var(--fg-muted);
display: inline-flex; align-items: center; justify-content: center;
font-size: 13px; font-weight: 700; line-height: 1;
margin-top: 1px;
}
.banner .ttl { font-weight: 600; color: var(--fg); font-size: 15px; }
.banner .desc { color: var(--fg-muted); margin-top: 3px; font-size: 13.5px; line-height: 1.55; }
.banner.tone-ok { background: var(--accent-wash); border-color: transparent; }
.banner.tone-ok .ic { background: var(--ok); color: #fff; }
.banner.tone-warn { background: var(--warn-wash); border-color: transparent; }
.banner.tone-warn .ic { background: var(--warn); color: #fff; }
.banner.tone-error { background: var(--danger-wash); border-color: transparent; }
.banner.tone-error .ic { background: var(--danger); color: #fff; }
.banner.tone-info { background: rgba(11,44,74,0.05); border-color: transparent; }
.banner.tone-info .ic { background: var(--info); color: #fff; }
.toast {
display: inline-grid;
grid-template-columns: 26px 1fr auto;
gap: 14px;
align-items: center;
padding: 12px 16px;
border-radius: var(--r-2);
background: var(--navy); color: #fff;
box-shadow: var(--shadow-pop);
min-width: 320px;
}
.toast .ic { background: var(--accent); color: #fff; width: 22px; height: 22px; border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; }
.toast .ttl { font-size: var(--fs-sm); }
.toast .x { color: rgba(255,255,255,0.6); cursor: pointer; padding: 0 4px; font-size: 16px; }
.toast .x:hover { color: #fff; }
.tooltip-host { position: relative; display: inline-flex; }
.tip {
position: absolute; bottom: calc(100% + 10px); left: 50%;
transform: translateX(-50%) translateY(4px);
background: var(--ink); color: #fff;
padding: 7px 12px;
font-size: 13px; line-height: 1.3;
border-radius: var(--r-1); white-space: nowrap;
box-shadow: 0 4px 12px rgba(0,0,0,0.18);
pointer-events: none; z-index: 20;
opacity: 0; visibility: hidden;
transition: opacity 140ms var(--ease), transform 140ms var(--ease);
}
.tooltip-host:hover .tip,
.tooltip-host:focus-within .tip {
opacity: 1; visibility: visible;
transform: translateX(-50%) translateY(0);
transition-delay: 120ms;
}
.tip::after {
content: ''; position: absolute;
top: 100%; left: 50%; transform: translateX(-50%);
border: 4px solid transparent; border-top-color: var(--ink);
}
.tip .kbd { background: rgba(255,255,255,0.15); color: #fff; border-color: rgba(255,255,255,0.2); margin-left: 4px; }
/* progress */
.progress {
width: 240px; height: 6px; background: var(--border);
border-radius: var(--r-pill); overflow: hidden;
}
.progress .bar {
height: 100%; background: var(--accent);
border-radius: inherit;
transition: width var(--t-3) var(--ease);
}
.progress.thin { height: 3px; }
.progress.thick { height: 10px; }
.progress.tone-ok .bar { background: var(--ok); }
.progress.tone-warn .bar { background: var(--warn); }
.progress.tone-error .bar { background: var(--danger); }
.ring {
--pct: 64;
--size: 48px;
width: var(--size); height: var(--size);
border-radius: 50%;
background:
conic-gradient(var(--accent) calc(var(--pct) * 1%), var(--border) 0);
display: inline-flex; align-items: center; justify-content: center;
position: relative;
}
.ring::after {
content: ''; position: absolute; inset: 5px;
background: var(--bg-elev); border-radius: 50%;
}
.ring .lbl { position: relative; z-index: 1; font-family: var(--font-mono); font-size: 13px; color: var(--fg); font-weight: 600; }
/* skeleton */
.skel {
background: linear-gradient(90deg, var(--border) 0%, var(--paper-2) 50%, var(--border) 100%);
background-size: 400% 100%;
animation: shimmer 1.6s linear infinite;
border-radius: var(--r-1);
height: 14px;
}
.skel.line-1 { width: 60%; }
.skel.line-2 { width: 92%; }
.skel.line-3 { width: 78%; }
.skel.circle { border-radius: 50%; width: 36px; height: 36px; }
@keyframes shimmer {
0% { background-position: 100% 0; }
100% { background-position: 0 0; }
}
@keyframes spin { to { transform: rotate(360deg); } }
.spinner {
width: 18px; height: 18px; border-radius: 50%;
border: 2px solid var(--border-strong);
border-top-color: var(--accent);
animation: spin 0.8s linear infinite;
display: inline-block;
}
/* ─────────────────────────────────────────────────────────────────
NAV — tabs, breadcrumb, pagination, menu
───────────────────────────────────────────────────────────────── */
.tabs-under {
display: inline-flex; gap: 0;
border-bottom: 1px solid var(--border);
}
.tabs-under a {
padding: 10px 16px;
font-size: var(--fs-sm); color: var(--fg-muted);
border-bottom: 2px solid transparent;
margin-bottom: -1px;
}
.tabs-under a.is-active { color: var(--fg); border-bottom-color: var(--accent); font-weight: 500; }
.tabs-under a:hover { color: var(--fg); }
.tabs-under a .count {
display: inline-block; margin-left: 8px;
font-family: var(--font-mono); font-size: 11.5px;
color: var(--fg-muted);
background: var(--paper-2); border: 1px solid var(--border);
border-radius: var(--r-pill); padding: 0 8px;
line-height: 1.6;
}
.crumb {
display: inline-flex; align-items: center; gap: 8px;
font-family: var(--font-mono); font-size: 13px; color: var(--fg-muted);
}
.crumb a { color: var(--fg-muted); }
.crumb a:hover { color: var(--accent); }
.crumb .sep { opacity: 0.45; }
.crumb .cur { color: var(--fg); }
.pagination { display: inline-flex; align-items: center; gap: 3px; }
.pagination button {
height: var(--row-h-sm); min-width: var(--row-h-sm);
padding: 0 10px;
border: 1px solid transparent; background: transparent;
border-radius: var(--r-2); cursor: pointer;
font-family: var(--font-mono); font-size: 13px; color: var(--fg);
}
.pagination button:hover { background: var(--accent-wash); }
.pagination button.is-active {
background: var(--accent-wash); color: var(--accent); font-weight: 600;
border-color: transparent;
}
.pagination button[disabled] { color: var(--muted-2); cursor: not-allowed; }
.pagination .ellipsis { padding: 0 8px; color: var(--fg-muted); font-family: var(--font-mono); }
.menu {
background: var(--bg-elev);
border: 1px solid var(--border);
border-radius: var(--r-3);
box-shadow: var(--shadow-pop);
padding: 6px;
min-width: 260px;
}
.menu-item {
display: grid;
grid-template-columns: 18px 1fr auto;
align-items: center;
gap: 12px;
padding: 8px 10px;
border-radius: var(--r-2);
cursor: pointer;
font-size: var(--fs-sm); color: var(--fg);
}
.menu-item:hover { background: var(--accent-wash); }
.menu-item .ic { color: var(--fg-muted); font-family: var(--font-mono); font-size: 14px; }
.menu-item .meta { font-family: var(--font-mono); font-size: 11.5px; color: var(--fg-muted); display: inline-flex; gap: 3px; }
.menu-item.is-danger { color: var(--danger); }
.menu-item.is-danger .ic { color: var(--danger); }
.menu-sep { height: 1px; background: var(--border); margin: 5px -6px; }
.menu-label {
padding: 10px 10px 6px;
font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em;
text-transform: uppercase; color: var(--fg-muted);
}
/* ─────────────────────────────────────────────────────────────────
DATA — table, cards
───────────────────────────────────────────────────────────────── */
.table {
width: 100%; border-collapse: collapse;
font-size: var(--fs-sm); font-variant-numeric: tabular-nums;
}
.table th, .table td {
text-align: left; padding: 12px 16px;
border-bottom: 1px solid var(--border);
}
.table thead th {
font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase;
color: var(--fg-muted); font-weight: 600;
background: var(--paper-2);
border-bottom: 1px solid var(--border-strong);
position: sticky; top: 0;
}
.table tbody tr:hover td { background: var(--accent-wash); }
.table .num { font-family: var(--font-mono); text-align: right; }
.table .sort {
display: inline-flex; align-items: center; gap: 4px;
color: var(--fg-muted); cursor: pointer;
}
.table .sort.is-active { color: var(--fg); }
.table .sort .ar { font-family: var(--font-mono); }
.card-block {
background: var(--bg-elev);
border: 1px solid var(--border);
border-radius: var(--r-3);
padding: 14px;
}
/* ─────────────────────────────────────────────────────────────────
FOUNDATIONS — color, type, spacing, radius, shadow, motion
───────────────────────────────────────────────────────────────── */
.swatchgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; width: 100%; }
.sw {
border: 1px solid var(--border);
border-radius: var(--r-2);
overflow: hidden;
background: var(--bg-elev);
}
.sw .chip-color { height: 72px; }
.sw .meta { padding: 10px 12px; display: grid; gap: 3px; }
.sw .nm { font-size: 14px; font-weight: 600; color: var(--fg); }
.sw .hx { font-family: var(--font-mono); font-size: 12px; color: var(--fg-muted); }
.sw .role { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-muted); }
.scale-row {
display: grid; grid-template-columns: 80px 1fr 120px;
gap: 20px; align-items: baseline;
padding: 10px 0;
border-bottom: 1px dashed var(--border);
}
.scale-row:last-child { border-bottom: none; }
.scale-row .nm { font-family: var(--font-mono); font-size: 13px; color: var(--fg-muted); letter-spacing: 0.06em; }
.scale-row .specs { font-family: var(--font-mono); font-size: 12px; color: var(--fg-muted); text-align: right; }
.scale-row .sample { color: var(--fg); }
.space-row {
display: grid; grid-template-columns: 60px 1fr 1fr 100px;
gap: 16px; align-items: center;
padding: 8px 0;
font-family: var(--font-mono); font-size: 13px;
}
.space-row .nm { color: var(--fg-muted); letter-spacing: 0.08em; }
.space-row .px { color: var(--fg); }
.space-row .bar { height: 8px; background: var(--accent-wash); border-left: 2px solid var(--accent); }
.space-row .use { color: var(--fg-muted); text-align: right; }
.radius-row {
display: grid; grid-template-columns: 70px 90px 1fr;
gap: 18px; align-items: center;
padding: 8px 0;
font-family: var(--font-mono); font-size: 13px;
}
.radius-row .sw {
height: 34px; background: var(--accent-wash); border: 1px solid var(--accent);
border-radius: 0;
}
.shadow-row {
display: grid; grid-template-columns: 90px 1fr 1fr;
gap: 18px; align-items: center;
padding: 16px 0;
font-family: var(--font-mono); font-size: 13px;
}
.shadow-row .sw {
width: 72px; height: 46px; background: var(--bg-elev);
border-radius: var(--r-2);
}
.motion-row {
display: grid; grid-template-columns: 70px 1fr 100px;
gap: 18px; align-items: center;
padding: 8px 0; font-family: var(--font-mono); font-size: 13px;
}
.motion-row .bar {
height: 4px; background: linear-gradient(90deg, var(--accent), transparent);
border-radius: var(--r-pill);
position: relative;
}
.motion-row .bar::after {
content: ''; position: absolute; right: 0; top: 50%; transform: translateY(-50%);
width: 8px; height: 8px; border-radius: 50%; background: var(--accent);
}
/* ─────────────────────────────────────────────────────────────────
PATTERNS — compliance input, command palette, modal preview
───────────────────────────────────────────────────────────────── */
.compliance {
width: 100%; max-width: 520px;
border: 1px solid var(--border-strong);
border-radius: var(--r-3);
background: var(--bg-elev);
overflow: hidden;
}
.compliance .row1 {
display: grid; grid-template-columns: auto 1fr auto;
align-items: center;
padding: 12px 16px;
border-bottom: 1px dashed var(--border);
}
.compliance .row1 .lbl {
font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.14em;
text-transform: uppercase; color: var(--fg-muted);
}
.compliance .row1 .meta {
font-family: var(--font-mono); font-size: 12px; color: var(--fg-muted);
display: inline-flex; gap: 10px;
}
.compliance .input-area {
padding: 16px;
font-family: var(--font-sans); font-size: 15px; color: var(--fg);
min-height: 100px;
line-height: 1.6;
}
.compliance .flag {
background: rgba(198,69,69,0.10);
border-bottom: 1.5px dashed var(--danger);
padding: 0 2px;
color: var(--danger);
}
.compliance .approved {
background: var(--accent-wash);
border-bottom: 1.5px solid var(--ok);
padding: 0 2px;
}
.compliance .strip {
display: grid; grid-template-columns: 26px 1fr auto;
align-items: center; gap: 12px;
padding: 10px 16px;
background: var(--paper-2);
border-top: 1px solid var(--border);
font-size: var(--fs-sm);
}
.compliance .strip.tone-warn { background: var(--warn-wash); }
.compliance .strip.tone-error { background: var(--danger-wash); }
.compliance .strip.tone-ok { background: var(--accent-wash); }
.compliance .strip .ic {
width: 22px; height: 22px; border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center;
font-size: 13px; font-weight: 700; color: #fff;
}
.compliance .strip.tone-warn .ic { background: var(--warn); }
.compliance .strip.tone-error .ic { background: var(--danger); }
.compliance .strip.tone-ok .ic { background: var(--ok); }
.compliance .strip .why { font-family: var(--font-mono); font-size: 12px; color: var(--fg-muted); }
/* command palette */
.cmdk {
width: 100%; max-width: 520px;
background: var(--bg-elev);
border: 1px solid var(--border);
border-radius: var(--r-3);
box-shadow: var(--shadow-pop);
overflow: hidden;
}
.cmdk .head {
display: grid; grid-template-columns: 22px 1fr auto;
align-items: center; gap: 12px;
padding: 14px 16px;
border-bottom: 1px solid var(--border);
}
.cmdk .head input {
border: none; outline: none; background: transparent;
font-family: var(--font-sans); font-size: 16px; color: var(--fg); width: 100%;
}
.cmdk .head .esc { font-family: var(--font-mono); font-size: 12px; color: var(--fg-muted); }
.cmdk .body { max-height: 300px; overflow: auto; padding: 6px; }
.cmdk .grp-label {
padding: 10px 12px 6px; font-family: var(--font-mono);
font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-muted);
}
.cmdk .item {
display: grid; grid-template-columns: 22px 1fr auto;
align-items: center; gap: 12px;
padding: 9px 12px; border-radius: var(--r-2);
font-size: var(--fs-sm); color: var(--fg);
cursor: pointer;
}
.cmdk .item.is-active { background: var(--accent-wash); }
.cmdk .item .ic { font-family: var(--font-mono); font-size: 14px; color: var(--fg-muted); }
.cmdk .item .meta { font-family: var(--font-mono); font-size: 12px; color: var(--fg-muted); }
.cmdk .foot {
border-top: 1px solid var(--border);
padding: 8px 14px;
display: flex; justify-content: space-between;
font-family: var(--font-mono); font-size: 12px; color: var(--fg-muted);
}
.cmdk .foot span { display: inline-flex; align-items: center; gap: 4px; }
/* mobile preview frame for responsive section */
.phone-frame {
width: 280px;
border: 8px solid var(--ink);
border-radius: 28px;
background: var(--bg-elev);
padding: 14px;
box-shadow: var(--shadow-2);
}
.phone-frame .ph-bar {
display: flex; justify-content: space-between;
font-family: var(--font-mono); font-size: 10px; color: var(--fg-muted);
margin-bottom: 10px;
}
.phone-frame .ph-content { display: grid; gap: 10px; }
/* modal preview */
.modal-card {
width: 100%; max-width: 520px;
background: var(--bg-elev);
border-radius: var(--r-3);
box-shadow: var(--shadow-pop);
border: 1px solid var(--border);
overflow: hidden;
}
.modal-card .mc-head {
padding: 20px 22px 8px;
}
.modal-card .mc-head .ttl { font-size: 19px; font-weight: 600; color: var(--fg); }
.modal-card .mc-head .sub { font-size: var(--fs-sm); color: var(--fg-muted); margin-top: 4px; line-height: 1.55; }
.modal-card .mc-body { padding: 16px 22px; }
.modal-card .mc-foot {
padding: 14px 22px;
border-top: 1px solid var(--border);
background: var(--paper-2);
display: flex; justify-content: flex-end; gap: 10px;
}
/* ─────────────────────────────────────────────────────────────────
ADVANCED INPUTS — date picker, number stepper, combobox, tag input, file
───────────────────────────────────────────────────────────────── */
/* number stepper */
.stepper {
display: inline-grid;
grid-template-columns: var(--row-h) 1fr var(--row-h);
border: 1px solid var(--border-strong);
border-radius: var(--r-2);
background: var(--bg-elev);
height: var(--row-h);
overflow: hidden;
}
.stepper:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-wash); }
.stepper button {
border: none; background: var(--paper-2); cursor: pointer;
color: var(--fg); font-size: 16px;
border-right: 1px solid var(--border);
}
.stepper button:last-child { border-right: none; border-left: 1px solid var(--border); }
.stepper button:hover { background: var(--accent-wash); color: var(--accent); }
.stepper input {
border: none; outline: none; background: transparent;
text-align: center; font-family: var(--font-mono);
font-size: var(--fs-sm); color: var(--fg);
width: 100%;
font-variant-numeric: tabular-nums;
}
/* date picker (display) */
.datepick {
background: var(--bg-elev);
border: 1px solid var(--border-strong);
border-radius: var(--r-2);
width: 280px;
overflow: hidden;
}
.datepick .dp-head {
display: flex; justify-content: space-between; align-items: center;
padding: 10px 14px; border-bottom: 1px solid var(--border);
}
.datepick .dp-head .mo { font-weight: 600; color: var(--fg); font-size: 14px; }
.datepick .dp-head .nav { display: inline-flex; gap: 4px; }
.datepick .dp-head .nav button { border: none; background: transparent; cursor: pointer; color: var(--fg-muted); padding: 4px 8px; border-radius: var(--r-2); }
.datepick .dp-head .nav button:hover { background: var(--accent-wash); color: var(--accent); }
.datepick .dp-grid { display: grid; grid-template-columns: repeat(7, 1fr); padding: 8px 10px 12px; }
.datepick .dp-dow {
font-family: var(--font-mono); font-size: 11px;
color: var(--fg-muted); text-align: center;
padding: 6px 0; letter-spacing: 0.06em;
}
.datepick .dp-day {
text-align: center; padding: 6px 0;
font-family: var(--font-mono); font-size: 13px;
color: var(--fg); cursor: pointer;
border-radius: var(--r-1);
font-variant-numeric: tabular-nums;
}
.datepick .dp-day:hover { background: var(--accent-wash); }
.datepick .dp-day.is-out { color: var(--muted-2); }
.datepick .dp-day.is-today { color: var(--accent); font-weight: 700; }
.datepick .dp-day.is-selected { background: var(--accent); color: #fff; }
.datepick .dp-day.is-range { background: var(--accent-wash); border-radius: 0; }
.datepick .dp-foot {
border-top: 1px solid var(--border);
padding: 8px 14px;
display: flex; justify-content: space-between; align-items: center;
background: var(--paper-2);
}
.datepick.is-full { width: 100%; border: none; border-radius: 0; }
/* time picker */
.timepick {
display: inline-flex; background: var(--bg-elev);
border: 1px solid var(--border-strong); border-radius: var(--r-2); overflow: hidden;
}
.timepick .tp-col { width: 76px; border-right: 1px solid var(--border); }
.timepick .tp-col:last-child { border-right: none; }
.timepick .tp-colhead {
font-family: var(--font-mono); font-size: 11px; color: var(--fg-muted);
text-align: center; padding: 8px 0; border-bottom: 1px solid var(--border);
letter-spacing: 0.06em; background: var(--paper-2);
}
.timepick .tp-list { max-height: 176px; overflow-y: auto; padding: 4px 0; }
.timepick .tp-opt {
text-align: center; padding: 7px 0; cursor: pointer;
font-family: var(--font-mono); font-size: 14px; color: var(--fg);
font-variant-numeric: tabular-nums; border-radius: var(--r-1); margin: 1px 6px;
}
.timepick .tp-opt:hover { background: var(--accent-wash); color: var(--accent); }
.timepick .tp-opt.is-selected { background: var(--accent); color: #fff; font-weight: 700; }
.timepick .tp-opt.is-mute { color: var(--fg-muted); }
.timepick.is-full { display: flex; width: 100%; border: none; border-radius: 0; }
.timepick.is-full .tp-col { flex: 1; width: auto; }
/* combobox */
.combo {
width: 320px;
position: relative;
}
.combo .combo-input {
display: grid; grid-template-columns: 1fr auto;
align-items: center;
border: 1px solid var(--border-strong);
border-radius: var(--r-2) var(--r-2) 0 0;
background: var(--bg-elev);
height: var(--row-h);
padding: 0 12px;
}
.combo .combo-input input { border: none; outline: none; background: transparent; font: inherit; color: var(--fg); width: 100%; font-size: var(--fs-sm); font-family: var(--font-sans); }
.combo .combo-input .chev { color: var(--fg-muted); }
.combo .combo-list {
border: 1px solid var(--border-strong); border-top: none;
background: var(--bg-elev);
max-height: 200px; overflow: auto;
border-radius: 0 0 var(--r-2) var(--r-2);
box-shadow: var(--shadow-2);
}
.combo .combo-item {
display: grid; grid-template-columns: 1fr auto;
padding: 8px 12px; cursor: pointer; font-size: var(--fs-sm);
color: var(--fg);
}
.combo .combo-item .meta { font-family: var(--font-mono); font-size: 12px; color: var(--fg-muted); }
.combo .combo-item.is-active { background: var(--accent-wash); }
.combo .combo-item mark { background: transparent; color: var(--accent); font-weight: 600; }
.combo .combo-empty { padding: 14px; text-align: center; color: var(--fg-muted); font-size: 13px; }
/* tag input */
.taginput {
display: flex; flex-wrap: wrap; gap: 6px;
border: 1px solid var(--border-strong);
border-radius: var(--r-2);
background: var(--bg-elev);
padding: 6px 8px;
min-height: var(--row-h);
align-items: center;
}
.taginput:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-wash); }
.taginput input {
border: none; outline: none; background: transparent;
font: inherit; flex: 1; min-width: 100px;
color: var(--fg); font-size: var(--fs-sm); font-family: var(--font-sans);
padding: 4px;
}
/* file upload dropzone */
.dropzone {
border: 1.5px dashed var(--border-strong);
border-radius: var(--r-3);
background: var(--paper-2);
padding: 28px;
text-align: center;
cursor: pointer;
transition: background var(--t-2) var(--ease), border-color var(--t-2) var(--ease);
width: 100%;
max-width: 460px;
}
.dropzone:hover, .dropzone.is-over { border-color: var(--accent); background: var(--accent-wash); }
.dropzone .ic-up {
width: 44px; height: 44px;
margin: 0 auto 10px;
background: var(--bg-elev);
border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center;
border: 1px solid var(--border);
color: var(--fg-muted);
}
.dropzone .ttl { font-weight: 600; color: var(--fg); font-size: 14px; }
.dropzone .sub { font-size: 13px; color: var(--fg-muted); margin-top: 4px; }
.dropzone .browse { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.dropzone .formats {
margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--border);
font-family: var(--font-mono); font-size: 11px; color: var(--fg-muted);
letter-spacing: 0.08em;
}
/* file row (selected) */
.filerow {
display: grid;
grid-template-columns: 36px 1fr auto auto;
align-items: center;
gap: 12px;
padding: 10px 12px;
border: 1px solid var(--border);
border-radius: var(--r-2);
background: var(--bg-elev);
}
.filerow .ext {
width: 36px; height: 36px;
border-radius: var(--r-2);
background: var(--accent-wash); color: var(--accent);
display: inline-flex; align-items: center; justify-content: center;
font-family: var(--font-mono); font-size: 11px; font-weight: 700;
letter-spacing: 0.04em;
}
.filerow .nm { font-size: 14px; color: var(--fg); }
.filerow .sz { font-family: var(--font-mono); font-size: 12px; color: var(--fg-muted); }
.filerow .pr { width: 120px; display: flex; align-items: center; justify-content: flex-end; }
.filerow .pr .progress { width: 100%; }
.filerow .x { color: var(--fg-muted); cursor: pointer; padding: 0 4px; }
/* back control */
.backbtn {
display: inline-flex; align-items: center; gap: 6px;
height: 36px; padding: 0 14px 0 11px;
border: 1px solid var(--border); border-radius: var(--r-pill);
background: var(--bg-elev); color: var(--fg);
font-family: inherit; font-size: 14px; font-weight: 500; line-height: 1;
cursor: pointer; transition: border-color var(--t-3) var(--ease), color var(--t-3) var(--ease);
}
.backbtn:hover { border-color: var(--accent); color: var(--accent); }
.backbtn svg { width: 16px; height: 16px; flex: none; }
.backbtn .en { color: var(--fg-muted); font-size: 12px; }
.backbtn.is-icon { width: 36px; height: 36px; padding: 0; justify-content: center; border-radius: 50%; }
.appbar {
display: flex; align-items: center; gap: 6px;
height: 52px; padding: 0 6px;
background: var(--bg-elev); border-bottom: 1px solid var(--border);
}
.appbar-back {
width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center;
border: none; background: transparent; color: var(--fg);
border-radius: 10px; cursor: pointer; transition: background var(--t-3) var(--ease);
}
.appbar-back:hover { background: var(--accent-wash); color: var(--accent); }
.appbar-back svg { width: 20px; height: 20px; }
.appbar-title { font-size: 16px; font-weight: 600; color: var(--fg); }
.phone-frame { width: 300px; border: 1px solid var(--border); border-radius: 18px; overflow: hidden; background: var(--bg-elev); }
/* accordion */
.acc {
border: 1px solid var(--border);
border-radius: var(--r-3);
background: var(--bg-elev);
overflow: hidden;
width: 100%;
}
.acc-item { border-bottom: 1px solid var(--border); }
.acc-item:last-child { border-bottom: none; }
.acc-head {
display: grid; grid-template-columns: 20px 1fr auto;
align-items: center; gap: 12px;
padding: 14px 16px;
cursor: pointer;
font-weight: 600; color: var(--fg);
font-size: 15px;
background: var(--bg-elev);
transition: background var(--t-1) var(--ease);
}
.acc-head:hover { background: var(--paper-2); }
.acc-head .chev {
width: 14px; height: 14px;
border: 1.5px solid var(--fg-muted); border-top: 0; border-left: 0;
transform: rotate(-45deg);
transition: transform var(--t-2) var(--ease);
margin: 0 auto;
}
.acc-item.is-open .acc-head .chev { transform: rotate(45deg); }
.acc-head .meta { font-family: var(--font-mono); font-size: 12px; color: var(--fg-muted); font-weight: 400; }
.acc-body {
display: none;
padding: 0 16px 16px 48px;
font-size: 14px; color: var(--fg-muted);
line-height: 1.65;
}
.acc-item.is-open .acc-body { display: block; }
/* empty state */
.empty {
text-align: center;
padding: 40px 24px;
border: 1px dashed var(--border-strong);
border-radius: var(--r-3);
background: var(--paper-2);
width: 100%;
max-width: 460px;
}
.empty .ic-empty {
width: 56px; height: 56px;
border: 1.5px solid var(--border-strong);
border-radius: 50%;
margin: 0 auto 14px;
display: flex; align-items: center; justify-content: center;
color: var(--fg-muted);
font-family: var(--font-mono); font-size: 22px;
background: var(--bg-elev);
}
.empty .ttl { font-size: 16px; font-weight: 600; color: var(--fg); margin-bottom: 6px; }
.empty .desc { font-size: 13.5px; color: var(--fg-muted); margin-bottom: 16px; max-width: 38ch; margin-left: auto; margin-right: auto; line-height: 1.55; }
/* ─────────────────────────────────────────────────────────────────
MENU CARD — 메인메뉴/대시보드용 카드 그리드
───────────────────────────────────────────────────────────────── */
.menucard-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 12px;
width: 100%;
}
.menucard {
position: relative;
display: grid;
grid-template-rows: auto auto 1fr auto;
gap: 6px;
padding: 18px 18px 16px;
background: var(--bg-elev);
border: 1px solid var(--border);
border-radius: var(--r-3);
cursor: pointer;
text-decoration: none; color: inherit;
transition: border-color var(--t-2) var(--ease), transform var(--t-2) var(--ease), box-shadow var(--t-2) var(--ease);
}
.menucard:hover {
border-color: var(--accent);
transform: translateY(-1px);
box-shadow: var(--shadow-2);
}
.menucard .mc-icon {
width: 40px; height: 40px;
border-radius: var(--r-2);
background: var(--accent-wash);
color: var(--accent);
display: inline-flex; align-items: center; justify-content: center;
}
.menucard .mc-icon svg { width: 22px; height: 22px; }
.menucard .mc-title {
font-size: 16px; font-weight: 600; color: var(--fg);
margin-top: 10px;
display: flex; align-items: baseline; gap: 8px;
}
.menucard .mc-title .en { font-size: 12px; font-weight: 400; }
.menucard .mc-desc {
font-size: 13px; color: var(--fg-muted);
line-height: 1.55;
margin-top: 2px;
}
.menucard .mc-foot {
margin-top: 14px;
padding-top: 12px;
border-top: 1px dashed var(--border);
display: flex; justify-content: space-between; align-items: center;
font-family: var(--font-mono); font-size: 12px;
color: var(--fg-muted); letter-spacing: 0.04em;
}
.menucard .mc-foot .arrow {
color: var(--accent); transition: transform var(--t-2) var(--ease);
}
.menucard:hover .mc-foot .arrow { transform: translateX(3px); }
.menucard.is-featured {
background: var(--navy); color: #fff;
border-color: var(--navy);
}
.menucard.is-featured .mc-icon { background: rgba(95,208,207,0.18); color: var(--accent-soft); }
.menucard.is-featured .mc-title { color: #fff; }
.menucard.is-featured .mc-title .en { color: var(--accent-soft); }
.menucard.is-featured .mc-desc { color: rgba(255,255,255,0.7); }
.menucard.is-featured .mc-foot { border-top-color: rgba(255,255,255,0.18); color: rgba(255,255,255,0.6); }
.menucard.is-featured .mc-foot .arrow { color: var(--accent-soft); }
.menucard .mc-badge {
position: absolute; top: 14px; right: 14px;
}
/* ─────────────────────────────────────────────────────────────────
MOBILE SHOWCASE — phone frames at parity with desktop
───────────────────────────────────────────────────────────────── */
.phone-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
gap: 32px 24px;
width: 100%;
justify-items: center;
}
.phone-grid .phone-cell {
display: grid; gap: 10px;
justify-items: center;
}
.phone-grid .phone-cell .ph-cap {
font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.14em;
text-transform: uppercase; color: var(--fg-muted);
text-align: center;
display: flex; align-items: baseline; gap: 8px; justify-content: center;
}
.phone-grid .phone-cell .ph-cap strong {
color: var(--fg); font-weight: 600; letter-spacing: 0;
font-family: var(--font-sans); font-size: 14px;
text-transform: none;
}
/* phone frame override: bigger, with bottom nav */
.phone-grid .phone-frame {
width: 310px;
border: 9px solid var(--ink);
border-radius: 36px;
background: var(--bg-elev);
padding: 0;
box-shadow: var(--shadow-2);
overflow: hidden;
display: grid;
grid-template-rows: auto 1fr auto;
height: 600px;
}
.phone-grid .phone-frame .pf-status {
display: flex; justify-content: space-between; align-items: center;
padding: 12px 22px 6px;
font-family: var(--font-sans); font-size: 13px; font-weight: 600;
color: var(--fg);
}
.phone-grid .phone-frame .pf-status .pf-right {
display: inline-flex; gap: 5px; align-items: center;
}
.phone-grid .phone-frame .pf-body {
padding: 8px 16px 16px;
overflow: hidden auto;
min-height: 0;
min-width: 0;
}
.phone-grid .phone-frame .pf-tab {
display: grid;
grid-template-columns: repeat(4, 1fr);
border-top: 1px solid var(--border);
background: var(--bg-elev);
padding: 8px 6px 18px;
flex-shrink: 0;
}
.phone-grid .phone-frame .pf-tab a {
display: grid; gap: 4px; justify-items: center;
text-decoration: none;
color: var(--fg-muted);
font-size: 11px;
padding: 4px 0;
min-width: 0;
}
.phone-grid .phone-frame .pf-tab a.is-active { color: var(--accent); }
.phone-grid .phone-frame .pf-tab svg,
.phone-grid .phone-frame .pf-tab a svg {
width: 22px !important; height: 22px !important;
display: block;
flex-shrink: 0;
}
/* topbar inside phone */
.pf-topbar {
display: grid; grid-template-columns: auto 1fr auto;
align-items: center; gap: 10px;
padding: 8px 4px 14px;
}
.pf-topbar .pf-title {
font-size: 18px; font-weight: 700; color: var(--fg);
}
.pf-topbar .pf-avatar {
width: 32px; height: 32px; border-radius: 50%;
background: var(--navy); color: #fff;
display: inline-flex; align-items: center; justify-content: center;
font-size: 12px; font-weight: 600;
}
.pf-iconbtn {
width: 32px; height: 32px; border-radius: 50%;
background: var(--paper-2); border: 1px solid var(--border);
display: inline-flex; align-items: center; justify-content: center;
color: var(--fg-muted); cursor: pointer;
}
.pf-iconbtn svg { width: 16px; height: 16px; }
/* list cards in phone */
.pf-listitem {
display: grid;
grid-template-columns: 38px 1fr auto;
gap: 12px;
align-items: center;
padding: 12px 4px;
border-bottom: 1px solid var(--border);
}
.pf-listitem:last-child { border-bottom: none; }
.pf-listitem .pf-li-title { font-size: 14px; color: var(--fg); font-weight: 500; }
.pf-listitem .pf-li-sub { font-family: var(--font-mono); font-size: 12px; color: var(--fg-muted); margin-top: 2px; }
/* mobile menu card */
.pf-menucard {
display: grid;
grid-template-columns: 40px 1fr 14px;
gap: 14px;
align-items: center;
padding: 14px;
background: var(--bg-elev);
border: 1px solid var(--border);
border-radius: var(--r-3);
margin-bottom: 10px;
}
.pf-menucard:last-child { margin-bottom: 0; }
.pf-menucard .pfm-icon {
width: 40px; height: 40px;
border-radius: var(--r-2);
background: var(--accent-wash); color: var(--accent);
display: inline-flex; align-items: center; justify-content: center;
}
.pf-menucard .pfm-icon svg { width: 22px; height: 22px; }
.pf-menucard .pfm-title { font-size: 15px; font-weight: 600; color: var(--fg); }
.pf-menucard .pfm-desc { font-size: 12px; color: var(--fg-muted); margin-top: 2px; }
.pf-menucard .pfm-chev { color: var(--fg-muted); }
/* mobile feed item */
.pf-feed {
display: grid;
gap: 6px;
padding: 14px 0;
border-bottom: 1px solid var(--border);
}
.pf-feed:last-child { border-bottom: none; }
.pf-feed .pfd-head {
display: flex; justify-content: space-between; align-items: center;
}
.pf-feed .pfd-id { font-family: var(--font-mono); font-size: 12px; color: var(--fg-muted); }
.pf-feed .pfd-body { font-size: 14px; color: var(--fg); line-height: 1.45; }
/* phone section heading */
.pf-h {
font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em;
text-transform: uppercase; color: var(--fg-muted);
padding: 14px 4px 8px;
}
/* ─────────────────────────────────────────────────────────────────
MOBILE SHOWCASE — additional patterns for 12-screen grid
───────────────────────────────────────────────────────────────── */
/* detail header */
.pf-detail-head {
padding: 4px 0 14px;
border-bottom: 1px dashed var(--border);
margin-bottom: 12px;
}
.pf-detail-head .pfd-id-row {
display: flex; justify-content: space-between; align-items: center;
font-family: var(--font-mono); font-size: 12px; color: var(--fg-muted);
margin-bottom: 8px;
}
.pf-detail-head .pfd-ttl {
font-size: 18px; font-weight: 700; color: var(--fg);
letter-spacing: -0.01em;
margin-bottom: 6px;
}
.pf-detail-head .pfd-meta {
display: flex; gap: 12px; flex-wrap: wrap;
font-family: var(--font-mono); font-size: 12px; color: var(--fg-muted);
}
/* KPI tiny grid for mobile dashboard */
.pf-kpi-grid {
display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
margin-bottom: 12px;
}
.pf-kpi {
padding: 12px;
background: var(--bg-elev);
border: 1px solid var(--border);
border-radius: var(--r-2);
}
.pf-kpi .pfk-label {
font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em;
text-transform: uppercase; color: var(--fg-muted);
margin-bottom: 4px;
}
.pf-kpi .pfk-value {
font-size: 22px; font-weight: 600; color: var(--fg);
font-variant-numeric: tabular-nums;
line-height: 1.1;
}
.pf-kpi .pfk-delta {
font-family: var(--font-mono); font-size: 11px; color: var(--ok);
margin-top: 4px;
}
.pf-kpi .pfk-delta.is-down { color: var(--danger); }
/* mini sparkline / chart bars */
.pf-chart {
display: flex; align-items: flex-end; justify-content: space-between;
gap: 4px;
height: 80px;
padding: 12px;
background: var(--bg-elev);
border: 1px solid var(--border);
border-radius: var(--r-2);
margin-bottom: 12px;
}
.pf-chart .pfc-bar {
flex: 1;
background: var(--accent);
border-radius: 2px 2px 0 0;
opacity: 0.85;
min-height: 6px;
}
.pf-chart .pfc-bar.is-warn { background: var(--warn); }
.pf-chart .pfc-bar.is-danger { background: var(--danger); }
.pf-chart .pfc-bar.is-muted { background: var(--border-strong); }
/* approval queue swipe-action row */
.pf-approve {
display: grid;
grid-template-columns: 1fr auto auto;
gap: 8px;
align-items: center;
padding: 12px;
background: var(--bg-elev);
border: 1px solid var(--border);
border-radius: var(--r-2);
margin-bottom: 8px;
position: relative;
}
.pf-approve.is-swiped {
border-color: var(--warn);
border-left: 3px solid var(--warn);
}
.pf-approve.is-swiped::before {
content: '대기'; position: absolute; left: -3px; top: -1px;
font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.14em;
text-transform: uppercase; color: var(--warn);
background: var(--warn-wash); padding: 2px 6px;
border-radius: 0 0 4px 0;
font-weight: 700;
}
.pf-approve .pfa-meta {
font-family: var(--font-mono); font-size: 11px; color: var(--fg-muted);
margin-bottom: 3px;
}
.pf-approve .pfa-body {
font-size: 13px; color: var(--fg); line-height: 1.4;
}
.pf-approve .pfa-btn {
width: 32px; height: 32px;
border-radius: 50%;
border: 1px solid var(--border-strong);
background: var(--bg-elev);
display: inline-flex; align-items: center; justify-content: center;
font-size: 16px;
cursor: pointer;
}
.pf-approve .pfa-btn.is-ok { background: var(--ok); color: #fff; border-color: var(--ok); }
.pf-approve .pfa-btn.is-no { background: var(--danger); color: #fff; border-color: var(--danger); }
/* login screen */
.pf-login {
padding: 24px 16px;
display: grid;
gap: 14px;
}
.pf-login .pfl-brand {
text-align: center;
padding: 40px 0 28px;
}
.pf-login .pfl-brand img { height: 38px; }
.pf-login .pfl-brand .tag {
font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em;
text-transform: uppercase; color: var(--accent);
margin-top: 12px;
}
.pf-login .pfl-or {
text-align: center; font-family: var(--font-mono); font-size: 11px;
color: var(--fg-muted); letter-spacing: 0.14em;
padding: 4px 0;
position: relative;
}
.pf-login .pfl-or::before,
.pf-login .pfl-or::after {
content: '';
position: absolute; top: 50%; width: 30%;
height: 1px; background: var(--border);
}
.pf-login .pfl-or::before { left: 0; }
.pf-login .pfl-or::after { right: 0; }
.pf-login .pfl-foot {
text-align: center;
font-family: var(--font-mono); font-size: 11px; color: var(--fg-muted);
padding-top: 14px;
}
/* bottom sheet */
.pf-sheet-overlay {
position: absolute; inset: 0;
background: rgba(11,44,74,0.45);
display: flex; align-items: flex-end;
justify-content: center;
}
.pf-sheet {
width: 100%;
background: var(--bg-elev);
border-radius: 18px 18px 0 0;
padding: 12px 16px 22px;
box-shadow: var(--shadow-pop);
}
.pf-sheet .pfs-grip {
width: 38px; height: 4px;
background: var(--border-strong);
border-radius: 2px;
margin: 0 auto 14px;
}
.pf-sheet .pfs-head {
display: flex; justify-content: space-between; align-items: center;
margin-bottom: 14px;
}
.pf-sheet .pfs-head .pfs-ttl { font-size: 16px; font-weight: 600; color: var(--fg); }
.pf-sheet .pfs-head .pfs-reset {
font-family: var(--font-mono); font-size: 12px; color: var(--accent);
cursor: pointer;
}
.pf-sheet-section { margin-bottom: 14px; }
.pf-sheet-section .pfss-label {
font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em;
text-transform: uppercase; color: var(--fg-muted);
margin-bottom: 8px;
}
.pf-sheet-section .pfss-chips {
display: flex; flex-wrap: wrap; gap: 6px;
}
.pf-sheet-section .pfss-chip {
font-size: 12px;
padding: 5px 10px;
border: 1px solid var(--border-strong);
border-radius: var(--r-pill);
background: var(--bg-elev);
color: var(--fg);
cursor: pointer;
}
.pf-sheet-section .pfss-chip.is-active {
background: var(--accent); color: #fff; border-color: var(--accent);
}
/* modal overlay (mobile) */
.pf-modal-overlay {
position: absolute; inset: 0;
background: rgba(11,44,74,0.50);
display: flex; align-items: center; justify-content: center;
padding: 20px;
}
.pf-modal {
width: 100%;
background: var(--bg-elev);
border-radius: var(--r-3);
overflow: hidden;
box-shadow: var(--shadow-pop);
}
.pf-modal .pfm-h {
padding: 18px 18px 6px;
}
.pf-modal .pfm-h .pfm-ttl { font-size: 16px; font-weight: 600; color: var(--fg); }
.pf-modal .pfm-h .pfm-sub { font-size: 12.5px; color: var(--fg-muted); margin-top: 4px; line-height: 1.5; }
.pf-modal .pfm-b { padding: 12px 18px; }
.pf-modal .pfm-f {
padding: 12px 18px;
background: var(--paper-2);
border-top: 1px solid var(--border);
display: grid; gap: 8px;
}
/* MFA input dots */
.pf-otp {
display: flex; gap: 8px; justify-content: center;
}
.pf-otp input {
width: 38px; height: 46px;
border: 1.5px solid var(--border-strong);
background: var(--bg-elev);
text-align: center;
font-family: var(--font-mono);
font-size: 18px; font-weight: 600;
color: var(--fg);
border-radius: var(--r-2);
outline: none;
}
.pf-otp input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-wash); }
/* dim-frame variant for overlays */
.phone-frame.has-overlay { position: relative; }
/* ─────────────────────────────────────────────────────────────────
CHARTS — 6 variants, pure CSS / SVG
───────────────────────────────────────────────────────────────── */
.chart-wrap {
background: var(--bg-elev);
border: 1px solid var(--border);
border-radius: var(--r-3);
padding: 18px;
display: grid;
gap: 14px;
}
.chart-wrap .ch-head {
display: flex; justify-content: space-between; align-items: flex-start;
gap: 12px;
}
.chart-wrap .ch-title {
font-size: 14px; font-weight: 600; color: var(--fg);
display: flex; align-items: baseline; gap: 8px;
}
.chart-wrap .ch-title .en {
font-size: 12px; font-weight: 400;
}
.chart-wrap .ch-sub {
font-family: var(--font-mono); font-size: 11px; color: var(--fg-muted);
letter-spacing: 0.06em;
margin-top: 2px;
}
.chart-wrap .ch-kpi {
text-align: right;
}
.chart-wrap .ch-kpi .v {
font-size: 22px; font-weight: 600; color: var(--fg);
font-variant-numeric: tabular-nums; line-height: 1.1;
}
.chart-wrap .ch-kpi .d {
font-family: var(--font-mono); font-size: 11px; color: var(--ok);
}
.chart-wrap .ch-kpi .d.is-down { color: var(--danger); }
.chart-wrap .ch-legend {
display: flex; flex-wrap: wrap; gap: 12px;
font-family: var(--font-mono); font-size: 11px;
color: var(--fg-muted);
}
.chart-wrap .ch-legend .lg { display: inline-flex; align-items: center; gap: 6px; }
.chart-wrap .ch-legend .sw {
width: 10px; height: 10px; border-radius: 2px;
display: inline-block;
}
/* 1) Vertical bar chart */
.chart-bar {
display: grid;
grid-template-rows: 1fr auto;
gap: 8px;
}
.chart-bar .ch-bars {
display: grid;
grid-auto-flow: column;
grid-auto-columns: 1fr;
align-items: end;
gap: 6px;
height: 140px;
padding: 4px 2px;
background:
linear-gradient(to top, var(--border) 0 1px, transparent 1px) 0 0/100% 33.33% repeat-y;
}
.chart-bar .b {
background: var(--accent);
border-radius: 3px 3px 0 0;
position: relative;
transition: opacity var(--t-2) var(--ease);
min-height: 4px;
}
.chart-bar .b:hover { opacity: 0.7; }
.chart-bar .b.is-warn { background: var(--warn); }
.chart-bar .b.is-danger { background: var(--danger); }
.chart-bar .b.is-muted { background: var(--border-strong); }
.chart-bar .ch-axis {
display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
gap: 6px;
font-family: var(--font-mono); font-size: 10px; color: var(--fg-muted);
text-align: center;
letter-spacing: 0.06em;
}
/* 2) Horizontal bar / ranking */
.chart-hbar { display: grid; gap: 8px; }
.chart-hbar .row {
display: grid; grid-template-columns: 100px 1fr auto;
gap: 12px; align-items: center;
font-size: 12.5px;
}
.chart-hbar .row .label { color: var(--fg); }
.chart-hbar .row .track {
height: 14px; background: var(--paper-2);
border-radius: var(--r-pill);
overflow: hidden;
position: relative;
}
.chart-hbar .row .bar {
height: 100%;
background: var(--accent);
border-radius: inherit;
}
.chart-hbar .row .bar.is-warn { background: var(--warn); }
.chart-hbar .row .bar.is-muted { background: var(--border-strong); }
.chart-hbar .row .num {
font-family: var(--font-mono); font-size: 12px;
color: var(--fg); font-variant-numeric: tabular-nums;
text-align: right; min-width: 50px;
}
/* 3) Donut */
.chart-donut-wrap {
display: grid;
grid-template-columns: auto 1fr;
gap: 18px; align-items: center;
}
.chart-donut {
--p1: 64;
--p2: 22;
--p3: 14;
--c1: var(--accent);
--c2: var(--warn);
--c3: var(--danger);
width: 120px; height: 120px;
border-radius: 50%;
background: conic-gradient(
var(--c1) 0 calc(var(--p1) * 1%),
var(--c2) 0 calc((var(--p1) + var(--p2)) * 1%),
var(--c3) 0 calc((var(--p1) + var(--p2) + var(--p3)) * 1%),
var(--border) 0
);
position: relative;
}
.chart-donut::after {
content: ''; position: absolute; inset: 18px;
background: var(--bg-elev);
border-radius: 50%;
}
.chart-donut .ctr {
position: absolute; inset: 0;
display: flex; flex-direction: column; align-items: center; justify-content: center;
z-index: 1;
}
.chart-donut .ctr .v {
font-size: 22px; font-weight: 600; color: var(--fg);
font-variant-numeric: tabular-nums; line-height: 1;
}
.chart-donut .ctr .l {
font-family: var(--font-mono); font-size: 10px; color: var(--fg-muted);
letter-spacing: 0.1em; text-transform: uppercase;
margin-top: 2px;
}
.chart-donut-rows { display: grid; gap: 8px; font-size: 12.5px; }
.chart-donut-rows .row {
display: grid; grid-template-columns: auto 1fr auto;
gap: 10px; align-items: center;
}
.chart-donut-rows .sw { width: 10px; height: 10px; border-radius: 2px; }
.chart-donut-rows .nm { color: var(--fg); }
.chart-donut-rows .v { font-family: var(--font-mono); color: var(--fg-muted); }
/* 4) Sparkline / Area chart (SVG) */
.chart-spark {
display: grid;
grid-template-columns: 1fr auto;
gap: 16px; align-items: center;
}
.chart-spark .spark-svg {
width: 100%; height: 64px;
display: block;
}
.chart-spark .spark-svg .area { fill: var(--accent-wash); }
.chart-spark .spark-svg .line { stroke: var(--accent); stroke-width: 2; fill: none; }
.chart-spark .spark-svg .dot { fill: var(--accent); }
.chart-spark .spark-svg .grid-line { stroke: var(--border); stroke-width: 0.5; stroke-dasharray: 2 3; }
.chart-spark-meta {
text-align: right;
}
.chart-spark-meta .v { font-size: 20px; font-weight: 600; color: var(--fg); font-variant-numeric: tabular-nums; line-height: 1.1; }
.chart-spark-meta .d { font-family: var(--font-mono); font-size: 11px; color: var(--ok); }
/* 5) Stacked horizontal bar */
.chart-stack {
display: grid; gap: 12px;
}
.chart-stack .row {
display: grid; gap: 6px;
}
.chart-stack .row .lbl {
display: flex; justify-content: space-between;
font-size: 12px; color: var(--fg);
}
.chart-stack .row .lbl .meta { font-family: var(--font-mono); color: var(--fg-muted); }
.chart-stack .row .bar {
display: grid;
grid-auto-flow: column;
height: 14px;
border-radius: var(--r-pill);
overflow: hidden;
background: var(--paper-2);
}
.chart-stack .row .seg { height: 100%; }
/* 6) Heatmap (mini 7×N) */
.chart-heat {
display: grid;
gap: 10px;
}
.chart-heat .grid {
display: grid;
grid-template-columns: 40px 1fr;
gap: 8px;
}
.chart-heat .labels-x {
grid-column: 2 / 3;
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 3px;
font-family: var(--font-mono); font-size: 10px;
color: var(--fg-muted); text-align: center;
}
.chart-heat .grid > .label-y {
font-family: var(--font-mono); font-size: 10px; color: var(--fg-muted);
text-align: right; padding-right: 4px; line-height: 16px;
}
.chart-heat .cells {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 3px;
}
.chart-heat .cell {
height: 16px;
background: var(--paper-2);
border-radius: 2px;
}
.chart-heat .cell.l1 { background: oklch(0.85 0.04 188); }
.chart-heat .cell.l2 { background: oklch(0.72 0.07 188); }
.chart-heat .cell.l3 { background: oklch(0.58 0.08 188); }
.chart-heat .cell.l4 { background: var(--accent); }
/* ─────────────────────────────────────────────────────────────────
FIX — sheet & modal overlays (cleaner blur, contained)
───────────────────────────────────────────────────────────────── */
/* Refined sheet — only blur enough to read */
.pf-sheet-overlay {
position: absolute; inset: 0;
background: rgba(11,44,74,0.45);
display: flex; align-items: flex-end;
justify-content: center;
z-index: 2;
}
.pf-sheet {
width: 100%;
background: var(--bg-elev);
border-radius: 18px 18px 0 0;
padding: 14px 18px 22px;
box-shadow: var(--shadow-pop);
max-height: 90%;
overflow: auto;
}
/* Modal cleaner */
.pf-modal-overlay {
position: absolute; inset: 0;
background: rgba(11,44,74,0.55);
display: flex; align-items: center; justify-content: center;
padding: 16px;
z-index: 2;
}
.pf-modal {
width: 100%;
background: var(--bg-elev);
border-radius: var(--r-3);
overflow: hidden;
box-shadow: var(--shadow-pop);
}
.pf-modal .pfm-h { padding: 18px 18px 8px; }
.pf-modal .pfm-h .pfm-ttl { font-size: 16px; font-weight: 600; color: var(--fg); line-height: 1.35; }
.pf-modal .pfm-h .pfm-sub { font-size: 12.5px; color: var(--fg-muted); margin-top: 6px; line-height: 1.55; }
.pf-modal .pfm-b { padding: 8px 18px 14px; }
.pf-modal .pfm-f {
padding: 12px 18px 14px;
background: var(--paper-2);
border-top: 1px solid var(--border);
display: grid; gap: 8px;
}
/* mini chart bar (mobile dashboard reuse) */
.pf-chart .pfc-bar { transition: opacity var(--t-2) var(--ease); }
.pf-chart .pfc-bar:hover { opacity: 0.7; }
/* ─────────────────────────────────────────────────────────────────
THUMBNAIL CARD VIEW & LIST VIEW
───────────────────────────────────────────────────────────────── */
/* card grid */
.thumb-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: 16px;
width: 100%;
}
/* SQUARE-ISH MINI-FEATURED CARDS
each card = a mini version of the hero featured card.
all info inside: type · status · title · code · visual · date · open. */
.thumb-card {
background: var(--bg-elev);
border: 1px solid var(--border);
border-radius: var(--r-3);
overflow: hidden;
cursor: pointer;
display: grid;
grid-template-rows: auto 1fr auto;
aspect-ratio: 4 / 5;
transition: border-color var(--t-2) var(--ease), transform var(--t-2) var(--ease), box-shadow var(--t-2) var(--ease);
position: relative;
}
.thumb-card:hover {
border-color: var(--accent);
transform: translateY(-2px);
box-shadow: var(--shadow-2);
}
/* compliance accent strip on top edge */
.thumb-card::before {
content: ''; position: absolute; top: 0; left: 0; right: 0;
height: 3px; background: var(--accent);
z-index: 1;
}
.thumb-card.is-warn::before { background: var(--warn); }
.thumb-card.is-danger::before { background: var(--danger); }
.thumb-card.is-archive::before { background: var(--muted-2); }
.thumb-card.is-info::before { background: var(--info); }
/* HEADER — type tag + status */
.thumb-card .tc-head {
display: flex; justify-content: space-between; align-items: center;
padding: 14px 16px 0;
}
.thumb-card .tc-type {
display: inline-flex; align-items: center; gap: 5px;
font-family: var(--font-mono); font-size: 11px;
color: var(--accent);
background: var(--accent-wash);
padding: 3px 10px;
border-radius: var(--r-pill);
letter-spacing: 0.04em;
font-weight: 600;
}
.thumb-card .tc-type::before { content: '⟨/⟩'; opacity: 0.7; font-weight: 400; }
.thumb-card.is-warn .tc-type { color: var(--warn); background: var(--warn-wash); }
.thumb-card.is-danger .tc-type { color: var(--danger); background: var(--danger-wash); }
/* status pill */
.thumb-card .tc-status {
display: inline-flex; align-items: center; gap: 5px;
font-family: var(--font-sans); font-size: 11px; font-weight: 600;
padding: 3px 10px;
border-radius: var(--r-pill);
color: var(--ok); background: transparent;
letter-spacing: 0.04em;
}
.thumb-card .tc-status .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ok); }
.thumb-card.is-warn .tc-status { color: var(--warn); }
.thumb-card.is-warn .tc-status .dot { background: var(--warn); }
.thumb-card.is-danger .tc-status { color: var(--danger); }
.thumb-card.is-danger .tc-status .dot { background: var(--danger); }
.thumb-card.is-archive .tc-status { color: var(--muted-2); }
.thumb-card.is-archive .tc-status .dot { background: var(--muted-2); }
.thumb-card.is-info .tc-status { color: var(--info); }
.thumb-card.is-info .tc-status .dot { background: var(--info); }
/* BODY — eyebrow + title + code + visual */
.thumb-card .tc-body {
padding: 14px 16px;
display: grid;
gap: 6px;
align-content: start;
}
.thumb-card .tc-eyebrow {
font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em;
text-transform: uppercase; color: var(--accent);
font-weight: 600;
}
.thumb-card.is-warn .tc-eyebrow { color: var(--warn); }
.thumb-card.is-danger .tc-eyebrow { color: var(--danger); }
.thumb-card .tc-title {
font-size: 17px; font-weight: 700; color: var(--fg);
line-height: 1.22; letter-spacing: -0.01em;
margin-top: 2px;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
overflow: hidden;
}
.thumb-card .tc-code {
font-family: var(--font-mono); font-size: 12px;
color: var(--accent); letter-spacing: 0.02em;
font-weight: 500;
margin-top: 2px;
}
.thumb-card.is-warn .tc-code { color: var(--warn); }
.thumb-card.is-danger .tc-code { color: var(--danger); }
/* mini visual block — replaces the big top thumbnail */
.thumb-card .tc-visual {
margin-top: 10px;
padding: 10px 12px;
background: var(--paper-2);
border-radius: var(--r-2);
display: grid; gap: 4px;
position: relative;
overflow: hidden;
}
.thumb-card.is-warn .tc-visual { background: var(--warn-wash); }
.thumb-card.is-danger .tc-visual { background: var(--danger-wash); }
.thumb-card .tc-visual .v-spark {
height: 28px; position: relative;
display: block;
}
.thumb-card .tc-visual .v-spark svg { width: 100%; height: 100%; display: block; }
.thumb-card .tc-visual .v-meta {
display: flex; justify-content: space-between;
font-family: var(--font-mono); font-size: 10.5px;
color: var(--fg-muted); letter-spacing: 0.04em;
}
.thumb-card .tc-visual .v-meta strong {
color: var(--accent); font-weight: 600;
}
.thumb-card.is-warn .tc-visual .v-meta strong { color: var(--warn); }
.thumb-card.is-danger .tc-visual .v-meta strong { color: var(--danger); }
/* video variant */
.thumb-card.is-video .tc-visual {
background: var(--ink);
min-height: 60px;
display: flex; align-items: center; justify-content: center;
}
.thumb-card.is-video .tc-visual::before {
content: ''; width: 0; height: 0;
border-left: 14px solid #fff;
border-top: 9px solid transparent;
border-bottom: 9px solid transparent;
}
.thumb-card.is-video .tc-visual .v-meta {
position: absolute; bottom: 6px; right: 8px; left: 8px;
color: rgba(255,255,255,0.7);
}
.thumb-card.is-video .tc-visual .v-meta strong { color: #fff; }
/* FOOTER — date + open button */
.thumb-card .tc-foot {
display: flex; justify-content: space-between; align-items: center;
padding: 12px 16px;
border-top: 1px solid var(--border);
background: var(--paper-2);
font-family: var(--font-mono); font-size: 11px;
color: var(--fg-muted);
letter-spacing: 0.04em;
}
.thumb-card .tc-foot .tc-open {
display: inline-flex; align-items: center; gap: 6px;
font-family: var(--font-sans); font-size: 12px; font-weight: 600;
color: var(--fg); padding: 4px 10px;
border-radius: var(--r-2);
background: var(--bg-elev);
border: 1px solid var(--border);
transition: background var(--t-1) var(--ease), border-color var(--t-1) var(--ease), color var(--t-1) var(--ease);
}
.thumb-card:hover .tc-foot .tc-open {
background: var(--accent); color: #fff; border-color: var(--accent);
}
.thumb-card.is-warn:hover .tc-foot .tc-open { background: var(--warn); border-color: var(--warn); }
.thumb-card.is-danger:hover .tc-foot .tc-open { background: var(--danger); border-color: var(--danger); }
/* featured "is-feat" variant — navy filled, used inside the grid as accent */
.thumb-card.is-feat {
background: var(--navy);
border-color: var(--navy);
}
.thumb-card.is-feat::before { background: var(--accent-soft); }
.thumb-card.is-feat .tc-type { color: var(--accent-soft); background: rgba(95,208,207,0.14); }
.thumb-card.is-feat .tc-status { color: var(--accent-soft); }
.thumb-card.is-feat .tc-status .dot { background: var(--accent-soft); }
.thumb-card.is-feat .tc-eyebrow { color: var(--accent-soft); }
.thumb-card.is-feat .tc-title { color: #fff; }
.thumb-card.is-feat .tc-code { color: var(--accent-soft); }
.thumb-card.is-feat .tc-visual { background: rgba(255,255,255,0.06); }
.thumb-card.is-feat .tc-visual .v-meta { color: rgba(255,255,255,0.55); }
.thumb-card.is-feat .tc-visual .v-meta strong { color: var(--accent-soft); }
.thumb-card.is-feat .tc-foot { background: rgba(0,0,0,0.16); border-top-color: rgba(255,255,255,0.08); color: rgba(255,255,255,0.55); }
.thumb-card.is-feat .tc-foot .tc-open { background: var(--accent); color: #fff; border-color: var(--accent); }
.thumb-card.is-feat:hover .tc-foot .tc-open { background: var(--accent-bright); border-color: var(--accent-bright); }
/* featured hero card */
.thumb-hero {
display: grid;
grid-template-columns: 1fr 1.1fr;
gap: 0;
background: var(--bg-elev);
border: 1px solid var(--border);
border-radius: var(--r-3);
overflow: hidden;
margin-bottom: 16px;
}
.thumb-hero .th-side {
padding: 26px 28px;
display: grid;
grid-template-rows: auto 1fr auto;
gap: 10px;
background: var(--bg-elev);
}
.thumb-hero .th-eyebrow {
font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em;
text-transform: uppercase; color: var(--fg-muted);
display: flex; align-items: center; gap: 12px;
}
.thumb-hero .th-eyebrow::after {
content: ''; flex: 1; height: 1px; background: var(--border);
}
.thumb-hero .th-title {
font-size: 28px; font-weight: 700; color: var(--fg);
letter-spacing: -0.018em;
line-height: 1.15;
}
.thumb-hero .th-meta {
display: flex; flex-wrap: wrap; gap: 10px 16px;
font-family: var(--font-mono); font-size: 12px;
color: var(--fg-muted);
margin: 8px 0;
}
.thumb-hero .th-meta strong { color: var(--accent); font-weight: 500; letter-spacing: 0.04em; }
.thumb-hero .th-actions {
display: flex; gap: 8px; flex-wrap: wrap;
margin-top: 8px;
}
.thumb-hero .th-thumb {
position: relative;
min-height: 280px;
background: linear-gradient(135deg, oklch(0.96 0.005 248) 0%, oklch(0.92 0.01 188) 100%);
display: flex; align-items: center; justify-content: center;
border-left: 1px solid var(--border);
padding: 30px;
}
.thumb-hero .th-thumb .th-mock {
width: 100%; max-width: 380px;
background: var(--bg-elev);
border-radius: var(--r-2);
padding: 20px 22px;
box-shadow: var(--shadow-2);
display: grid; gap: 10px;
}
.thumb-hero .th-thumb .th-mock .ti-tag {
font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em;
text-transform: uppercase; color: var(--accent);
}
.thumb-hero .th-thumb .th-mock .ti-h {
font-size: 22px; font-weight: 700; color: var(--fg);
letter-spacing: -0.01em; line-height: 1.2;
}
.thumb-hero .th-thumb .th-mock .ti-desc {
font-size: 11.5px; color: var(--fg-muted);
}
.thumb-hero .th-thumb .th-mock .ti-chart {
height: 60px; margin-top: 4px;
background:
linear-gradient(180deg, var(--accent-wash) 0%, transparent 100%);
border-radius: 4px;
position: relative;
overflow: hidden;
}
.thumb-hero .th-thumb .th-mock .ti-chart::after {
content: '';
position: absolute; bottom: 0; left: 0; right: 0; height: 100%;
background:
radial-gradient(circle at 90% 12%, var(--accent) 3px, transparent 3.5px),
linear-gradient(to right,
transparent 0%, transparent 8%, var(--accent) 8%, var(--accent) 9%, transparent 9%,
transparent 100%);
mask: linear-gradient(to bottom, black, transparent 90%);
}
.thumb-hero .th-thumb .th-mock .ti-dots {
display: flex; gap: 6px; margin-top: 4px;
font-family: var(--font-mono); font-size: 10px; color: var(--fg-muted);
}
.thumb-hero .th-thumb .th-mock .ti-dots span { display: inline-flex; align-items: center; gap: 4px; }
.thumb-hero .th-thumb .th-mock .ti-dots .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
/* view toggle */
.view-toolbar {
display: flex; justify-content: space-between; align-items: center;
gap: 14px; flex-wrap: wrap;
padding: 12px 14px;
background: var(--bg-elev);
border: 1px solid var(--border);
border-radius: var(--r-2);
margin-bottom: 14px;
}
.view-toolbar .vt-left { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.view-toolbar .vt-right { display: flex; gap: 8px; align-items: center; }
.view-toolbar .vt-search {
width: 240px;
}
/* thumbnail LIST view */
.thumb-list {
background: var(--bg-elev);
border: 1px solid var(--border);
border-radius: var(--r-3);
overflow: hidden;
}
.thumb-list .tl-row {
display: grid;
grid-template-columns: 24px 72px 1fr 90px 96px;
gap: 16px;
align-items: center;
padding: 12px 18px;
border-bottom: 1px solid var(--border);
cursor: pointer;
transition: background var(--t-1) var(--ease);
}
.thumb-list .tl-row:last-child { border-bottom: none; }
.thumb-list .tl-row:hover { background: var(--accent-wash); }
.thumb-list .tl-row.is-selected { background: var(--accent-wash); }
.thumb-list .tl-row .check { display: inline-flex; }
.thumb-list .tl-row .tl-thumb {
width: 72px; height: 48px;
border-radius: var(--r-2);
background: linear-gradient(135deg, oklch(0.96 0.005 248) 0%, oklch(0.92 0.01 188) 100%);
border: 1px solid var(--border);
position: relative;
overflow: hidden;
flex-shrink: 0;
}
.thumb-list .tl-row .tl-thumb.is-navy {
background: linear-gradient(135deg, var(--navy) 0%, #143b5e 100%);
border-color: var(--navy);
}
.thumb-list .tl-row .tl-thumb.is-teal {
background: linear-gradient(135deg, var(--accent) 0%, var(--teal-bright) 100%);
border-color: var(--accent);
}
.thumb-list .tl-row .tl-thumb::after {
content: '';
position: absolute; inset: 8px;
background:
linear-gradient(var(--bg-elev), var(--bg-elev)) padding-box,
linear-gradient(135deg, rgba(0,0,0,0.08), transparent) border-box;
border-radius: 2px;
opacity: 0.5;
}
.thumb-list .tl-row .tl-thumb.is-navy::after,
.thumb-list .tl-row .tl-thumb.is-teal::after {
background: rgba(255,255,255,0.12);
}
.thumb-list .tl-row .tl-main { min-width: 0; }
.thumb-list .tl-row .tl-tag {
display: inline-flex; align-items: center; gap: 4px;
font-family: var(--font-mono); font-size: 11px;
color: var(--accent);
background: var(--accent-wash);
padding: 2px 8px;
border-radius: var(--r-pill);
margin-bottom: 6px;
letter-spacing: 0.04em;
}
.thumb-list .tl-row .tl-tag::before { content: '⟨/⟩'; opacity: 0.7; }
.thumb-list .tl-row .tl-ttl {
font-size: 14px; font-weight: 600; color: var(--fg);
line-height: 1.4;
display: flex; align-items: baseline; gap: 8px;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.thumb-list .tl-row .tl-meta {
font-family: var(--font-mono); font-size: 12px; color: var(--fg-muted);
margin-top: 4px;
display: flex; gap: 12px; flex-wrap: wrap;
}
.thumb-list .tl-row .tl-meta .tl-code { color: var(--accent); }
.thumb-list .tl-row .tl-status { flex-shrink: 0; justify-self: start; }
.thumb-list .tl-row .tl-actions {
display: inline-flex; gap: 2px; opacity: 0;
transition: opacity var(--t-2) var(--ease);
justify-self: end;
}
.thumb-list .tl-row:hover .tl-actions { opacity: 1; }
.thumb-list .tl-row .tl-actions .iconbtn { width: 28px; height: 28px; }
/* batch action toolbar */
.batch-bar {
display: flex; justify-content: space-between; align-items: center;
padding: 10px 18px;
background: var(--navy);
color: #fff;
border-radius: var(--r-2);
margin-bottom: 12px;
font-size: 13px;
}
.batch-bar .bb-count {
display: inline-flex; align-items: center; gap: 10px;
font-family: var(--font-mono); letter-spacing: 0.04em;
}
.batch-bar .bb-count strong { color: var(--accent-soft); font-weight: 700; }
.batch-bar .bb-actions { display: inline-flex; gap: 6px; }
.batch-bar .bb-actions .btn { background: transparent; color: #fff; border-color: rgba(255,255,255,0.2); }
.batch-bar .bb-actions .btn:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.4); }
/* ─────────────────────────────────────────────────────────────────
MOBILE thumbnail card & list — compact variants for phone frames
───────────────────────────────────────────────────────────────── */
.pf-thumb-grid {
display: grid;
grid-template-columns: 1fr;
gap: 10px;
margin-bottom: 6px;
}
.pf-thumb-card {
background: var(--bg-elev);
border: 1px solid var(--border);
border-radius: var(--r-2);
overflow: hidden;
display: grid;
grid-template-rows: auto auto auto;
position: relative;
}
.pf-thumb-card::before {
content: ''; position: absolute; top: 0; left: 0; right: 0;
height: 2px; background: var(--accent); z-index: 1;
}
.pf-thumb-card.is-warn::before { background: var(--warn); }
.pf-thumb-card.is-danger::before { background: var(--danger); }
.pf-thumb-card.is-archive::before { background: var(--muted-2); }
.pf-thumb-card .pftc-head {
display: flex; justify-content: space-between; align-items: center;
padding: 10px 12px 0;
}
.pf-thumb-card .pftc-type {
display: inline-flex; align-items: center; gap: 4px;
font-family: var(--font-mono); font-size: 10px;
color: var(--accent); background: var(--accent-wash);
padding: 2px 8px; border-radius: var(--r-pill);
font-weight: 600; letter-spacing: 0.04em;
}
.pf-thumb-card .pftc-type::before { content: '⟨/⟩'; opacity: 0.7; }
.pf-thumb-card.is-warn .pftc-type { color: var(--warn); background: var(--warn-wash); }
.pf-thumb-card.is-danger .pftc-type { color: var(--danger); background: var(--danger-wash); }
.pf-thumb-card .pftc-status {
display: inline-flex; align-items: center; gap: 4px;
font-size: 10.5px; font-weight: 600;
color: var(--ok); padding: 2px 8px;
letter-spacing: 0.02em;
}
.pf-thumb-card .pftc-status .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--ok); }
.pf-thumb-card.is-warn .pftc-status { color: var(--warn); }
.pf-thumb-card.is-warn .pftc-status .dot { background: var(--warn); }
.pf-thumb-card.is-danger .pftc-status { color: var(--danger); }
.pf-thumb-card.is-danger .pftc-status .dot { background: var(--danger); }
.pf-thumb-card.is-archive .pftc-status { color: var(--muted-2); }
.pf-thumb-card.is-archive .pftc-status .dot { background: var(--muted-2); }
.pf-thumb-card .pftc-body {
padding: 10px 12px 12px;
display: grid; gap: 4px;
}
.pf-thumb-card .pftc-eyebrow {
font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.14em;
text-transform: uppercase; color: var(--accent); font-weight: 600;
}
.pf-thumb-card.is-warn .pftc-eyebrow { color: var(--warn); }
.pf-thumb-card.is-danger .pftc-eyebrow { color: var(--danger); }
.pf-thumb-card .pftc-title {
font-size: 14px; font-weight: 700; color: var(--fg);
line-height: 1.25; letter-spacing: -0.005em;
margin-top: 2px;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
overflow: hidden;
}
.pf-thumb-card .pftc-code {
font-family: var(--font-mono); font-size: 10.5px;
color: var(--accent); margin-top: 2px;
}
.pf-thumb-card.is-warn .pftc-code { color: var(--warn); }
.pf-thumb-card.is-danger .pftc-code { color: var(--danger); }
.pf-thumb-card .pftc-visual {
margin-top: 6px;
padding: 7px 9px;
background: var(--paper-2);
border-radius: var(--r-1);
display: grid; gap: 3px;
position: relative;
overflow: hidden;
}
.pf-thumb-card.is-warn .pftc-visual { background: var(--warn-wash); }
.pf-thumb-card.is-danger .pftc-visual { background: var(--danger-wash); }
.pf-thumb-card .pftc-visual .v-spark { height: 18px; }
.pf-thumb-card .pftc-visual .v-spark svg { width: 100%; height: 100%; display: block; }
.pf-thumb-card .pftc-visual .v-meta {
display: flex; justify-content: space-between;
font-family: var(--font-mono); font-size: 9.5px;
color: var(--fg-muted); letter-spacing: 0.04em;
}
.pf-thumb-card .pftc-visual .v-meta strong { color: var(--accent); font-weight: 600; }
.pf-thumb-card.is-warn .pftc-visual .v-meta strong { color: var(--warn); }
.pf-thumb-card.is-danger .pftc-visual .v-meta strong { color: var(--danger); }
.pf-thumb-card .pftc-foot {
display: flex; justify-content: space-between; align-items: center;
padding: 9px 12px;
border-top: 1px solid var(--border);
background: var(--paper-2);
font-family: var(--font-mono); font-size: 10.5px;
color: var(--fg-muted);
}
.pf-thumb-card .pftc-foot .pftc-open {
display: inline-flex; align-items: center; gap: 4px;
font-family: var(--font-sans); font-size: 11px; font-weight: 600;
color: var(--accent);
}
.pf-thumb-card.is-warn .pftc-foot .pftc-open { color: var(--warn); }
.pf-thumb-card.is-danger .pftc-foot .pftc-open { color: var(--danger); }
/* featured mobile card */
.pf-thumb-card.is-feat { background: var(--navy); border-color: var(--navy); }
.pf-thumb-card.is-feat::before { background: var(--accent-soft); }
.pf-thumb-card.is-feat .pftc-type { color: var(--accent-soft); background: rgba(95,208,207,0.14); }
.pf-thumb-card.is-feat .pftc-status { color: var(--accent-soft); }
.pf-thumb-card.is-feat .pftc-status .dot { background: var(--accent-soft); }
.pf-thumb-card.is-feat .pftc-eyebrow { color: var(--accent-soft); }
.pf-thumb-card.is-feat .pftc-title { color: #fff; }
.pf-thumb-card.is-feat .pftc-code { color: var(--accent-soft); }
.pf-thumb-card.is-feat .pftc-visual { background: rgba(255,255,255,0.06); }
.pf-thumb-card.is-feat .pftc-visual .v-meta { color: rgba(255,255,255,0.55); }
.pf-thumb-card.is-feat .pftc-visual .v-meta strong { color: var(--accent-soft); }
.pf-thumb-card.is-feat .pftc-foot { background: rgba(0,0,0,0.16); border-top-color: rgba(255,255,255,0.08); color: rgba(255,255,255,0.55); }
.pf-thumb-card.is-feat .pftc-foot .pftc-open { color: var(--accent-soft); }
/* mobile thumbnail LIST */
.pf-thumb-list {
display: grid;
background: var(--bg-elev);
border: 1px solid var(--border);
border-radius: var(--r-2);
overflow: hidden;
}
.pf-thumb-list .pftl-row {
display: grid;
grid-template-columns: 44px 1fr auto;
gap: 10px;
align-items: center;
padding: 10px 12px;
border-bottom: 1px solid var(--border);
position: relative;
min-height: 56px;
}
.pf-thumb-list .pftl-row:last-child { border-bottom: none; }
.pf-thumb-list .pftl-row::before {
content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
background: var(--accent);
opacity: 0;
}
.pf-thumb-list .pftl-row.is-warn::before { background: var(--warn); opacity: 1; }
.pf-thumb-list .pftl-row.is-danger::before { background: var(--danger); opacity: 1; }
.pf-thumb-list .pftl-row.is-active::before { opacity: 1; }
.pf-thumb-list .pftl-thumb {
width: 44px; height: 30px;
border-radius: var(--r-1);
background: linear-gradient(135deg, oklch(0.96 0.005 248), oklch(0.92 0.01 188));
border: 1px solid var(--border);
position: relative;
}
.pf-thumb-list .pftl-thumb.is-navy { background: linear-gradient(135deg, var(--navy), #143b5e); border-color: var(--navy); }
.pf-thumb-list .pftl-thumb.is-teal { background: linear-gradient(135deg, var(--accent), var(--teal-bright)); border-color: var(--accent); }
.pf-thumb-list .pftl-thumb.is-ink { background: var(--ink); border-color: var(--ink); }
.pf-thumb-list .pftl-main { min-width: 0; }
.pf-thumb-list .pftl-tag {
font-family: var(--font-mono); font-size: 9.5px; color: var(--accent);
letter-spacing: 0.06em; font-weight: 600;
}
.pf-thumb-list .pftl-row.is-warn .pftl-tag { color: var(--warn); }
.pf-thumb-list .pftl-row.is-danger .pftl-tag { color: var(--danger); }
.pf-thumb-list .pftl-ttl {
font-size: 13px; font-weight: 600; color: var(--fg);
line-height: 1.3; margin-top: 1px;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pf-thumb-list .pftl-meta {
font-family: var(--font-mono); font-size: 10px; color: var(--fg-muted);
margin-top: 2px;
display: flex; gap: 6px; flex-wrap: wrap;
}
.pf-thumb-list .pftl-meta .code { color: var(--accent); }
.pf-thumb-list .pftl-status {
flex-shrink: 0;
display: inline-flex; flex-direction: column; align-items: flex-end; gap: 2px;
}
.pf-thumb-list .pftl-status .pftl-badge {
display: inline-flex; align-items: center; gap: 4px;
font-size: 10px; font-weight: 600; color: var(--ok);
}
.pf-thumb-list .pftl-status .pftl-badge .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--ok); }
.pf-thumb-list .pftl-row.is-warn .pftl-status .pftl-badge { color: var(--warn); }
.pf-thumb-list .pftl-row.is-warn .pftl-status .pftl-badge .dot { background: var(--warn); }
.pf-thumb-list .pftl-row.is-danger .pftl-status .pftl-badge { color: var(--danger); }
.pf-thumb-list .pftl-row.is-danger .pftl-status .pftl-badge .dot { background: var(--danger); }
.pf-thumb-list .pftl-status .pftl-chev { color: var(--fg-muted); font-size: 14px; line-height: 1; }
/* ─────────────────────────────────────────────────────────────────
PATTERN — Weekly Planner, Customer list, Main-menu sidebar
───────────────────────────────────────────────────────────────── */
/* ── Planner ── */
.planner {
background: var(--bg-elev);
border: 1px solid var(--border);
border-radius: var(--r-3);
overflow: hidden;
width: 100%;
}
.planner-toolbar {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
padding: 10px 16px;
gap: 14px;
border-bottom: 1px solid var(--border);
background: var(--paper-2);
}
.planner-toolbar .pt-nav { display: inline-flex; gap: 6px; }
.planner-toolbar .pt-range {
text-align: center;
font-family: var(--font-mono); font-size: 13px;
color: var(--fg); letter-spacing: 0.02em;
font-weight: 600;
}
.planner-toolbar .pt-filters {
display: inline-flex; gap: 14px; align-items: center;
font-size: 12px;
}
.planner-toolbar .pt-filters .pf-item {
display: inline-flex; align-items: center; gap: 6px;
color: var(--fg-muted); cursor: pointer;
}
.planner-toolbar .pt-filters .pf-toggle {
display: inline-flex; align-items: center; gap: 6px;
padding-right: 12px;
border-right: 1px solid var(--border);
}
.planner-toolbar .pt-filters .pf-swatch {
width: 12px; height: 12px; border-radius: 2px;
border: 1px solid var(--border);
}
.planner-toolbar .pt-filters .pf-swatch.is-warn { background: var(--warn-wash); border-color: var(--warn); }
.planner-toolbar .pt-filters .pf-swatch.is-plan {
background: var(--bg-elev); border-color: var(--navy);
}
.planner-toolbar .pt-filters .pf-swatch.is-draft {
background: var(--bg-elev); border: 1px dashed var(--border-strong);
}
.planner-toolbar .pt-filters .pf-swatch.is-done {
background: var(--navy); border-color: var(--navy);
}
.planner-day-row {
display: grid;
grid-template-columns: 60px repeat(5, 1fr);
border-bottom: 1px solid var(--border);
background: var(--paper-2);
}
.planner-day-row .pday-time-cell { background: var(--paper-2); }
.planner-day-row .pday {
padding: 12px 16px;
display: flex; align-items: center; gap: 8px;
border-left: 1px solid var(--border);
font-size: 13px;
color: var(--fg);
}
.planner-day-row .pday .pd-label { font-weight: 600; }
.planner-day-row .pday .pd-num {
font-family: var(--font-mono); font-weight: 700;
font-size: 14px; color: var(--fg);
}
.planner-day-row .pday .pd-pin {
display: inline-flex; align-items: center; gap: 4px;
font-family: var(--font-mono); font-size: 11px;
background: var(--navy); color: #fff;
padding: 2px 6px;
border-radius: var(--r-pill);
}
.planner-day-row .pday .pd-pin .num {
display: inline-flex; align-items: center; justify-content: center;
width: 16px; height: 16px; border-radius: 50%;
background: var(--accent); color: #fff;
font-size: 10px; font-weight: 700;
margin-right: 2px;
}
.planner-day-row .pday.is-today { background: var(--accent-wash); }
.planner-allday {
display: grid;
grid-template-columns: 60px repeat(5, 1fr);
border-bottom: 1px solid var(--border);
min-height: 32px;
}
.planner-allday .pad-label {
font-family: var(--font-mono); font-size: 11px; color: var(--fg-muted);
padding: 8px 12px;
text-align: right;
}
.planner-allday .pad-cell {
border-left: 1px solid var(--border);
padding: 4px 6px;
}
.planner-grid {
display: grid;
grid-template-columns: 60px repeat(5, 1fr);
}
.planner-row {
display: contents;
}
.planner-row > .pt-time {
font-family: var(--font-mono); font-size: 11px;
color: var(--fg-muted);
padding: 6px 12px 0;
text-align: right;
border-top: 1px solid var(--border);
background: var(--paper-2);
}
.planner-row > .pt-cell {
height: 84px;
border-top: 1px solid var(--border);
border-left: 1px solid var(--border);
padding: 4px;
position: relative;
}
.planner-row > .pt-cell.is-blocked { background: var(--warn-wash); }
/* Event blocks inside planner cells */
.pev {
display: grid;
grid-template-columns: 14px auto 1fr;
align-items: start;
gap: 6px;
padding: 7px 9px 8px;
background: var(--bg-elev);
border: 1px solid var(--navy);
border-radius: var(--r-2);
font-size: 11.5px;
line-height: 1.4;
cursor: pointer;
position: relative;
transition: box-shadow var(--t-1) var(--ease);
}
.pev:hover { box-shadow: var(--shadow-1); }
.pev .grip {
width: 8px; height: 14px;
background:
radial-gradient(circle, var(--fg-muted) 1px, transparent 1.2px) 0 0/4px 4px;
cursor: grab; opacity: 0.5;
margin-top: 1px;
}
.pev .grade {
width: 16px; height: 16px; border-radius: 50%;
background: var(--ok); color: #fff;
display: inline-flex; align-items: center; justify-content: center;
font-size: 10px; font-weight: 700; font-family: var(--font-mono);
margin-top: 1px;
}
.pev .grade.b { background: var(--warn); }
.pev .grade.c { background: var(--muted-2); }
.pev .pev-main { min-width: 0; }
.pev .pev-name {
font-weight: 600; color: var(--fg);
}
.pev .pev-name .clinic {
font-weight: 400; color: var(--fg-muted);
}
.pev .pev-count {
display: inline-block;
margin-top: 6px;
padding: 2px 8px;
background: var(--bg-elev);
border: 1px solid var(--border-strong);
border-radius: var(--r-1);
font-family: var(--font-mono); font-size: 11px;
color: var(--fg);
letter-spacing: 0.04em;
min-width: 48px;
text-align: center;
}
/* variants */
.pev.is-done {
background: var(--navy); color: #fff;
border-color: var(--navy);
grid-template-columns: 14px auto 1fr;
}
.pev.is-done .grip { background: radial-gradient(circle, rgba(255,255,255,0.5) 1px, transparent 1.2px) 0 0/4px 4px; }
.pev.is-done .pev-name { color: #fff; }
.pev.is-done .pev-name .clinic { color: rgba(255,255,255,0.6); }
.pev.is-done .pev-count { display: none; }
.pev.is-draft {
background: var(--bg-elev);
border: 1px dashed var(--border-strong);
}
.pev.is-draft .pev-name { color: var(--fg-muted); }
.pev.is-draft .pev-name .clinic { color: var(--fg-muted); }
.pev.is-block {
background: transparent;
border: 1px solid var(--warn);
color: var(--warn);
grid-template-columns: 1fr auto;
}
.pev.is-block .grip, .pev.is-block .grade { display: none; }
.pev.is-block .pev-name { color: var(--warn); }
.pev.is-block .pev-name .clinic { color: var(--warn); opacity: 0.7; }
.pev.is-block .pev-count { display: none; }
.pev.is-block .trash {
color: var(--warn); opacity: 0.6;
cursor: pointer; font-size: 14px;
}
.pev.is-block .trash:hover { opacity: 1; }
/* spanning event positioned over multiple time cells (4hr) */
.pev.span-block {
position: absolute;
left: 4px; right: 4px;
top: 4px;
height: calc((4 * 84px) - 8px);
z-index: 5;
align-content: start;
}
/* ── Customer list ── */
.cust-list {
background: var(--bg-elev);
border: 1px solid var(--border);
border-radius: var(--r-3);
width: 100%;
max-width: 280px;
overflow: hidden;
}
.cust-list .cl-head {
padding: 14px 16px 10px;
border-bottom: 1px solid var(--border);
}
.cust-list .cl-ttl {
font-size: 13px; font-weight: 600; color: var(--fg);
margin-bottom: 10px;
letter-spacing: 0.02em;
}
.cust-list .cl-ttl .count {
font-family: var(--font-mono); font-weight: 400; color: var(--fg-muted);
margin-left: 4px;
}
.cust-list .cl-search { margin-bottom: 6px; }
.cust-list .cl-sort {
display: flex; justify-content: space-between; align-items: center;
margin-top: 4px;
padding: 4px 12px;
border: 1px solid var(--border);
border-radius: var(--r-2);
cursor: pointer;
background: var(--bg-elev);
font-family: var(--font-mono); font-size: 11px;
color: var(--fg-muted);
height: 28px;
}
.cust-list .cl-sort .arr { font-size: 10px; }
.cust-list .cl-body {
max-height: 540px;
overflow-y: auto;
}
.cust-row {
display: grid;
grid-template-columns: 10px 18px 1fr auto;
gap: 8px;
align-items: start;
padding: 11px 14px 12px;
border-bottom: 1px solid var(--border);
cursor: grab;
}
.cust-row:hover { background: var(--accent-wash); }
.cust-row .grip {
width: 8px; height: 16px;
background: radial-gradient(circle, var(--fg-muted) 1px, transparent 1.2px) 0 0/4px 4px;
opacity: 0.4;
margin-top: 2px;
}
.cust-row .grade {
width: 16px; height: 16px; border-radius: 50%;
background: var(--ok); color: #fff;
display: inline-flex; align-items: center; justify-content: center;
font-size: 10px; font-weight: 700; font-family: var(--font-mono);
margin-top: 1px;
flex-shrink: 0;
}
.cust-row .grade.b { background: var(--warn); }
.cust-row .grade.c { background: var(--muted-2); }
.cust-row .cust-main { min-width: 0; }
.cust-row .cust-top {
display: flex; justify-content: space-between; align-items: center;
gap: 6px;
}
.cust-row .cust-name {
font-size: 13px; font-weight: 600; color: var(--fg);
}
.cust-row .cust-pct {
font-family: var(--font-mono); font-size: 11px;
color: var(--fg-muted); font-weight: 600;
flex-shrink: 0;
}
.cust-row .cust-pct.is-hot { color: var(--danger); }
.cust-row .cust-info {
font-size: 11px; color: var(--fg-muted);
margin-top: 2px;
line-height: 1.4;
}
.cust-row .cust-info .speciality { color: var(--fg); font-weight: 500; }
.cust-row .cust-info .bracket { color: var(--accent); }
.cust-row .cust-progress {
margin-top: 6px;
display: flex; align-items: center; gap: 10px;
}
.cust-row .cust-progress .cp-pill {
font-family: var(--font-mono); font-size: 10.5px;
font-weight: 600;
padding: 1px 8px;
border-radius: var(--r-1);
background: var(--bg-elev);
border: 1px solid var(--border-strong);
color: var(--fg);
}
.cust-row .cust-progress .cp-pill.is-hot {
border-color: var(--danger); color: var(--danger);
position: relative;
}
.cust-row .cust-progress .cp-pill.is-hot::after {
content: ''; position: absolute;
left: 25%; right: 35%; bottom: -2px;
height: 1.5px; background: var(--danger);
}
.cust-row .cust-progress .cp-left {
font-family: var(--font-mono); font-size: 10.5px;
color: var(--fg-muted);
}
.cust-row .cust-progress .cp-left strong { color: var(--fg); font-weight: 500; }
.cust-list .cl-foot {
padding: 10px 16px;
border-top: 1px solid var(--border);
background: var(--paper-2);
font-family: var(--font-mono); font-size: 11px;
color: var(--fg-muted);
text-align: center;
display: flex; justify-content: center; align-items: center; gap: 6px;
}
/* ── Main menu sidebar ── */
.mm-sidebar {
width: 100%; max-width: 240px;
background: var(--bg-elev);
border: 1px solid var(--border);
border-radius: var(--r-3);
overflow: hidden;
display: grid;
grid-template-rows: auto 1fr auto;
min-height: 600px;
}
.mm-sidebar .mm-search-wrap {
padding: 14px 14px 10px;
border-bottom: 1px solid var(--border);
}
.mm-sidebar .mm-search {
display: grid; grid-template-columns: auto 1fr;
gap: 8px; align-items: center;
padding: 7px 10px;
background: var(--paper-2);
border-radius: var(--r-2);
}
.mm-sidebar .mm-search svg { color: var(--fg-muted); }
.mm-sidebar .mm-search input {
border: none; outline: none; background: transparent;
font-family: var(--font-sans); font-size: 13px; color: var(--fg);
width: 100%;
}
.mm-sidebar .mm-search input::placeholder { color: var(--fg-muted); }
.mm-sidebar .mm-body { padding: 10px 8px; overflow-y: auto; }
.mm-sidebar .mm-group-label {
font-family: var(--font-mono); font-size: 11px;
letter-spacing: 0.14em; text-transform: uppercase;
color: var(--fg-muted);
padding: 8px 12px 6px;
margin-top: 6px;
}
.mm-sidebar .mm-group-label:first-child { margin-top: 0; }
.mm-sidebar .mm-item {
display: grid;
grid-template-columns: 20px 1fr auto;
align-items: center; gap: 12px;
padding: 9px 12px;
border-radius: var(--r-2);
cursor: pointer;
font-size: 13px; color: var(--fg);
}
.mm-sidebar .mm-item:hover { background: var(--paper-2); }
.mm-sidebar .mm-item.is-active {
background: var(--accent-wash);
color: var(--fg);
font-weight: 600;
}
.mm-sidebar .mm-item .ic {
display: inline-flex; align-items: center; justify-content: center;
color: var(--fg-muted);
}
.mm-sidebar .mm-item.is-active .ic { color: var(--accent); }
.mm-sidebar .mm-item .ic svg { width: 16px; height: 16px; }
.mm-sidebar .mm-item .chev { color: var(--fg-muted); font-size: 14px; }
.mm-sidebar .mm-user {
display: grid;
grid-template-columns: 36px 1fr auto;
gap: 10px; align-items: center;
padding: 12px 16px;
border-top: 1px solid var(--border);
background: var(--paper-2);
}
.mm-sidebar .mm-user .avatar { width: 36px; height: 36px; font-size: 13px; }
.mm-sidebar .mm-user .mm-name {
font-size: 13px; font-weight: 600; color: var(--fg);
}
.mm-sidebar .mm-user .mm-role {
font-family: var(--font-mono); font-size: 11px; color: var(--fg-muted);
}
.mm-sidebar .mm-user .mm-power {
color: var(--fg-muted); cursor: pointer;
padding: 6px;
}
.mm-sidebar .mm-user .mm-power:hover { color: var(--danger); }
/* layout: customer list (left) + planner (right) */
.planner-layout {
display: grid;
grid-template-columns: 280px 1fr;
gap: 16px;
align-items: start;
width: 100%;
}
@media (max-width: 980px) {
.planner-layout { grid-template-columns: 1fr; }
.cust-list { max-width: 100%; }
}
/* ─────────────────────────────────────────────────────────────────
PATTERN v2 — Weekly Planner (.wp), Doctor list (.dl), Main nav (.mn)
───────────────────────────────────────────────────────────────── */
/* ── Weekly Planner ── */
.wp {
background: var(--bg-elev);
border: 1px solid var(--border);
border-radius: var(--r-3);
overflow: hidden;
width: 100%;
}
.wp-head {
display: grid;
grid-template-columns: auto 1fr auto;
padding: 14px 18px;
gap: 16px;
align-items: center;
background: linear-gradient(to bottom, var(--paper-2), var(--bg-elev));
border-bottom: 1px solid var(--border);
}
.wp-nav { display: inline-flex; gap: 4px; align-items: center; }
.wp-range {
display: flex; align-items: baseline; gap: 10px;
font-size: 16px; font-weight: 600; color: var(--fg);
letter-spacing: -0.005em;
}
.wp-range .mono-sub {
font-family: var(--font-mono); font-size: 12px;
color: var(--fg-muted); font-weight: 400;
}
.wp-tools { display: inline-flex; gap: 12px; align-items: center; }
.wp-legend {
display: inline-flex; gap: 2px; padding: 3px;
background: var(--paper-2); border-radius: var(--r-2);
}
.wp-legend .li {
display: inline-flex; align-items: center; gap: 6px;
font-family: var(--font-mono); font-size: 11px;
padding: 4px 10px; color: var(--fg-muted);
cursor: pointer; border-radius: var(--r-1);
}
.wp-legend .li.is-active { background: var(--bg-elev); color: var(--fg); box-shadow: 0 0 0 1px var(--border); }
.wp-legend .li .sw { width: 8px; height: 8px; border-radius: 2px; background: var(--accent); }
.wp-legend .li .sw.warn { background: var(--warn); }
.wp-legend .li .sw.navy { background: var(--navy); }
.wp-legend .li .sw.draft { background: var(--bg-elev); border: 1px dashed var(--border-strong); }
.wp-days {
display: grid;
grid-template-columns: 56px repeat(5, 1fr);
background: var(--bg-elev);
border-bottom: 1px solid var(--border);
}
.wp-days .wp-tspacer { background: var(--paper-2); }
.wp-day {
padding: 12px 14px;
border-left: 1px solid var(--border);
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
gap: 4px;
}
.wp-day .dow {
font-family: var(--font-mono); font-size: 11px;
color: var(--fg-muted); letter-spacing: 0.14em;
text-transform: uppercase;
}
.wp-day .num {
font-size: 22px; font-weight: 700; color: var(--fg);
font-variant-numeric: tabular-nums; line-height: 1;
}
.wp-day .meter {
grid-column: 1 / -1;
display: inline-flex; align-items: center; justify-content: space-between; gap: 8px;
margin-top: 6px;
}
.wp-day .meter .count {
display: inline-flex; align-items: center; gap: 5px;
font-family: var(--font-mono); font-size: 11px;
color: var(--fg);
background: var(--paper-2);
padding: 2px 8px;
border-radius: var(--r-pill);
border: 1px solid var(--border);
letter-spacing: 0.02em;
}
.wp-day .meter .count strong {
color: var(--accent); font-weight: 700;
}
.wp-day.is-today .meter .count strong { color: var(--accent); }
.wp-day .meter .map {
display: inline-flex; align-items: center; justify-content: center;
width: 24px; height: 24px;
border-radius: var(--r-1);
background: var(--bg-elev);
border: 1px solid var(--border);
color: var(--fg-muted); cursor: pointer;
transition: color var(--t-1) var(--ease), border-color var(--t-1) var(--ease);
}
.wp-day .meter .map:hover { color: var(--accent); border-color: var(--accent); }
.wp-day .meter .map svg { width: 14px; height: 14px; }
.wp-day.is-today {
background: var(--accent-wash);
}
.wp-day.is-today .num { color: var(--accent); }
.wp-day.is-today .dow { color: var(--accent); }
.wp-grid {
display: grid;
grid-template-columns: 56px repeat(5, 1fr);
}
.wp-time {
font-family: var(--font-mono); font-size: 11px;
color: var(--fg-muted);
padding: 8px 12px 0;
text-align: right;
border-top: 1px solid var(--border);
background: var(--paper-2);
}
.wp-cell {
border-top: 1px solid var(--border);
border-left: 1px solid var(--border);
height: 76px;
padding: 4px;
position: relative;
}
.wp-cell.is-today-col {
background: oklch(0.985 0.005 188);
}
[data-theme="dark"] .wp-cell.is-today-col { background: rgba(95,208,207,0.05); }
/* events */
.wp-ev {
display: grid;
grid-template-columns: 18px 1fr;
column-gap: 7px;
row-gap: 1px;
padding: 6px 8px 7px;
background: var(--accent-wash);
border-radius: var(--r-2);
font-size: 11.5px;
line-height: 1.3;
cursor: pointer;
border-left: 3px solid var(--accent);
height: 100%;
align-content: start;
}
.wp-ev:hover { filter: brightness(0.98); }
.wp-ev .g {
grid-row: span 2;
width: 18px; height: 18px;
border-radius: 50%;
background: var(--accent); color: #fff;
display: inline-flex; align-items: center; justify-content: center;
font-family: var(--font-mono); font-size: 10px; font-weight: 700;
flex-shrink: 0;
}
.wp-ev .g.b { background: var(--warn); }
.wp-ev .g.c { background: var(--muted-2); }
.wp-ev .who { font-weight: 600; color: var(--fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wp-ev .where {
font-family: var(--font-mono); font-size: 10px;
color: var(--fg-muted); letter-spacing: 0.02em;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wp-ev .calls {
grid-column: 2;
font-family: var(--font-mono); font-size: 10px;
color: var(--accent); font-weight: 600;
margin-top: 3px;
letter-spacing: 0.04em;
}
/* status variants */
.wp-ev.done {
background: var(--navy); border-left-color: var(--accent-soft);
}
.wp-ev.done .who { color: #fff; }
.wp-ev.done .where { color: rgba(255,255,255,0.55); }
.wp-ev.done .g { background: var(--accent-soft); color: var(--navy); }
.wp-ev.done .calls { color: var(--accent-soft); }
.wp-ev.done .calls::before { content: '✓ 완료 · '; }
.wp-ev.draft {
background: transparent;
border: 1px dashed var(--border-strong);
border-left: 3px dashed var(--border-strong);
}
.wp-ev.draft .who { color: var(--fg-muted); font-weight: 500; }
.wp-ev.draft .calls { color: var(--fg-muted); }
.wp-ev.off {
background: var(--warn-wash);
border-left-color: var(--warn);
grid-template-columns: 1fr auto;
}
.wp-ev.off .g { display: none; }
.wp-ev.off .who { color: var(--warn); grid-column: 1; }
.wp-ev.off .where { color: var(--warn); opacity: 0.7; grid-column: 1; }
.wp-ev.off .calls { display: none; }
.wp-ev.off .x {
grid-row: span 2;
color: var(--warn); opacity: 0.5;
font-size: 13px; cursor: pointer;
align-self: start;
}
/* span event (off block spanning multiple hours) */
.wp-ev.span {
position: absolute;
inset: 4px;
height: calc((var(--span, 4) * 76px) - 8px);
z-index: 3;
}
/* empty slot affordance */
.wp-cell:empty::after {
content: '+';
position: absolute; inset: 0;
display: flex; align-items: center; justify-content: center;
color: var(--border-strong);
font-size: 22px; font-weight: 200;
opacity: 0; transition: opacity var(--t-1) var(--ease);
pointer-events: none;
}
.wp-cell:empty:hover::after { opacity: 1; }
/* footer */
.wp-foot {
display: flex; justify-content: space-between; align-items: center;
padding: 12px 18px;
border-top: 1px solid var(--border);
background: var(--paper-2);
}
.wp-foot .kpis { display: inline-flex; gap: 22px; }
.wp-foot .kpi {
display: inline-flex; align-items: baseline; gap: 6px;
font-family: var(--font-mono); font-size: 11px;
color: var(--fg-muted); letter-spacing: 0.04em;
}
.wp-foot .kpi .v {
font-size: 16px; font-weight: 700; color: var(--fg);
font-variant-numeric: tabular-nums;
letter-spacing: -0.005em;
font-family: var(--font-sans);
}
.wp-foot .kpi .v.ok { color: var(--ok); }
.wp-foot .kpi .v.warn { color: var(--warn); }
.wp-foot .kpi .v.accent { color: var(--accent); }
.wp-foot .right {
font-family: var(--font-mono); font-size: 11px;
color: var(--fg-muted);
}
/* ── Doctor list ── */
.dl {
background: var(--bg-elev);
border: 1px solid var(--border);
border-radius: var(--r-3);
width: 320px; max-width: 100%;
overflow: hidden;
}
.dl-head {
padding: 14px 16px 12px;
border-bottom: 1px solid var(--border);
background: linear-gradient(to bottom, var(--paper-2), var(--bg-elev));
}
.dl-title {
display: flex; justify-content: space-between; align-items: baseline;
margin-bottom: 10px;
}
.dl-title .h { font-size: 14px; font-weight: 600; color: var(--fg); letter-spacing: -0.005em; }
.dl-title .n {
font-family: var(--font-mono); font-size: 12px; color: var(--accent);
font-weight: 700;
}
.dl-search { margin-bottom: 10px; }
.dl-filters {
display: inline-flex; gap: 4px;
padding: 2px;
background: var(--paper-2);
border-radius: var(--r-pill);
}
.dl-filters button {
border: none; background: transparent; cursor: pointer;
color: var(--fg-muted);
padding: 4px 11px;
font-family: var(--font-mono); font-size: 11px;
border-radius: var(--r-pill);
letter-spacing: 0.04em;
}
.dl-filters button.is-active {
background: var(--bg-elev); color: var(--fg);
font-weight: 600;
box-shadow: 0 0 0 1px var(--border);
}
.dl-body { max-height: 540px; overflow-y: auto; }
.dl-section-head {
display: flex; justify-content: space-between; align-items: center;
padding: 10px 16px 6px;
font-family: var(--font-mono); font-size: 10.5px;
letter-spacing: 0.14em; text-transform: uppercase;
color: var(--fg-muted);
background: var(--bg-elev);
position: sticky; top: 0; z-index: 2;
border-bottom: 1px solid var(--border);
}
.dl-section-head .c { color: var(--accent); font-weight: 700; }
.dl-row {
display: grid;
grid-template-columns: 32px 1fr auto;
gap: 10px;
align-items: center;
padding: 10px 16px 11px;
border-bottom: 1px solid var(--border);
cursor: grab;
position: relative;
}
.dl-row:hover { background: var(--accent-wash); }
.dl-row::before {
content: ''; position: absolute; left: 4px; top: 50%; transform: translateY(-50%);
width: 6px; height: 22px;
background: radial-gradient(circle, var(--fg-muted) 0.8px, transparent 1px) 0 0/3px 4px;
opacity: 0; transition: opacity var(--t-1) var(--ease);
}
.dl-row:hover::before { opacity: 0.5; }
.dl-row .grade {
width: 32px; height: 32px; border-radius: 50%;
background: var(--ok); color: #fff;
display: inline-flex; align-items: center; justify-content: center;
font-family: var(--font-mono); font-size: 13px; font-weight: 700;
}
.dl-row .grade.b { background: var(--warn); }
.dl-row .grade.c { background: var(--muted-2); }
.dl-row .main { min-width: 0; }
.dl-row .name {
font-size: 13.5px; font-weight: 600; color: var(--fg);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dl-row .where {
font-size: 11px; color: var(--fg-muted);
margin-top: 2px; line-height: 1.4;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dl-row .where .spec { color: var(--fg); font-weight: 500; }
.dl-row .where .hospital { color: var(--accent); }
.dl-row .right { text-align: right; }
.dl-row .pct {
font-family: var(--font-mono); font-size: 11px;
color: var(--fg-muted); font-weight: 600;
letter-spacing: 0.02em;
}
.dl-row .pct.is-hot { color: var(--danger); }
.dl-row .pct.is-done { color: var(--ok); }
.dl-row .pmini {
display: flex; align-items: center; gap: 4px;
font-family: var(--font-mono); font-size: 10px;
color: var(--fg-muted);
margin-top: 4px; justify-content: flex-end;
}
.dl-row .pmini .pbar {
width: 56px; height: 4px;
background: var(--border);
border-radius: 2px; overflow: hidden;
}
.dl-row .pmini .pfill { height: 100%; background: var(--accent); display: block; }
.dl-row .pmini .pfill.is-hot { background: var(--danger); }
.dl-row .pmini .pfill.is-done { background: var(--ok); }
.dl-row .pmini .frac strong { color: var(--fg); font-weight: 600; }
.dl-foot {
padding: 10px 16px;
border-top: 1px solid var(--border);
background: var(--paper-2);
display: flex; align-items: center; justify-content: center; gap: 6px;
font-family: var(--font-mono); font-size: 11px;
color: var(--fg-muted); letter-spacing: 0.04em;
}
/* ── Main nav ── */
.mn {
width: 240px; max-width: 100%;
background: var(--bg-elev);
border: 1px solid var(--border);
border-radius: var(--r-3);
display: grid;
grid-template-rows: auto auto 1fr auto;
min-height: 680px;
overflow: hidden;
}
.mn-brand {
display: flex; align-items: center; gap: 10px;
padding: 16px 16px 14px;
border-bottom: 1px solid var(--border);
}
.mn-brand img { height: 22px; display: block; }
.mn-brand .v {
font-family: var(--font-mono); font-size: 10px;
color: var(--fg-muted); padding: 2px 6px;
border: 1px solid var(--border); border-radius: var(--r-1);
margin-left: auto;
letter-spacing: 0.04em;
}
.mn-search-row {
padding: 10px 12px;
border-bottom: 1px solid var(--border);
}
.mn-search {
display: grid; grid-template-columns: auto 1fr auto;
align-items: center; gap: 8px;
padding: 7px 10px;
background: var(--paper-2);
border-radius: var(--r-2);
cursor: text;
}
.mn-search svg { color: var(--fg-muted); }
.mn-search input {
border: none; outline: none; background: transparent;
font-family: var(--font-sans); font-size: 13px; color: var(--fg);
width: 100%;
}
.mn-search input::placeholder { color: var(--fg-muted); }
.mn-search .kbd-pair { display: inline-flex; gap: 2px; }
.mn-body {
padding: 8px 12px;
overflow-y: auto;
}
.mn-section { margin-top: 12px; }
.mn-section:first-child { margin-top: 4px; }
.mn-section .lbl {
font-family: var(--font-mono); font-size: 10px;
letter-spacing: 0.18em; text-transform: uppercase;
color: var(--fg-muted);
padding: 6px 0 4px 4px;
}
.mn-item {
display: grid;
grid-template-columns: 20px 1fr auto;
align-items: center; gap: 10px;
padding: 7px 10px;
margin: 0 -4px;
border-radius: var(--r-2);
cursor: pointer;
font-size: 13px; color: var(--fg);
position: relative;
}
.mn-item:hover { background: var(--paper-2); }
.mn-item.is-active {
background: var(--accent-wash);
color: var(--fg);
font-weight: 600;
}
.mn-item.is-active::before {
content: ''; position: absolute; left: -12px; top: 7px; bottom: 7px;
width: 3px; background: var(--accent);
border-radius: 0 2px 2px 0;
}
.mn-item .ic { color: var(--fg-muted); display:inline-flex; align-items: center; justify-content: center; }
.mn-item.is-active .ic { color: var(--accent); }
.mn-item .ic svg { width: 16px; height: 16px; }
.mn-item .right { display: inline-flex; align-items: center; gap: 5px; }
.mn-item .pip {
display: inline-flex; align-items: center; justify-content: center;
min-width: 18px; height: 16px; padding: 0 5px;
background: var(--accent); color: #fff;
font-family: var(--font-mono); font-size: 9.5px; font-weight: 700;
border-radius: var(--r-pill);
letter-spacing: 0.04em;
}
.mn-item .pip.warn { background: var(--warn); }
.mn-item .pip.new { background: var(--info); color: #fff; padding: 0 6px; }
.mn-item .chev { color: var(--fg-muted); font-size: 11px; }
.mn-user {
display: grid;
grid-template-columns: 36px 1fr auto;
gap: 10px; align-items: center;
padding: 12px 14px;
border-top: 1px solid var(--border);
background: var(--paper-2);
}
.mn-user .av {
width: 36px; height: 36px; border-radius: 50%;
background: var(--navy); color: #fff;
display: inline-flex; align-items: center; justify-content: center;
font-size: 13px; font-weight: 600;
position: relative;
}
.mn-user .av .ondot {
position: absolute; bottom: -1px; right: -1px;
width: 10px; height: 10px; border-radius: 50%;
background: var(--ok); border: 2px solid var(--paper-2);
}
.mn-user .info { min-width: 0; }
.mn-user .who { font-size: 13px; font-weight: 600; color: var(--fg); }
.mn-user .role {
font-family: var(--font-mono); font-size: 10.5px;
color: var(--fg-muted); letter-spacing: 0.04em;
margin-top: 1px;
}
.mn-user .gear {
width: 28px; height: 28px;
border-radius: 50%;
background: var(--bg-elev);
border: 1px solid var(--border);
display: inline-flex; align-items: center; justify-content: center;
color: var(--fg-muted); cursor: pointer;
}
.mn-user .gear:hover { color: var(--accent); border-color: var(--accent); }
/* ─────────────────────────────────────────────────────────────────
PATTERN — Chat view with content sharing
───────────────────────────────────────────────────────────────── */
.chat {
display: grid;
grid-template-columns: 280px 1fr;
background: var(--bg-elev);
border: 1px solid var(--border);
border-radius: var(--r-3);
overflow: hidden;
width: 100%;
height: 640px;
max-width: 980px;
}
/* conversation list (left) */
.chat-list {
border-right: 1px solid var(--border);
display: grid;
grid-template-rows: auto 1fr;
background: var(--paper-2);
min-height: 0;
}
.chat-list-head {
padding: 14px 16px 10px;
border-bottom: 1px solid var(--border);
background: var(--bg-elev);
}
.chat-list-head .h {
display: flex; justify-content: space-between; align-items: baseline;
margin-bottom: 8px;
}
.chat-list-head .h .ttl { font-size: 14px; font-weight: 600; color: var(--fg); }
.chat-list-head .h .n {
font-family: var(--font-mono); font-size: 11px; color: var(--accent); font-weight: 600;
}
.chat-list-body { overflow-y: auto; min-height: 0; }
.chat-conv {
display: grid;
grid-template-columns: 36px 1fr auto;
gap: 10px;
padding: 12px 14px;
border-bottom: 1px solid var(--border);
cursor: pointer;
align-items: start;
}
.chat-conv:hover { background: var(--bg-elev); }
.chat-conv.is-active { background: var(--bg-elev); border-left: 3px solid var(--accent); padding-left: 11px; }
.chat-conv .avatar { width: 36px; height: 36px; font-size: 13px; }
.chat-conv .main { min-width: 0; }
.chat-conv .name {
font-size: 13px; font-weight: 600; color: var(--fg);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.chat-conv .preview {
font-size: 11.5px; color: var(--fg-muted);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
margin-top: 2px;
}
.chat-conv .preview .ic { color: var(--accent); margin-right: 3px; }
.chat-conv .right {
display: grid; gap: 4px; justify-items: end;
}
.chat-conv .right .time { font-family: var(--font-mono); font-size: 10px; color: var(--fg-muted); }
.chat-conv .right .unread {
background: var(--accent); color: #fff;
font-family: var(--font-mono); font-size: 9.5px; font-weight: 700;
padding: 1px 6px; border-radius: var(--r-pill);
min-width: 16px; text-align: center;
}
/* conversation pane (right) */
.chat-pane { display: grid; grid-template-rows: auto 1fr auto; min-height: 0; }
.chat-head {
display: grid;
grid-template-columns: 36px 1fr auto;
gap: 12px; align-items: center;
padding: 14px 18px;
border-bottom: 1px solid var(--border);
background: linear-gradient(to bottom, var(--paper-2), var(--bg-elev));
}
.chat-head .avatar { width: 36px; height: 36px; font-size: 13px; }
.chat-head .info .name { font-size: 14px; font-weight: 600; color: var(--fg); }
.chat-head .info .meta {
font-family: var(--font-mono); font-size: 11px; color: var(--fg-muted);
margin-top: 2px;
display: flex; align-items: center; gap: 6px;
}
.chat-head .info .meta .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ok); }
.chat-head .actions { display: inline-flex; gap: 4px; }
.chat-body {
padding: 18px 20px;
overflow-y: auto;
background: var(--paper-2);
display: grid;
gap: 14px;
min-height: 0;
}
.chat-day {
display: flex; align-items: center; gap: 12px;
margin: 4px 0;
font-family: var(--font-mono); font-size: 11px; color: var(--fg-muted);
letter-spacing: 0.14em; text-transform: uppercase;
}
.chat-day::before, .chat-day::after {
content: ''; flex: 1; height: 1px; background: var(--border);
}
.chat-msg {
display: grid;
grid-template-columns: 32px 1fr;
gap: 10px;
max-width: 88%;
}
.chat-msg.is-me {
grid-template-columns: 1fr 32px;
margin-left: auto;
}
.chat-msg .avatar { width: 32px; height: 32px; font-size: 12px; }
.chat-msg.is-me .avatar { order: 2; }
.chat-msg .body { min-width: 0; display: grid; gap: 4px; }
.chat-msg .author {
display: flex; gap: 8px; align-items: baseline;
font-size: 12px;
}
.chat-msg .author .nm { color: var(--fg); font-weight: 600; }
.chat-msg .author .t { font-family: var(--font-mono); font-size: 10px; color: var(--fg-muted); }
.chat-msg.is-me .author { justify-content: flex-end; }
.chat-msg .bubble {
background: var(--bg-elev);
border: 1px solid var(--border);
border-radius: var(--r-3);
border-top-left-radius: 2px;
padding: 10px 14px;
font-size: 13.5px;
color: var(--fg);
line-height: 1.5;
}
.chat-msg.is-me .bubble {
background: var(--accent);
border-color: var(--accent);
color: #fff;
border-top-left-radius: var(--r-3);
border-top-right-radius: 2px;
}
.chat-msg .read {
font-family: var(--font-mono); font-size: 10px; color: var(--fg-muted);
text-align: right;
margin-top: 2px;
}
.chat-msg .read .check { color: var(--accent); }
/* content share card inside chat */
.chat-content-card {
display: grid;
grid-template-columns: 80px 1fr;
gap: 0;
background: var(--bg-elev);
border: 1px solid var(--border);
border-radius: var(--r-3);
overflow: hidden;
max-width: 360px;
}
.chat-content-card.is-me { border-color: rgba(255,255,255,0.2); background: rgba(255,255,255,0.08); }
.chat-content-card .thumb {
background: linear-gradient(135deg, oklch(0.94 0.01 188) 0%, oklch(0.88 0.02 248) 100%);
display: flex; align-items: center; justify-content: center;
position: relative;
}
.chat-content-card .thumb .type {
font-family: var(--font-mono); font-size: 10px;
color: var(--accent); background: var(--bg-elev);
padding: 2px 6px; border-radius: var(--r-pill);
font-weight: 600;
position: absolute; bottom: 6px; left: 6px;
}
.chat-content-card .thumb .glyph {
color: var(--accent);
font-size: 28px;
}
.chat-content-card .info { padding: 10px 14px; display: grid; gap: 2px; }
.chat-content-card .info .ttl { font-size: 13px; font-weight: 600; color: var(--fg); line-height: 1.3; }
.chat-content-card.is-me .info .ttl { color: #fff; }
.chat-content-card .info .code {
font-family: var(--font-mono); font-size: 10.5px; color: var(--accent);
}
.chat-content-card.is-me .info .code { color: var(--accent-soft); }
.chat-content-card .info .meta {
font-family: var(--font-mono); font-size: 10.5px; color: var(--fg-muted);
margin-top: 2px;
}
.chat-content-card.is-me .info .meta { color: rgba(255,255,255,0.65); }
.chat-content-card .actions {
grid-column: 1 / -1;
display: flex; gap: 8px;
padding: 8px 14px;
border-top: 1px solid var(--border);
background: var(--paper-2);
}
.chat-content-card.is-me .actions { border-top-color: rgba(255,255,255,0.15); background: rgba(0,0,0,0.18); }
.chat-content-card .actions button {
font-family: var(--font-sans); font-size: 11.5px; font-weight: 500;
border: 1px solid var(--border-strong); background: var(--bg-elev);
padding: 5px 12px; border-radius: var(--r-pill); cursor: pointer;
color: var(--fg);
}
.chat-content-card.is-me .actions button {
background: var(--bg-elev); color: var(--fg); border-color: transparent;
}
.chat-content-card .actions button:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
/* compliance receipt under outgoing share */
.chat-receipt {
display: inline-flex; align-items: center; gap: 6px;
font-family: var(--font-mono); font-size: 10.5px; color: var(--ok);
margin-top: 4px;
padding: 3px 8px;
background: var(--accent-wash);
border-radius: var(--r-pill);
}
.chat-receipt::before { content: '✓'; font-weight: 700; }
.chat-receipt.warn { color: var(--warn); background: var(--warn-wash); }
.chat-receipt.warn::before { content: '!'; }
/* composer */
.chat-input {
border-top: 1px solid var(--border);
background: var(--bg-elev);
padding: 12px 14px 14px;
}
.chat-input .ci-attach-row {
display: flex; flex-wrap: wrap; gap: 6px;
margin-bottom: 8px;
}
.chat-input .ci-attached {
display: inline-flex; align-items: center; gap: 6px;
padding: 4px 10px 4px 4px;
background: var(--paper-2);
border: 1px solid var(--border);
border-radius: var(--r-pill);
font-size: 11.5px; color: var(--fg);
}
.chat-input .ci-attached .pip {
background: var(--accent); color: #fff;
font-family: var(--font-mono); font-size: 9.5px; font-weight: 700;
padding: 2px 6px; border-radius: var(--r-pill);
letter-spacing: 0.04em;
}
.chat-input .ci-attached .x { color: var(--fg-muted); cursor: pointer; padding: 0 2px; }
.chat-input .ci-box {
display: grid;
grid-template-columns: 1fr auto;
gap: 6px; align-items: end;
background: var(--paper-2);
border: 1px solid var(--border-strong);
border-radius: var(--r-3);
padding: 8px 10px;
transition: border-color var(--t-1) var(--ease), box-shadow var(--t-1) var(--ease);
}
.chat-input .ci-box:focus-within {
border-color: var(--accent);
box-shadow: 0 0 0 3px var(--accent-wash);
}
.chat-input .ci-text {
border: none; outline: none; background: transparent;
resize: none; min-height: 36px; max-height: 120px;
font: inherit; font-size: 13.5px; color: var(--fg);
line-height: 1.5;
font-family: var(--font-sans);
width: 100%;
}
.chat-input .ci-tools {
display: inline-flex; gap: 2px; align-items: center;
}
.chat-input .ci-tools .iconbtn { width: 32px; height: 32px; }
.chat-input .ci-tools .iconbtn svg { width: 16px; height: 16px; }
.chat-input .ci-send {
display: inline-flex; align-items: center; gap: 6px;
background: var(--accent); color: #fff;
border: none; padding: 0 14px; height: 32px;
border-radius: var(--r-2); font-weight: 600; font-size: 12.5px;
cursor: pointer;
}
.chat-input .ci-send:hover { background: var(--accent-bright); }
.chat-input .ci-send[disabled] { opacity: 0.5; cursor: not-allowed; }
.chat-input .ci-foot {
display: flex; justify-content: space-between; align-items: center;
margin-top: 8px;
font-family: var(--font-mono); font-size: 11px; color: var(--fg-muted);
}
.chat-input .ci-foot .compliance {
display: inline-flex; align-items: center; gap: 6px;
color: var(--ok);
}
.chat-input .ci-foot .compliance::before { content: '✓'; font-weight: 700; }
.chat-input .ci-foot .actions {
display: inline-flex; gap: 10px;
}
.chat-input .ci-foot .actions span { cursor: pointer; }
.chat-input .ci-foot .actions span:hover { color: var(--accent); }
/* responsive: collapse list on mobile */
@media (max-width: 768px) {
.chat { grid-template-columns: 1fr; height: 580px; }
.chat-list { display: none; }
}
/* ─────────────────────────────────────────────────────────────────
PATTERN — Doctor profile with tab control
───────────────────────────────────────────────────────────────── */
.prof {
background: var(--bg-elev);
border: 1px solid var(--border);
border-radius: var(--r-3);
overflow: hidden;
width: 100%;
max-width: 720px;
}
.prof-hero {
display: grid;
grid-template-columns: auto 1fr auto;
gap: 16px;
align-items: center;
padding: 20px 22px;
background: linear-gradient(to bottom, var(--paper-2), var(--bg-elev));
border-bottom: 1px solid var(--border);
}
.prof-hero .pf-av {
width: 64px; height: 64px; border-radius: 50%;
background: var(--navy); color: #fff;
display: inline-flex; align-items: center; justify-content: center;
font-size: 24px; font-weight: 700;
position: relative;
}
.prof-hero .pf-av .grade {
position: absolute; bottom: -2px; right: -2px;
width: 24px; height: 24px; border-radius: 50%;
background: var(--ok); color: #fff;
border: 2px solid var(--bg-elev);
display: inline-flex; align-items: center; justify-content: center;
font-family: var(--font-mono); font-size: 11px; font-weight: 700;
}
.prof-hero .pf-id .nm {
font-size: 20px; font-weight: 700; color: var(--fg);
letter-spacing: -0.01em;
display: flex; align-items: baseline; gap: 10px;
}
.prof-hero .pf-id .nm .spec {
font-size: 13px; font-weight: 500; color: var(--accent);
}
.prof-hero .pf-id .where {
font-family: var(--font-mono); font-size: 12px; color: var(--fg-muted);
margin-top: 4px;
display: flex; gap: 10px; flex-wrap: wrap;
}
.prof-hero .pf-id .tags {
display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap;
}
.prof-hero .pf-actions { display: grid; gap: 6px; }
.prof-stats {
display: grid;
grid-template-columns: repeat(4, 1fr);
border-bottom: 1px solid var(--border);
}
.prof-stat {
padding: 12px 18px;
border-left: 1px solid var(--border);
}
.prof-stat:first-child { border-left: none; }
.prof-stat .lbl {
font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em;
text-transform: uppercase; color: var(--fg-muted);
}
.prof-stat .v {
font-size: 19px; font-weight: 700; color: var(--fg);
font-variant-numeric: tabular-nums; margin-top: 3px;
display: flex; align-items: baseline; gap: 5px;
}
.prof-stat .v .sub { font-size: 12px; font-weight: 400; color: var(--fg-muted); }
.prof-stat .v.hot { color: var(--danger); }
/* tab bar */
.prof-tabs {
display: flex;
padding: 0 18px;
border-bottom: 1px solid var(--border);
background: var(--bg-elev);
overflow-x: auto;
}
.prof-tab {
border: none; background: transparent; cursor: pointer;
padding: 12px 16px;
font-family: var(--font-sans); font-size: 13px; color: var(--fg-muted);
border-bottom: 2px solid transparent;
margin-bottom: -1px;
white-space: nowrap;
display: inline-flex; align-items: center; gap: 7px;
}
.prof-tab:hover { color: var(--fg); }
.prof-tab.is-active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }
.prof-tab .cnt {
font-family: var(--font-mono); font-size: 10px;
background: var(--paper-2); border: 1px solid var(--border);
color: var(--fg-muted);
padding: 0 6px; border-radius: var(--r-pill); line-height: 1.6;
}
.prof-tab.is-active .cnt { background: var(--accent-wash); border-color: transparent; color: var(--accent); }
/* tab panels */
.prof-body { padding: 20px 22px; min-height: 200px; }
.prof-panel { display: none; }
.prof-panel.is-active { display: block; }
/* overview grid */
.prof-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.prof-field { display: grid; gap: 4px; }
.prof-field .k {
font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.1em;
text-transform: uppercase; color: var(--fg-muted);
}
.prof-field .val { font-size: 14px; color: var(--fg); }
.prof-field .val.accent { color: var(--accent); font-family: var(--font-mono); }
/* timeline (interactions) */
.prof-timeline { display: grid; gap: 0; }
.prof-tl {
display: grid;
grid-template-columns: 22px 1fr auto;
gap: 12px;
padding: 12px 0;
border-bottom: 1px dashed var(--border);
position: relative;
}
.prof-tl:last-child { border-bottom: none; }
.prof-tl .node {
width: 22px; height: 22px; border-radius: 50%;
background: var(--accent-wash); color: var(--accent);
display: inline-flex; align-items: center; justify-content: center;
font-size: 11px; font-weight: 700;
z-index: 1;
}
.prof-tl .node.warn { background: var(--warn-wash); color: var(--warn); }
.prof-tl .node.done { background: var(--navy); color: #fff; }
.prof-tl .tl-main .tl-ttl { font-size: 13.5px; font-weight: 600; color: var(--fg); }
.prof-tl .tl-main .tl-desc { font-size: 12px; color: var(--fg-muted); margin-top: 2px; line-height: 1.5; }
.prof-tl .tl-time { font-family: var(--font-mono); font-size: 11px; color: var(--fg-muted); white-space: nowrap; }
/* divider / etc */
.divider { height: 1px; background: var(--border); margin: 16px 0; }
/* row utility */
.row { display: inline-flex; align-items: center; gap: 10px; }
.rowwrap { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.colwrap { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
/* small SVG icon helper */
.i {
display: inline-flex; width: 16px; height: 16px; align-items: center; justify-content: center;
}
.i svg { width: 100%; height: 100%; }
/* ─────────────────────────────────────────────────────────────────
TWEAKS PANEL
───────────────────────────────────────────────────────────────── */
.tweaks-fab {
position: fixed; right: 20px; bottom: 20px; z-index: 80;
background: var(--navy); color: #fff;
border: 1px solid var(--navy);
border-radius: var(--r-pill);
height: 42px; padding: 0 18px;
display: inline-flex; align-items: center; gap: 10px;
font-family: var(--font-sans); font-size: 14px;
letter-spacing: 0.04em;
cursor: pointer;
box-shadow: var(--shadow-pop);
}
.tweaks-fab .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent-soft); }
.tweaks-fab:hover { background: var(--navy-2); }
.tweaks {
position: fixed; right: 20px; bottom: 20px; z-index: 81;
width: 340px;
background: var(--bg-elev);
border: 1px solid var(--border-strong);
border-radius: var(--r-3);
box-shadow: var(--shadow-pop);
overflow: hidden;
display: none;
}
.tweaks.is-open { display: block; }
.tweaks .tw-head {
display: flex; justify-content: space-between; align-items: center;
padding: 12px 16px;
border-bottom: 1px solid var(--border);
background: var(--paper-2);
}
.tweaks .tw-head .ttl {
font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.18em;
color: var(--fg); text-transform: uppercase; font-weight: 600;
}
.tweaks .tw-head .x { cursor: pointer; color: var(--fg-muted); font-size: 18px; line-height: 1; }
.tweaks .tw-body { padding: 14px 16px 18px; display: grid; gap: 14px; }
.tweaks .tw-row {
display: grid; grid-template-columns: 80px 1fr; gap: 12px; align-items: center;
}
.tweaks .tw-row .lab {
font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.10em;
color: var(--fg-muted); text-transform: uppercase;
line-height: 1.4;
}
.tweaks .seg {
display: inline-flex; background: var(--paper-2); border: 1px solid var(--border);
border-radius: var(--r-2); padding: 2px; width: 100%;
}
.tweaks .seg button {
flex: 1; border: none; background: transparent; cursor: pointer;
padding: 5px 6px; font-family: var(--font-sans); font-size: 12px; color: var(--fg-muted);
border-radius: calc(var(--r-2) - 1px);
}
.tweaks .seg button.is-active {
background: var(--bg-elev); color: var(--fg); box-shadow: 0 0 0 1px var(--border);
font-weight: 600;
}
.tweaks .swatch-row { display: inline-flex; gap: 6px; }
.tweaks .swatch-row button {
width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--bg-elev);
cursor: pointer; box-shadow: 0 0 0 1px var(--border);
}
.tweaks .swatch-row button.is-active { box-shadow: 0 0 0 2px var(--fg); }
/* ─────────────────────────────────────────────────────────────────
RESPONSIVE — 4 breakpoints
───────────────────────────────────────────────────────────────── */
/* tablet — 980px and below */
@media (max-width: 980px) {
.app { grid-template-columns: 1fr; grid-template-areas: "topbar" "main"; }
.sidewrap { display: none; }
.topbar { grid-template-columns: auto 1fr auto; padding-right: 14px; }
.topbar .brand { border-right: none; padding: 0 14px; }
.main-inner { padding: 20px 18px 80px; }
.block { grid-template-columns: 1fr; }
.block-side { border-right: none; border-bottom: 1px solid var(--border); }
.block-code { border-left: none; border-top: 1px solid var(--border); }
.sec-head { grid-template-columns: 40px 1fr; gap: 14px; }
.sec-head .sec-meta { display: none; }
.sec-head h2 { font-size: 22px; }
.sec-head h2 .en { font-size: 13px; }
.sub { grid-template-columns: 40px 1fr; gap: 14px; }
.sub .sub-meta { display: none; }
}
/* small tablet / large phone — 768px and below */
@media (max-width: 768px) {
section.sec { padding: 28px 0; }
.sec-head { padding-bottom: 10px; margin-bottom: 16px; }
.sec-head h2 { font-size: 20px; }
.sub { margin: 22px 0 10px; }
.sub .sub-title { font-size: 15px; }
.block-side { padding: 14px 16px; }
.block-side .b-name { font-size: 15px; }
.block-side .b-note { font-size: 12.5px; }
.block-stage { padding: 18px 18px; }
/* intro KPI grid → 2 cols */
.intro-kpi { grid-template-columns: repeat(2, 1fr) !important; }
/* foundations 2-col grids → 1 col */
.found-cols { grid-template-columns: 1fr !important; gap: 24px !important; }
/* swatchgrid wider tiles */
.swatchgrid { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
/* menu card grid tighter */
.menucard-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.menucard { padding: 14px; }
/* table wraps in horizontal scroll container */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table { min-width: 720px; }
.table th, .table td { padding: 10px 12px; }
/* compliance + cmdk shrink to fit */
.compliance, .cmdk, .modal-card { max-width: 100%; }
.compliance .row1 { padding: 10px 12px; }
.compliance .input-area { padding: 12px; font-size: 14px; }
/* type scale row stacks */
.scale-row { grid-template-columns: 70px 1fr; gap: 12px; }
.scale-row .specs { display: none; }
.space-row, .radius-row, .shadow-row, .motion-row { gap: 12px; }
/* sec footer wraps */
.sec-footer { flex-direction: column; align-items: flex-start !important; gap: 6px !important; }
/* hide vbadge in tight topbar */
.topbar .brand .vbadge { display: none; }
/* tweaks fab smaller */
.tweaks-fab { right: 14px; bottom: 14px; height: 38px; padding: 0 14px; font-size: 13px; }
}
/* phone — 600px and below */
@media (max-width: 600px) {
body { font-size: 14px; }
.main-inner { padding: 16px 14px 72px; }
section.sec { padding: 24px 0; }
section.sec:first-of-type { padding-top: 8px; }
/* topbar: hide crumbs, slim brand */
.topbar { height: 54px; grid-template-columns: 1fr auto; padding: 0 12px; }
.topbar .brand { padding: 0; }
.topbar .brand img { height: 20px; }
.topbar .crumbs { display: none; }
.topbar .actions { gap: 4px; }
.topbar .actions .badge { display: none; }
.topbar .actions .btn { padding: 0 10px; font-size: 12px; height: 32px; }
/* section head smaller */
.sec-head { grid-template-columns: 32px 1fr; gap: 12px; padding-bottom: 8px; margin-bottom: 14px; }
.sec-head .sec-num { font-size: 11px; }
.sec-head h2 { font-size: 18px; gap: 6px; flex-wrap: wrap; }
.sec-head h2 .en { font-size: 12px; }
.sub { grid-template-columns: 32px 1fr; gap: 12px; margin: 18px 0 10px; }
.sub .sub-num { font-size: 10px; }
.sub .sub-title { font-size: 14px; }
.sub .sub-title .en { font-size: 12px; }
/* intro hero */
.intro-hero h1 { font-size: 30px !important; line-height: 1.1 !important; }
.intro-hero p { font-size: 14px !important; }
.intro-kpi { grid-template-columns: repeat(2, 1fr) !important; gap: 6px !important; }
.intro-kpi .card-block { padding: 12px; }
.intro-kpi .card-block > div:nth-child(2) { font-size: 22px !important; }
/* blocks tighter */
.block-side { padding: 12px 14px; }
.block-side .b-label { font-size: 11px; letter-spacing: 0.14em; margin-bottom: 6px; }
.block-side .b-name { font-size: 14px; }
.block-side .b-note { font-size: 12px; line-height: 1.55; margin-top: 10px; padding-top: 10px; }
.block-stage { padding: 14px 14px; gap: 10px; }
.block-stage[data-stack="grid"] { grid-template-columns: 1fr !important; }
/* menucard 1-col */
.menucard-grid { grid-template-columns: 1fr; }
.menucard { padding: 14px; }
.menucard .mc-title { font-size: 15px; }
.menucard .mc-desc { font-size: 12.5px; }
/* swatchgrid 2-col on tiny */
.swatchgrid { grid-template-columns: 1fr 1fr; gap: 8px; }
.sw .chip-color { height: 56px; }
.sw .nm { font-size: 13px; }
/* tweaks panel full-width */
.tweaks { right: 10px; left: 10px; bottom: 10px; width: auto; }
.tweaks-fab { right: 12px; bottom: 12px; }
/* buttons wrap */
.btn-lg { height: 42px; padding: 0 18px; font-size: 14px; }
/* phone-grid in showcase — center single column */
.phone-grid { grid-template-columns: 1fr; gap: 28px 0; }
.phone-grid .phone-frame { width: 280px; height: 560px; }
/* foot bar wraps */
.sec-footer span { font-size: 11px !important; }
/* code block smaller padding */
.block-code { padding: 12px 14px; font-size: 12px; }
/* compliance/cmdk/modal/dropzone fluid */
.compliance, .cmdk, .modal-card, .dropzone, .datepick, .combo, .toast { width: 100%; max-width: 100%; }
.toast { min-width: 0; }
.modal-card .mc-head, .modal-card .mc-body { padding-left: 16px; padding-right: 16px; }
.modal-card .mc-foot { padding: 12px 16px; flex-wrap: wrap; }
/* avatar stack narrow */
.avatar-stack .avatar { width: 28px; height: 28px; font-size: 11px; }
/* tabs scroll horizontally */
.tabs-under { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; flex-wrap: nowrap; }
.tabs-under a { padding: 8px 12px; flex-shrink: 0; }
/* pagination tighter */
.pagination button { min-width: 28px; height: 28px; padding: 0 6px; font-size: 12px; }
/* table — already wrapped */
/* segmented buttons */
.segmented button { padding: 4px 10px; font-size: 12px; }
/* slider full width */
.slider { width: 100%; max-width: 100%; }
}
/* narrow phone — 420px and below */
@media (max-width: 420px) {
.sec-head h2 { font-size: 17px; }
.topbar .actions .btn { display: none; }
.menucard .mc-icon { width: 36px; height: 36px; }
.menucard .mc-icon svg { width: 20px; height: 20px; }
.phone-grid .phone-frame { width: 100%; max-width: 320px; }
.field { min-width: 0; }
.stepper { width: 100%; grid-template-columns: 38px 1fr 38px; }
.input-wrap { width: 100%; }
.compliance .row1 .meta { display: none; }
.compliance .row1 { grid-template-columns: 1fr; }
}