:root { --bg:#091724; --side:#06131e; --surface:#132231; --surface-2:#162737; --stroke:#243545; --text:#eff5fa; --sub:#9baaba; --green:#58d66e; --red:#ff666c; --blue:#49a5ff; --violet:#a66cf5; --yellow:#ffb727; }
* { box-sizing:border-box; } body { margin:0; min-width:320px; color:var(--text); background:var(--bg); font-family:Arial,"Noto Sans KR",sans-serif; } button { font:inherit; } svg { display:block; }
.app-shell { display:grid; grid-template-columns:232px minmax(0,1fr); min-height:100vh; background:#0a1825; }.sidebar { display:flex; flex-direction:column; min-height:100vh; padding:27px 16px 19px; border-right:1px solid #20303e; background:linear-gradient(180deg,#06121d 0%,#071520 100%); }.brand { display:flex; align-items:center; gap:11px; height:38px; margin:0 12px 25px; color:#f7fbff; font-size:20px; }.brand svg { width:29px; height:29px; color:#91da58; fill:#91da58; stroke:#91da58; }
.main-nav { display:grid; gap:7px; }.nav-item { display:flex; align-items:center; gap:14px; position:relative; width:100%; height:45px; border:0; border-radius:8px; padding:0 18px; color:#aebbc8; background:transparent; text-align:left; cursor:pointer; }.nav-item svg { width:19px; height:19px; stroke-width:1.75; }.nav-item span { font-size:14px; }.nav-item b { display:grid; place-items:center; width:20px; height:20px; margin-left:auto; border-radius:50%; color:#d8f7df; background:#205d41; font-size:11px; }.nav-item.is-active { color:#f1fff5; background:linear-gradient(90deg,rgba(17,105,72,.37),rgba(12,77,58,.47)); }.nav-item.is-active::before { content:""; position:absolute; left:0; height:33px; width:3px; border-radius:4px; background:#65e280; }.nav-item.is-active svg { color:#72e68c; }
.side-crop { margin-top:auto; border:1px solid #253545; border-radius:10px; padding:15px 16px; background:#081621; }.side-crop>p { margin:0 0 12px; color:#9baaba; font-size:11px; }.side-crop>div { display:flex; align-items:center; gap:11px; }.side-crop img { width:57px; height:57px; border-radius:5px; object-fit:cover; }.side-crop strong,.side-crop small,.user strong,.user small { display:block; }.side-crop strong { font-size:13px; }.side-crop small { margin-top:7px; color:#a5b4c2; font-size:11px; }.side-crop button,.all-alerts { display:flex; align-items:center; justify-content:center; gap:8px; width:100%; height:42px; margin-top:15px; border:1px solid #344556; border-radius:6px; color:#e0eaf2; background:transparent; font-size:12px; cursor:pointer; }.side-crop button svg,.all-alerts svg { width:14px; height:14px; }.user { display:flex; align-items:center; gap:10px; height:46px; margin-top:17px; padding:0 8px; }.avatar { display:grid; place-items:center; width:38px; height:38px; border-radius:50%; color:#d6e5f0; background:#42576b; font-size:14px; font-weight:700; }.user strong { font-size:13px; }.user small { margin-top:4px; color:#a8b6c3; font-size:11px; }.user>svg { width:16px; height:16px; margin-left:auto; color:#a1b0be; }
.workspace { width:100%; max-width:1536px; margin:0 auto; padding:0 24px 30px; }.topbar { display:flex; align-items:center; justify-content:space-between; height:81px; margin:0 -24px 22px; padding:0 25px 0 32px; border-bottom:1px solid #253545; }.topbar>div:first-child { display:flex; align-items:baseline; gap:20px; }.topbar h1 { margin:0; font-size:27px; font-weight:700; letter-spacing:0; }.topbar p { margin:0; color:#95a5b5; font-size:14px; }.header-tools { display:flex; align-items:center; gap:11px; }.header-tools time,.icon-button { display:flex; align-items:center; border:1px solid #2b3d4f; border-radius:9px; color:#dbe6ee; background:#0d1b28; }.header-tools time { gap:10px; height:47px; padding:0 17px; font-size:13px; }.header-tools time svg,.icon-button svg { width:19px; height:19px; }.icon-button { position:relative; justify-content:center; width:47px; height:47px; cursor:pointer; }.icon-button em { position:absolute; top:11px; right:11px; width:6px; height:6px; border-radius:50%; background:#58d66e; }
.metric-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:13px; margin-bottom:16px; }.metric-card,.panel { border:1px solid #263849; border-radius:13px; background:linear-gradient(135deg,#172737,#11202e); box-shadow:0 14px 28px rgba(0,0,0,.16); }.metric-card { height:224px; overflow:hidden; padding:18px 17px 11px; }.metric-head { display:flex; align-items:center; gap:12px; color:#d7e3ed; font-size:14px; }.metric-icon { display:grid; place-items:center; width:48px; height:48px; border-radius:50%; font-size:20px; font-weight:700; }.metric-icon svg { width:26px; height:26px; }.temperature .metric-icon { color:var(--red); background:rgba(255,102,108,.1); }.humidity .metric-icon { color:var(--blue); background:rgba(73,165,255,.1); }.ec .metric-icon { color:var(--violet); background:rgba(166,108,245,.1); }.ph .metric-icon { color:#78df76; background:rgba(120,223,118,.1); }.light .metric-icon { color:var(--yellow); background:rgba(255,183,39,.1); }.metric-value { display:flex; align-items:baseline; gap:5px; margin:12px 0 7px 68px; }.metric-value strong { color:#f4f8fc; font-size:39px; line-height:1; letter-spacing:0; }.metric-value span { color:#cbd7e1; font-size:12px; white-space:nowrap; }.metric-card mark,.crop-title mark { display:inline-block; margin-left:68px; border:0; border-radius:999px; padding:5px 9px; color:#73eb88; background:rgba(45,155,80,.2); font-size:11px; font-weight:700; }.metric-card p { margin:8px 0 0 68px; color:#d1dce5; font-size:12px; }.sparkline { display:block; width:100%; height:42px; margin-top:7px; overflow:visible; }
.content-grid { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(420px,1fr); gap:16px; height:379px; margin-bottom:16px; }.panel { min-width:0; overflow:hidden; padding:20px; }.panel-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }.panel h2 { display:flex; align-items:center; gap:7px; margin:0; color:#f1f6fb; font-size:16px; }.panel h2 svg { width:16px; height:16px; color:#91a2b1; }.legend { display:flex; flex-wrap:wrap; align-items:center; gap:7px 15px; margin-top:21px; color:#cbd7e1; font-size:12px; }.dot { display:inline-block; width:10px; height:10px; border-radius:50%; }.red { background:var(--red); }.blue { background:var(--blue); }.violet { background:var(--violet); }.green { background:var(--green); }.yellow { background:var(--yellow); }.chart-actions { display:flex; gap:9px; }.periods { display:flex; overflow:hidden; border:1px solid #2d4051; border-radius:7px; }.periods button { height:30px; border:0; border-right:1px solid #2d4051; padding:0 12px; color:#b8c7d4; background:transparent; font-size:12px; cursor:pointer; }.periods button:last-child { border-right:0; }.periods .is-selected { color:#e7ffec; background:#285d46; }.more-button,.text-button { display:flex; align-items:center; justify-content:center; border:0; color:#c0ceda; background:transparent; cursor:pointer; }.more-button svg,.text-button svg { width:17px; height:17px; }.text-button { gap:3px; font-size:12px; }#mainChart { display:block; width:100%; height:282px; margin-top:11px; overflow:visible; }.gridline { stroke:rgba(202,220,234,.11); stroke-width:1; }.axis { fill:#aab9c6; font-size:11px; }.trend-line { fill:none; stroke-linecap:round; stroke-linejoin:round; stroke-width:2.2; }.chart-guide { stroke:#95a5b1; stroke-width:1; stroke-dasharray:3 3; opacity:.7; }
.crop-info { display:grid; grid-template-columns:200px 1fr; gap:17px; margin-top:17px; }.crop-info>img { width:200px; height:154px; border-radius:8px; object-fit:cover; }.crop-title { display:flex; align-items:center; justify-content:space-between; gap:6px; }.crop-title h3 { margin:0; font-size:16px; }.crop-title mark { margin:0; padding:5px 9px; font-size:10px; }.crop-info dl { display:grid; gap:8px; margin:17px 0 0; }.crop-info dl>div { display:flex; justify-content:space-between; gap:7px; font-size:12px; }.crop-info dt { color:#abbac7; }.crop-info dd { margin:0; color:#e1eaf1; text-align:right; }.progress-label { display:flex; justify-content:space-between; margin:18px 0 9px; color:#d7e1e9; font-size:12px; }.progress-label strong { color:#e6eef5; }.progress { height:8px; overflow:hidden; border-radius:999px; background:#2c4051; }.progress i { display:block; width:68%; height:100%; border-radius:inherit; background:linear-gradient(90deg,#2eb76e,#52d267); }.ai-comment { display:flex; gap:9px; margin-top:16px; border:1px solid #283b4b; border-radius:8px; padding:11px; background:rgba(53,76,93,.25); }.ai-comment>svg { width:21px; height:21px; min-width:21px; color:#63da71; }.ai-comment strong { color:#75e986; font-size:11px; }.ai-comment p { margin:5px 0 0; color:#cad6df; font-size:11px; line-height:1.45; }
.bottom-grid { display:grid; grid-template-columns:1fr .82fr 1.27fr; gap:16px; height:259px; }.donut-layout { display:flex; align-items:center; gap:23px; margin-top:18px; }.donut { display:grid; place-items:center; width:176px; height:176px; min-width:176px; border-radius:50%; background:conic-gradient(var(--red) 0 20%,var(--blue) 20% 39%,var(--violet) 39% 59%,var(--green) 59% 80%,var(--yellow) 80% 100%); }.donut>div { display:grid; place-items:center; width:123px; height:123px; border-radius:50%; background:#132434; }.donut span,.donut small { color:#abb9c6; font-size:11px; }.donut small { margin-top:6px; }.donut strong { margin-top:7px; font-size:22px; }.donut em { color:#c0ccd5; font-size:12px; font-style:normal; }.ratio-list { display:grid; gap:11px; width:100%; margin:0; padding:0; list-style:none; }.ratio-list li { display:grid; grid-template-columns:11px 1fr auto; align-items:center; gap:7px; color:#cad5df; font-size:12px; }.ratio-list strong { color:#ebf2f8; font-size:12px; white-space:nowrap; }.ratio-list small { color:#aab8c4; font-size:11px; }.device-panel .panel-head>span { color:#b2c0ca; font-size:11px; }.device-list { display:grid; gap:13px; margin:21px 0 0; padding:0; list-style:none; }.device-list li { display:grid; grid-template-columns:22px 1fr auto; align-items:center; gap:10px; color:#d5e0e9; font-size:13px; }.device-list svg { width:20px; height:20px; color:#bbcbd8; }.device-list strong { color:#68e883; font-size:12px; }.alerts { display:grid; margin:18px 0 9px; padding:0; list-style:none; }.alerts li { display:grid; grid-template-columns:31px 43px 1fr; align-items:center; gap:10px; min-height:52px; border-bottom:1px solid #293b4b; }.alert-icon { display:grid; place-items:center; width:29px; height:29px; border-radius:7px; }.alert-icon svg { width:16px; height:16px; }.alert-icon.info { color:#68b1f5; background:rgba(73,165,255,.14); }.alert-icon.warn { color:#ffc13a; background:rgba(255,183,39,.13); }.alerts time { color:#afbdc8; font-size:12px; }.alerts p { margin:0; color:#c9d5df; font-size:12px; }.all-alerts { height:40px; margin-top:10px; }
@media (max-width:1290px) { .metric-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }.content-grid { height:auto; grid-template-columns:1fr; }.trend-panel { min-height:379px; }.bottom-grid { height:auto; grid-template-columns:1fr 1fr; }.alerts-panel { min-height:259px; grid-column:1/-1; } }
@media (max-width:820px) { .app-shell { grid-template-columns:1fr; }.sidebar { display:none; }.workspace { padding:0 14px 25px; }.topbar { height:76px; margin:0 -14px 17px; padding:0 14px; }.topbar>div:first-child { display:block; }.topbar h1 { font-size:24px; }.topbar p { margin-top:5px; font-size:12px; }.header-tools time { padding:0 9px; font-size:10px; }.header-tools time svg { display:none; }.icon-button { width:40px; height:40px; }.metric-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }.metric-card { height:196px; padding:14px; }.metric-icon { width:38px; height:38px; }.metric-value,.metric-card mark,.metric-card p { margin-left:0; }.metric-value strong { font-size:30px; }.metric-card p { font-size:10px; }.content-grid,.bottom-grid { display:grid; grid-template-columns:1fr; height:auto; }.trend-panel { min-height:370px; }.panel { padding:16px; }.chart-actions { align-items:flex-end; flex-direction:column; }.periods button { padding:0 8px; }.crop-info { grid-template-columns:112px 1fr; }.crop-info>img { width:112px; height:151px; }.donut-layout { justify-content:center; }.alerts-panel { grid-column:auto; } }