/* 터랩 앱 공통 — 기능 프로그램(간단 내역서 작업대 · 설계 내역서 …) 위에 붙는 띠와 공통 모양.
   색은 터랩 사이트(style.css)와 같은 값. 각 앱은 자기 색 변수를 이 값에 맞춘다. */
:root {
  --tl-bg: #f6f8fa; --tl-bg-2: #eef2f6; --tl-surface: #ffffff; --tl-surface-2: #f8fafc;
  --tl-ink: #0f1a24; --tl-ink-2: #334453; --tl-muted: #64748b; --tl-line: #e2e8f0; --tl-line-2: #cbd5e1;
  --tl-brand: #0e7490; --tl-brand-2: #0891b2; --tl-brand-ink: #ffffff; --tl-brand-soft: #e0f2f7;
  --tl-accent: #d97706; --tl-accent-soft: #fef3e2; --tl-warn: #b45309; --tl-warn-soft: #fff7e6;
  --tl-bad: #b42318; --tl-bad-soft: #fef1f0; --tl-good: #15803d; --tl-good-soft: #e8f6ed;
  --tl-header: rgba(255, 255, 255, .86);
  --tl-font: "Pretendard Variable", Pretendard, -apple-system, "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", system-ui, sans-serif;
}
:root[data-theme="dark"] {
  --tl-bg: #0b1117; --tl-bg-2: #0f171f; --tl-surface: #121b24; --tl-surface-2: #16212c;
  --tl-ink: #e6edf3; --tl-ink-2: #c3cfda; --tl-muted: #8b9bab; --tl-line: #223140; --tl-line-2: #2e4152;
  --tl-brand: #22b8d9; --tl-brand-2: #5fd0ea; --tl-brand-ink: #04202a; --tl-brand-soft: #0d2b36;
  --tl-accent: #f59e0b; --tl-accent-soft: #2b2110; --tl-warn: #f2b45a; --tl-warn-soft: #2a2112;
  --tl-bad: #f8877d; --tl-bad-soft: #2d1614; --tl-good: #5ad08a; --tl-good-soft: #10261a;
  --tl-header: rgba(11, 17, 23, .9);
}

/* 위쪽 띠: 터랩 · 기능 전환 · 남은 이용권 · 내 계정 · 밝기 */
#tlbar { position: relative; z-index: 60; display: flex; align-items: center; gap: 4px; height: 44px; padding: 0 14px;
  background: var(--tl-header); border-bottom: 1px solid var(--tl-line); color: var(--tl-ink-2);
  font: 500 13px/1.4 var(--tl-font); letter-spacing: -0.01em; backdrop-filter: saturate(160%) blur(12px); -webkit-backdrop-filter: saturate(160%) blur(12px); }
#tlbar a { color: var(--tl-ink-2); text-decoration: none; padding: 6px 10px; border-radius: 8px; white-space: nowrap; }
#tlbar a:hover { background: var(--tl-bg-2); color: var(--tl-ink); }
#tlbar .tl-brand { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; font-size: 15px; color: var(--tl-ink); padding: 4px 8px 4px 2px; letter-spacing: -0.03em; }
#tlbar .tl-brand:hover { background: none; }
#tlbar .tl-mark { width: 24px; height: 24px; border-radius: 7px; display: inline-grid; place-items: center;
  background: linear-gradient(135deg, #0e7490, #155e75); box-shadow: 0 3px 10px -4px rgba(14, 116, 144, .6); }
#tlbar .tl-mark svg { width: 15px; height: 15px; }
#tlbar .tl-sep { width: 1px; height: 18px; background: var(--tl-line-2); margin: 0 6px; }
#tlbar .tl-nav { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; }
#tlbar .tl-nav a.on { color: var(--tl-brand); background: var(--tl-brand-soft); font-weight: 700; }
#tlbar .tl-grow { flex: 1; }
#tlbar #tlCred { color: var(--tl-muted); font-size: 12.5px; margin-right: 6px; white-space: nowrap; }
#tlbar .tl-theme { width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--tl-line); background: var(--tl-surface); color: var(--tl-ink-2);
  display: inline-grid; place-items: center; cursor: pointer; padding: 0; margin-left: 4px; }
