/* 줄루싱크 개발 사이트 스타일. 색은 줄루테크와 같은 계열, 어두운 화면도 따라간다 */
:root{
  --bg:#f5f6f7;--panel:#fff;--ink:#1c2129;--muted:#667080;--line:#dfe3e8;--soft:#eef1f3;
  --accent:#2e5b63;--accent-soft:#e3eef0;--on-accent:#fff;--warn:#9a6a12;--warn-soft:#fbf3e2;
  --sans:"Geist","IBM Plex Sans KR",-apple-system,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;color-scheme:light;
}
@media (prefers-color-scheme:dark){:root{color-scheme:dark;--bg:#14181d;--panel:#1b2027;--ink:#e6e9ed;--muted:#96a0ad;--line:#2d343d;--soft:#222831;
  --accent:#8cc3cb;--accent-soft:#1f3236;--on-accent:#10181a;--warn:#e2bb6a;--warn-soft:#2c2616}}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--ink);font:15px/1.6 var(--sans);-webkit-font-smoothing:antialiased;word-break:keep-all;padding:env(safe-area-inset-top,0) 0 env(safe-area-inset-bottom,0)}
body.lock{overflow:hidden}
a{color:var(--accent)}
button,input,select,textarea{font:inherit;color:inherit}
button{border:1px solid var(--line);background:var(--panel);border-radius:8px;padding:8px 14px;cursor:pointer;font-size:14px;-webkit-tap-highlight-color:transparent}
button:disabled{opacity:.5;cursor:default}
button.primary{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
button.ghost{border-color:transparent;background:transparent;color:var(--muted)}
button.armed{background:var(--warn-soft);color:var(--warn);border-color:var(--warn)}
@media (hover:hover){button:not(:disabled):hover{background:var(--soft)}button.primary:not(:disabled):hover{filter:brightness(1.08);background:var(--accent)}}
input[type=text],input[type=search],input[type=password],select,textarea{width:100%;padding:9px 12px;border:1px solid var(--line);border-radius:8px;background:var(--panel);font-size:15px}
.search{border-radius:999px!important}
textarea.text{min-height:280px;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:14px;line-height:1.6;resize:vertical}
.top{position:sticky;top:0;z-index:5;background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:10px;padding:12px 16px;flex-wrap:wrap}
.top h1{font-size:18px;margin:0}.top .sub{flex:1;font-size:12.5px;color:var(--muted);min-width:0}
.back{border:0;background:transparent;padding:4px 0;color:var(--accent)}
.col{display:flex;flex-direction:column;gap:12px;max-width:760px;margin:0 auto;padding:16px}
.bar{display:flex;gap:6px;flex-wrap:wrap}
.note{font-size:12.5px;background:var(--warn-soft);color:var(--warn);border-radius:8px;padding:7px 10px;line-height:1.5}
.chips{display:flex;flex-wrap:wrap;gap:6px}.chips button{font-size:13px;padding:5px 11px;border-radius:999px}
.chips button[aria-pressed=true]{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.chip{font-size:11.5px;background:var(--soft);border-radius:999px;padding:1px 9px;color:var(--muted)}.chip.hot{background:var(--accent-soft);color:var(--accent)}
.card{background:var(--panel);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.row{display:flex;flex-direction:column;gap:4px;padding:11px 14px;border-top:1px solid var(--line);cursor:pointer}.row:first-child{border-top:0}
@media (hover:hover){.row:hover{background:var(--soft)}}
.row .t{font-size:14.5px;font-weight:600;display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.row .m,.meta{font-size:12px;color:var(--muted);display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.row .sn{font-size:13px;color:var(--muted);line-height:1.45}
.empty{padding:28px 16px;text-align:center;color:var(--muted)}
.title{font-size:19px;margin:0;line-height:1.35}
.pad{padding:14px}.sep{border-top:1px solid var(--line)}
.body{font-size:14.5px;line-height:1.7;overflow-wrap:anywhere}.body>*{margin:0 0 10px}.body h3,.body h4,.body h5{margin:16px 0 6px;line-height:1.35}
.body h3{font-size:17px}.body h4{font-size:15.5px}.body h5{font-size:14.5px}
.body ul,.body ol{padding-left:20px}.body li{margin:2px 0}
.body code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.92em;background:var(--soft);border-radius:4px;padding:1px 5px}
.body pre{background:var(--soft);border-radius:8px;padding:10px 12px;overflow-x:auto}.body pre code{background:none;padding:0}
.body blockquote{border-left:3px solid var(--line);padding:2px 0 2px 10px;color:var(--muted)}
.files{display:flex;flex-direction:column;gap:4px;border-top:1px solid var(--line)}
.cmts{border-top:1px solid var(--line);display:flex;flex-direction:column;gap:8px}
.cmts .c{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap;font-size:14px}.cmts .c small{color:var(--muted);font-size:12px}.cmts .c button{font-size:12px;padding:2px 8px}
.cmts form{display:flex;gap:6px;padding-top:4px}
.foot{font-size:12.5px;text-align:center}
.ghost-link{color:var(--muted)}
.fld{display:flex;flex-direction:column;gap:4px}.fld>span{font-size:12.5px;color:var(--muted)}
.anyok{display:flex;gap:8px;align-items:center;font-size:14px}
.edit{display:flex;flex-direction:column;gap:12px}
.fl{display:flex;flex-direction:column;gap:6px}.fl .f{display:flex;gap:8px;align-items:center;font-size:13px;flex-wrap:wrap}.fl .f button{font-size:12px;padding:3px 9px}
.line{display:flex;gap:8px;align-items:center;justify-content:space-between;padding:9px 0;border-top:1px solid var(--line);font-size:14px}
.line:first-of-type{border-top:0}
.login{max-width:440px;margin:0 auto;padding:40px 16px;display:flex;flex-direction:column;gap:14px}.login h1{margin:0;font-size:22px}.sub{color:var(--muted);font-size:13px;margin:0}
.steps{font-size:13.5px;line-height:1.7;margin:0;padding-left:20px}
.sheet-bg{position:fixed;inset:0;background:rgba(0,0,0,.45);display:flex;align-items:flex-end;justify-content:center;z-index:20}
.sheet{background:var(--panel);width:100%;max-width:640px;max-height:90vh;overflow:auto;border-radius:16px 16px 0 0;padding:16px;display:flex;flex-direction:column;gap:12px}
.sheet .hd{display:flex;justify-content:space-between;align-items:center;gap:8px}.sheet .hd button{font-size:13px;padding:4px 10px}
.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0));transform:translateX(-50%);background:var(--ink);color:var(--bg);font-size:14px;border-radius:8px;padding:10px 16px;z-index:30;max-width:90vw}
.pt{padding-top:10px}
.col.wide{max-width:1280px}
.pv-card{margin:0}
.pv-head{display:flex;gap:8px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.pv-box{border-top:1px solid var(--line);background:#fff}
.pv{display:block;width:100%;height:min(88vh,1100px);border:0;background:#fff}
.body hr{border:0;border-top:1px solid var(--line);margin:16px 0}
.body li.task{list-style:none;margin-left:-18px}.body li.task::before{content:"";display:inline-block;width:12px;height:12px;border:1.5px solid var(--muted);border-radius:3px;margin-right:8px;vertical-align:-1px}
.body li.task.done{color:var(--muted);text-decoration:line-through}.body li.task.done::before{background:var(--accent);border-color:var(--accent)}
.body ul ul,.body ol ul,.body ul ol{margin:2px 0}
.tbw{overflow-x:auto;margin:0 0 12px}.tb{border-collapse:collapse;font-size:13.5px;min-width:100%}.tb th,.tb td{border:1px solid var(--line);padding:6px 10px;text-align:left;vertical-align:top}.tb th{background:var(--soft);font-weight:600;white-space:nowrap}
.body blockquote.callout{border-left:4px solid var(--accent);background:var(--accent-soft);color:var(--ink);padding:10px 14px;border-radius:0 8px 8px 0}
.toc-bar{display:flex;gap:8px;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;padding:8px 10px;background:var(--soft);border-radius:8px}
.toc{display:flex;gap:6px;flex-wrap:wrap}.toc button{font-size:12.5px;padding:3px 10px;border-radius:999px}
.sec-fold{border:1px solid var(--line);border-radius:8px;margin:0 0 8px;background:var(--panel)}
.sec-fold>summary{cursor:pointer;padding:10px 14px;font-weight:700;font-size:15.5px;list-style:none}.sec-fold>summary::-webkit-details-marker{display:none}
.sec-fold>summary::before{content:"+";display:inline-block;width:18px;color:var(--accent);font-weight:700}.sec-fold[open]>summary::before{content:"-"}
.sec-fold[open]>summary{border-bottom:1px solid var(--line)}.sec-body{padding:12px 14px}.sec-body>*:last-child{margin-bottom:0}