/* 터랩 — 토스식 깔끔한 화면 (style.css · teolab-app.css 위에 덮는 층)
   원칙: 흰 바탕 · 넓은 여백 · 크고 굵은 제목 · 테두리 대신 옅은 회색 면 · 그림자 거의 없음 · 둥글고 큰 버튼 · 포인트 색은 청록 하나 */

:root {
  --bg: #ffffff;
  --bg-2: #f2f4f6;
  --surface: #ffffff;
  --surface-2: #f9fafb;
  --ink: #191f28;
  --ink-2: #333d4b;
  --muted: #8b95a1;
  --line: #f2f4f6;
  --line-2: #e5e8eb;
  --brand: #0891b2;
  --brand-2: #0e7490;
  --brand-ink: #ffffff;
  --brand-soft: #e6f6fa;
  --accent: #f59e0b;
  --accent-soft: #fff6e5;
  --warn: #c2410c;
  --warn-soft: #fff4ed;
  --bad: #f04452;
  --bad-soft: #ffeef0;
  --good: #16a34a;
  --good-soft: #e9f8ee;
  --shadow-sm: none;
  --shadow: 0 2px 8px rgba(0, 0, 0, .04);
  --shadow-lg: 0 12px 40px rgba(0, 0, 0, .08);
  --header: rgba(255, 255, 255, .96);
  --radius: 20px;
  --radius-sm: 14px;
  --tl-bg: #ffffff; --tl-bg-2: #f2f4f6; --tl-surface: #ffffff; --tl-surface-2: #f9fafb;
  --tl-ink: #191f28; --tl-ink-2: #333d4b; --tl-muted: #8b95a1; --tl-line: #f2f4f6; --tl-line-2: #e5e8eb;
  --tl-brand: #0891b2; --tl-brand-2: #0e7490; --tl-brand-soft: #e6f6fa; --tl-header: rgba(255, 255, 255, .96);
}
:root[data-theme="dark"] {
  --bg: #17171c;
  --bg-2: #2c2c35;
  --surface: #202027;
  --surface-2: #26262e;
  --ink: #f9fafb;
  --ink-2: #d1d6db;
  --muted: #8b95a1;
  --line: #2c2c35;
  --line-2: #3a3a45;
  --brand: #22b8d9;
  --brand-2: #5fd0ea;
  --brand-ink: #04202a;
  --brand-soft: #12313a;
  --shadow-sm: none;
  --shadow: none;
  --header: rgba(23, 23, 28, .96);
  --tl-bg: #17171c; --tl-bg-2: #2c2c35; --tl-surface: #202027; --tl-surface-2: #26262e;
  --tl-ink: #f9fafb; --tl-ink-2: #d1d6db; --tl-muted: #8b95a1; --tl-line: #2c2c35; --tl-line-2: #3a3a45;
  --tl-brand: #22b8d9; --tl-brand-soft: #12313a; --tl-header: rgba(23, 23, 28, .96);
}

body { font-size: 16px; letter-spacing: -0.02em; line-height: 1.6; }
h1, h2, h3 { letter-spacing: -0.03em; font-weight: 700; }

/* 위쪽: 흰 띠, 테두리 대신 아주 옅은 선, 흐림 효과 없음 */
header.top { backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom: 1px solid var(--line); box-shadow: none; }
header.top .wrap { height: 60px; }
header.top nav > a:not(.btn), header.top nav .linkbtn { color: var(--ink-2); font-weight: 500; font-size: 15px; border-radius: 10px; }
header.top nav > a:not(.btn):hover, header.top nav .linkbtn:hover { background: var(--bg-2); }
.badge-demo { background: var(--bg-2); color: var(--muted); }
.theme-btn { border: 0 !important; background: transparent !important; }
.theme-btn:hover { background: var(--bg-2) !important; }
#tlbar { backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom: 1px solid var(--tl-line); }
#tlbar .tl-mark { box-shadow: none; }
#tlbar .tl-theme { border: 0; background: transparent; }
#tlbar .tl-theme:hover { background: var(--tl-bg-2); }
#tlbar .tl-site { border: 0; background: var(--tl-bg-2); border-radius: 10px; }
#tlbar .tl-site.empty { border: 1px dashed var(--tl-brand); background: transparent; }