#tlbar .tl-theme:hover { border-color: var(--tl-line-2); }
#tlbar .tl-theme svg { width: 16px; height: 16px; }
#tlbar .tl-theme .sun { display: none; }
:root[data-theme="dark"] #tlbar .tl-theme .sun { display: block; }
:root[data-theme="dark"] #tlbar .tl-theme .moon { display: none; }
@media (max-width: 900px) { #tlbar #tlCred { display: none; } }
@media (max-width: 640px) { #tlbar .tl-nav { display: none; } }

/* 띠 아래를 화면 높이에 맞춰 쓰는 앱 (설계 내역서) */
body.tl-fill { display: flex; flex-direction: column; height: 100vh; }
body.tl-fill > #tlbar { flex: none; }
body.tl-fill > #root { flex: 1; min-height: 0; height: auto !important; }

/* 공통 사업 */
#tlbar .tl-site { display: inline-flex; align-items: center; gap: 7px; max-width: 420px; height: 30px; padding: 0 10px; border-radius: 8px;
  border: 1px solid var(--tl-line-2); background: var(--tl-surface); color: var(--tl-ink); font: inherit; cursor: pointer; }
#tlbar .tl-site:hover { border-color: var(--tl-brand); }
#tlbar .tl-site small { color: var(--tl-brand); font-weight: 700; font-size: 11.5px; }
#tlbar .tl-site b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#tlbar .tl-site i { font-style: normal; color: var(--tl-muted); font-size: 11px; }
#tlbar .tl-site.empty { border-style: dashed; border-color: var(--tl-brand); }
#tlbar .tl-site.empty b { color: var(--tl-brand); }
#tlSitePop { position: fixed; z-index: 1000; width: 370px; max-height: 70vh; display: flex; flex-direction: column; background: var(--tl-surface); color: var(--tl-ink);
  border: 1px solid var(--tl-line-2); border-radius: 12px; box-shadow: 0 20px 50px -12px rgba(0, 0, 0, .35); font: 13px/1.45 var(--tl-font); overflow: hidden; }
