/* 문의 상담(/ask), 제안서(/proposal), 담당자 화면(/desk). 색과 글꼴은 style.css 를 따른다 */
body{word-break:keep-all}
:root{--grad:linear-gradient(135deg,#00468A 0%,#0058AA 55%,#1E88E5 100%);--wait:#B45309;--wait-soft:#FEF3C7;--ok-soft:#DCFCE7}

/* 첫 화면 */
body.landing{background:radial-gradient(1200px 520px at 85% -10%,#E8F1FA 0%,rgba(255,255,255,0) 60%),#fff;min-height:100vh}
.hero{margin-top:64px;max-width:760px}
.hero h1{font-size:clamp(32px,5.4vw,56px);line-height:1.18}
.hero .lead{font-size:19px;margin-top:18px;max-width:620px}
.svc{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-top:56px}
.svc div{background:#fff;border:1px solid var(--line);border-radius:18px;padding:18px 18px 20px;box-shadow:0 6px 20px rgba(17,24,39,.04)}
.svc span{font-size:12px;font-weight:800;color:var(--brand)}
.svc b{display:block;font-size:16px;margin-top:6px;letter-spacing:-.01em}
.svc p{font-size:13px;color:var(--muted);margin-top:4px}
@media(max-width:900px){.svc{grid-template-columns:1fr 1fr}}

/* 떠 있는 안내와 상담 단추 */
.teaser{position:fixed;right:28px;bottom:112px;width:300px;background:#fff;border-radius:20px;padding:18px 20px;box-shadow:0 14px 40px rgba(17,24,39,.16);cursor:pointer;z-index:20;transition:opacity .2s,transform .2s}
.teaser b{font-size:16px;display:block;padding-right:18px}
.teaser p{font-size:14px;color:var(--body);margin-top:4px}
.teaser .tx{position:absolute;right:12px;top:10px;border:0;background:none;font-size:20px;color:var(--muted);cursor:pointer}
.teaser.hide{opacity:0;transform:translateY(8px);pointer-events:none}
.launcher{position:fixed;right:28px;bottom:28px;width:64px;height:64px;border-radius:50%;border:0;background:var(--grad);box-shadow:0 10px 28px rgba(0,88,170,.38);cursor:pointer;z-index:21;display:flex;align-items:center;justify-content:center}

/* 상담 창 */
.chat{position:fixed;right:28px;bottom:108px;width:420px;height:min(700px,calc(100vh - 136px - var(--kjobs-gnb-h,0px)));background:#fff;border-radius:24px;box-shadow:0 24px 64px rgba(17,24,39,.22);display:flex;flex-direction:column;overflow:hidden;z-index:22;opacity:0;transform:translateY(16px) scale(.98);pointer-events:none;transition:opacity .22s,transform .22s}
body.chat-open .chat{opacity:1;transform:none;pointer-events:auto}
.chead{background:var(--grad);color:#fff;padding:18px 20px;display:flex;justify-content:space-between;align-items:flex-start}
.chead b{font-size:17px}.chead p{font-size:13px;opacity:.9;margin-top:2px}
.chead button{border:0;background:rgba(255,255,255,.18);color:#fff;width:30px;height:30px;border-radius:50%;font-size:18px;cursor:pointer}
.cbody{flex:1;overflow-y:auto;padding:18px 16px 10px;background:#F7F7FB;display:flex;flex-direction:column;gap:8px}
.msg{max-width:86%;padding:10px 14px;border-radius:16px;font-size:15px;line-height:1.5;word-break:keep-all;overflow-wrap:anywhere;animation:pop .2s ease-out}
.msg.bot{align-self:flex-start;background:#fff;border:1px solid #ECECF3;border-top-left-radius:6px}
.msg.me{align-self:flex-end;background:var(--brand);color:#fff;border-top-right-radius:6px}
.msg.typing{display:flex;gap:4px;padding:14px}
.msg.typing i{width:6px;height:6px;border-radius:50%;background:#C4C4D4;animation:blink 1s infinite}
.msg.typing i:nth-child(2){animation-delay:.15s}.msg.typing i:nth-child(3){animation-delay:.3s}
@keyframes blink{0%,100%{opacity:.3}50%{opacity:1}}
@keyframes pop{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.choices{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end;margin:2px 0 4px;animation:pop .2s ease-out}
.choice{font:inherit;font-size:14px;font-weight:600;border:1.5px solid #BFD7F0;background:#fff;color:var(--brand);border-radius:999px;padding:8px 14px;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.choice:hover{background:var(--brand-soft)}
.choice.on{background:var(--brand);border-color:var(--brand);color:#fff}
.choice.go{background:var(--ink);border-color:var(--ink);color:#fff}
.choice.sug{border-color:var(--brand)}
.choice em{font-style:normal;font-size:11px;font-weight:800;background:var(--brand-soft);color:var(--brand);border-radius:6px;padding:1px 6px}
.ccard b{font-size:16px}
.ccard dl{display:grid;grid-template-columns:76px 1fr;gap:3px 8px;margin-top:6px;font-size:14px}
.ccard dt{color:var(--muted)}
.ccard small{display:block;margin-top:8px;font-size:12px;color:var(--muted)}
.prog{list-style:none;font-size:14px}
.prog li{color:var(--muted);padding:2px 0}
.prog li.on{color:var(--ink);font-weight:700}.prog li.on::before{content:"● ";color:var(--brand)}
.prog li.done{color:var(--ok)}.prog li.done::before{content:"✓ "}
.pcard2 .kicker{font-size:12px;font-weight:800;color:var(--brand)}
.pcard2>b{display:block;font-size:16px;margin-top:2px;line-height:1.4}
.pcard2 ul{list-style:none;margin-top:8px;font-size:14px}
.pcard2 li{display:flex;align-items:center;gap:8px;padding:3px 0}
.tier{font-size:11px;font-weight:800;border-radius:6px;padding:2px 7px;white-space:nowrap}
.tier.t1{background:var(--brand);color:#fff}.tier.t2{background:var(--brand-soft);color:var(--brand)}.tier.t3{background:#F1F2F5;color:var(--muted)}
.btn-doc{display:inline-block;margin-top:10px;font-size:14px;font-weight:800;color:#fff;background:var(--ink);border-radius:10px;padding:8px 12px;text-decoration:none}
.status{align-self:center;display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:700;border-radius:999px;padding:6px 12px;margin:4px 0}
.status i{width:8px;height:8px;border-radius:50%}
.status.wait{background:var(--wait-soft);color:var(--wait)}.status.wait i{background:#F59E0B;animation:blink 1.2s infinite}
.status.ok{background:var(--ok-soft);color:#15803D}.status.ok i{background:var(--ok)}
.cform{display:none;gap:8px;padding:12px;border-top:1px solid var(--line);background:#fff}
.cform.on{display:flex}
.cform input[type=text]{flex:1;font:inherit;font-size:15px;padding:12px 14px;border:1.5px solid var(--line);border-radius:12px;outline:none}
.cform input:focus{border-color:var(--brand)}
.cform button{border:0;background:var(--brand);border-radius:12px;width:46px;cursor:pointer;display:flex;align-items:center;justify-content:center}
@media(max-width:560px){
  .chat{right:0;bottom:0;width:100%;height:100%;border-radius:0;z-index:9500}   /* 휴대폰은 창이 화면을 덮으므로 맨 위 띠(z 9000)보다 위 */
  .teaser{right:16px;left:16px;width:auto;bottom:100px}
  .launcher{right:16px;bottom:20px}
  body.chat-open .launcher{display:none}
}

/* 제안서 */
body.paper{background:#F4F5F8}
.wrap.narrow{max-width:960px}
.pdoc{background:#fff;border-radius:22px;padding:44px 48px;box-shadow:0 10px 30px rgba(17,24,39,.06)}
.prow{display:flex;justify-content:space-between;align-items:center;gap:10px}
.kicker{font-size:13px;font-weight:800;color:var(--brand)}
.pill{font-size:12px;font-weight:800;border-radius:999px;padding:4px 10px;white-space:nowrap}
.pill.wait{background:var(--wait-soft);color:var(--wait)}.pill.ok{background:var(--ok-soft);color:#15803D}
.phead h1{font-size:clamp(26px,4vw,36px);margin-top:10px}
.phead .headline{font-size:19px;color:var(--body);margin-top:6px;font-weight:600}
.phead .meta{font-size:13px;color:var(--muted);margin-top:8px}
.psec{margin-top:38px}
.psec>h2{font-size:20px;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;padding-bottom:12px;border-bottom:2px solid var(--ink)}
.psec>h2 .no{font-size:13px;color:var(--brand);font-weight:900}
.psec>h2 small{font-size:13px;color:var(--muted);font-weight:500}
.pgrid2{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:16px}
.facts{display:grid;grid-template-columns:110px 1fr;gap:8px 12px;font-size:15px}
.facts dt{color:var(--muted)}.facts dd{font-weight:600}
.diag{background:var(--brand-soft);border-radius:16px;padding:16px 18px;align-self:start}
.diag h3{font-size:14px;color:var(--brand)}
.diag ul{margin:8px 0 0 18px;font-size:15px}.diag li{padding:3px 0}
.mods{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px;margin-top:16px}
.mod{border:1px solid var(--line);border-radius:16px;padding:16px 18px;display:flex;flex-direction:column}
.mod.t1{border:2px solid var(--brand)}
.mtop{display:flex;justify-content:space-between;align-items:center}
.mod .tier{font-size:12px}
.mod.t1 .tier{background:var(--brand);color:#fff}.mod.t2 .tier{background:var(--brand-soft);color:var(--brand)}.mod.t3 .tier{background:#F1F2F5;color:var(--muted)}
.mod .num{font-size:12px;font-weight:800;color:#C7CAD3}
.mod h3{font-size:18px;margin-top:10px}
.msub{font-size:12px;color:var(--muted)}
.mod .why{font-size:14px;color:var(--body);margin-top:8px}
.acts{margin:10px 0 0 16px;font-size:14px}.acts li{padding:2px 0}
.kpi{margin-top:auto;padding-top:12px;font-size:13px;display:flex;gap:8px;align-items:baseline}
.kpi b{color:var(--brand);white-space:nowrap}
.phases{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:16px}
.phase{background:var(--soft);border-radius:16px;padding:16px 18px}
.phase .days{font-size:12px;font-weight:900;color:var(--brand)}
.phase h3{font-size:17px;margin-top:2px}
.phase ul{margin:8px 0 0 16px;font-size:14px;color:var(--body)}.phase li{padding:2px 0}
.sbar{display:flex;height:44px;border-radius:12px;overflow:hidden;margin-top:18px}
.seg{display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;color:var(--muted)}
.seg span.on{color:#fff}
.legend{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:10px;font-size:13px;color:var(--body)}
.lg{display:inline-flex;align-items:center;gap:6px}.lg i{width:10px;height:10px;border-radius:3px}
.flow{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:16px;counter-reset:f}
.flow li{border-top:3px solid var(--brand);padding-top:10px;font-size:14px;color:var(--body)}
.flow li b{display:block;color:var(--ink);font-size:15px}
.pfoot{margin-top:34px;padding-top:16px;border-top:1px solid var(--line);font-size:13px;color:var(--muted)}
.pfoot p+p{margin-top:4px}
@media(max-width:720px){.pdoc{padding:26px 20px}.pgrid2,.phases,.flow{grid-template-columns:1fr}}
@media print{body.paper{background:#fff}.noprint{display:none}.pdoc{box-shadow:none;padding:0}.mod,.phase,.diag{break-inside:avoid}}

/* 담당자 화면 */
body.desk{background:#F4F5F8;height:100vh;display:flex;flex-direction:column}
.dtop{display:flex;align-items:center;gap:10px;padding:16px 24px;background:#fff;border-bottom:1px solid var(--line)}
.dcount{margin-left:auto;font-size:14px;font-weight:800;color:var(--wait)}
.dkey{margin:80px auto;max-width:380px;display:flex;flex-direction:column;gap:10px}
.dkey input{font:inherit;padding:12px 14px;border:1.5px solid var(--line);border-radius:12px}
body.desk.in .dkey{display:none}
.dmain{display:none;flex:1;min-height:0}
body.desk.in .dmain{display:grid;grid-template-columns:340px 1fr}
.dlist{background:#fff;border-right:1px solid var(--line);overflow-y:auto;padding:16px 12px}
.dlist h2{font-size:15px;color:var(--muted);padding:0 8px 8px}
.ditem{display:block;width:100%;text-align:left;font:inherit;border:0;background:none;border-radius:14px;padding:12px;cursor:pointer}
.ditem:hover{background:var(--soft)}.ditem.on{background:var(--brand-soft)}
.ditem .r1{display:flex;justify-content:space-between;align-items:center;gap:8px}
.ditem .r1 b{font-size:15px}
.ditem .r2{font-size:13px;color:var(--body);margin-top:2px}
.ditem .r3{font-size:12px;color:var(--muted);margin-top:2px}
.ddetail{overflow-y:auto;padding:20px 28px 60px}
.dbar{position:sticky;top:-20px;z-index:2;display:flex;justify-content:space-between;align-items:center;gap:12px;background:#fff;border-radius:16px;padding:14px 18px;margin-bottom:14px;box-shadow:0 -20px 0 #F4F5F8,0 6px 20px rgba(17,24,39,.08)}
.dbar b{display:block;font-size:17px}.dbar span{font-size:13px;color:var(--muted)}
.dbar .primary{font-size:16px;padding:12px 20px}
.ddetail .pdoc{padding:32px 36px}