:root{
  --bg:#F2F4F6; --card:#FFFFFF; --text:#191F28; --text2:#4E5968; --text3:#8B95A1; --text4:#B0B8C1;
  --line:#E5E8EB; --line2:#F2F4F6; --hover:#F9FAFB;
  --blue:#3182F6; --blue-d:#1B64DA; --blue-w:#E8F3FF;
  --green:#00A86B; --green-w:#E5F8F0; --red:#F04452; --red-w:#FFEEEE;
  --orange:#F28B00; --orange-w:#FFF4E5; --purple:#7B61FF; --purple-w:#F1EEFF;
  --r-lg:20px; --r-md:14px; --r-sm:10px;
  --shadow:0 2px 8px rgba(0,0,0,.04);
  --sheet-shadow:0 -8px 40px rgba(0,0,0,.12);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--bg);color:var(--text);font-family:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;-webkit-font-smoothing:antialiased;letter-spacing:-.01em}
body{min-height:100vh}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
input,select,textarea{font:inherit;color:inherit}
a{color:inherit;text-decoration:none}
.hidden{display:none!important}

/* ---------- 공통 ---------- */
.wrap{max-width:1180px;margin:0 auto;padding:0 24px 120px}
.topbar{position:sticky;top:0;z-index:20;background:rgba(242,244,246,.88);backdrop-filter:saturate(180%) blur(14px)}
.topbar-in{max-width:1180px;margin:0 auto;padding:14px 24px;display:flex;align-items:center;gap:12px}
.brand{font-size:19px;font-weight:700;display:flex;align-items:center;gap:8px}
.brand-dot{width:26px;height:26px;border-radius:8px;background:var(--blue);display:grid;place-items:center;color:#fff;font-size:14px;font-weight:800}
.spacer{flex:1}
.chip{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 12px;border-radius:999px;background:var(--card);font-size:14px;font-weight:600;color:var(--text2);box-shadow:var(--shadow)}
.chip:hover{background:#fff;color:var(--text)}
.online-dot{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 0 3px var(--green-w)}
.card{background:var(--card);border-radius:var(--r-lg);box-shadow:var(--shadow)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:44px;padding:0 18px;border-radius:var(--r-md);font-weight:600;font-size:15px;transition:background .15s,transform .05s;white-space:nowrap}
.btn:active{transform:scale(.98)}
.btn-primary{background:var(--blue);color:#fff}.btn-primary:hover{background:var(--blue-d)}
.btn-primary:disabled{background:#B5D3FB;cursor:default}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn-weak{background:var(--blue-w);color:var(--blue)}.btn-weak:hover{background:#D7E9FF}
.btn-gray{background:var(--line2);color:var(--text2)}.btn-gray:hover{background:var(--line)}
.btn-danger{background:var(--red-w);color:var(--red)}
.btn-sm{height:36px;padding:0 12px;font-size:14px;border-radius:var(--r-sm)}
.btn-lg{height:56px;font-size:17px;border-radius:16px;width:100%}
.badge{display:inline-flex;align-items:center;height:24px;padding:0 9px;border-radius:7px;font-size:12.5px;font-weight:600;white-space:nowrap}
.b-gray{background:var(--line2);color:var(--text2)} .b-blue{background:var(--blue-w);color:var(--blue)}
.b-green{background:var(--green-w);color:var(--green)} .b-orange{background:var(--orange-w);color:var(--orange)}
.b-red{background:var(--red-w);color:var(--red)} .b-purple{background:var(--purple-w);color:var(--purple)}
.b-dark{background:#E9EBEE;color:#4E5968}
.muted{color:var(--text3)} .sub{color:var(--text2)}
.bar{height:8px;border-radius:99px;background:var(--line2);overflow:hidden}
.bar>i{display:block;height:100%;border-radius:99px;background:var(--blue);transition:width .4s}
.bar.done>i{background:var(--green)}
.input{width:100%;height:52px;border:1.5px solid var(--line);border-radius:var(--r-md);padding:0 16px;font-size:16px;background:#fff;outline:none;transition:border .15s}
.input:focus{border-color:var(--blue)}
.empty{padding:56px 20px;text-align:center;color:var(--text3)}
.empty b{display:block;color:var(--text2);font-size:16px;margin-bottom:6px}

/* ---------- 로그인 ---------- */
.login{min-height:100vh;display:grid;place-items:center;padding:24px}
.login-box{width:100%;max-width:380px}
.login h1{font-size:26px;font-weight:700;line-height:1.4;margin:18px 0 8px}
.login p{color:var(--text3);margin-bottom:28px}
.login .err{color:var(--red);font-size:14px;margin:10px 2px 0;min-height:20px}

/* ---------- 목록 ---------- */
.page-head{display:flex;align-items:flex-end;gap:12px;margin:16px 0 18px}
.page-head h2{font-size:26px;font-weight:700}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:16px}
.stat{padding:18px 20px;cursor:pointer;border:2px solid transparent;transition:border .15s}
.stat.on{border-color:var(--blue)}
.stat .k{font-size:14px;color:var(--text2);font-weight:600}
.stat .v{font-size:28px;font-weight:700;margin-top:6px}
.stat .v small{font-size:15px;font-weight:600;color:var(--text3);margin-left:2px}
.dropzone{display:flex;align-items:center;gap:16px;padding:18px 22px;margin-bottom:16px;border:2px dashed #C9D6E8;background:#F7FAFF;border-radius:var(--r-lg);cursor:pointer;transition:all .15s}
.dropzone:hover,.dropzone.over{border-color:var(--blue);background:var(--blue-w)}
.dropzone .ico{width:44px;height:44px;border-radius:12px;background:#fff;display:grid;place-items:center;font-size:22px;box-shadow:var(--shadow)}
.dropzone b{display:block;font-size:16px}
.dropzone span{font-size:14px;color:var(--text3)}
.toolbar{display:flex;gap:10px;align-items:center;margin-bottom:12px}
.search{flex:1;max-width:340px;height:42px;border-radius:12px;border:0;background:#fff;padding:0 14px 0 38px;font-size:15px;outline:none;box-shadow:var(--shadow);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none' stroke='%238B95A1' stroke-width='2'%3E%3Ccircle cx='8' cy='8' r='6'/%3E%3Cpath d='m13 13 4 4'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:12px center}
.list{overflow:hidden}
.lrow{display:grid;grid-template-columns:96px minmax(220px,1.6fr) 186px 96px minmax(190px,1.2fr) 130px;gap:16px;align-items:center;padding:16px 22px;border-bottom:1px solid var(--line2);cursor:pointer;transition:background .12s}
.lrow:last-child{border-bottom:0}
.lrow:hover{background:var(--hover)}
.lhead{cursor:default;font-size:13px;color:var(--text3);font-weight:600;padding-top:14px;padding-bottom:12px;background:#FCFCFD}
.lhead:hover{background:#FCFCFD}
.lname b{display:block;font-size:16px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lname span{font-size:13px;color:var(--text3)}
.lprog .t{display:flex;justify-content:space-between;font-size:13px;margin-bottom:6px}
.lprog .t b{font-weight:700}
.lprog .n{font-size:12.5px;color:var(--text3);margin-top:6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.editing-tag{display:inline-flex;align-items:center;gap:4px;font-size:12px;color:var(--orange);font-weight:600;margin-top:4px}
.date-col{font-size:14px;color:var(--text2)}
.dday{font-size:12px;font-weight:600;margin-top:3px}
.ver{font-size:13px;color:var(--text3);text-align:right}
.mcards{display:none}

/* ---------- 상세 ---------- */
.back{display:inline-flex;align-items:center;gap:4px;height:36px;padding:0 10px 0 4px;border-radius:10px;color:var(--text2);font-weight:600;margin:10px 0 6px}
.back:hover{background:#fff}
.hero{padding:26px 28px}
.hero-top{display:flex;gap:16px;align-items:flex-start}
.hero h2{font-size:24px;font-weight:700;line-height:1.35;word-break:keep-all}
.hero .meta{margin-top:6px;color:var(--text2);font-size:15px;display:flex;flex-wrap:wrap;gap:6px 14px}
.hero-prog{display:flex;align-items:center;gap:16px;margin-top:22px}
.hero-prog .num{font-size:30px;font-weight:700;white-space:nowrap}
.hero-prog .num small{font-size:16px;color:var(--text3);font-weight:600}
.hero-prog .bar{flex:1;height:10px}
.gate{display:flex;align-items:center;gap:10px;margin-top:16px;padding:13px 16px;border-radius:var(--r-md);font-weight:600;font-size:15px}
.gate.ok{background:var(--green-w);color:var(--green)} .gate.no{background:var(--red-w);color:var(--red)}
.hero-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}
.lockbar{display:flex;align-items:center;gap:12px;margin-top:12px;padding:14px 18px;border-radius:var(--r-md);font-size:15px}
.lockbar.other{background:var(--orange-w);color:#A65F00}
.lockbar.mine{background:var(--blue-w);color:var(--blue-d)}
.lockbar.free{background:var(--line2);color:var(--text2)}
.lockbar b{font-weight:700}
.status-select{height:36px;border-radius:10px;border:1.5px solid var(--line);padding:0 30px 0 12px;font-weight:600;font-size:14px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%238B95A1' stroke-width='2'%3E%3Cpath d='m2 4 4 4 4-4'/%3E%3C/svg%3E") no-repeat right 10px center;appearance:none;outline:none}
.status-select:focus{border-color:var(--blue)}
.tabs{display:flex;gap:4px;padding:4px;background:#E9EBEE;border-radius:14px;margin:20px 0 14px;position:sticky;top:62px;z-index:10}
.tabs button{flex:1;height:40px;border-radius:11px;font-weight:600;font-size:15px;color:var(--text2)}
.tabs button.on{background:#fff;color:var(--text);box-shadow:0 1px 3px rgba(0,0,0,.08)}
.panel{padding:8px 0}
.sec-title{font-size:17px;font-weight:700;padding:18px 24px 8px;display:flex;align-items:center;gap:8px}

/* 제안 상품 */
.prod{display:grid;grid-template-columns:40px 1fr auto;gap:14px;padding:16px 24px;border-bottom:1px solid var(--line2);align-items:center}
.prod:last-child{border-bottom:0}
.pno{width:32px;height:32px;border-radius:10px;background:var(--line2);display:grid;place-items:center;font-weight:700;color:var(--text2);font-size:14px}
.pname{font-size:16px;font-weight:600;line-height:1.4;word-break:keep-all}
.pcode{font-size:13px;margin-top:3px}
.pcode.missing{color:var(--red);font-weight:600}
.pnums{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:8px;font-size:13.5px;color:var(--text2)}
.pnums em{font-style:normal;color:var(--text3);margin-right:4px}
.pprice{text-align:right;font-size:19px;font-weight:700;white-space:nowrap}
.pprice small{display:block;font-size:12.5px;font-weight:500;color:var(--text3);margin-top:2px}

/* 거래 조건 */
.kv{display:grid;grid-template-columns:150px 1fr;gap:12px;padding:12px 24px;border-bottom:1px solid var(--line2);font-size:15px;line-height:1.55}
.kv:last-child{border-bottom:0}
.kv dt{color:var(--text3)}
.kv dd{word-break:break-all;white-space:pre-wrap}
.kv dd a{color:var(--blue)}
.kv.empty dd{color:var(--text4)}
.show-empty{margin:4px 24px 14px;font-size:14px;color:var(--text3);font-weight:600}

/* 체크리스트 */
.stage{padding:14px 24px 6px;font-size:14px;font-weight:700;color:var(--text3);display:flex;align-items:center;gap:8px}
.stage .cnt{font-weight:600;color:var(--text4)}
.ck{display:grid;grid-template-columns:30px minmax(220px,1fr) 248px 136px 104px minmax(130px,.7fr);gap:10px;align-items:center;padding:10px 24px;border-bottom:1px solid var(--line2);transition:background .15s}
.ck.changed{background:#F4F9FF}
.ck .no{font-size:13px;font-weight:700;color:var(--text3);text-align:center}
.ck .it b{display:block;font-size:15px;font-weight:600;line-height:1.4}
.ck .it span{font-size:12.5px;color:var(--text3)}
.ck.st-완료 .it b{color:var(--text3);text-decoration:line-through;text-decoration-color:var(--text4)}
.seg{display:flex;background:var(--line2);border-radius:10px;padding:3px;gap:2px}
.seg button{flex:1;height:30px;border-radius:8px;font-size:13px;font-weight:600;color:var(--text3)}
.seg button:disabled{cursor:default}
.seg button.on.s-대기{background:#fff;color:var(--text2);box-shadow:0 1px 2px rgba(0,0,0,.08)}
.seg button.on.s-진행중{background:var(--blue);color:#fff}
.seg button.on.s-완료{background:var(--green);color:#fff}
.seg button.on.s-보류{background:#8B95A1;color:#fff}
.cin{width:100%;height:36px;border:1.5px solid transparent;background:var(--line2);border-radius:9px;padding:0 10px;font-size:14px;outline:none}
.cin:focus{border-color:var(--blue);background:#fff}
.cin:disabled{background:transparent;color:var(--text2);padding-left:0}
.cin:disabled::placeholder{color:transparent}
.ck-head{font-size:12.5px;color:var(--text3);font-weight:600;padding-top:14px;padding-bottom:8px;background:#FCFCFD;border-radius:var(--r-lg) var(--r-lg) 0 0}
.ck-head.ck{background:#FCFCFD}
.savebar{position:fixed;left:0;right:0;bottom:0;z-index:30;padding:14px 20px calc(14px + env(safe-area-inset-bottom));background:rgba(255,255,255,.96);backdrop-filter:blur(10px);box-shadow:var(--sheet-shadow);transform:translateY(110%);transition:transform .25s}
.savebar{visibility:hidden}.savebar.show{transform:none;visibility:visible}
.savebar-in{max-width:1180px;margin:0 auto;display:flex;align-items:center;gap:12px}
.savebar-in .txt{flex:1;font-weight:600}
.savebar-in .txt small{display:block;color:var(--text3);font-weight:500;font-size:13px}

/* 기록 */
.hist{padding:14px 24px;border-bottom:1px solid var(--line2)}
.hist:last-child{border-bottom:0}
.hist-h{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--text3);margin-bottom:6px}
.hist-h b{color:var(--text);font-size:15px}
.hist li{list-style:none;font-size:14.5px;line-height:1.6;color:var(--text2);padding-left:12px;position:relative}
.hist li::before{content:"";position:absolute;left:0;top:10px;width:4px;height:4px;border-radius:50%;background:var(--text4)}
.hist li s{color:var(--text3)}
.hist li .arrow{color:var(--text4);margin:0 4px}
.vers{display:flex;flex-wrap:wrap;gap:8px;padding:6px 24px 18px}

/* ---------- 바텀시트 / 모달 ---------- */
.dim{position:fixed;inset:0;background:rgba(0,0,0,.42);z-index:50;display:flex;align-items:center;justify-content:center;padding:20px;animation:fade .18s}
.sheet{background:#fff;border-radius:24px;width:100%;max-width:520px;max-height:88vh;overflow:auto;padding:28px 26px 22px;animation:up .22s cubic-bezier(.2,.8,.2,1)}
.sheet h3{font-size:22px;font-weight:700;line-height:1.4;margin-bottom:6px;word-break:keep-all}
.sheet .desc{color:var(--text3);font-size:15px;margin-bottom:18px}
.sheet .btns{display:flex;gap:8px;margin-top:22px}
.sheet .btns .btn{flex:1;height:54px;font-size:16px;border-radius:16px}
.confirm-box{background:var(--hover);border-radius:16px;padding:6px 0}
.confirm-box .kv{padding:10px 18px;grid-template-columns:96px 1fr;font-size:15px}
.confirm-box .kv dd{font-weight:600}
.plist{margin:0;padding:0}
.plist li{list-style:none;display:flex;justify-content:space-between;gap:10px;font-weight:500;padding:3px 0}
.plist li span:last-child{font-weight:600;white-space:nowrap}
.dupbox{margin-top:14px;padding:14px 16px;border-radius:14px;background:var(--orange-w);color:#8A5300;font-size:14.5px}
.dupbox label{display:flex;gap:8px;align-items:center;margin-top:8px;font-weight:600;color:var(--text);cursor:pointer}
.dupbox input{accent-color:var(--blue);width:18px;height:18px}
.olist li{list-style:none;display:flex;align-items:center;gap:10px;padding:11px 0;border-bottom:1px solid var(--line2);font-size:15px}
.olist li:last-child{border-bottom:0}
.olist .av{width:36px;height:36px;border-radius:50%;background:var(--blue-w);color:var(--blue);display:grid;place-items:center;font-weight:700}
.olist .where{margin-left:auto;font-size:13px;color:var(--text3);text-align:right}
.field-label{font-size:14px;color:var(--text2);font-weight:600;margin:14px 0 8px}
.err-msg{color:var(--red);font-size:14px;margin-top:10px;min-height:18px}
@keyframes up{from{transform:translateY(30px);opacity:0}to{transform:none;opacity:1}}
@keyframes fade{from{opacity:0}to{opacity:1}}

#toast{position:fixed;left:50%;bottom:100px;transform:translate(-50%,20px);background:rgba(25,31,40,.92);color:#fff;padding:13px 20px;border-radius:14px;font-size:15px;font-weight:500;z-index:80;opacity:0;pointer-events:none;transition:all .25s;max-width:90vw;text-align:center}
#toast.show{opacity:1;transform:translate(-50%,0)}
#drop-overlay{position:fixed;inset:0;z-index:70;background:rgba(49,130,246,.12);backdrop-filter:blur(2px);display:none;align-items:center;justify-content:center;padding:24px}
#drop-overlay.show{display:flex}
.drop-overlay-box{background:#fff;border:2px dashed var(--blue);border-radius:24px;padding:40px 56px;text-align:center;box-shadow:0 20px 60px rgba(49,130,246,.25)}
.drop-overlay-box b{display:block;font-size:19px;margin:10px 0 4px}
.drop-overlay-box span{color:var(--text3)}
.drop-ico{font-size:40px}
.spinner{width:22px;height:22px;border:3px solid var(--blue-w);border-top-color:var(--blue);border-radius:50%;animation:spin .7s linear infinite;margin:40px auto}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- 모바일 ---------- */
@media (max-width: 760px){
  .wrap{padding:0 16px 120px}
  .topbar-in{padding:12px 16px}
  .brand{font-size:17px}
  .hide-m{display:none!important}
  .page-head h2{font-size:23px}
  .stats{grid-template-columns:repeat(2,1fr);gap:10px}
  .stat{padding:15px 16px}.stat .v{font-size:24px}
  .dropzone{display:none}
  .list{display:none}
  .mcards{display:flex;flex-direction:column;gap:12px}
  .mcard{padding:20px}
  .mcard .top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
  .mcard h4{font-size:17px;font-weight:700;line-height:1.4;word-break:keep-all}
  .mcard .ch{font-size:14px;color:var(--text3);margin-top:3px}
  .mcard .row2{display:flex;justify-content:space-between;align-items:baseline;margin-top:16px;font-size:14px}
  .mcard .row2 b{font-size:20px}
  .mcard .bar{margin-top:8px}
  .mcard .nx{margin-top:12px;font-size:14px;color:var(--text2);background:var(--hover);border-radius:12px;padding:10px 12px}
  .mcard .nx em{font-style:normal;color:var(--blue);font-weight:700;margin-right:6px}
  .mcard .prods{margin-top:10px;font-size:13.5px;color:var(--text3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .hero{padding:22px 20px}
  .hero h2{font-size:21px}
  .hero-prog .num{font-size:26px}
  .tabs{top:56px;margin:16px 0 12px}
  .tabs button{font-size:14px}
  .prod{grid-template-columns:32px 1fr;padding:16px 20px}
  .prod .pprice{grid-column:2;text-align:left;margin-top:-4px}
  .kv{grid-template-columns:110px 1fr;padding:12px 20px;font-size:14.5px}
  .sec-title{padding:18px 20px 8px}
  .stage{padding:14px 20px 6px}
  .ck{grid-template-columns:24px 1fr;padding:14px 20px;gap:8px 10px}
  .ck>.seg,.ck>.cin,.ck>.ckf{grid-column:2}
  .ck-head{display:none}
  .ckf{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .dim{align-items:flex-end;padding:0}
  .sheet{border-radius:24px 24px 0 0;max-height:92vh;padding:26px 22px calc(18px + env(safe-area-inset-bottom))}
  .hist,.vers{padding-left:20px;padding-right:20px}
}
@media (min-width: 761px){ .ckf{display:contents} }

/* 새 공구 만들기 */
.sheet.wide{max-width:760px}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px 14px}
.ff{display:flex;flex-direction:column;gap:6px;font-size:14px;font-weight:600;color:var(--text2)}
.ff.wide{grid-column:1/-1}
.ff .input{height:46px;font-size:15px;font-weight:500;color:var(--text)}
.req{color:var(--red);font-style:normal}
.prow{display:grid;grid-template-columns:32px 130px 1fr 130px;gap:8px;align-items:center;margin-bottom:8px}
.prow .input{height:44px;font-size:15px}
@media (max-width:760px){
  .fgrid{grid-template-columns:1fr}
  .prow{grid-template-columns:28px 1fr 1fr;}
  .prow [data-p="name"]{grid-column:2/-1;grid-row:2}
  .page-head{flex-wrap:wrap}
}

.btn-white{background:#fff;color:var(--text2);box-shadow:var(--shadow)}.btn-white:hover{color:var(--text)}