#tlSitePop .tl-pop-head { padding: 10px 14px; font-weight: 800; border-bottom: 1px solid var(--tl-line); }
#tlSitePop .tl-pop-head small { font-weight: 500; color: var(--tl-muted); margin-left: 6px; }
#tlSitePop .tl-pop-list { overflow: auto; padding: 6px; }
#tlSitePop .tl-pop-list button { display: flex; flex-direction: column; gap: 1px; width: 100%; text-align: left; padding: 8px 10px; border: 0; border-radius: 8px; background: none; color: inherit; font: inherit; cursor: pointer; }
#tlSitePop .tl-pop-list button:hover { background: var(--tl-bg-2); }
#tlSitePop .tl-pop-list button.on { background: var(--tl-brand-soft); }
#tlSitePop .tl-pop-list button.on b { color: var(--tl-brand); }
#tlSitePop .tl-pop-list button span { color: var(--tl-muted); font-size: 12px; }
#tlSitePop .tl-empty { color: var(--tl-muted); padding: 10px; margin: 0; }
#tlSitePop .tl-pop-foot { display: flex; gap: 6px; padding: 8px; border-top: 1px solid var(--tl-line); }
#tlSitePop .tl-pop-foot button { flex: 1; padding: 7px; border-radius: 8px; border: 1px solid var(--tl-line-2); background: var(--tl-surface); color: var(--tl-ink); font: inherit; font-weight: 600; cursor: pointer; }
#tlSitePop .tl-pop-foot button:first-child { background: var(--tl-brand); color: var(--tl-brand-ink); border-color: var(--tl-brand); }
#tlSiteDlg { position: fixed; inset: 0; z-index: 1001; background: rgba(5, 10, 15, .5); display: grid; place-items: center; padding: 16px; font: 13.5px/1.5 var(--tl-font); }
#tlSiteDlg .tl-dlg { width: min(720px, 100%); max-height: 92vh; display: flex; flex-direction: column; background: var(--tl-surface); color: var(--tl-ink); border-radius: 14px; box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .5); overflow: hidden; }
#tlSiteDlg .tl-dlg-head { padding: 14px 18px; border-bottom: 1px solid var(--tl-line); display: flex; flex-direction: column; gap: 2px; }
#tlSiteDlg .tl-dlg-head b { font-size: 17px; }
#tlSiteDlg .tl-dlg-head span { color: var(--tl-muted); font-size: 12.5px; }
#tlSiteDlg .tl-dlg-body { padding: 14px 18px; overflow: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; }
#tlSiteDlg label { display: flex; flex-direction: column; gap: 3px; }
#tlSiteDlg label.wide { grid-column: 1 / -1; }
#tlSiteDlg label span { font-weight: 600; font-size: 12.5px; color: var(--tl-ink-2); }
#tlSiteDlg input, #tlSiteDlg textarea { font: inherit; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--tl-line-2); background: var(--tl-surface-2); color: var(--tl-ink); }
#tlSiteDlg input:focus, #tlSiteDlg textarea:focus { outline: none; border-color: var(--tl-brand); }
#tlSiteDlg .tl-dlg-foot { display: flex; gap: 8px; padding: 12px 18px; border-top: 1px solid var(--tl-line); }
#tlSiteDlg .tl-dlg-foot button { padding: 8px 16px; border-radius: 8px; border: 1px solid var(--tl-line-2); background: var(--tl-surface); color: var(--tl-ink); font: inherit; font-weight: 600; cursor: pointer; }
#tlSiteDlg .tl-dlg-foot button.pri { background: var(--tl-brand); color: var(--tl-brand-ink); border-color: var(--tl-brand); }
#tlSiteDlg .tl-dlg-foot button.danger { color: var(--tl-bad); }
@media (max-width: 640px) { #tlSiteDlg .tl-dlg-body { grid-template-columns: 1fr; } #tlbar .tl-site { max-width: 180px; } }
/* 사업 종류 고르기 (칸 바로 아래) */
#tlSiteDlg .tl-kinds { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 4px; }
#tlSiteDlg .tl-kinds button { padding: 3px 9px; border-radius: 99px; border: 1px solid var(--tl-line-2); background: var(--tl-surface); color: var(--tl-ink-2); font: inherit; font-size: 12px; cursor: pointer; }
#tlSiteDlg .tl-kinds button:hover { border-color: var(--tl-brand); color: var(--tl-brand); }
#tlSiteDlg .tl-kinds button.on { background: var(--tl-brand-soft); border-color: var(--tl-brand); color: var(--tl-brand); font-weight: 700; }
#tlSiteDlg label:has(.tl-kinds) { grid-column: 1 / -1; }
/* 내 사업 / 사업 이름 */
#tlbar .tl-crumb { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
#tlbar .tl-crumb svg { width: 15px; height: 15px; }
#tlbar .tl-crumb.on { color: var(--tl-brand); background: var(--tl-brand-soft); }
#tlbar .tl-slash { color: var(--tl-line-2); margin: 0 2px; font-size: 16px; }
#tlSitePop .tl-pop-head { display: flex; justify-content: space-between; align-items: center; }
#tlSitePop .tl-pop-head a { font-weight: 600; font-size: 12.5px; color: var(--tl-brand); text-decoration: none; }
#tlSitePop .tl-pop-here { display: block; margin: 6px 6px 0; padding: 8px 10px; border-radius: 8px; background: var(--tl-bg-2); color: var(--tl-ink); text-decoration: none; font-weight: 600; font-size: 12.5px; }
#tlSitePop .tl-pop-here:hover { background: var(--tl-brand-soft); color: var(--tl-brand); }

/* 작업대 안의 화면들: 띠 아래 두 번째 줄, 넘치면 다음 줄로 */
#tlsub { position: relative; z-index: 59; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; padding: 6px 14px;
  background: var(--tl-surface); border-bottom: 1px solid var(--tl-line); font-size: 13.5px; }