/* 버튼: 꽉 찬 면 · 테두리 없음 · 그림자 없음 · 둥글게 */
.btn { border: 0; background: var(--bg-2); color: var(--ink); font-weight: 600; border-radius: 14px; box-shadow: none; }
.btn:hover { background: var(--line-2); border-color: transparent; }
.btn.primary { background: var(--brand); color: var(--brand-ink); box-shadow: none; }
.btn.primary:hover { background: var(--brand-2); transform: none; }
.btn.lg { padding: 16px 28px; font-size: 17px; border-radius: 16px; }
.btn.danger { background: var(--bad-soft); color: var(--bad); border: 0; }
.btn.danger:hover { background: color-mix(in srgb, var(--bad) 16%, transparent); }
.btn:active { transform: scale(.98); }

/* 입력: 회색으로 채운 칸, 누르면 청록 테두리 */
input:not([type]), input[type=date], input[type=text], input[type=search], input[type=email], input[type=password], input[type=number], input[type=tel], select, textarea {
  background: var(--bg-2); border: 1.5px solid transparent; border-radius: 12px; }
input:focus, select:focus, textarea:focus { background: var(--surface); border-color: var(--brand); box-shadow: none; }
input:disabled { background: var(--bg-2); color: var(--muted); opacity: .8; }

/* 면: 테두리 없이 흰 카드를 옅은 회색 바탕 위에 — 또는 흰 바탕 위 회색 카드 */
.panel { border: 0; box-shadow: none; background: var(--surface); border-radius: var(--radius); }
.card { border: 0; box-shadow: none; background: var(--surface-2); border-radius: var(--radius); }
.card:hover { box-shadow: none; background: var(--bg-2); transform: none; }
.kpi { border: 0; background: var(--bg-2); border-radius: 16px; }
.callout { border: 0; border-radius: 14px; }

/* 로그인 · 가입: 카드 없이 화면 가운데 큰 제목 */
.auth { margin-top: 64px; }
.auth .panel { box-shadow: none; padding: 8px 4px; background: transparent; }
.auth h1 { font-size: 30px; font-weight: 700; margin-bottom: 10px; }
.auth .lead { font-size: 16px; color: var(--muted); }
.auth .switch { font-size: 15px; }

/* 첫 화면 */
.hero::before, .hero::after { display: none; }
.hero { padding: 96px 0 72px; }
.hero h1 { font-size: 52px; font-weight: 800; letter-spacing: -0.045em; }
.hero p.lead { font-size: 19px; color: var(--ink-2); }
.sec-head h2 { font-size: 34px; font-weight: 800; letter-spacing: -0.04em; }
.sec-head p { font-size: 17px; color: var(--muted); }
section.block { padding-top: 96px; padding-bottom: 96px; }
section.block.alt { background: var(--bg-2); }
section.block.alt .card { background: var(--surface); }
.card .icon, .card .ic { border-radius: 14px; }
.ribbon { border-radius: 99px; }
footer { background: var(--bg-2); border-top: 0; }
.foot-bottom { border-top-color: var(--line-2); }

/* 표 */
table.list th { background: transparent; color: var(--muted); font-weight: 600; border-bottom: 1px solid var(--line-2); }
table.list td { border-bottom: 1px solid var(--line); }

/* 배지 · 칩 */
.badge, .chip, .tag { border: 0 !important; border-radius: 99px; }

/* 첫 화면 큰 두 카드 */
.pillar { border: 0 !important; background: var(--surface-2); box-shadow: none !important; }
.pillar:hover { background: var(--bg-2); transform: none; }
.pillar.on { background: var(--brand-soft); }
.plan.featured { border: 0; box-shadow: none; background: var(--brand-soft); }
.bundle { border: 0; box-shadow: none; }

/* 내 사업 목록: 회색 면의 줄, 안쪽 칸은 흰색 */
.pm-sum { border: 0; background: var(--surface-2); border-radius: 16px; }
.pm-row { border: 0; background: var(--surface-2); border-radius: 18px; }
.pm-row.on { box-shadow: inset 0 0 0 2px var(--brand); }
.pm-step { border: 0; background: var(--surface); border-radius: 10px; }
.pm-step.on { background: var(--brand); }
.pm-step.skip { border: 1px dashed var(--line-2); }
.pm-more { border: 0; background: var(--surface); border-radius: 10px; }
.pm-row [class*="pm-m"]:not(.pm-more):not(.pm-month) { border-color: transparent; }
.pj-list { border: 0; background: transparent; gap: 8px; }
.pj-row { border: 0; background: var(--surface-2); border-radius: 16px; }
.pj-card { border: 0; background: var(--surface-2); border-radius: 18px; }
.pj-card:hover { background: var(--bg-2); transform: none; }
.pj-back { border: 0; background: var(--bg-2); }

