/* CuroAI Agent v2 — font-size levels, dark/light mode */
/* Self-hosted Pretendard (variable) — reliable Korean+Latin, no external CDN/Google-Fonts dependency, works offline */
@font-face{
  font-family:'Pretendard Variable';
  font-weight:45 920;
  font-style:normal;
  font-display:swap;
  src:url('../fonts/PretendardVariable.woff2') format('woff2');
}
/* UI font stack: Pretendard first; fallbacks are clean system Korean fonts (never Gulim/굴림) */
:root{--font-ui:'Pretendard Variable','Pretendard','Apple SD Gothic Neo','Malgun Gothic','Noto Sans KR',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;}
/* Type scale: rem-based (responds to browser/OS text zoom — WCAG 1.4.4), 12px floor.
   The S/M/L user toggle swaps these rem values; root stays at the browser default. */
html{font-size:100%;}                         /* = user's default, normally 16px */
:root{--fs-xs:0.75rem;--fs-sm:0.8125rem;--fs-md:0.875rem;--fs-lg:1rem;--fs-xl:1.25rem;--fs-2xl:1.5rem;}      /* 12/13/14/16/20/24 */
html.font-m{--fs-xs:0.8125rem;--fs-sm:0.875rem;--fs-md:1rem;--fs-lg:1.125rem;--fs-xl:1.375rem;--fs-2xl:1.625rem;} /* 13/14/16/18/22/26 */
html.font-l{--fs-xs:0.875rem;--fs-sm:1rem;--fs-md:1.125rem;--fs-lg:1.25rem;--fs-xl:1.5rem;--fs-2xl:1.75rem;}      /* 14/16/18/20/24/28 */
/* Spacing (4px grid), radius, line-height & motion tokens */
:root{--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-6:24px;--space-8:32px;--space-12:48px;--space-16:64px;
  --radius-sm:4px;--radius-md:8px;--radius-lg:12px;--radius-xl:16px;--radius-full:9999px;
  --lh-tight:1.2;--lh-body:1.5;--lh-ko:1.65;
  --dur-fast:100ms;--dur-mid:250ms;--dur-slow:450ms;--ease-standard:cubic-bezier(.2,0,0,1);}
