:root{
  --page:#F2F4F6; --card:#FFFFFF; --soft:#F7F8FA; --line:#E8EBEF;
  --ink:#191F28; --ink-2:#4E5968; --ink-3:#6B7684; --ink-4:#8B95A1;
  --navy:#102F6F; --navy-h:#0B2456; --blue:#2F5FD0; --blue-soft:#EAF0FC;
  --orange:#FF730F; --orange-ink:#B44A00; --orange-soft:#FFF1E6;
  --green:#12805C; --green-soft:#E6F5EE; --red:#D92D20;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{font-family:"Pretendard Variable",Pretendard,system-ui,sans-serif;color:var(--ink);background:var(--page);font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased;letter-spacing:-.01em}
[hidden]{display:none!important}
::selection{background:#D6E2FA}
button,textarea,input,select{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:8px}
svg{flex:none}
.mark{width:28px;height:28px;border-radius:8px;background:var(--navy);color:#fff;display:inline-grid;place-items:center;font-size:13px;font-weight:800}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:16.5px;letter-spacing:-.03em}
.btn-primary{border:0;border-radius:12px;background:var(--navy);color:#fff;font-weight:700;padding:12px 16px}
.btn-primary:hover{background:var(--navy-h)}
.ib{width:38px;height:38px;border:0;border-radius:11px;background:transparent;display:grid;place-items:center;color:var(--ink-2);flex:none;cursor:pointer}
.ib:hover{background:var(--line)}
.link{border:0;background:transparent;color:var(--blue);font-weight:700;font-size:13.5px;padding:4px 0;text-align:left}
.link.quiet{color:var(--ink-3);font-weight:500}

/* 로그인 */
.login{min-height:100dvh;display:grid;place-items:center;padding:20px}
.login-card{width:min(360px,100%);background:#fff;border-radius:20px;padding:28px;display:flex;flex-direction:column;gap:14px}
.login-card label{display:flex;flex-direction:column;gap:6px;font-size:14px;font-weight:600;color:var(--ink-2)}
.login-card input,.login-card select{border:1px solid #D9DDE4;border-radius:12px;padding:11px 12px;font-size:16px;background:#fff}
.err{color:var(--red);font-size:14px;margin:0;min-height:1em}

/* 3칸 */
.app{display:grid;grid-template-columns:300px minmax(0,1fr) 330px;gap:12px;height:100dvh;padding:12px}
.panel{background:var(--card);border-radius:20px;min-height:0;display:flex;flex-direction:column;overflow:hidden}

/* 왼쪽 */
.s-top{padding:18px 16px 10px}
.search{margin-top:14px;display:flex;align-items:center;gap:8px;background:var(--soft);border-radius:12px;padding:0 12px;color:var(--ink-4)}
.search input{border:0;outline:0;background:transparent;padding:9px 0;flex:1;min-width:0;font-size:14px;color:var(--ink)}
.new{margin-top:10px;width:100%;border:0;border-radius:12px;background:var(--navy);color:#fff;padding:11px;font-weight:700;display:flex;align-items:center;justify-content:center;gap:6px}
.new:hover{background:var(--navy-h)}
.s-list{overflow:auto;padding:4px 10px 16px;flex:1}
.sec{font-size:12.5px;font-weight:700;color:var(--ink-3);padding:14px 8px 6px;display:flex;align-items:center;gap:6px}
.sec .n{margin-left:auto;font-weight:600;color:var(--ink-4)}
.live{background:var(--orange-soft);border-radius:14px;padding:4px;margin:0 2px}
.row{display:grid;grid-template-columns:1fr auto;gap:1px 8px;width:100%;border:0;background:transparent;text-align:left;border-radius:12px;padding:9px 10px}
.row:hover{background:var(--soft)}
.live .row:hover{background:#FFE6D3}
.row[aria-current="true"]{background:var(--blue-soft)}
.row .t{font-weight:650;font-size:14.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row .time{font-size:12px;color:var(--ink-4);align-self:center;white-space:nowrap}
.row .p{grid-column:1/-1;font-size:13px;color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row .p.run{color:var(--orange-ink);font-weight:600}
.proj-h{display:flex;align-items:center;gap:6px;padding:12px 8px 4px}
.proj-h b{font-size:14px;font-weight:750;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.proj-h button{border:0;background:transparent;color:var(--ink-4);border-radius:6px;width:24px;height:24px;display:grid;place-items:center;padding:0}
.proj-h button:hover{background:var(--line);color:var(--ink)}
.empty-g{font-size:13px;color:var(--ink-4);padding:2px 10px 6px}
.pill{font-size:11.5px;font-weight:700;border-radius:999px;padding:2px 8px;white-space:nowrap;align-self:center}
.p-pv{background:var(--blue-soft);color:var(--blue)}.p-ok{background:var(--green-soft);color:var(--green)}
.s-foot{padding:10px 16px 12px;border-top:1px solid var(--line)}
.me-line{display:flex;align-items:center;justify-content:space-between;font-size:13.5px;color:var(--ink-2)}

/* 가운데 */
.head{display:flex;align-items:center;gap:10px;padding:12px 20px;border-bottom:1px solid var(--line);min-height:64px}
.menu{display:none}
.title-wrap{min-width:0;flex:1}
.head h1{margin:0;font-size:17.5px;font-weight:800;letter-spacing:-.03em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.head .sub{font-size:12.5px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.model-wrap{display:flex;gap:6px}
.model-wrap select{border:0;background:var(--soft);border-radius:10px;padding:8px 10px;font-size:13.5px;font-weight:650;max-width:160px}
.model-wrap select:hover{background:var(--line)}
.head .info-btn{display:none}
.feed{flex:1;overflow:auto;padding:16px 20px}
.col{max-width:720px;margin:0 auto}
.welcome{margin:10vh auto 0;text-align:center;color:var(--ink-3);max-width:420px}
.welcome h2{color:var(--ink);font-size:24px;letter-spacing:-.03em;margin:0 0 8px}
.m{margin:0 0 22px}
.m-h{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--ink-3);margin-bottom:6px}
.m-h b{color:var(--ink);font-size:14px}
.av{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:11px;font-weight:700;flex:none}
.av-g{background:var(--card);border:1.5px solid var(--navy);color:var(--navy)}
.bubble{background:var(--soft);border-radius:4px 18px 18px 18px;padding:10px 15px;display:inline-block;max-width:92%;white-space:pre-wrap;overflow-wrap:anywhere}
.md{overflow-wrap:anywhere}
.md p{margin:0 0 9px;max-width:68ch}
.md ul,.md ol{margin:0 0 9px;padding-left:22px}
.md li{margin:2px 0}
.md h3,.md h4{margin:14px 0 6px;font-size:15.5px}
.md code{background:var(--soft);border-radius:6px;padding:1px 6px;font-size:.92em}
.md pre{background:var(--soft);border-radius:12px;padding:12px 14px;overflow:auto;font-size:13px;line-height:1.5}
.md pre code{background:transparent;padding:0}
.md a{color:var(--blue);text-underline-offset:3px}
.md table{border-collapse:collapse;margin:0 0 10px;font-size:14px;display:block;overflow:auto}
.md th,.md td{border:1px solid var(--line);padding:6px 10px;text-align:left}
.md th{background:var(--soft)}
.tools{display:flex;gap:2px;margin-top:4px}
.tb{border:0;background:transparent;border-radius:8px;padding:5px 8px;color:var(--ink-3);display:flex;align-items:center;gap:5px;font-size:12.5px}
.tb:hover{background:var(--soft);color:var(--ink)}
.imgs{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:8px;max-width:620px;margin-top:8px}
.imgs.small{grid-template-columns:repeat(auto-fill,96px)}
.imgs figure{margin:0}
.imgs a{display:block}
.imgs img{width:100%;border-radius:14px;display:block;background:var(--soft)}
.imgs.small img{height:96px;object-fit:cover}
.imgs figcaption{font-size:12.5px;color:var(--ink-3);margin-top:3px;display:flex;gap:8px;justify-content:space-between}
.imgs figcaption a{color:var(--ink-3)}
.sys{margin:14px auto 22px;max-width:560px;text-align:center;font-size:13.5px;color:var(--ink-2);background:var(--soft);border-radius:14px;padding:9px 14px}
.sys a{color:var(--blue);font-weight:700}
.pvcard{margin:0 0 22px;background:var(--soft);border-radius:18px;padding:16px;max-width:600px}
.pvcard h3{margin:0;font-size:15.5px}
.pvcard .d{font-size:13.5px;color:var(--ink-2);margin:2px 0 12px}
.pvcard .imgs{grid-template-columns:100px 1fr;margin:0}
.btns{display:flex;gap:8px;margin-top:12px}
.b{flex:1;border:0;border-radius:12px;padding:11px 16px;font-weight:700;text-align:center;text-decoration:none;font-size:14.5px}
.b1{background:var(--navy);color:#fff}.b1:hover{background:var(--navy-h)}
.b2{background:var(--card);color:var(--ink)}.b2:hover{background:var(--line)}
.b:disabled{opacity:.5;cursor:default}
.ok-line{display:flex;align-items:center;gap:8px;margin-top:12px;color:var(--green);font-weight:700;font-size:14px}
.summary{margin:0 0 22px;background:var(--blue-soft);border-radius:16px;padding:14px 16px}
.summary b{display:block;margin-bottom:4px}
.summary details summary{cursor:pointer;color:var(--blue);font-weight:700;font-size:13.5px;margin-top:6px}

/* 작업 단계 */
.steps{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:10px 14px;max-width:480px}
.st{display:flex;align-items:center;gap:10px;font-size:14px;padding:4px 0}
.okc{width:18px;height:18px;border-radius:50%;background:var(--green);color:#fff;display:grid;place-items:center;flex:none}
.spin{width:18px;height:18px;border-radius:50%;border:2.5px solid #E1E5EB;border-top-color:var(--orange);animation:s .9s linear infinite;flex:none}
.st.now{font-weight:650}
.steps .foot{font-size:12.5px;color:var(--ink-3);border-top:1px solid var(--line);margin-top:6px;padding-top:8px;display:flex;justify-content:space-between;align-items:center}
.stop{border:0;background:transparent;color:var(--red);font-weight:700;font-size:13px}
@keyframes s{to{transform:rotate(360deg)}}

.compose{padding:8px 20px 16px}
.box{max-width:720px;margin:0 auto;background:var(--soft);border-radius:18px;padding:8px;transition:box-shadow .15s}
.box:focus-within{background:var(--card);box-shadow:0 0 0 2px var(--blue)}
.box.drag{box-shadow:0 0 0 2px var(--orange);background:var(--orange-soft)}
.att{display:flex;gap:6px;flex-wrap:wrap}
.att:not(:empty){padding:2px 2px 8px}
.file{position:relative}
.file img{width:52px;height:52px;border-radius:10px;object-fit:cover;display:block;border:1px solid var(--line)}
.file.up img{opacity:.4}
.file button{position:absolute;top:-6px;right:-6px;width:20px;height:20px;border-radius:50%;border:0;background:var(--ink);color:#fff;font-size:12px;line-height:1;display:grid;place-items:center;padding:0}
.line{display:flex;align-items:flex-end;gap:4px}
.line textarea{flex:1;border:0;outline:0;background:transparent;resize:none;padding:8px 4px;min-height:24px;max-height:220px;line-height:1.5}
.line textarea::placeholder{color:var(--ink-4)}
.go{background:var(--navy);color:#fff}.go:hover{background:var(--navy-h)}
.go:disabled{background:#C5CBD4;cursor:default}

/* 오른쪽 */
.r{overflow:auto;padding:18px 18px 24px;flex:1}
.r h2{font-size:16px;margin:0 0 12px;letter-spacing:-.02em;display:flex;align-items:center;justify-content:space-between}
.blk{background:var(--soft);border-radius:16px;padding:14px;margin-bottom:10px}
.blk-h{display:flex;align-items:center;justify-content:space-between;gap:8px;font-weight:750;font-size:14px;margin-bottom:8px}
.blk-h small{font-weight:600;color:var(--ink-3);font-size:12px;text-align:right}
.meter{height:8px;border-radius:4px;background:#E1E5EB;overflow:hidden}.meter i{display:block;height:100%;background:var(--blue);border-radius:4px}
.meter i.hi{background:var(--orange)}
.meta{font-size:12.5px;color:var(--ink-3);margin-top:6px}
.wide{margin-top:10px;width:100%;border:0;background:var(--card);border-radius:10px;padding:9px;font-weight:700;font-size:13.5px;color:var(--blue)}
.wide:hover{background:var(--blue-soft)}
.wide:disabled{opacity:.5;cursor:default}
.memo{width:100%;min-height:90px;border:1px solid var(--line);border-radius:10px;padding:8px 10px;resize:vertical;font-size:13.5px;line-height:1.5;background:var(--card)}
.gal{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.gal a{display:block}
.gal img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:10px;display:block;background:var(--card)}
.kv{display:grid;grid-template-columns:auto 1fr;gap:6px 12px;font-size:13.5px;margin:0}
.kv dt{color:var(--ink-3)}.kv dd{margin:0;font-weight:600;text-align:right;overflow-wrap:anywhere}
.ppl{display:flex;flex-direction:column;gap:8px;font-size:13.5px}
.ppl div{display:flex;align-items:center;gap:8px}
.ppl small{margin-left:auto;color:var(--ink-3)}
.danger{border:0;background:transparent;color:var(--red);font-size:13px;font-weight:600;padding:6px 0}
.close-r{display:none}

.toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);background:var(--ink);color:#fff;border-radius:12px;padding:11px 16px;font-size:14px;box-shadow:0 8px 24px rgba(0,0,0,.18);z-index:60;max-width:92vw}
.scrim{display:none}

@media (max-width:1180px){
  .app{grid-template-columns:280px minmax(0,1fr)}
  .r-panel{position:fixed;right:12px;top:12px;bottom:12px;width:340px;z-index:30;transform:translateX(110%);transition:transform .25s cubic-bezier(.2,.8,.2,1);box-shadow:0 10px 40px rgba(0,0,0,.18)}
  body.info .r-panel{transform:none}
  .head .info-btn{display:grid}
  .close-r{display:grid}
  .scrim{display:block;position:fixed;inset:0;background:rgba(0,0,0,.25);z-index:20;opacity:0;pointer-events:none;transition:opacity .2s}
  body.drawer .scrim,body.info .scrim{opacity:1;pointer-events:auto}
}
@media (max-width:760px){
  .app{grid-template-columns:1fr;padding:0;gap:0}
  .panel{border-radius:0}
  .s-panel{position:fixed;inset:0 auto 0 0;width:min(86vw,320px);z-index:30;transform:translateX(-102%);transition:transform .25s cubic-bezier(.2,.8,.2,1)}
  body.drawer .s-panel{transform:none;box-shadow:8px 0 30px rgba(0,0,0,.15)}
  .r-panel{left:0;right:0;top:auto;bottom:0;width:auto;max-height:82dvh;border-radius:20px 20px 0 0;transform:translateY(105%)}
  body.info .r-panel{transform:none}
  .menu{display:grid}
  .head{padding:8px 10px;gap:6px}
  .head h1{font-size:16px}
  .model-wrap select{max-width:112px;padding:7px 6px;font-size:13px}
  #effort{display:none}
  .feed{padding:12px 14px}
  .compose{padding:6px 10px 12px}
  .toast{bottom:96px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
/* 미리보기·결과물 캡처는 위쪽만 보이게(긴 화면 전체는 눌러서 보기) */
.pvcard .imgs{grid-template-columns:120px 1fr}
.pvcard .imgs img{max-height:300px;object-fit:cover;object-position:top}
.pvcard .imgs figcaption span{display:none}
.gal img{object-position:top}

/* 로그인 안내 */
.login-help{margin:-4px 0 2px;font-size:13.5px;color:var(--ink-3)}

/* GPT 사용량 */
.usage{background:var(--soft);border-radius:14px;padding:10px 12px;margin:6px 0 10px;font-size:12.5px}
.u-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.u-h b{font-size:13px}
.u-mood{font-weight:700;font-size:12px;border-radius:999px;padding:2px 8px}
.u-mood.ok{background:var(--green-soft);color:var(--green)}
.u-mood.mid{background:var(--blue-soft);color:var(--blue)}
.u-mood.bad{background:var(--orange-soft);color:var(--orange-ink)}
.u-row{display:flex;justify-content:space-between;color:var(--ink-2);margin:6px 0 4px}
.u-row b{color:var(--ink)}
.u-note{color:var(--ink-3);margin-top:4px}
.usage .meter i{background:var(--green)}
.usage .meter i.hi{background:var(--orange)}
.r .usage{padding:14px;font-size:13px}
.only-m{display:none}

/* 모바일: 손가락으로 누르기 쉽게, 입력할 때 화면이 확대되지 않게(16px), 아이폰 홈 막대 피하기 */
@media (max-width:760px){
  .only-m{display:block}
  body{font-size:15.5px}
  .login-card{padding:24px 20px}
  .search input,.line textarea,.memo,.login-card input{font-size:16px}
  .s-top{padding:16px 14px 8px}
  .row{padding:12px 10px}
  .row .t{font-size:15px}
  .proj-h{padding:14px 8px 6px}
  .s-foot{padding-bottom:calc(12px + env(safe-area-inset-bottom))}
  .head{min-height:56px;padding-top:calc(8px + env(safe-area-inset-top))}
  .head .ib{width:42px;height:42px}
  .feed{padding:12px 12px 4px}
  .m{margin-bottom:18px}
  .bubble{max-width:100%;font-size:15.5px}
  .md{font-size:15.5px}
  .imgs{grid-template-columns:1fr 1fr;max-width:none}
  .imgs.small{grid-template-columns:repeat(auto-fill,80px)}
  .imgs.small img{height:80px}
  .steps{max-width:none}
  .pvcard{padding:14px}
  .pvcard .imgs{grid-template-columns:1fr 1.6fr}
  .btns{flex-direction:column}
  .b{padding:13px}
  .compose{padding:6px 8px calc(8px + env(safe-area-inset-bottom))}
  .box{border-radius:20px}
  .line .ib{width:42px;height:42px}
  .r-panel .r{padding-bottom:calc(24px + env(safe-area-inset-bottom))}
  .r-panel::before{content:"";display:block;width:40px;height:4px;border-radius:2px;background:#D5DAE1;margin:8px auto 0}
  .sys{font-size:13px}
}

/* 공유 메모 제안 · 시작 예시 */
.memo-sug{display:flex;flex-direction:column;gap:6px;margin-top:8px;max-width:620px}
.ms{border:1px dashed #B9C8EE;background:var(--blue-soft);color:var(--ink-2);border-radius:12px;padding:8px 12px;text-align:left;font-size:13.5px}
.ms b{color:var(--blue);margin-right:6px}
.ms:hover{border-style:solid}
.ms.done{border:0;background:var(--soft);color:var(--ink-3)}
.starters{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:18px}
.chip{border:1px solid var(--line);background:var(--card);border-radius:999px;padding:8px 14px;font-size:14px;color:var(--ink-2)}
.chip:hover{border-color:var(--blue);color:var(--blue)}