#tlsub .tl-subname { font-weight: 800; color: var(--tl-ink); margin-right: 6px; font-size: 13px; }
#tlsub a { color: var(--tl-ink-2); text-decoration: none; padding: 5px 11px; border-radius: 999px; border: 1px solid var(--tl-line); background: var(--tl-surface); white-space: nowrap; }
#tlsub a:hover { border-color: var(--tl-brand); color: var(--tl-brand); }
#tlsub a.on { color: var(--tl-brand); border-color: var(--tl-brand); background: var(--tl-brand-soft); font-weight: 700; }
body.tl-fill > #tlsub { flex: none; }
@media (max-width: 640px) { #tlsub { padding: 6px 10px; } #tlsub .tl-subname { width: 100%; } }
/* 휴대폰: 띠가 화면 밖으로 밀리지 않게 — 안내 · 건의는 감추고(내 계정 · 첫 화면에서 열림), 남는 넘침은 띠 안에서만 옆으로 밀기 */
@media (max-width: 640px) {
  #tlbar { overflow-x: auto; scrollbar-width: none; padding: 0 8px; }
  #tlbar::-webkit-scrollbar { display: none; }
  #tlbar a[href="/guide"], #tlbar a[href="/support"] { display: none; }
  #tlbar .tl-site { max-width: 150px; flex: none; }
  #tlbar > * { flex-shrink: 0; }
}
/* 휴대폰: 하위 메뉴(작업대 도구들)를 한 줄로 — 여러 줄로 접혀 본문을 밀어내지 않게, 옆으로 밀어서 고름 */
@media (max-width: 640px) {
  #tlsub { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  #tlsub::-webkit-scrollbar { display: none; }
  #tlsub .tl-subname { width: auto; flex: none; }
  #tlsub a { flex: none; }
}

/* ===== 2026-10-19 처음 보는 사람도 알아보게 — 누르는 것은 크게, 글자는 또렷하게 =====
   위쪽 띠 54px · 하위 메뉴 40px · 작업대 안 버튼 최소 38px · 글자 14px 이상 · 휴대폰은 손가락 크기 44px */
#tlbar { height: 54px; gap: 6px; font-size: 14.5px; }
#tlbar a { padding: 8px 12px; border-radius: 9px; }
#tlbar .tl-nav { gap: 4px; }
#tlbar .tl-nav a { font-weight: 600; }
#tlbar .tl-brand { font-size: 17px; }
#tlbar .tl-mark { width: 28px; height: 28px; }
#tlbar .tl-mark svg { width: 26px; height: 26px; }
#tlbar .tl-site { height: 38px; font-size: 14px; padding: 0 12px; }
#tlbar .tl-site small { font-size: 12.5px; }
#tlbar .tl-theme { width: 38px; height: 38px; }
#tlbar #tlCred { font-size: 13.5px; }
#tlSitePop { font-size: 14px; }
#tlSitePop .tl-pop-list button { padding: 10px 12px; }
#tlSitePop .tl-pop-foot button { padding: 10px; }
#tlSiteDlg { font-size: 14.5px; }
#tlSiteDlg .tl-dlg-foot button { padding: 10px 18px; }
#tlSiteDlg .tl-kinds button { padding: 6px 12px; font-size: 13.5px; }
#tlsub { padding: 8px 14px; gap: 6px 8px; font-size: 15px; }
#tlsub .tl-subname { font-size: 15px; }
#tlsub a { padding: 8px 16px; font-weight: 600; }

/* 작업대 화면 안의 버튼 · 고르기 · 입력칸 — 화면마다 작게 박은 값보다 이긴다 (설계 내역서처럼 꽉 찬 앱은 그대로) */
html body:not(.tl-fill) :is(button, .btn, input[type=submit], input[type=button]):not(#tlbar *):not(#tlSitePop *):not(#tlSiteDlg *):not(.leaflet-container *):not(.linkbtn):not(.btn.lg):not(.tl-ai-fab) {
  min-height: 38px; font-size: 14.5px; }
html body:not(.tl-fill) :is(.btn.sm, button.sm) { min-height: 34px; font-size: 14px; padding-left: 12px; padding-right: 12px; }
html body:not(.tl-fill) select:not(.leaflet-container *) { min-height: 38px; font-size: 14.5px; }
html body:not(.tl-fill) :is(input[type=text], input[type=number], input[type=date], input[type=email], input[type=search], input:not([type]), textarea):not(.leaflet-container *):not(#tlSiteDlg *) { font-size: max(14px, 1em); }
html body:not(.tl-fill) input[type=file] { font-size: 14px; }
html body:not(.tl-fill) input[type=file]::file-selector-button { font: inherit; font-weight: 600; padding: 8px 14px; margin-right: 10px; border-radius: 8px;
  border: 1px solid var(--tl-line-2); background: var(--tl-surface); color: var(--tl-ink); cursor: pointer; }

@media (max-width: 640px) {
  #tlbar { height: 52px; }
  #tlbar .tl-theme { width: 40px; height: 40px; }
  #tlsub a { padding: 10px 16px; }
  html body:not(.tl-fill) :is(button, .btn, input[type=submit], input[type=button], select):not(#tlbar *):not(.leaflet-container *):not(.linkbtn) { min-height: 44px; }
}
/* 띠가 넘치지 않게: 작업대 목록이 먼저 보이고, 이용권 글은 넓은 화면에서만 (내 계정에서도 보임), 사업 이름 칸은 줄임 */
#tlbar > * { flex-shrink: 0; }
#tlbar .tl-nav { flex: 0 1 auto; min-width: 0; }
#tlbar .tl-site { max-width: 250px; }
@media (max-width: 1600px) { #tlbar #tlCred { display: none; } }
@media (max-width: 1360px) { #tlbar .tl-nav a { padding: 8px 9px; } #tlbar .tl-site { max-width: 190px; } }
@media (max-width: 640px) { #tlbar .tl-site { max-width: 150px; } }
/* 좁은 노트북(1280px 이하): 작업대 목록이 다 보이게 — '안내 · 건의'는 내 계정 · 내 사업 화면에도 있으므로 띠에서 감춤 */
@media (max-width: 1280px) {
  #tlbar a[href="/guide"], #tlbar a[href="/support"] { display: none; }
  #tlbar .tl-site { max-width: 150px; }
}

/* 빈 화면 안내 (띠 아래) — 이 도구가 쓰는 사업 자료가 아직 없을 때 '먼저 할 일' */
#tlhint { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 12px 18px; background: var(--tl-brand-soft); border-bottom: 1px solid var(--tl-brand);
  color: var(--tl-ink); font: 14.5px/1.5 var(--tl-font); }
#tlhint > div { flex: 1 1 320px; display: flex; flex-direction: column; gap: 2px; }
#tlhint b { font-size: 15.5px; color: var(--tl-brand); }
#tlhint .tl-hint-go { flex: none; display: inline-flex; align-items: center; min-height: 40px; padding: 0 18px; border-radius: 10px; background: var(--tl-brand); color: var(--tl-brand-ink);
  font-weight: 700; text-decoration: none; }
#tlhint .tl-hint-go:hover { filter: brightness(1.08); }
body > #tlhint { margin: 0; }