:root,html.dark{--bg:#0a0e1a;--sf:#111827;--sf2:#1a2236;--bd:#1e2d4a;--accent:#00e5a0;--accent-dim:rgba(0,229,160,.12);--accent-glow:rgba(0,229,160,.35);--red:#ff6b6b;--blue:#4ea8ff;--purple:#a78bfa;--yellow:#fbbf24;--orange:#fb923c;--cyan:#22d3ee;--tx:#e2e8f0;--dim:#94a3b8;--fg:#e2e8f0;--panel:#141c2e;--accent-text:#00e5a0;}
html.light{--bg:#f1f5f9;--sf:#ffffff;--sf2:#f8fafc;--bd:#e2e8f0;--accent:#059669;--accent-dim:rgba(5,150,105,.1);--accent-glow:rgba(5,150,105,.25);--red:#dc2626;--blue:#2563eb;--purple:#7c3aed;--yellow:#b45309;--orange:#ea580c;--cyan:#0e7490;--tx:#1e293b;--dim:#475569;--fg:#1e293b;--panel:#ffffff;--accent-text:#047857;}
*{margin:0;padding:0;box-sizing:border-box;}
body{font-family:var(--font-ui);background:var(--bg);color:var(--tx);min-height:100vh;overflow-x:hidden;font-size:var(--fs-md);transition:background .3s,color .3s;}
.hide{display:none!important;}

/* SVG line icons (replace emoji) — scale with surrounding font-size, inherit color */
.icon{width:1em;height:1em;display:inline-block;vertical-align:-0.14em;flex-shrink:0;stroke:currentColor;fill:none;overflow:visible;}
.le .ic .icon{vertical-align:-0.12em;}
.sec-title .icon,.drawer-hd h3 .icon,.cfg-section h4 .icon{width:1.25em;height:1.25em;vertical-align:-0.25em;}
.chip .icon,.mode-pill .icon,.pill .icon,.btn .icon{vertical-align:-0.15em;}
.intro-step .step-icon .icon{width:28px;height:28px;vertical-align:0;}
.ble-slot .icon{width:22px;height:22px;}

/* INTRO */
#intro{position:fixed;inset:0;background:var(--bg);z-index:9999;display:flex;flex-direction:column;align-items:center;justify-content:center;transition:background .3s;}
.intro-bg{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 30%,rgba(0,229,160,.06),transparent 70%);}
.intro-content{position:relative;z-index:1;text-align:center;max-width:500px;padding:20px;}
.intro-logo{margin-bottom:20px;}.intro-logo img{height:52px;}
.intro-title{font-size:2em;font-weight:800;font-family:'Poppins',sans-serif;margin-bottom:8px;letter-spacing:-0.5px;}
.intro-tagline{font-size:var(--fs-sm);color:var(--dim);font-style:italic;margin-bottom:4px;}
.intro-sub{font-size:var(--fs-lg);color:var(--dim);margin-top:8px;font-family:'Poppins',sans-serif;font-weight:600;}
.intro-badge{display:inline-block;padding:5px 16px;border-radius:20px;background:var(--accent-dim);color:var(--accent);font-size:var(--fs-sm);font-weight:600;border:1px solid rgba(0,229,160,.2);margin:16px 0 28px;font-family:'JetBrains Mono',monospace;}
.lang-cards{display:flex;gap:14px;justify-content:center;margin-bottom:28px;}
.lang-card{width:135px;padding:22px 14px;border-radius:16px;border:2px solid var(--bd);background:var(--sf);cursor:pointer;transition:all .25s;text-align:center;}
.lang-card:hover{border-color:var(--accent);transform:translateY(-3px);box-shadow:0 8px 24px rgba(0,229,160,.12);}
.lang-card .flag{font-size:36px;margin-bottom:8px;}.lang-card .name{font-size:var(--fs-lg);font-weight:700;}.lang-card .sub{font-size:var(--fs-xs);color:var(--dim);margin-top:3px;}
.intro-footer{font-size:var(--fs-xs);color:var(--dim);margin-top:36px;font-family:'JetBrains Mono',monospace;text-align:center;line-height:1.8;}
.intro-footer a{display:inline-flex;align-items:center;gap:5px;color:var(--accent-text);text-decoration:none;font-size:var(--fs-sm);padding:5px 12px;border:1px solid rgba(0,229,160,0.25);border-radius:20px;transition:all .2s;margin-top:6px;}
.intro-footer a:hover{background:rgba(0,229,160,0.08);border-color:rgba(0,229,160,0.5);transform:translateY(-1px);}
.intro-steps{display:flex;align-items:center;justify-content:center;gap:8px;margin:20px 0 28px;}
.intro-step{background:var(--sf);border:1px solid var(--bd);border-radius:12px;padding:14px 12px;width:110px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:8px;}
.intro-step .step-icon{font-size:28px;line-height:1;}
.intro-step .step-text{font-size:0.72em;color:var(--dim);line-height:1.3;}
.intro-arrow{font-size:18px;color:var(--accent);opacity:0.6;flex-shrink:0;}

/* APP */
#app{display:none;height:100vh;flex-direction:column;}
.hd{display:flex;align-items:center;justify-content:space-between;padding:6px 14px;background:var(--sf);border-bottom:1px solid var(--bd);min-height:44px;flex-shrink:0;}
.hd-l{display:flex;align-items:center;gap:8px;}
.hd-logo{display:flex;align-items:center;gap:6px;cursor:pointer;}.hd-logo img{height:24px;}
.hd-badge{font-family:'JetBrains Mono',monospace;font-size:var(--fs-xs);padding:2px 7px;border-radius:12px;background:var(--accent-dim);color:var(--accent-text);border:1px solid rgba(0,229,160,.15);}
.hd-r{display:flex;align-items:center;gap:5px;}
.hd-btn{padding:4px 10px;border-radius:7px;border:1px solid var(--bd);background:var(--sf2);color:var(--tx);font-size:var(--fs-sm);cursor:pointer;transition:all .2s;display:flex;align-items:center;gap:4px;font-family:var(--font-ui);}
.hd-btn:hover{border-color:var(--accent);}
.lang-sw{font-size:var(--fs-sm);padding:4px 8px;border-radius:6px;border:1px solid var(--bd);background:var(--sf2);color:var(--dim);cursor:pointer;outline:none;}
.ble-dot{width:6px;height:6px;border-radius:50%;background:var(--red);transition:background .3s;}.ble-dot.on{background:var(--accent);box-shadow:0 0 6px var(--accent-glow);}

/* Main */
.main{flex:1;display:grid;grid-template-columns:1fr 380px;overflow:hidden;}
.cam-area{padding:8px;overflow-y:auto;}
.cam-box{position:relative;background:#000;border-radius:10px;overflow:hidden;width:100%;max-width:800px;aspect-ratio:4/3;margin:0 auto;}
#webcam,#overlay{width:100%;height:100%;position:absolute;top:0;left:0;object-fit:cover;}
#overlay{pointer-events:none;}
.cam-badge{position:absolute;top:6px;right:8px;display:flex;align-items:center;gap:4px;background:rgba(0,0,0,.7);padding:2px 8px;border-radius:6px;font-size:var(--fs-xs);font-family:'JetBrains Mono',monospace;color:var(--red);font-weight:700;}
.cam-badge .dot{width:5px;height:5px;border-radius:50%;background:var(--red);animation:blink 1s infinite;}
.cam-hud{position:absolute;bottom:6px;left:8px;right:8px;display:flex;justify-content:space-between;}
.cam-hud span{background:rgba(0,0,0,.7);padding:3px 8px;border-radius:4px;font-size:var(--fs-xs);font-family:'JetBrains Mono',monospace;color:#fff;}
.cam-controls{display:flex;gap:6px;margin-top:8px;flex-shrink:0;}.cam-controls button{flex:1;}

/* Side */
.side{display:flex;flex-direction:column;overflow-y:auto;border-left:1px solid var(--bd);background:var(--bg);padding:10px;gap:10px;}
.side-section{padding:12px;background:var(--sf);border:1px solid var(--bd);border-radius:var(--radius-lg);}
.sec-title{font-size:var(--fs-sm);font-weight:700;color:var(--tx);margin-bottom:10px;font-family:var(--font-ui);display:flex;align-items:center;gap:6px;}
.prompt-input{width:100%;padding:10px 12px;border-radius:8px;border:1.5px solid var(--bd);background:var(--bg);color:var(--tx);font-size:var(--fs-lg);font-family:var(--font-ui);outline:none;transition:border .2s;resize:vertical;min-height:60px;line-height:1.5;}
.prompt-input:focus{border-color:var(--accent);}
.prompt-row{display:flex;gap:6px;margin-top:8px;}
.btn{padding:8px 16px;border-radius:8px;border:1px solid var(--bd);background:var(--sf2);color:var(--tx);font-size:var(--fs-sm);font-weight:600;cursor:pointer;transition:all .2s;font-family:var(--font-ui);}
.btn:hover{border-color:var(--accent);}.btn:disabled{opacity:.4;cursor:not-allowed;}
.btn-go{background:linear-gradient(135deg,#059669,#00e5a0);border:none;color:#000;font-weight:700;font-size:var(--fs-md);}
.btn-go:hover{box-shadow:0 4px 16px var(--accent-glow);}
.btn-stop{border-color:var(--red);color:var(--red);}
.chips{display:flex;gap:4px;flex-wrap:wrap;margin-top:8px;}
.chip{padding:4px 10px;border-radius:14px;border:1px solid var(--bd);background:var(--sf2);color:var(--dim);font-size:var(--fs-xs);cursor:pointer;transition:all .2s;}
.chip:hover{border-color:var(--accent);color:var(--tx);}
.mode-row{display:flex;gap:4px;margin-top:8px;}
.mode-pill{flex:1;padding:6px 4px;border-radius:7px;text-align:center;font-size:var(--fs-xs);font-weight:600;font-family:'JetBrains Mono',monospace;border:1.5px solid var(--bd);background:var(--bg);color:var(--dim);transition:all .3s;}
.mode-pill.search{border-color:var(--purple);color:var(--purple);background:rgba(167,139,250,.08);}
.mode-pill.track{border-color:var(--accent);color:var(--accent-text);background:var(--accent-dim);}
.mode-pill.arrive{border-color:var(--blue);color:var(--blue);background:rgba(78,168,255,.08);}
.reason-box{padding:8px 10px;border-radius:var(--radius-md);background:var(--bg);border:1px solid var(--bd);font-size:var(--fs-sm);color:var(--blue);min-height:36px;line-height:var(--lh-ko);}
.motor-row{display:flex;gap:8px;margin-top:6px;}
.motor-gauge{flex:1;background:var(--bg);border:1px solid var(--bd);border-radius:7px;padding:6px 8px;text-align:center;}
.motor-gauge .nm{font-size:var(--fs-xs);color:var(--dim);font-family:'JetBrains Mono',monospace;}
.motor-gauge .bar{height:4px;background:var(--sf2);border-radius:2px;margin:4px 0;overflow:hidden;}
.motor-gauge .fill{height:100%;border-radius:2px;width:50%;background:var(--dim);transition:all .2s;}
.motor-gauge .val{font-size:var(--fs-xl);font-weight:700;font-family:'JetBrains Mono',monospace;font-variant-numeric:tabular-nums;}
.tbar{height:18px;background:var(--sf2);border-radius:5px;position:relative;overflow:hidden;margin:6px 0;}

/* Loop counter bar */
.loop-bar{display:flex;align-items:center;gap:6px;padding:6px 8px;margin:6px 0;border-radius:7px;background:var(--bg);border:1px solid var(--bd);}
.loop-spinner{width:14px;height:14px;border:2px solid var(--bd);border-top-color:var(--accent);border-radius:50%;animation:spin .6s linear infinite;flex-shrink:0;}
.loop-label{font-size:var(--fs-xs);font-weight:600;font-family:'JetBrains Mono',monospace;color:var(--dim);}
.loop-counter{font-size:var(--fs-xs);font-family:'JetBrains Mono',monospace;color:var(--accent-text);margin-left:auto;font-variant-numeric:tabular-nums;}
.loop-progress{flex:1;height:3px;background:var(--sf2);border-radius:2px;overflow:hidden;max-width:80px;}
.loop-fill{height:100%;background:var(--accent);border-radius:2px;width:0%;transition:width .3s;}
@keyframes spin{to{transform:rotate(360deg);}}
.tbar .cl{position:absolute;left:50%;top:0;bottom:0;width:2px;background:var(--accent);opacity:.3;}
.tbar .mk{position:absolute;top:2px;bottom:2px;width:8px;border-radius:3px;background:var(--red);transition:left .15s;display:none;}
.log-wrap{flex:1;overflow-y:auto;max-height:300px;min-height:100px;}
.le{display:flex;gap:5px;align-items:flex-start;padding:3px 0;border-bottom:1px solid #ffffff06;animation:si .15s ease;}
.le .ic{font-size:var(--fs-sm);flex-shrink:0;}.le .m{font-size:var(--fs-xs);line-height:1.3;font-family:'JetBrains Mono',monospace;word-break:break-all;}
.le .t{font-size:var(--fs-xs);color:var(--dim);margin-left:auto;flex-shrink:0;font-family:'JetBrains Mono',monospace;font-variant-numeric:tabular-nums;}
.srow{display:flex;gap:6px;align-items:center;margin-bottom:6px;}
.srow label{font-size:var(--fs-xs);color:var(--dim);min-width:55px;font-family:'JetBrains Mono',monospace;}
.srow input,.srow select{flex:1;padding:4px 8px;border-radius:6px;border:1px solid var(--bd);background:var(--bg);color:var(--tx);font-size:var(--fs-sm);font-family:'JetBrains Mono',monospace;outline:none;}

/* Drawers (BLE + Settings) */
.drawer-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:100;display:none;}.drawer-overlay.show{display:block;}
.drawer{position:fixed;top:0;right:-340px;width:320px;height:100%;z-index:101;background:var(--sf);border-left:1px solid var(--bd);transition:right .3s ease;display:flex;flex-direction:column;}
.drawer.open{right:0;}
.drawer-hd{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--bd);}
.drawer-hd h3{font-size:var(--fs-lg);font-weight:700;}
.drawer-x{width:28px;height:28px;border-radius:7px;border:1px solid var(--bd);background:var(--sf2);color:var(--tx);cursor:pointer;font-size:14px;display:flex;align-items:center;justify-content:center;}
.drawer-body{padding:16px;flex:1;overflow-y:auto;}
.ble-slot{display:flex;align-items:center;gap:10px;padding:12px;border-radius:10px;background:var(--bg);border:1.5px solid var(--bd);margin-bottom:10px;transition:all .2s;}
.ble-slot.connected{border-color:var(--accent);background:var(--accent-dim);}
.ble-slot .icon{font-size:22px;}.ble-slot .info{flex:1;}
.ble-slot .info .lbl{font-size:var(--fs-xs);color:var(--dim);font-family:'JetBrains Mono',monospace;}
.ble-slot .info .name{font-size:var(--fs-md);font-weight:600;margin-top:2px;}
.ble-slot .st{font-size:var(--fs-xs);font-family:'JetBrains Mono',monospace;}
.ble-slot .st.on{color:var(--accent-text);}.ble-slot .st.off{color:var(--red);}
.ble-slot button{padding:6px 14px;border-radius:7px;border:1px solid var(--bd);background:var(--sf2);color:var(--tx);font-size:var(--fs-sm);cursor:pointer;font-weight:600;}
.ble-slot button:hover{border-color:var(--accent);}
.ble-grp{margin-top:14px;}.ble-grp h4{font-size:var(--fs-xs);color:var(--dim);margin-bottom:6px;font-family:'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:1px;}
.ble-dis-btn{width:100%;margin-top:14px;padding:8px;border-radius:8px;border:1px solid var(--red);background:transparent;color:var(--red);font-size:var(--fs-sm);cursor:pointer;font-weight:600;}
/* Settings specific */
.cfg-section{margin-bottom:18px;}.cfg-section h4{font-size:var(--fs-sm);color:var(--tx);margin-bottom:10px;font-family:var(--font-ui);font-weight:700;display:flex;align-items:center;gap:6px;}
.cfg-row{display:flex;gap:8px;align-items:center;margin-bottom:10px;}.cfg-row label{font-size:var(--fs-sm);color:var(--dim);min-width:80px;}
.cfg-row select,.cfg-row input{flex:1;padding:6px 10px;border-radius:7px;border:1px solid var(--bd);background:var(--bg);color:var(--tx);font-size:var(--fs-sm);outline:none;}
.pill-row{display:flex;gap:4px;}
.pill{padding:5px 14px;border-radius:7px;border:1.5px solid var(--bd);background:var(--bg);color:var(--dim);cursor:pointer;font-weight:600;font-size:var(--fs-sm);transition:all .2s;text-align:center;}
.pill.active{border-color:var(--accent);color:var(--accent-text);background:var(--accent-dim);}
.pill:hover{border-color:var(--accent);}
.pill-wide{flex:1;}
canvas.hide-cvs{display:none;}
@keyframes blink{0%,100%{opacity:1;}50%{opacity:.3;}}
@keyframes si{from{opacity:0;transform:translateY(2px);}to{opacity:1;transform:translateY(0);}}
::-webkit-scrollbar{width:3px;}::-webkit-scrollbar-thumb{background:var(--bd);border-radius:3px;}
@media(max-width:850px){
  .main{grid-template-columns:1fr;grid-template-rows:40vh 1fr;}
  .side{border-left:none;border-top:1px solid var(--bd);overflow-y:auto;}
  .cam-area{padding:4px;}
  .cam-box{aspect-ratio:4/3;}
  .hd{padding:4px 10px;min-height:40px;}
  .hd-logo img{height:20px;}
  .hd-badge{font-size:var(--fs-xs);}
  .lang-cards{gap:8px;}
  .lang-card{width:100px;padding:14px 8px;}
  .lang-card .flag{font-size:28px;}
  .lang-card .name{font-size:var(--fs-md);}
  .drawer{width:280px;right:-280px;}
  .side-section{padding:10px;}
  .prompt-input{font-size:var(--fs-md);}
}
@media(max-width:480px){
  .main{grid-template-rows:35vh 1fr;}
  .lang-cards{gap:6px;}
  .intro-logo img{height:40px;}
  .chips{gap:3px;}.chip{padding:3px 7px;}
  .hd-r{gap:3px;}
  .hd-btn{padding:3px 7px;font-size:var(--fs-xs);}
}

/* ===== Intro polish (animated hero + code badges) ===== */
#intro{overflow-y:auto;}
.intro-content{max-width:560px;}
.intro-tagline{font-size:var(--fs-md);color:var(--dim);font-style:normal;margin:0 0 16px;letter-spacing:.2px;}
.intro-hw{display:inline-flex;align-items:center;gap:6px;margin:0 auto 18px;padding:5px 14px;border-radius:999px;background:var(--sf2);border:1px solid var(--bd);color:var(--dim);font-size:var(--fs-xs);font-weight:600;}
.intro-hw .icon{width:14px;height:14px;}
.intro-hero{width:min(560px,86vw);margin:2px auto 22px;pointer-events:none;}
.intro-hero svg{width:100%;height:auto;display:block;overflow:visible;}
.lang-card{width:auto;min-width:108px;padding:16px 22px;border-radius:16px;}
.lang-code{width:48px;height:48px;margin:0 auto 8px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-family:'Poppins',sans-serif;font-size:19px;font-weight:800;letter-spacing:.04em;color:#fff;box-shadow:0 4px 12px rgba(15,23,42,.18);transition:transform .2s,box-shadow .2s;}
.lc-ko{background:#009B76;}.lc-en{background:#5172F0;}.lc-es{background:#C9780A;}
.lang-card:hover .lang-code{transform:translateY(-2px) scale(1.05);box-shadow:0 7px 16px rgba(15,23,42,.26);}
.lang-card .name{font-size:var(--fs-md);font-weight:700;color:var(--tx);margin-top:2px;}
@media (max-height:820px){.intro-hero{width:min(440px,72vw);margin:0 auto 12px;}.intro-logo{margin-bottom:12px;}.intro-logo img{height:44px;}.intro-tagline{margin-bottom:12px;}}
@media (max-height:680px){.intro-hero{width:min(340px,58vw);}.intro-title{font-size:1.6em;}.intro-hw{margin-bottom:12px;}}
@media (max-height:540px){.intro-hero{display:none;}}
@media (max-width:480px){.lang-card{min-width:88px;padding:13px 12px;}.lang-code{width:42px;height:42px;font-size:17px;}}

/* Live numeric readouts: tabular figures so updating values don't jitter */
#costDisplay{font-variant-numeric:tabular-nums;}

/* Group-modal invalid-input shake (tamed by the reduced-motion block below) */
@keyframes shake{10%,90%{transform:translateX(-2px)}20%,80%{transform:translateX(3px)}30%,50%,70%{transform:translateX(-5px)}40%,60%{transform:translateX(5px)}}
.shake{animation:shake .45s;}
#groupModalInput.shake,#bleGrp.shake{border-color:var(--red);}

/* Accessibility: honor reduced-motion (tame spinner, blink, transitions) */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important;}
}