/* ---------------- 2차: 정보는 덜, 할 일은 크게 ---------------- */

/* 사업 화면 — 다음 할 일 큰 카드 하나 */
.tn-next { display: grid; grid-template-columns: 1fr auto; gap: 16px 24px; align-items: center; background: var(--brand-soft); border-radius: 24px; padding: 28px 32px; margin: 8px 0 14px; }
.tn-next small { color: var(--brand); font-weight: 700; font-size: 14px; }
.tn-next b { display: block; font-size: 26px; letter-spacing: -0.035em; margin: 6px 0 6px; line-height: 1.3; }
.tn-next span { color: var(--ink-2); font-size: 16px; }
.tn-next .btn { white-space: nowrap; }
.tn-next.done { background: var(--good-soft); grid-template-columns: 1fr; }
.tn-next.done small { color: var(--good); }
.tn-dots { grid-column: 1 / -1; display: flex; gap: 6px; }
.tn-dots i { flex: 1; height: 6px; border-radius: 6px; background: color-mix(in srgb, var(--brand) 18%, transparent); }
.tn-dots i.on { background: var(--brand); }
.tn-dots i.now { background: color-mix(in srgb, var(--brand) 45%, transparent); }
/* 예전 단계 띠는 작게 (전체 단계 보기) */
.pj-steps { border: 0 !important; background: transparent !important; padding: 0 4px !important; margin: 0 0 26px !important; }
.pj-steps > b { font-size: 13px !important; color: var(--muted); font-weight: 600; }
.pj-steps li a { border: 0 !important; background: var(--bg-2); }
.pj-steps li.next a { background: var(--bg-2) !important; color: var(--brand) !important; }
@media (max-width: 700px) { .tn-next { grid-template-columns: 1fr; padding: 24px; } .tn-next b { font-size: 22px; } .tn-next .btn { width: 100%; } }

/* 사업 화면 — 칸 접기: 제목 줄만, 누르면 펼침 */
section.ld { border: 0; box-shadow: none; background: var(--surface-2); border-radius: 22px; }
section.ld.ld-top { background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--line-2); }
.tn-fold > .ld-head { cursor: pointer; position: relative; padding-right: 44px; }
.tn-fold:not(.open) > :not(.ld-head) { display: none !important; }
.tn-fold:not(.open) .ld-head p { display: none; }
.tn-fold:not(.open) .ld-head h2 { margin: 0; }
.tn-tog { position: absolute; right: 0; top: 50%; transform: translateY(-50%); border: 0; background: var(--bg-2); color: var(--muted); width: 34px; height: 34px; border-radius: 10px; font-size: 22px; line-height: 1; cursor: pointer; transition: transform .15s; }
.tn-fold.open .tn-tog { transform: translateY(-50%) rotate(90deg); }
.pj-sub small { display: block; font-weight: 500; font-size: 13px; color: var(--muted); margin-top: 2px; }

/* 내 사업 — 한 줄에 이름 · 위치 · 상태 · 금액만, 단계 · 입금 칸은 ▾ 로 펼쳐서 */
.pm-row { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr) auto; padding: 22px 24px; }
.pm-name { font-size: 18px; font-weight: 700; letter-spacing: -0.03em; }
.pm-sub { font-size: 14px; }
.pm-meta { display: none; }
.pm-row:has(.pm-more.open) .pm-meta { display: block; }
.pm-row:not(:has(.pm-more.open)) .pm-steps, .pm-row:not(:has(.pm-more.open)) .pm-pays { display: none; }
.pm-plabel { font-size: 15px; color: var(--ink-2); font-weight: 600; }
.pm-bar { margin: 8px 0 0; }
.pm-msum { font-size: 15px; color: var(--ink-2); }
.pm-more { width: 40px; height: 40px; font-size: 14px; }
.pm-mv { width: 30px; border: 0; background: var(--surface); border-radius: 7px; }
.pm-sum { font-size: 15px; padding: 18px 22px; }
@media (max-width: 900px) { .pm-row { grid-template-columns: 1fr auto; } }

