:root{--p:#0f766e;--p2:#14b8a6;--pl:#ccfbf1;--bg:#f0fdfa;--ink:#0f172a;--mut:#64748b;--bad:#b91c1c;--warn:#b45309;--ok:#15803d;--card:#fff;--r:14px}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;background:var(--bg);color:var(--ink);font-family:system-ui,-apple-system,"Noto Sans KR","Malgun Gothic",sans-serif;font-size:17px;line-height:1.45}
header{position:sticky;top:0;z-index:5;background:linear-gradient(120deg,#2dd4bf,#0f766e);color:#fff;padding:calc(env(safe-area-inset-top) + 10px) 14px 10px;display:flex;align-items:center;gap:10px;box-shadow:0 2px 6px rgba(0,0,0,.12)}
header img{width:34px;height:34px;border-radius:9px;background:#fff2}
header h1{font-size:19px;margin:0;font-weight:700;flex:1}
header .net{font-size:12px;background:#ffffff33;border-radius:99px;padding:3px 9px}
main{padding:12px 12px calc(96px + env(safe-area-inset-bottom))}
section.page{display:none}section.page.on{display:block}
.card{background:var(--card);border-radius:var(--r);padding:14px;margin:0 0 12px;box-shadow:0 1px 3px rgba(15,23,42,.08)}
.card h2{font-size:18px;margin:0 0 8px}
.note{background:#fff7ed;border:1px solid #fed7aa}
.info{background:#ecfeff;border:1px solid #a5f3fc}
.muted{color:var(--mut);font-size:14px}
.small{font-size:14px}
button,.btn{appearance:none;border:0;border-radius:12px;background:var(--p);color:#fff;font-size:18px;font-weight:700;min-height:54px;padding:12px 16px;width:100%;margin:6px 0;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;text-decoration:none}
button.sec,.btn.sec{background:var(--pl);color:var(--p)}
button.warn{background:#fee2e2;color:var(--bad)}
button.mini{min-height:40px;font-size:15px;width:auto;padding:8px 12px;margin:0}
button:disabled{opacity:.45}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.row3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}
label.f{display:block;font-size:14px;color:var(--mut);margin:8px 0 3px}
input[type=text],input[type=number],select,textarea{width:100%;font-size:17px;padding:11px 12px;border:1.5px solid #cbd5e1;border-radius:10px;background:#fff;color:var(--ink);font-family:inherit}
textarea{min-height:200px;resize:vertical}
input:focus,select:focus,textarea:focus{outline:2px solid var(--p2);border-color:var(--p2)}
.chk{display:flex;align-items:center;gap:10px;padding:8px 0;font-size:16px}
.chk input{width:24px;height:24px;accent-color:var(--p)}
nav.tabs{position:fixed;left:0;right:0;bottom:0;z-index:6;background:#fff;border-top:1px solid #e2e8f0;display:grid;grid-template-columns:repeat(4,1fr);padding-bottom:env(safe-area-inset-bottom)}
nav.tabs a{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:66px;color:var(--mut);text-decoration:none;font-size:13px;font-weight:600;gap:2px}
nav.tabs a .ic{font-size:24px;line-height:1}
nav.tabs a.on{color:var(--p);background:var(--bg)}
progress{width:100%;height:16px;accent-color:var(--p)}
.prog{margin:8px 0}
.stage{font-size:15px;font-weight:600;margin:4px 0}
.err{color:var(--bad);font-weight:600}
.okc{color:var(--ok);font-weight:600}
.tag{display:inline-block;font-size:12px;font-weight:700;border-radius:99px;padding:2px 8px;margin-left:6px}
.tag.jeju{background:#fef3c7;color:#92400e}.tag.remote{background:#e0e7ff;color:#3730a3}
.rec{border:1.5px solid #e2e8f0;border-radius:12px;padding:10px;margin:10px 0;background:#fff}
.rec.bad{border-color:#fca5a5;background:#fff5f5}
.rec .hd{display:flex;align-items:center;justify-content:space-between;font-weight:700;margin-bottom:4px}
.rec label.f{margin:6px 0 2px}
.rec input{padding:9px 10px;font-size:16px}
.miss{outline:2px solid #f87171}
.preview{background:repeating-conic-gradient(#f1f5f9 0% 25%,#fff 0% 50%) 50%/20px 20px;border-radius:12px;min-height:160px;display:flex;align-items:center;justify-content:center;overflow:hidden;border:1px solid #e2e8f0}
.preview img,.preview svg{max-width:100%;max-height:60vh;display:block}
.seg{display:flex;gap:6px;margin:6px 0}
.seg button{flex:1;min-height:46px;font-size:16px;background:var(--pl);color:var(--p);margin:0}
.seg button.on{background:var(--p);color:#fff}
.slider{margin:6px 0}
.slider .t{display:flex;justify-content:space-between;font-size:15px}
.slider input[type=range]{width:100%;height:34px;accent-color:var(--p)}
.home-grid{display:grid;gap:10px}
.home-grid a{display:flex;align-items:center;gap:14px;background:#fff;border-radius:16px;padding:16px;text-decoration:none;color:var(--ink);box-shadow:0 1px 3px rgba(15,23,42,.08)}
.home-grid .bub{width:52px;height:52px;border-radius:14px;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:18px;background:linear-gradient(135deg,#2dd4bf,#0f766e);flex:none}
.home-grid b{font-size:18px}
pre.log{white-space:pre-wrap;font-size:12px;background:#f1f5f9;border-radius:8px;padding:8px;max-height:160px;overflow:auto;margin:6px 0 0}
dialog{border:0;border-radius:16px;padding:0;width:min(560px,94vw);max-height:90vh}
dialog::backdrop{background:#0f172a88}
dialog .dl{padding:16px;overflow:auto;max-height:80vh}
dialog .dl textarea{min-height:110px}
.kv{display:grid;grid-template-columns:auto 1fr;gap:4px 10px;font-size:14px}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(84px + env(safe-area-inset-bottom));background:#0f172aee;color:#fff;padding:10px 16px;border-radius:12px;font-size:15px;z-index:20;max-width:90vw;display:none}
.urlrow{display:flex;gap:6px;align-items:center}.urlrow input{flex:1;width:100%;font-size:16px;padding:11px 12px;border:1.5px solid #cbd5e1;border-radius:10px;font-family:inherit}.urlrow button{min-height:48px}
.tag.src{background:#dcfce7;color:#166534;font-size:13px}.tag.src.stt{background:#e0e7ff;color:#3730a3}
