/* 고객 발표 화면 (admin-present.js) — 밝은 바탕, 태블릿 기준 큰 글씨 */
.sp-overlay{position:fixed;inset:0;z-index:9999;display:grid;grid-template-rows:auto 1fr;background:#f6f8fc;color:#0f172a;font-family:system-ui,"Apple SD Gothic Neo","Malgun Gothic",sans-serif}
.sp-bar{display:flex;align-items:center;gap:14px;padding:12px 22px;background:#fff;border-bottom:1px solid #e2e8f0}
.sp-bar>b{font-weight:900;font-size:17px;letter-spacing:.02em}.sp-bar>b span{color:#2563eb}
.sp-bar nav{display:flex;gap:4px;flex:1;overflow-x:auto;scrollbar-width:none}
.sp-bar button{flex:none;min-height:42px;padding:8px 16px;border:0;border-radius:10px;background:transparent;color:#334155;font:inherit;font-size:16px;font-weight:600;cursor:pointer}
.sp-bar nav button.on{background:#0f172a;color:#fff}
.sp-bar>div{display:flex;gap:6px}.sp-bar>div button{background:#f1f5f9}
.sp-body{overflow:auto;-webkit-overflow-scrolling:touch}
.sp-page{max-width:1180px;margin:0 auto;padding:40px 28px 70px}
.sp-page h1{margin:6px 0 30px;font-size:clamp(30px,4.4vw,52px);line-height:1.2;letter-spacing:-.03em}
.sp-page h2{margin:0 0 8px;font-size:clamp(26px,3.2vw,38px);letter-spacing:-.03em}
.sp-page h2 small,.sp-page h3 small{font-size:.5em;color:#64748b;font-weight:600}
.sp-page h3{margin:38px 0 14px;font-size:21px}
.sp-kicker{margin:0;color:#2563eb;font-weight:800;letter-spacing:.16em;font-size:13px}
.sp-lead{margin:0 0 22px;color:#475569;font-size:17px;line-height:1.65;max-width:72ch}
.sp-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:22px}
.sp-stats div{padding:20px;border-radius:16px;background:#fff;border:1px solid #e2e8f0}
.sp-stats b{display:block;font-size:30px;letter-spacing:-.02em;color:#1d4ed8}.sp-stats span{color:#475569}
.sp-cards4{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.sp-cards4 div{padding:22px;border-radius:16px;background:#0f172a;color:#fff}
.sp-cards4 b{font-size:21px}.sp-cards4 p{margin:8px 0 0;color:#cbd5e1;font-size:15px;line-height:1.55}
.sp-cards4.small{margin-top:26px}.sp-cards4.small div{background:#fff;color:#0f172a;border:1px solid #e2e8f0}.sp-cards4.small p{color:#475569}
.sp-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.sp-gallery figure{margin:0;border-radius:14px;overflow:hidden;background:#fff;border:1px solid #e2e8f0}
.sp-gallery img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top}
.sp-gallery.tall img{aspect-ratio:3/4}
.sp-gallery figcaption{padding:10px 14px;color:#64748b;font-size:13px}.sp-gallery figcaption b{display:block;color:#0f172a;font-size:15px}
.sp-live{margin:20px 0;padding:18px;border-radius:18px;background:#fff;border:2px solid #2563eb}
.sp-live iframe{width:100%;height:70vh;border:0;border-radius:10px}
.sp-tag{display:inline-block;margin-bottom:10px;padding:3px 12px;border-radius:20px;background:#2563eb;color:#fff;font-weight:700;font-size:13px}
.sp-live h3{margin:0 0 12px}
.sp-flow4{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.sp-flow4 div{position:relative;padding:20px;border-radius:16px;background:#fff;border:1px solid #e2e8f0}
.sp-flow4 div:not(:last-child)::after{content:"→";position:absolute;right:-12px;top:50%;transform:translateY(-50%);color:#2563eb;font-weight:900;font-size:20px;z-index:1}
.sp-flow4 small{color:#2563eb;font-weight:800}.sp-flow4 b{display:block;margin:6px 0;font-size:19px}.sp-flow4 span{color:#475569;font-size:14px}
.sp-cmp{display:grid;grid-template-columns:1fr 1.3fr;gap:14px}
.sp-cmp>div>b{display:block;margin-bottom:8px;color:#64748b}
.sp-cmp ol{margin:0;padding-left:20px;display:grid;gap:8px;font-size:16px}
.sp-cmp em{margin-right:6px;padding:1px 9px;border-radius:20px;background:#e2e8f0;font-style:normal;font-size:12px;font-weight:800}
.sp-cmp em.a-AI{background:#ede9fe;color:#5b21b6}.sp-cmp em.a-시스템{background:#dbeafe;color:#1e40af}.sp-cmp em.a-담당자{background:#dcfce7;color:#166534}.sp-cmp em.a-고객{background:#fef3c7;color:#92400e}
.sp-cmp i{padding:1px 8px;border-radius:20px;background:#fee2e2;color:#991b1b;font-style:normal;font-size:12px;font-weight:800}
.sp-cmp small{color:#64748b}
.sp-save{margin:14px 0 0;padding:12px 16px;border-radius:12px;background:#eef2ff;color:#312e81}
.sp-cases{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.sp-cases>div{padding:14px;border-radius:16px;background:#fff;border:1px solid #e2e8f0}
.sp-cases img,.sp-noimg{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;object-position:top;border-radius:10px;margin-bottom:10px;background:#0f172a}
.sp-noimg{display:grid;place-items:center;color:#fff;font-size:30px;font-weight:900}
.sp-cases b{font-size:17px}.sp-cases p{margin:4px 0;color:#475569;font-size:14px}.sp-cases small{color:#2563eb;font-size:12px}
.sp-stack{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:14px}
.sp-stack>div{padding:20px;border-radius:16px;background:#fff;border:1px solid #e2e8f0}
.sp-stack b{font-size:19px}.sp-stack p{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 0}
.sp-stack span{padding:7px 13px;border-radius:30px;background:#f1f5f9;font-size:15px;font-weight:600}.sp-stack i{font-style:normal;color:#2563eb}
.sp-price{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px}
.sp-price div{display:grid;gap:4px;align-content:start;padding:18px;border-radius:16px;background:#fff;border:1px solid #e2e8f0}
.sp-price b{font-size:17px}.sp-price strong{font-size:22px;color:#1d4ed8;letter-spacing:-.02em}.sp-price small{color:#64748b}.sp-price p{margin:4px 0 0;color:#475569;font-size:14px;line-height:1.55}
.sp-steps{margin:16px 0 34px;padding:0;list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:12px;counter-reset:s}
.sp-steps li{counter-increment:s;padding:20px;border-radius:16px;background:#fff;border:1px solid #e2e8f0}
.sp-steps li::before{content:"0" counter(s);display:block;color:#2563eb;font-weight:900;font-size:22px}
.sp-steps b{display:block;font-size:18px;margin:4px 0}.sp-steps span{color:#475569;font-size:14px}
.sp-pay{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:14px 0 18px}
.sp-pay div{padding:20px;border-radius:16px;background:#0f172a;color:#fff}.sp-pay small{color:#93c5fd;font-weight:700}.sp-pay b{display:block;margin-top:6px;font-size:19px;line-height:1.45}
.sp-sheet{display:block;width:100%;height:100%;border:0;background:#eef1f6}
@media (max-width:900px){
  .sp-stats,.sp-cards4,.sp-flow4{grid-template-columns:repeat(2,1fr)}
  .sp-flow4 div::after{display:none}
  .sp-gallery,.sp-cases,.sp-steps,.sp-pay{grid-template-columns:repeat(2,1fr)}
  .sp-cmp{grid-template-columns:1fr}
}
@media (max-width:560px){
  .sp-bar{flex-wrap:wrap;padding:10px 12px}.sp-bar nav{order:3;flex-basis:100%}
  .sp-bar button{font-size:14px;padding:6px 11px;min-height:36px}
  .sp-page{padding:24px 16px 50px}
  .sp-gallery,.sp-cases,.sp-steps,.sp-pay,.sp-stats,.sp-cards4{grid-template-columns:1fr}
}

/* 상담 중 입력 → AI 작업 */
.sp-brief{display:grid;gap:8px;margin:0 0 12px}
.sp-brief label{font-weight:800;font-size:16px}.sp-brief small{color:#64748b;font-weight:500;font-size:13px;margin-left:6px}
.sp-brief textarea{width:100%;box-sizing:border-box;padding:14px 16px;border:2px solid #cbd5e1;border-radius:14px;background:#fff;color:#0f172a;font:inherit;font-size:17px;line-height:1.6;resize:vertical}
.sp-brief textarea:focus{outline:none;border-color:#2563eb}
.sp-run{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:8px}
.sp-run button{min-height:50px;padding:10px 22px;border:0;border-radius:12px;background:#2563eb;color:#fff;font:inherit;font-size:17px;font-weight:800;cursor:pointer}
.sp-run button.sub{background:#0f172a}
.sp-run button:disabled{opacity:.5;cursor:wait}
.sp-overlay .sbx-wait,.sp-overlay .sbx-err,.sp-err{margin:10px 0;font-size:16px;color:#475569}
.sp-overlay .sbx-err,.sp-err{color:#b91c1c}
.sp-sheet-in{display:block;width:100%;height:80vh;border:0;border-radius:14px;background:#eef1f6;margin-top:10px}
.sp-based{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:10px;margin:0 0 14px}
.sp-based div{display:grid;gap:3px;padding:14px;border-radius:12px;background:#ecfdf5;border:1px solid #a7f3d0}
.sp-based small{color:#047857;font-weight:700;font-size:12px}.sp-based b{font-size:16px}.sp-based span{color:#334155;font-size:14px}
.sp-est{display:grid;grid-template-columns:1fr auto;gap:4px 20px;margin:14px 0;padding:18px 20px;border-radius:14px;background:linear-gradient(135deg,#1d4ed8,#4f46e5);color:#fff}
.sp-est small{opacity:.85;font-size:13px}.sp-est b{display:block;font-size:26px;letter-spacing:-.02em}.sp-est div:last-of-type{text-align:right}
.sp-est p{grid-column:1/-1;margin:4px 0 0;font-size:13px;opacity:.85}
.sp-roll{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px}
.sp-roll div{display:grid;gap:3px;padding:14px;border-radius:12px;background:#f8fafc;border:1px solid #e2e8f0;font-size:14px;color:#475569}
.sp-roll small{color:#2563eb;font-weight:800}.sp-roll b{color:#0f172a;font-size:15px}
.sp-note{margin:12px 0 0;color:#64748b;font-size:14px}
.sp-mods{display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:14px}
.sp-mods>div{display:grid;gap:8px;align-content:start;padding:20px;border-radius:16px;background:#fff;border:1px solid #e2e8f0}
.sp-mods b{font-size:19px}
.sp-real{margin:0;padding:8px 12px;border-radius:10px;background:#eff6ff;color:#1e3a8a;font-size:14px;font-weight:600}
.sp-mods ol{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:6px;counter-reset:m}
.sp-mods li{counter-increment:m;padding:5px 11px;border-radius:30px;background:#f1f5f9;font-size:13px;font-weight:600}
.sp-mods li::before{content:counter(m) " ";color:#2563eb;font-weight:900}
.sp-apply{display:flex;flex-wrap:wrap;gap:6px;margin:0}.sp-apply small{flex-basis:100%;color:#64748b;font-size:12px;font-weight:700}
.sp-apply span{padding:5px 11px;border-radius:30px;border:1px solid #cbd5e1;font-size:13px}
.sp-mprice{margin:0;color:#1d4ed8;font-weight:800;font-size:14px}
.sp-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 6px}
.sp-chips button{min-height:46px;padding:8px 20px;border:2px solid #cbd5e1;border-radius:30px;background:#fff;color:#0f172a;font:inherit;font-size:16px;font-weight:700;cursor:pointer}
.sp-chips button.on{background:#0f172a;border-color:#0f172a;color:#fff}

/* 태블릿·휴대폰: 탭을 옆으로 밀지 않아도 7개가 모두 보이게 줄바꿈 (가로 스크롤이라 뒤쪽 탭이 잘려 보였음) */
@media (max-width:1100px){
  .sp-bar{flex-wrap:wrap;row-gap:8px}
  .sp-bar>b{flex:1}
  .sp-bar nav{order:3;flex-basis:100%;flex-wrap:wrap;overflow:visible;gap:6px}
  .sp-bar nav button{background:#f1f5f9}
  .sp-bar nav button.on{background:#0f172a}
}

/* 작업 기록: 진행 중 · 최근 5개 */
.sp-running{margin:10px 0 0;padding:12px 16px;border-radius:12px;background:#fff7ed;border:1px solid #fed7aa;color:#9a3412;font-weight:700}
.sp-recent{display:flex;flex-wrap:wrap;gap:8px;align-items:stretch;margin:14px 0 4px}
.sp-recent>small{flex-basis:100%;color:#64748b;font-weight:700}
.sp-recent button{display:grid;gap:2px;justify-items:start;min-width:150px;max-width:260px;padding:10px 14px;border:2px solid #e2e8f0;border-radius:12px;background:#fff;color:#0f172a;font:inherit;text-align:left;cursor:pointer}
.sp-recent button b{font-size:15px;line-height:1.35}.sp-recent button span{color:#64748b;font-size:12px}
.sp-recent button.on{border-color:#2563eb;background:#eff6ff}
.sp-live iframe:not(.sp-sheet-in){display:block}
.sp-run.small button{min-height:40px;padding:6px 16px;font-size:14px;background:#fff;color:#0f172a;border:1px solid #cbd5e1}
.sp-live .sp-brief{margin-top:14px}