/* ROOTA Farm — Level 3 page CSS. farm.js 에서 옮겨 온 규칙(토큰화 · 다크 대응). 본문 재구성은 Phase 2. */
#farmRoot{font-family:'Pretendard Variable',sans-serif;color:var(--ink)}
.f-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:10px 16px;margin:4px 0 14px}
.f-title{font-size:22px;font-weight:800;letter-spacing:-.4px;margin:0}.f-sub{font-size:13px;color:var(--ink3);margin-top:4px;word-break:keep-all}
.f-back{display:inline-flex;gap:4px;font-size:12.5px;font-weight:700;color:var(--ink3);cursor:pointer;margin-bottom:8px}.f-back:hover{color:var(--ink)}
.f-funnel{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0 0 14px}@media(max-width:700px){.f-funnel{grid-template-columns:1fr}}
.f-fs{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-md);padding:10px 12px;display:flex;align-items:center;gap:10px;cursor:pointer}
.f-fs.on{border-color:var(--accent);background:var(--accent);color:var(--text-on-accent)}.f-fs.on .f-fsn,.f-fs.on .f-fsd{color:color-mix(in srgb,var(--text-on-accent) 80%,transparent)}
.f-fsi{width:26px;height:26px;border-radius:50%;background:var(--well);display:inline-flex;align-items:center;justify-content:center;font-weight:800;font-size:12px;flex:none}.f-fs.on .f-fsi{background:rgba(255,255,255,.2)}
.f-fsn{font-size:13px;font-weight:800}.f-fsd{font-size:11.5px;color:var(--ink3)}
.f-b{background:var(--card);border:1px solid var(--line);border-radius:var(--r,12px);padding:14px 16px;margin-bottom:12px;min-width:0}
.f-b.off{background:var(--well);border-style:dashed}
.f-bh{display:flex;align-items:baseline;justify-content:space-between;gap:8px;flex-wrap:wrap;margin-bottom:8px}.f-bh b{font-size:14px;font-weight:800}.f-bh span{font-size:11.5px;color:var(--ink3)}
.f-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 14px}@media(max-width:600px){.f-grid{grid-template-columns:1fr}}
.f-field{display:flex;flex-direction:column;gap:5px;min-width:0}.f-field label{font-size:12px;font-weight:800;color:var(--ink3)}.f-field label em{font-style:normal;color:var(--up);margin-left:3px}
.f-field input,.f-field select,.f-field textarea{font:inherit;font-size:14px;padding:9px 10px;border:1px solid var(--line);border-radius:var(--radius-md);background:var(--card);color:var(--ink);width:100%;box-sizing:border-box}
.f-field input:focus,.f-field select:focus{outline:2px solid var(--leaf);outline-offset:0;border-color:var(--leaf)}
.f-row{display:flex;gap:6px}.f-row>*{min-width:0}.f-row select{width:auto;flex:none}
.f-help{font-size:11.5px;color:var(--ink4);line-height:1.5;word-break:keep-all}
.f-list{position:relative}.f-dd{position:absolute;left:0;right:0;top:100%;z-index:30;background:var(--card);border:1px solid var(--line);border-radius:var(--radius-md);box-shadow:var(--shadow-md);max-height:220px;overflow:auto}
.f-dd div{padding:8px 10px;font-size:13px;cursor:pointer;border-bottom:1px solid var(--line2)}.f-dd div:hover{background:var(--well)}.f-dd small{color:var(--ink4);margin-left:6px}
.f-chk{display:flex;flex-wrap:wrap;gap:6px}.f-chk label{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;font-weight:700;padding:6px 10px;border:1px solid var(--line);border-radius:var(--radius-pill);cursor:pointer}.f-chk input{accent-color:var(--leaf)}
.f-act{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;align-items:center}
.f-btn{font:inherit;font-size:13px;font-weight:700;padding:10px 14px;border-radius:var(--radius-md);border:1px solid var(--line);background:var(--card);color:var(--ink);cursor:pointer}
.f-btn.pri{background:var(--accent);color:var(--text-on-accent);border-color:var(--accent)}.f-btn.go{background:var(--positive);color:var(--text-on-accent);border-color:transparent}.f-btn.danger{color:var(--up);border-color:color-mix(in srgb,var(--danger) 35%,transparent)}.f-btn[disabled]{opacity:.5;cursor:not-allowed}.f-btn.sm{padding:6px 10px;font-size:12px}
.f-chip{display:inline-flex;align-items:center;font-size:11px;font-weight:700;padding:2px 7px;border-radius:var(--radius-sm);background:var(--well);color:var(--ink2);border:1px solid var(--line2)}
.f-chip.good{background:var(--positive-soft);color:var(--positive);border-color:color-mix(in srgb,var(--positive) 35%,transparent)}.f-chip.warn{background:var(--warning-soft);color:var(--warning);border-color:color-mix(in srgb,var(--warning) 35%,transparent)}.f-chip.bad{background:var(--danger-soft);color:var(--danger);border-color:color-mix(in srgb,var(--danger) 35%,transparent)}.f-chip.off{color:var(--ink4);border-style:dashed;background:transparent}.f-chip.ink{background:var(--surface-inverse);color:var(--text-inverse);border-color:var(--surface-inverse)}
.f-up{color:var(--up);font-weight:700}.f-down{color:var(--down);font-weight:700}.f-mute{color:var(--ink4)}
.f-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);padding:12px 14px;margin-bottom:10px}
.f-card .f-r1{display:flex;align-items:baseline;justify-content:space-between;gap:8px;flex-wrap:wrap}.f-card .f-name{font-size:15px;font-weight:800}.f-card .f-meta{font-size:12px;color:var(--ink3);margin-top:3px;word-break:keep-all}
.f-card .f-mk{display:flex;flex-wrap:wrap;gap:4px 10px;font-size:12.5px;margin-top:8px;font-variant-numeric:tabular-nums}.f-card .f-mk i{font-style:normal;color:var(--ink3);margin-right:3px}
.f-big{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}.f-big b{font-size:30px;font-weight:800;letter-spacing:-.5px;font-variant-numeric:tabular-nums}.f-big span{font-size:13px;color:var(--ink3);font-weight:600}
.f-kv{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}@media(max-width:700px){.f-kv{grid-template-columns:repeat(2,minmax(0,1fr))}}
.f-kv div{background:var(--well);border-radius:var(--radius-md);padding:9px 10px}.f-kv i{display:block;font-style:normal;font-size:11px;color:var(--ink3);font-weight:700}.f-kv b{font-size:15px}
.f-adv{margin-top:8px}.f-adv li{font-size:13.5px;line-height:1.7;color:var(--ink2)}.f-adv ul{margin:0;padding-left:18px}
.f-note{padding:10px 12px;border-left:3px solid var(--sun);background:var(--warning-soft);border-radius:0 var(--radius-md) var(--radius-md) 0;font-size:12.5px;color:var(--warning);line-height:1.6;word-break:keep-all;margin-bottom:12px}
.f-prov{font-size:11px;color:var(--ink4);margin-top:8px;line-height:1.6;word-break:keep-all}
.f-ev{display:none;margin-top:8px;font-size:12px;color:var(--ink3);line-height:1.7}.f-card.open .f-ev{display:block}
.f-cta{margin:14px 0 4px;padding:14px;border-radius:var(--radius-lg);background:var(--surface-inverse);color:var(--text-inverse);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px}
.f-cta b{font-size:15px}.f-cta small{display:block;color:color-mix(in srgb,var(--text-inverse) 70%,transparent);font-weight:600;margin-top:2px}.f-cta .f-btn{background:var(--text-inverse);color:var(--surface-inverse);border-color:var(--text-inverse)}
.f-kpi{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-bottom:12px}@media(max-width:700px){.f-kpi{grid-template-columns:repeat(2,minmax(0,1fr))}}
.f-kpi div{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-md);padding:10px 12px}.f-kpi i{display:block;font-style:normal;font-size:11px;color:var(--ink3);font-weight:700}.f-kpi b{font-size:22px;font-weight:800}
.f-tabs{display:flex;gap:4px;margin-bottom:10px;flex-wrap:wrap}.f-tabs button{font:inherit;font-size:12px;font-weight:700;padding:5px 10px;border:1px solid var(--line);background:var(--card);color:var(--ink2);border-radius:var(--radius-pill);cursor:pointer}.f-tabs button.on{background:var(--ink);color:var(--text-inverse);border-color:var(--ink)}
.f-inline{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:8px}.f-inline input{font:inherit;font-size:13px;padding:7px 9px;border:1px solid var(--line);border-radius:var(--radius-md);width:120px}
.f-empty{padding:22px 10px;color:var(--ink3);font-size:13.5px;text-align:center;line-height:1.6}
.f-err{padding:22px;text-align:center;color:var(--alert);font-weight:700;font-size:13.5px}
#farmToast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(20px);background:var(--surface-inverse);color:var(--text-inverse);padding:10px 16px;border-radius:var(--radius-md);font-size:13px;font-weight:700;opacity:0;transition:.2s;z-index:10010;pointer-events:none;max-width:90vw}
#farmToast.on{opacity:1;transform:translateX(-50%)}#farmToast.bad{background:var(--up)}