/* ---------------- 작업대 화면: 제목은 크게, 긴 설명은 두 줄까지 (마우스를 올리면 전부) ---------------- */
.wb-main .pj-head h1 { font-size: 30px; letter-spacing: -0.04em; margin: 10px 0 8px; }
.tl-lead, .wb-main .ld-head p, .wb-main .lead { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 14.5px; color: var(--muted); }
.tl-lead:hover, .wb-main .ld-head p:hover, .wb-main .lead:hover { -webkit-line-clamp: unset; }
.wb-main section.ld { background: var(--surface-2); }
.wb-main section.ld .ld-head h2, .wb-main section.ld h2 { font-size: 19px; }
.wb-main .ld input:not([type=checkbox]):not([type=radio]), .wb-main .ld select, .wb-main .ld textarea { background: var(--surface); }
.wb-main .ld input:focus, .wb-main .ld select:focus, .wb-main .ld textarea:focus { border-color: var(--brand); }
.chip-chk { border: 0 !important; background: var(--surface); border-radius: 99px; }

/* 위쪽 '설계 프로그램 | 용역 플랫폼' 전환 (로고 옆) — 지금 쪽이 흰 칸으로 떠 보임 */
.side-sw { display: inline-flex; align-items: center; gap: 2px; padding: 3px; margin-left: 10px; background: var(--bg-2); border-radius: 12px; flex-shrink: 0; }
.side-sw a { padding: 7px 14px; border-radius: 9px; font-size: 14px; font-weight: 600; color: var(--muted); text-decoration: none; white-space: nowrap; transition: background .12s, color .12s; }
.side-sw a:hover { color: var(--ink); text-decoration: none; }
.side-sw a.on { background: var(--surface); color: var(--brand); box-shadow: 0 1px 3px rgba(0, 0, 0, .1); font-weight: 700; }
.side-sw a.bid.on { color: var(--accent); }
.side-sw .sm { display: none; }
@media (max-width: 760px) {
  .side-sw { margin-left: 6px; }
  .side-sw a { padding: 6px 10px; font-size: 13px; }
  .side-sw .lg { display: none; } .side-sw .sm { display: inline; }
  header.top .badge-demo, header.top .logo small { display: none; }
}
@media (max-width: 760px) {
  header.top .wrap { gap: 8px; padding: 0 12px; }
  header.top nav { gap: 0; }
  header.top nav form, header.top nav .theme-btn { display: none; }     /* 로그아웃 · 밝기는 '내 계정'에서 */
  header.top nav > a:not(.btn) { padding: 7px 8px; font-size: 14px; }
  header.top nav .btn { padding: 8px 12px; font-size: 14px; }
}
@media (max-width: 400px) { header.top .logo { font-size: 0; gap: 0; } header.top .logo .mark { font-size: 16px; } }

/* 용역 쪽 위쪽 메뉴: 용역 찾기 굵게 · 오른쪽 버튼 주황 */
header.top nav a.nav-find { color: var(--ink); font-weight: 700; }
header.top nav .btn.bid-cta { background: var(--accent); color: #fff; }
header.top nav .btn.bid-cta:hover { background: #d97706; }

/* 버튼 높이 통일 — <a class="btn"> 은 본문 줄높이(1.6)를, <button> 은 기본 줄높이를 써서 높이가 달랐음 */
.btn, button.btn, a.btn, label.btn, input.btn { line-height: 1.3; box-sizing: border-box; }
.btn:not(.lg):not(.sm):not(.block) { min-height: 40px; }
/* 버튼 묶음은 넘치면 다음 줄로 (휴대폰에서 같은 폭 버튼이 화면 밖으로 밀리지 않게) */
.th-cta, .actions, .acts, .fe-acts, .ld-btns, .d2-acts, .pj-empty-btns, .ab-row, .ps-dl { flex-wrap: wrap; }
/* 위쪽 메뉴가 길어지는 중간 폭에서는 로고 옆 작은 글씨(TEOLAB · 베타)를 감춤 */
@media (max-width: 1400px) { header.top .logo small, header.top .badge-demo { display: none; } header.top nav > a:not(.btn) { padding-left: 8px; padding-right: 8px; } }