:root{color-scheme:light;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}html{scroll-padding-top:env(safe-area-inset-top,0px)}body{margin:0;padding:0;font:14px -apple-system,BlinkMacSystemFont,sans-serif;background:#fff;color:#000}img{max-width:100%}[hidden]:not([hidden=until-found i]){display:none!important}

/* 레이아웃: 왼쪽 미션 안내판 + 오른쪽 가상 바탕화면(실제 PC판 창을 그대로 축소해 띄움). 안내 말풍선이 눌러야 할 곳을 짚는다 */
:root{
  --bg:#f3f1ee; --panel:#ffffff; --ink:#23262d; --sub:#6c7380; --line:#e4e1dc;
  --warm:#e8641f; --warm-d:#c45114; --warm-soft:#fff0e6; --ok:#21915f; --key:#b23a7a; --key-soft:#fbe8f2;
  --f-ui:'IBM Plex Sans KR','Noto Sans KR','Malgun Gothic',sans-serif;
  --f-app:'Noto Sans KR','Malgun Gothic','Apple SD Gothic Neo',sans-serif;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--bg:#17181b;--panel:#202227;--ink:#eceae6;--sub:#a3a8b2;--line:#33363d;--warm:#f07a3a;--warm-d:#f39158;--warm-soft:#3a2619;--ok:#4cc38a;--key:#e47ab2;--key-soft:#3d2130;color-scheme:dark}}
:root[data-theme="dark"]{--bg:#17181b;--panel:#202227;--ink:#eceae6;--sub:#a3a8b2;--line:#33363d;--warm:#f07a3a;--warm-d:#f39158;--warm-soft:#3a2619;--ok:#4cc38a;--key:#e47ab2;--key-soft:#3d2130;color-scheme:dark}
html,body{height:auto}
[hidden]{display:none!important}
body{background:var(--bg);color:var(--ink);font:14px/1.6 var(--f-ui);padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:0 32px}
button{font:inherit;color:inherit;cursor:pointer}
button:focus-visible,[tabindex]:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--warm);outline-offset:2px}

.top{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding-block:20px 16px;max-width:1440px;margin:0 auto}
.mark{width:42px;height:42px;border-radius:14px;background:var(--warm);color:#fff;display:grid;place-items:center;font:800 26px/1 var(--f-app);letter-spacing:-3px;padding-right:3px;flex:none}
.top h1{margin:0;font-size:22px;font-weight:700;letter-spacing:-.4px;text-wrap:balance}
.top p{margin:0;color:var(--sub);font-size:13px}
.top .grow{flex:1;min-width:200px}
.btn-line{border:1px solid var(--line);background:var(--panel);border-radius:10px;padding:8px 14px;font-weight:600;font-size:13px}
.btn-line:hover{border-color:var(--warm);color:var(--warm)}

.lab{display:grid;grid-template-columns:300px minmax(0,1fr);gap:20px;max-width:1440px;margin:0 auto;align-items:start}
@media (max-width:900px){.lab{grid-template-columns:minmax(0,1fr)}}

/* 미션 안내판 */
.guide{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:18px;position:sticky;top:max(12px,env(safe-area-inset-top,0px));display:flex;flex-direction:column;gap:14px}
@media (max-width:900px){.guide{position:static;order:2}}
.prog{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--sub);font-variant-numeric:tabular-nums}
.prog .bar{flex:1;height:6px;border-radius:3px;background:var(--line);overflow:hidden}
.prog .bar i{display:block;height:100%;background:var(--warm);width:0;transition:width .3s}
.now{border:1.5px solid var(--warm);background:var(--warm-soft);border-radius:12px;padding:12px 14px;display:flex;flex-direction:column;gap:6px}
.now .step{font-size:11px;font-weight:600;letter-spacing:.06em;color:var(--warm-d)}
.now h2{margin:0;font-size:16px;letter-spacing:-.2px;text-wrap:balance}
.now p{margin:0;font-size:13.5px}
.now .tip{font-size:12px;color:var(--sub)}
.now .row{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px}
.btn-warm{border:0;background:var(--warm);color:#fff;border-radius:9px;padding:7px 14px;font-weight:700;font-size:13px}
.btn-warm:hover{background:var(--warm-d)}
.btn-ghost{border:0;background:none;color:var(--sub);font-size:12px;text-decoration:underline;padding:4px}
.mlist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.mlist button{width:100%;display:grid;grid-template-columns:24px 1fr auto;align-items:center;gap:8px;border:0;background:none;text-align:left;padding:7px 8px;border-radius:9px;font-size:13.5px}
.mlist button:hover{background:var(--bg)}
.mlist .n{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:11px;font-weight:700;border:1.5px solid var(--line);color:var(--sub);font-variant-numeric:tabular-nums}
.mlist li.done .n{background:var(--ok);border-color:var(--ok);color:#fff}
.mlist li.cur button{background:var(--warm-soft);font-weight:600}
.mlist li.cur .n{border-color:var(--warm);color:var(--warm)}
.keyb{font-size:10.5px;font-weight:700;color:var(--key);background:var(--key-soft);border-radius:6px;padding:1px 6px;letter-spacing:.02em;white-space:nowrap}
.guide .foot{font-size:11.5px;color:var(--sub);border-top:1px solid var(--line);padding-top:10px}

/* 무대(가상 바탕화면) */
.stage{min-width:0;display:flex;flex-direction:column;gap:10px}
.stage-note{font-size:12px;color:var(--sub);display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.stage-note b{color:var(--ink)}
.fit{position:relative;width:100%;overflow:hidden;border-radius:14px;border:1px solid var(--line)}
.done-card{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:22px;display:flex;flex-direction:column;gap:8px}
.done-card h2{margin:0;font-size:20px}
.done-card ul{margin:0;padding-left:18px}

/* ===== 아래부터는 실제 PC판을 흉내 낸 화면: 실제 앱처럼 밝은 화면 하나로 고정 ===== */
.desk{position:absolute;left:0;top:0;width:1000px;height:640px;transform-origin:0 0;font:13px/1.5 var(--f-app);color:#242831;
  background:radial-gradient(120% 90% at 85% 10%,#9cc3e8 0,#5e8fc6 45%,#2f5f9c 100%);overflow:hidden;user-select:none}
.desk *{box-sizing:border-box}
.desk button{font:inherit;color:inherit;cursor:pointer}
.desk input,.desk textarea{font:inherit;color:#242831;user-select:text}
.dicon{position:absolute;left:22px;top:20px;width:86px;display:flex;flex-direction:column;align-items:center;gap:6px;border:1px solid transparent;border-radius:6px;background:none;padding:8px 4px;color:#fff;text-shadow:0 1px 2px #0008;font-size:12px}
.dicon:hover,.dicon.sel{background:#ffffff33;border-color:#ffffff66}
.dicon .ico{width:46px;height:46px;border-radius:15px;background:#e8641f;color:#fff;display:grid;place-items:center;font:800 29px/1 var(--f-app);letter-spacing:-4px;padding-right:4px;box-shadow:0 3px 8px #0004;text-shadow:none}
.taskbar{position:absolute;left:0;right:0;bottom:0;height:40px;background:#1f2633ee;display:flex;align-items:center;gap:8px;padding:0 10px;color:#dfe6f0;font-size:12px}
.taskbar .tb-app{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;background:#ffffff14}
.taskbar .tb-app.on{background:#ffffff2a;box-shadow:inset 0 -2px #e8641f}
.taskbar .tb-app span{width:20px;height:20px;border-radius:7px;background:#e8641f;color:#fff;font:800 13px/20px var(--f-app);text-align:center;letter-spacing:-2px}
.taskbar .clock{margin-left:auto;text-align:right;line-height:1.25;font-size:11px}
.taskbar .tray{width:18px;height:18px;border-radius:6px;background:#e8641f;color:#fff;font:800 11px/18px var(--f-app);text-align:center;letter-spacing:-1px}

.win{position:absolute;left:120px;top:22px;width:840px;height:568px;background:#fff;border-radius:10px;box-shadow:0 18px 50px #0006,0 0 0 1px #0002;display:flex;flex-direction:column;overflow:hidden}
.win[hidden]{display:none}
.titlebar{height:32px;flex:none;display:flex;align-items:center;gap:8px;padding:0 0 0 12px;background:#fbfbfc;border-bottom:1px solid #eceef2;font-size:12px;color:#555e6d}
.titlebar .tw{width:16px;height:16px;border-radius:5px;background:#e8641f;color:#fff;font:800 10px/16px var(--f-app);text-align:center;letter-spacing:-1px}
.titlebar .ctl{margin-left:auto;display:flex}
.titlebar .ctl i{width:40px;height:32px;display:grid;place-items:center;font-style:normal;color:#7a8290}
.wbody{flex:1;min-height:0;display:flex;position:relative;background:#f5f6f8}

/* 서버 찾기 · 로그인 */
.center{flex:1;display:flex;align-items:center;justify-content:center}
.lcard{width:340px;background:#fff;border:1px solid #e9ebef;border-radius:18px;padding:26px 26px 22px;box-shadow:0 10px 36px #2530440d;display:flex;flex-direction:column;gap:10px}
.lcard .bm{width:48px;height:48px;border-radius:16px;background:#e8641f;color:#fff;display:grid;place-items:center;font:800 31px/1 var(--f-app);letter-spacing:-4px;padding-right:4px;margin:0 auto}
.lcard h3{margin:0;text-align:center;font-size:21px;font-weight:800;letter-spacing:-.5px}
.lcard h3 small{display:block;font-size:12px;font-weight:400;color:#737b89;letter-spacing:0}
.lcard label.l{font-size:11px;font-weight:700;color:#555e6d;margin-top:4px}
.lcard input[type=text],.lcard input[type=password]{width:100%;padding:9px 11px;border:1px solid #dfe2e8;border-radius:8px;background:#fff}
.lcard .auto{display:flex;align-items:center;gap:7px;font-size:12px;color:#737b89}
.pbtn{width:100%;border:0;border-radius:9px;background:#e8641f;color:#fff;min-height:40px;font-weight:700}
.pbtn:hover{background:#c95016}
.srv{display:flex;align-items:center;gap:10px;border:1px solid #e9ebef;border-radius:11px;padding:10px 12px;background:#fff;text-align:left;width:100%}
.srv:hover{border-color:#e8641f;background:#fff8f3}
.srv b{display:block;font-size:14px}
.srv small{color:#737b89;font-size:11px}
.srv .dot{width:9px;height:9px;border-radius:50%;background:#2eaa72;flex:none}
.searching{display:flex;align-items:center;gap:8px;justify-content:center;color:#737b89;font-size:12px}
.searching i{width:12px;height:12px;border-radius:50%;border:2px solid #f3c8ae;border-top-color:#e8641f;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* 앱 */
.rail{width:62px;flex:none;background:#f0f2f5;border-right:1px solid #e9ebef;display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 0 10px}
.me{position:relative;width:38px;height:38px;border:0;border-radius:13px;background:#f8dfcd;color:#985020;font-weight:700;font-size:11px;white-space:nowrap;padding:0;margin-bottom:6px}
.me::after{content:'';position:absolute;right:-2px;bottom:-2px;width:11px;height:11px;border-radius:50%;border:2px solid #f0f2f5;background:var(--st,#2eaa72)}
.me.class{--st:#e8a21f}
.ric{width:52px;border:0;background:none;border-radius:10px;padding:5px 0 4px;display:flex;flex-direction:column;align-items:center;gap:1px;color:#5f6775;font-size:10.5px;position:relative}
.ric:hover{background:#e6e9ee}
.ric.on{background:#fff;color:#e8641f;box-shadow:0 1px 3px #0000000d}
.ric svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ric .bdg{position:absolute;top:1px;right:6px;min-width:16px;height:16px;border-radius:8px;background:#e5484d;color:#fff;font-size:10px;font-weight:700;line-height:16px;padding:0 4px}
.ric.set{margin-top:auto}

.side{width:290px;flex:none;background:#fff;border-right:1px solid #e9ebef;display:flex;flex-direction:column;min-height:0}
.side-h{padding:12px 14px 8px;display:flex;flex-direction:column;gap:8px}
.side-h .t{display:flex;align-items:center;justify-content:space-between;font-size:16px;font-weight:700;color:#3a404b}
.sbox{display:flex;align-items:center;gap:6px;background:#f1f3f6;border-radius:9px;padding:7px 10px;color:#89919e}
.sbox input{border:0;background:none;outline:none;flex:1;min-width:0}
.sbox svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2}
.twin{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.twin button{border:1px solid #e3e6eb;background:#fff;border-radius:9px;padding:6px 0;font-size:12px;font-weight:600;color:#3a404b}
.twin button.hot{border-color:#f3c8ae;background:#fff1e8;color:#c95016}
.olist{flex:1;overflow:auto;padding:2px 8px 10px}
.sec{font-size:11px;font-weight:700;color:#8a92a0;padding:8px 6px 4px;display:flex;align-items:center;gap:6px}
.dept{display:flex;align-items:center;gap:6px;padding:5px 6px;font-weight:700;font-size:12.5px;color:#3a404b}
.dept small{font-weight:500;color:#8a92a0}
.dept .on{color:#21915f;font-weight:600}
.dept input{margin:0}
.person{display:flex;align-items:center;gap:8px;padding:5px 6px 5px 14px;border-radius:9px;position:relative}
.person:hover{background:#f5f6f8}
.person.off{opacity:.55;filter:grayscale(1)}
.person .av{position:relative;width:28px;height:28px;border-radius:10px;display:grid;place-items:center;font-size:10px;font-weight:700;flex:none}
.person .av i{position:absolute;right:-2px;bottom:-2px;width:10px;height:10px;border-radius:50%;border:2px solid #fff;background:#2eaa72}
.person.off .av i{background:#fff;border-color:#b7bdc7}
.person .av i.cls{background:#e8a21f}
.person .nm{flex:1;min-width:0;display:flex;align-items:baseline;gap:6px}
.person .nm b{font-size:13px}
.person .nm small{font-size:11px;color:#8a92a0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.person input{margin:0}
.star{border:0;background:none;width:26px;height:26px;border-radius:7px;color:#c2c7cf;opacity:0;display:grid;place-items:center}
.person:hover .star,.star.show,.star.fav{opacity:1}
.star.fav{color:#e8a21f}
.star svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round}
.star.fav svg{fill:currentColor}
.favbox{margin:4px 0 4px;border:1px solid #f3e1c9;background:#fffaf2;border-radius:10px;padding:2px 2px 4px}
.mbar{border-top:1px solid #e9ebef;padding:8px 10px;display:flex;align-items:center;gap:8px;font-size:12px;color:#5f6775}
.mbar .pbtn{width:auto;flex:1;min-height:32px;font-size:12px}

.main{flex:1;min-width:0;display:flex;flex-direction:column;background:#fff}
.main-h{height:46px;flex:none;border-bottom:1px solid #eef0f3;display:flex;align-items:center;gap:8px;padding:0 14px;font-weight:700;font-size:15px;color:#3a404b}
.main-h .sp{margin-left:auto}
.cbtn{border:0;background:#e8641f;color:#fff;border-radius:8px;padding:5px 11px;font-size:12px;font-weight:700}
.empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:#8a92a0;text-align:center;padding:20px}
.empty b{color:#3a404b;font-size:14px}
.tabs{display:flex;gap:2px;padding:6px 12px 0;border-bottom:1px solid #eef0f3}
.tabs span{padding:6px 10px;font-size:12px;color:#737b89;border-bottom:2px solid transparent}
.tabs span.on{color:#e8641f;border-color:#e8641f;font-weight:700}
.filters{display:flex;align-items:center;gap:6px;padding:7px 12px;border-bottom:1px solid #f2f3f5}
.filters .sbox{flex:1;padding:5px 9px}
.filters .chip{border:1px solid #e3e6eb;border-radius:999px;padding:2px 9px;font-size:11px;color:#5f6775;background:#fff}
.selbar{display:flex;align-items:center;gap:6px;padding:6px 12px;background:#fff8f3;border-bottom:1px solid #f6dccb;font-size:12px}
.selbar b{color:#c95016;margin-right:4px}
.selbar button{border:1px solid #e3e6eb;background:#fff;border-radius:7px;padding:3px 9px;font-size:11.5px}
.selbar button.pin{border-color:#f3c8ae;color:#c95016;font-weight:700}
.nlist{flex:1;overflow:auto}
.ngrp{font-size:11px;font-weight:700;color:#8a92a0;padding:8px 14px 4px;display:flex;align-items:center;gap:6px}
.ngrp.due{color:#c95016}
.ngrp.pin{color:#9a5a00}
.nrow{display:flex;align-items:center;gap:9px;padding:8px 14px;border-bottom:1px solid #f4f5f7;cursor:pointer;position:relative}
.nrow:hover{background:#fafbfc}
.nrow.due{background:#fffaf5}
.nrow.unread .who,.nrow.unread .pv{font-weight:700;color:#242831}
.nrow .who{width:56px;flex:none;font-size:12.5px;color:#5f6775}
.nrow .pv{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:12.5px;color:#5f6775}
.nrow .tm{font-size:11px;color:#9aa1ad;white-space:nowrap;font-variant-numeric:tabular-nums}
.nrow .dot{width:6px;height:6px;border-radius:50%;background:#e8641f;flex:none}
.nrow .imp{color:#e5484d;font-weight:800;font-size:11px}
.dueb{font-size:10.5px;font-weight:700;color:#c95016;background:#fff1e8;border-radius:6px;padding:1px 6px;white-space:nowrap}
.donebtn{border:0;background:#e8641f;color:#fff;border-radius:7px;padding:3px 9px;font-size:11px;font-weight:700}
.nrow input{margin:0}
.reply{border:1px solid #e3e6eb;background:#fff;border-radius:7px;padding:2px 8px;font-size:11px;display:none}
.nrow:hover .reply{display:inline-block}

.read{flex:1;overflow:auto;padding:12px 18px 18px;display:flex;flex-direction:column;gap:12px}
.racts{display:flex;gap:6px;flex-wrap:wrap;align-items:center;padding-bottom:10px;border-bottom:1px solid #eef0f3}
.racts button{border:1px solid #e3e6eb;background:#fff;border-radius:8px;padding:4px 10px;font-size:12px}
.racts .back{border:0;color:#5f6775}
.racts .rp{background:#e8641f;border-color:#e8641f;color:#fff;font-weight:700}
.letter{border:1px solid #eceef2;border-radius:14px;overflow:hidden}
.lhead{display:flex;gap:10px;align-items:center;padding:12px 14px;background:#fafbfc;border-bottom:1px solid #eceef2}
.lhead .av{width:38px;height:38px;border-radius:13px;display:grid;place-items:center;font-weight:700;font-size:12px}
.lhead b{font-size:14px}
.lhead small{color:#8a92a0;font-size:11.5px}
.lhead .tm{margin-left:auto;text-align:right;color:#8a92a0;font-size:11px}
.lbody{padding:14px 16px;font-size:13.5px;white-space:pre-wrap;line-height:1.75}
.duepanel{margin:12px 14px 0;border:1.5px solid #f3c8ae;background:#fffaf5;border-radius:12px;padding:12px 14px;display:flex;flex-direction:column;gap:6px}
.duepanel .h{display:flex;align-items:center;justify-content:space-between;font-weight:700}
.duepanel .h span{color:#c95016;font-size:12px}
.duepanel .when{color:#c95016;font-size:13px}
.duepanel .big{align-self:flex-start;border:0;background:#e8641f;color:#fff;border-radius:9px;padding:7px 16px;font-weight:700;font-size:13px}
.duepanel .big.doneok{background:#e9f6ef;color:#21915f}
.duepanel small{color:#737b89;font-size:11.5px}
.photo{margin:2px 16px 14px;height:120px;border-radius:9px;background:linear-gradient(180deg,#c8d6e3 0 38%,#a6b3c0 38% 52%,#d5793a 52% 66%,#b8432d 66% 78%,#7c8a3c 78%);position:relative;overflow:hidden}
.photo::after{content:'놀이터 공사 안내.png';position:absolute;right:8px;bottom:6px;font-size:10px;color:#fff;background:#0006;border-radius:5px;padding:0 6px}

/* 저장소 */
.stbar{display:flex;align-items:center;gap:4px;padding:8px 12px;border-bottom:1px solid #eef0f3;flex-wrap:wrap}
.stbar .tb{border:0;background:none;border-radius:7px;padding:4px 9px;font-size:12px;color:#5f6775}
.stbar .tb.on{background:#fff1e8;color:#c95016;font-weight:700}
.sfold{margin-left:auto;display:flex;align-items:center;gap:4px}
.sfold-open{display:flex;align-items:center;gap:7px;border:1px solid #e3e6eb;background:#fff;border-radius:9px;padding:4px 10px;text-align:left}
.sfold-open svg{width:17px;height:17px;fill:none;stroke:#c95016;stroke-width:1.8}
.sfold-open b{display:block;font-size:12px}
.sfold-open small{display:block;font-size:10.5px;color:#8a92a0}
.sfold.unset .sfold-open{border-color:#f3c8ae;background:#fff8f3}
.sfold-set{border:1px solid #e3e6eb;background:#fff;border-radius:8px;width:30px;height:30px;display:grid;place-items:center}
.sfold-set svg{width:15px;height:15px;fill:none;stroke:#737b89;stroke-width:1.8}
.stools{display:flex;gap:6px;align-items:center;padding:7px 12px;border-bottom:1px solid #f2f3f5}
.stools .sbox{flex:1;padding:5px 9px}
.stools .chip{border:1px solid #e3e6eb;border-radius:999px;padding:2px 9px;font-size:11px;color:#5f6775;background:#fff}
.stools .chip.on{border-color:#e8641f;color:#c95016;font-weight:700}
.sdate{font-size:11px;font-weight:700;color:#8a92a0;padding:8px 14px 4px}
.srow{display:flex;align-items:center;gap:10px;padding:8px 14px;border-bottom:1px solid #f4f5f7}
.srow .sic{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;font-size:15px;background:#f1f3f6;flex:none}
.srow .sn{flex:1;min-width:0}
.srow .sn b{display:block;font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.srow .sn small{color:#8a92a0;font-size:11px}
.srow .got{font-size:11px;color:#21915f;font-weight:700;white-space:nowrap}
.srow button{border:1px solid #e3e6eb;background:#fff;border-radius:7px;padding:3px 9px;font-size:11.5px}
.srow button.get{border-color:#e8641f;color:#c95016;font-weight:700}
.picker{width:460px;background:#fff;border-radius:8px;box-shadow:0 20px 60px #0005;overflow:hidden;font-size:12.5px}
.picker .ph{background:#f3f3f3;padding:8px 12px;font-size:12px;border-bottom:1px solid #e3e3e3;display:flex;justify-content:space-between}
.picker .pp{display:grid;grid-template-columns:130px 1fr;min-height:170px}
.picker .pl{background:#fafafa;border-right:1px solid #ececec;padding:8px;display:flex;flex-direction:column;gap:2px;color:#444}
.picker .pl span{padding:3px 6px;border-radius:4px}
.picker .pl span.on{background:#dceaf7}
.picker .pr{padding:8px;display:flex;flex-direction:column;gap:2px}
.picker .pr span{padding:4px 6px;border-radius:4px;display:flex;gap:6px}
.picker .pr span.on{background:#cce4f7}
.picker .pf{display:flex;align-items:center;gap:8px;padding:10px 12px;border-top:1px solid #ececec;background:#fafafa}
.picker .pf input{flex:1;border:1px solid #cfcfcf;border-radius:3px;padding:4px 6px;font-size:12px;background:#fff}
.picker .pf button{border:1px solid #bdbdbd;background:#fff;border-radius:4px;padding:4px 12px;font-size:12px}
.picker .pf .ok{background:#0067c0;border-color:#0067c0;color:#fff}
/* 미리보기 카드 */
.s-peek{position:absolute;z-index:30;width:360px;background:#fff;border:1px solid #e3e6eb;border-radius:12px;box-shadow:0 14px 40px #25304426;padding:12px 14px;display:flex;flex-direction:column;gap:8px}
.s-peek .ph{display:flex;justify-content:space-between;font-size:12px}
.s-peek .ph small{color:#8a92a0}
.s-peek .pb{font-size:12.5px;white-space:pre-wrap;line-height:1.65;max-height:150px;overflow:hidden}
.s-peek .pa{display:flex;gap:6px;align-items:center}
.s-peek .pa button{border:1px solid #e3e6eb;background:#fff;border-radius:7px;padding:3px 10px;font-size:11.5px}
.s-peek .pa .pri{background:#e8641f;border-color:#e8641f;color:#fff;font-weight:700}
.s-peek .pa small{margin-left:auto;font-size:10.5px;color:#8a92a0}

/* 쪽지 쓰기 */
.modal{position:absolute;inset:0;background:#1d232d55;display:flex;align-items:center;justify-content:center;z-index:40}
.cmp{width:560px;background:#fff;border-radius:14px;box-shadow:0 20px 60px #0004;display:flex;flex-direction:column;overflow:hidden}
.cmp-h{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid #eef0f3;font-weight:700}
.cmp-h button{border:0;background:none;font-size:18px;color:#8a92a0;line-height:1}
.cmp-b{padding:12px 16px;display:flex;flex-direction:column;gap:8px}
.to{display:flex;flex-wrap:wrap;gap:5px;align-items:center;border:1px solid #e3e6eb;border-radius:9px;padding:6px 8px;font-size:12px}
.to .lbl{color:#8a92a0;margin-right:2px}
.to .pc{background:#fff1e8;color:#985020;border-radius:999px;padding:1px 9px;font-weight:600}
.cmp-b input[type=text]{border:1px solid #e3e6eb;border-radius:9px;padding:7px 10px}
.cmp-b textarea{border:1px solid #e3e6eb;border-radius:9px;padding:9px 10px;height:110px;resize:none;line-height:1.6}
.opts{display:flex;flex-wrap:wrap;gap:6px}
.opts button{border:1px solid #e3e6eb;background:#fff;border-radius:8px;padding:4px 10px;font-size:12px;color:#3a404b}
.opts button.on{border-color:#e8641f;background:#fff1e8;color:#c95016;font-weight:700}
.duerow{display:flex;align-items:center;gap:8px;flex-wrap:wrap;border:1.5px solid #f3c8ae;background:#fffaf5;border-radius:10px;padding:8px 10px;font-size:12.5px}
.duerow b{color:#c95016}
.duerow select{border:1px solid #e3e6eb;border-radius:7px;padding:2px 6px;font:inherit;font-size:12px;background:#fff}
.duerow small{flex-basis:100%;color:#737b89;font-size:11.5px}
.cmp-f{display:flex;align-items:center;gap:8px;justify-content:flex-end;padding:10px 16px;border-top:1px solid #eef0f3;background:#fafbfc}
.cmp-f small{margin-right:auto;color:#8a92a0;font-size:11px}
.cmp-f .gray{border:1px solid #e3e6eb;background:#fff;border-radius:8px;padding:6px 14px}
.cmp-f .send{border:0;background:#e8641f;color:#fff;border-radius:8px;padding:6px 18px;font-weight:700}
.cmp-f .send:disabled{opacity:.45;cursor:default}

.menu{position:absolute;left:58px;top:14px;z-index:35;width:200px;background:#fff;border:1px solid #e3e6eb;border-radius:12px;box-shadow:0 12px 30px #2530442a;padding:6px;display:flex;flex-direction:column;gap:2px}
.menu .mh{padding:6px 8px;font-size:11px;color:#8a92a0}
.menu button{border:0;background:none;text-align:left;padding:7px 9px;border-radius:8px;font-size:12.5px;display:flex;gap:6px;align-items:center}
.menu button:hover{background:#f5f6f8}
.menu button.cur{background:#fff1e8;color:#c95016;font-weight:700}
.menu button small{margin-left:auto;color:#8a92a0;font-size:10.5px}

/* 윈도우 알림 */
.toasts{position:absolute;right:14px;bottom:52px;display:flex;flex-direction:column;gap:8px;z-index:50}
.s-toast{width:300px;background:#2a303bf2;color:#f2f4f7;border-radius:10px;padding:10px 12px;box-shadow:0 10px 30px #0006;display:flex;gap:10px;animation:tin .35s ease-out}
.s-toast .ti{width:30px;height:30px;border-radius:10px;background:#e8641f;color:#fff;display:grid;place-items:center;font:800 17px/1 var(--f-app);letter-spacing:-2px;flex:none}
.s-toast b{display:block;font-size:12.5px}
.s-toast small{font-size:11.5px;color:#c9cfd8}
@keyframes tin{from{transform:translateX(30px);opacity:0}}

/* 안내 고리와 말풍선(페이지 쪽, 화면 기준 위치) */
.ring{position:fixed;z-index:80;pointer-events:none;border-radius:10px;box-shadow:0 0 0 3px var(--warm),0 6px 18px #e8641f55;transition:all .18s ease-out}
.ring::after{content:'';position:absolute;inset:-3px;border-radius:12px;border:3px solid var(--warm);animation:pulse 1.4s ease-out infinite}
@keyframes pulse{from{opacity:.9;transform:scale(1)}to{opacity:0;transform:scale(1.12)}}
.tipb{position:fixed;z-index:81;pointer-events:none;max-width:280px;background:#23262d;color:#fff;border-radius:12px;padding:10px 12px;font:13px/1.55 var(--f-ui);box-shadow:0 10px 28px #0005}
.tipb b{color:#ffb98f}
.tipb .tr{display:flex;gap:6px;justify-content:flex-end;margin-top:8px}
.tipb .tr button{pointer-events:auto;border:0;border-radius:8px;background:#e8641f;color:#fff;font-weight:700;padding:4px 12px;font-size:12px}
.tipb::before{content:'';position:absolute;width:12px;height:12px;background:#23262d;transform:rotate(45deg);left:var(--ax,20px)}
.tipb.below::before{top:-6px}
.tipb.above::before{bottom:-6px}
@media (prefers-reduced-motion: reduce){.ring::after,.s-toast,.searching i{animation:none}.ring,.prog .bar i{transition:none}}

.top .lab-notice { margin-top: 4px; color: var(--ink); }
.home-link { color: var(--ink); text-decoration: none; }