/* 피부상담도우미 v4 — 토스 디자인 언어(큰 타이포·여백·카드) + 한마음 블루 */
:root{
  --bg:#F2F4F6; --card:#FFFFFF; --ink:#191F28; --sub:#6B7684; --faint:#8B95A1;
  --line:#E5E8EB; --blue:#2072B9; --blue-deep:#14538C; --blue-soft:#EAF3FB;
  --teal:#5BB8B4; --teal-soft:#E9F6F5; --coral:#F08C7D; --coral-soft:#FDEFEC;
  --cue:#FFF9E0; --cue-ink:#8A6D00; --ok:#1B864F; --ok-soft:#E8F5EE;
  --warn:#B95B20; --warn-soft:#FFF3E8; --danger:#C0392B; --danger-soft:#FDEDEC;
  --r-lg:20px; --r-md:14px; --r-sm:10px;
  --shadow:0 2px 10px rgba(25,31,40,.05);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;
  background:var(--bg); color:var(--ink); font-size:16px; line-height:1.65;
  letter-spacing:-0.01em; padding-bottom:140px;
}
button{font-family:inherit;cursor:pointer;border:none;background:none;letter-spacing:inherit}
textarea,input{font-family:inherit;letter-spacing:inherit}

/* ── 상단바 ── */
.topbar{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);display:flex;align-items:center;gap:10px;padding:12px 20px}
.topbar .brand{font-weight:800;font-size:17px;color:var(--blue-deep);white-space:nowrap}
.topbar .brand small{font-weight:700;color:var(--faint);margin-left:4px}
.topbar input.patient{border:1px solid var(--line);border-radius:var(--r-sm);padding:7px 12px;font-size:14px;width:130px;background:#FAFBFC}
.topbar .spacer{flex:1}
.tbtn{padding:9px 16px;border-radius:999px;font-weight:700;font-size:14px;background:#F2F4F6;color:#4E5968;transition:.15s}
.tbtn:hover{background:#E8EBEE}
.tbtn.primary{background:var(--blue);color:#fff}
.tbtn.primary:hover{background:var(--blue-deep)}
.tbtn.on{background:var(--ink);color:#fff}

/* ── 단계 인디케이터 ── */
.stepnav{position:sticky;top:57px;z-index:40;display:flex;gap:4px;overflow-x:auto;
  padding:10px 20px;background:rgba(242,244,246,.95);backdrop-filter:blur(8px);scrollbar-width:none}
.stepnav::-webkit-scrollbar{display:none}
.stepnav .sd{flex-shrink:0;padding:6px 13px;border-radius:999px;font-size:13px;font-weight:700;
  color:var(--faint);background:#fff;border:1px solid var(--line);transition:.15s;white-space:nowrap}
.stepnav .sd.done{color:var(--blue);border-color:#BFD9EF;background:var(--blue-soft)}
.stepnav .sd.active{color:#fff;background:var(--blue);border-color:var(--blue)}

/* ── 메인 ── */
main{max-width:780px;margin:0 auto;padding:24px 16px}
.card{background:var(--card);border-radius:var(--r-lg);box-shadow:var(--shadow);padding:28px;margin-bottom:18px;scroll-margin-top:120px}
.card h2{font-size:21px;font-weight:800;letter-spacing:-.02em;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.card h2 .stepchip{font-size:12px;font-weight:800;color:var(--blue);background:var(--blue-soft);border-radius:8px;padding:3px 9px}
.card .desc{color:var(--sub);font-size:15px;margin-top:6px}
.hidden{display:none!important}

/* 입력 */
.bigtext{width:100%;min-height:150px;border:1.5px solid var(--line);border-radius:var(--r-md);
  padding:16px 18px;font-size:17px;line-height:1.7;resize:vertical;background:#FAFBFC;margin-top:16px;transition:.15s}
.bigtext:focus{outline:none;border-color:var(--blue);background:#fff;box-shadow:0 0 0 3px rgba(32,114,185,.12)}
.memo{min-height:64px;font-size:14px}
.btn-xl{width:100%;height:58px;border-radius:16px;background:var(--blue);color:#fff;font-size:17px;font-weight:800;
  margin-top:14px;transition:.15s;display:flex;align-items:center;justify-content:center;gap:8px}
.btn-xl:hover{background:var(--blue-deep);transform:translateY(-1px)}
.btn-xl:disabled{background:#C9CED4;transform:none;cursor:not-allowed}
.btn-line{padding:11px 18px;border-radius:12px;border:1.5px solid var(--line);font-weight:700;font-size:14px;background:#fff;color:#4E5968;transition:.15s}
.btn-line:hover{border-color:var(--blue);color:var(--blue)}

/* 칩 */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.chip{padding:9px 15px;border-radius:999px;font-size:14px;font-weight:700;background:#F2F4F6;color:#4E5968;transition:.12s;border:1.5px solid transparent}
.chip:hover{background:#E8EBEE}
.chip.on{background:var(--blue-soft);color:var(--blue);border-color:#9CC4E4}
.chip.flag.on{background:var(--coral-soft);color:#C2553F;border-color:#F2BBAE}

/* 고민 카드 */
.concern-card{display:flex;align-items:flex-start;gap:12px;border:1.5px solid var(--line);border-radius:var(--r-md);padding:15px 17px;margin-top:10px;transition:.15s}
.concern-card.on{border-color:var(--blue);background:var(--blue-soft)}
.concern-card .pri{flex-shrink:0;width:28px;height:28px;border-radius:50%;background:var(--blue);color:#fff;font-weight:800;font-size:14px;display:flex;align-items:center;justify-content:center;margin-top:2px}
.concern-card .nm{font-weight:800;font-size:16px}
.concern-card .ev{color:var(--sub);font-size:13.5px;margin-top:2px}
.concern-card .x{margin-left:auto;color:var(--faint);font-size:18px;padding:4px}

/* 큐카드 (직원 전용) */
.cue{background:var(--cue);color:var(--cue-ink);border-radius:var(--r-sm);padding:10px 14px;
  font-size:15px;font-weight:800;margin-top:14px;display:flex;gap:8px;align-items:flex-start}
.cue::before{content:"👁";flex-shrink:0}
.asklist{margin-top:12px}
.asklist .ask{display:flex;gap:9px;padding:9px 0;border-bottom:1px dashed var(--line);font-size:15px}
.asklist .ask::before{content:"Q";font-weight:800;color:var(--teal);flex-shrink:0}

/* 생성 콘텐츠 */
.gen{margin-top:14px}
.gen p.lead{font-size:17.5px;line-height:1.75;font-weight:600}
.editable{border-radius:8px;padding:2px 4px;margin:-2px -4px;transition:.12s}
.editable:hover{background:#F6F8FA;outline:1.5px dashed #C9D3DC}
.editable:focus{background:#fff;outline:2px solid var(--blue)}
.cause{display:flex;gap:12px;padding:13px 0;border-bottom:1px solid var(--line);align-items:flex-start}
.cause:last-child{border-bottom:none}
.cause .axis{flex-shrink:0;font-size:12px;font-weight:800;border-radius:8px;padding:4px 9px;margin-top:2px}
.axis.fat{background:var(--coral-soft);color:#C2553F}.axis.laxity{background:var(--blue-soft);color:var(--blue)}
.axis.volume{background:var(--teal-soft);color:#2E7D78}.axis.structure{background:#F0EAFB;color:#6B46C1}
.axis.skin{background:var(--ok-soft);color:var(--ok)}.axis.lifestyle{background:#FFF3E8;color:var(--warn)}
.cause .w{font-size:11px;font-weight:800;color:#fff;background:var(--ink);border-radius:6px;padding:2px 6px;margin-left:6px;vertical-align:2px}
.cause .w.sub{background:var(--faint)}
.cause .lbl{font-weight:800;font-size:15.5px}
.cause .ln{color:var(--sub);font-size:14.5px;margin-top:2px}
.cause .links{font-size:12.5px;color:var(--teal);font-weight:700;margin-top:3px}
.pline{display:flex;gap:10px;padding:11px 0;font-size:15.5px;align-items:flex-start}
.pline .n{flex-shrink:0;width:26px;height:26px;border-radius:8px;background:var(--blue-soft);color:var(--blue);font-weight:800;font-size:13px;display:flex;align-items:center;justify-content:center;margin-top:2px}
.mx{border:1.5px solid var(--line);border-radius:var(--r-md);padding:16px 18px;margin-top:10px}
.mx .mxh{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.mx .mxname{font-weight:800;font-size:16px}
.mx .serves{font-size:11.5px;font-weight:800;color:var(--teal);background:var(--teal-soft);border-radius:6px;padding:3px 8px}
.mx .why{color:var(--sub);font-size:14.5px;margin-top:7px}

/* 플랜 래더 */
.ladder{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:16px}
@media(max-width:680px){.ladder{grid-template-columns:1fr}}
.tier{border:1.5px solid var(--line);border-radius:var(--r-md);padding:18px 16px;position:relative;display:flex;flex-direction:column}
.tier.reco{border-color:var(--blue);box-shadow:0 4px 16px rgba(32,114,185,.13)}
.tier .badge{position:absolute;top:-11px;left:14px;background:var(--blue);color:#fff;font-size:11.5px;font-weight:800;border-radius:999px;padding:3px 11px}
.tier h4{font-size:16px;font-weight:800}
.tier .intent{font-size:13px;color:var(--sub);margin-top:3px;min-height:36px}
.tier .tstep{padding:9px 0;border-top:1px dashed var(--line);font-size:14px}
.tier .tstep .price{display:block;font-weight:800;color:var(--blue);font-size:13.5px;margin-top:2px}
.tier .tstep .price.est{color:var(--warn)}
.tier .note{font-size:12.5px;color:var(--faint);margin-top:auto;padding-top:10px}
.tier .pick{margin-top:10px;width:100%;padding:10px;border-radius:10px;font-weight:800;font-size:14px;background:#F2F4F6;color:#4E5968}
.tier.reco .pick{background:var(--blue);color:#fff}
.tier.picked{outline:3px solid var(--teal)}

/* 경과 타임라인 */
.timeline{display:flex;gap:0;margin-top:16px;overflow-x:auto;padding-bottom:6px}
.tl{flex:1;min-width:120px;position:relative;padding:0 10px}
.tl::before{content:"";position:absolute;top:7px;left:0;right:0;height:3px;background:#D9E3EC}
.tl .dot{position:relative;width:15px;height:15px;border-radius:50%;background:var(--blue);border:3px solid #fff;box-shadow:0 0 0 2px var(--blue)}
.tl .t{font-weight:800;font-size:13.5px;margin-top:9px;color:var(--blue-deep)}
.tl .w{font-size:13px;color:var(--sub);margin-top:3px}

/* 워닝 */
.warn-item{display:flex;gap:11px;padding:13px 15px;border-radius:var(--r-md);margin-top:9px;align-items:flex-start}
.warn-item.common{background:#F7F9FA}.warn-item.uncommon{background:var(--warn-soft)}
.warn-item.emergency{background:var(--danger-soft)}
.warn-item .lv{flex-shrink:0;font-size:11.5px;font-weight:800;border-radius:6px;padding:3px 8px;margin-top:3px}
.warn-item.common .lv{background:#E5E8EB;color:#4E5968}
.warn-item.uncommon .lv{background:#F6D8BC;color:#8C4510}
.warn-item.emergency .lv{background:#F2B8B0;color:#922B21}
.warn-item label{display:flex;gap:9px;align-items:flex-start;flex:1;cursor:pointer;font-size:15px}
.warn-item input{width:19px;height:19px;margin-top:3px;accent-color:var(--blue);flex-shrink:0}
.hc{display:flex;gap:9px;padding:8px 0;font-size:15px}
.hc::before{content:"🏠";flex-shrink:0}

/* 산출물 */
.otabs{display:flex;gap:6px;margin-top:16px}
.otab{padding:9px 16px;border-radius:10px;font-weight:800;font-size:14px;background:#F2F4F6;color:#4E5968}
.otab.on{background:var(--ink);color:#fff}
.obox{margin-top:12px;background:#FAFBFC;border:1.5px solid var(--line);border-radius:var(--r-md);padding:18px;
  font-size:14.5px;line-height:1.8;white-space:pre-wrap;min-height:140px}
.obox[contenteditable]:focus{outline:2px solid var(--blue);background:#fff}
.lintbar{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px}
.lint{font-size:12.5px;font-weight:800;background:var(--danger-soft);color:var(--danger);border-radius:8px;padding:4px 10px}
.lint.ok{background:var(--ok-soft);color:var(--ok)}
.orow{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}

/* 코치 독 */
.coach{position:fixed;left:50%;transform:translateX(-50%);bottom:14px;z-index:60;width:min(780px,calc(100vw - 24px));
  background:rgba(25,31,40,.96);backdrop-filter:blur(10px);border-radius:18px;padding:12px 14px;box-shadow:0 10px 36px rgba(0,0,0,.3)}
.coach .sig{display:flex;gap:7px;overflow-x:auto;scrollbar-width:none}
.coach .sig::-webkit-scrollbar{display:none}
.coach .sig button{flex-shrink:0;padding:8px 14px;border-radius:999px;background:rgba(255,255,255,.13);color:#fff;font-size:13.5px;font-weight:700;transition:.12s;white-space:nowrap}
.coach .sig button:hover{background:rgba(255,255,255,.25)}
.coach .label{color:#9AA4B2;font-size:11.5px;font-weight:800;margin-bottom:7px;display:flex;justify-content:space-between;align-items:center}
.coach .reply{display:none;margin-top:10px;background:rgba(255,255,255,.08);border-radius:12px;padding:13px 15px;color:#fff;font-size:15.5px;line-height:1.7}
.coach .reply.show{display:block}
.coach .reply .fu{color:#8FC1E9;font-size:13px;font-weight:700;margin-top:8px}
.coach .reply .cpy{float:right;color:#9AA4B2;font-size:12px;font-weight:700;padding:2px 8px}

/* 이미지 슬롯 */
.imgrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px;margin-top:14px}
.imgslot{border-radius:var(--r-md);overflow:hidden;background:#FAFBFC;border:1.5px solid var(--line)}
.imgslot img{width:100%;display:block}
.imgslot .ph{min-height:96px;max-height:150px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  border:2px dashed #C9D3DC;border-radius:var(--r-md);color:var(--faint);font-size:12.5px;font-weight:700;text-align:center;padding:18px 10px}
.imgslot .ph .ic{font-size:26px}
.imgslot .cap{font-size:12px;color:var(--sub);padding:7px 10px;font-weight:700}

/* 헤더 우측 버튼 */
.sechead{display:flex;align-items:center;gap:8px;margin-left:auto}
.cast{font-size:12.5px;font-weight:800;color:var(--blue);background:var(--blue-soft);border-radius:999px;padding:6px 12px;transition:.12s}
.cast:hover{background:#D7E9F8}
.fallback-badge{font-size:11.5px;font-weight:800;color:var(--warn);background:var(--warn-soft);border-radius:6px;padding:3px 9px}
.viol{margin-top:12px;background:var(--danger-soft);border-radius:var(--r-sm);padding:11px 14px;font-size:13.5px;color:var(--danger);font-weight:600}

/* 연습 모드 */
.scen-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;margin-top:16px}
.scen{border:1.5px solid var(--line);border-radius:var(--r-md);padding:17px;cursor:pointer;transition:.15s}
.scen:hover{border-color:var(--blue);transform:translateY(-2px)}
.scen .t{font-weight:800;font-size:15px}
.scen .p{color:var(--sub);font-size:13px;margin-top:5px;line-height:1.55}
.chatbox{margin-top:16px;border:1.5px solid var(--line);border-radius:var(--r-md);min-height:300px;max-height:440px;overflow-y:auto;padding:16px;background:#FAFBFC}
.msg{max-width:78%;padding:11px 15px;border-radius:16px;margin-bottom:10px;font-size:15px;line-height:1.6}
.msg.cust{background:#fff;border:1px solid var(--line);border-bottom-left-radius:4px}
.msg.staff{background:var(--blue);color:#fff;margin-left:auto;border-bottom-right-radius:4px}
.chatrow{display:flex;gap:8px;margin-top:10px}
.chatrow input{flex:1;border:1.5px solid var(--line);border-radius:12px;padding:13px 16px;font-size:15px}
.chatrow input:focus{outline:none;border-color:var(--blue)}
.score{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.score .q{font-size:13px;font-weight:800;border-radius:8px;padding:6px 11px}
.score .q.pass{background:var(--ok-soft);color:var(--ok)}
.score .q.fail{background:var(--danger-soft);color:var(--danger)}

/* 로딩 */
.spin{display:inline-block;width:18px;height:18px;border:2.5px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;animation:sp .7s linear infinite}
.spin.dark{border-color:#D6DBE0;border-top-color:var(--blue)}
@keyframes sp{to{transform:rotate(360deg)}}
.skeleton{height:90px;border-radius:var(--r-md);background:linear-gradient(90deg,#F2F4F6 25%,#E9ECEF 50%,#F2F4F6 75%);background-size:200% 100%;animation:sk 1.2s infinite;margin-top:14px}
@keyframes sk{to{background-position:-200% 0}}
.toast{position:fixed;top:74px;left:50%;transform:translateX(-50%);z-index:99;background:var(--ink);color:#fff;
  border-radius:12px;padding:11px 20px;font-size:14px;font-weight:700;box-shadow:0 8px 24px rgba(0,0,0,.25);opacity:0;transition:.25s;pointer-events:none}
.toast.show{opacity:1}