/* 뜨락 사업 도구 — 오울스와 같은 어두운 유리 결(services/owls/static/app.css) 2026-09-20 */
:root{--bg0:#0B0D17;--bg1:#12162A;--ink:#EEF0FA;--ink2:#B9BED6;--ink3:#8990B0;--glass-solid:#171C33;
--line:rgba(255,255,255,.11);--teal:#5EEAD4;--sky:#6FB6F2;--violet:#8B5CF6;--gold:#F5C76B;--coral:#FB7185;
--r:14px;--r2:20px;--blur:14px;--shadow:0 10px 30px -12px rgba(0,0,0,.6);color-scheme:dark}
*{box-sizing:border-box}html,body{margin:0;min-height:100%}
body{background:var(--bg0);background-image:radial-gradient(900px 600px at 8% -10%,rgba(94,234,212,.13),transparent 60%),radial-gradient(900px 700px at 105% 10%,rgba(139,92,246,.16),transparent 60%),linear-gradient(180deg,var(--bg0),var(--bg1));background-attachment:fixed;color:var(--ink);font:15px/1.55 "Pretendard Variable",Pretendard,-apple-system,"Apple SD Gothic Neo","Noto Sans KR",sans-serif;-webkit-font-smoothing:antialiased;letter-spacing:-.01em;padding-block:0 env(safe-area-inset-bottom,0px)}
a{color:var(--teal);text-decoration:none}a:hover{text-decoration:underline}
.num{font-variant-numeric:tabular-nums}.muted{color:var(--ink3)}.sub{color:var(--ink2)}.hide{display:none!important}
:focus-visible{outline:2px solid var(--teal);outline-offset:2px;border-radius:8px}
.glass{background:linear-gradient(160deg,rgba(255,255,255,.085),rgba(255,255,255,.035) 60%);border:1px solid var(--line);border-radius:var(--r2);box-shadow:var(--shadow);-webkit-backdrop-filter:blur(var(--blur)) saturate(140%);backdrop-filter:blur(var(--blur)) saturate(140%)}
@supports not (backdrop-filter:blur(1px)){.glass{background:var(--glass-solid)}}
.wrap{max-width:1180px;margin:0 auto;padding:16px}
.top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px;margin-bottom:14px}
.top h1{font-size:18px;margin:0;font-weight:700}.top h1 small{color:var(--ink3);font-weight:500;margin-left:8px;font-size:13px}
.tabs{display:flex;gap:4px;overflow-x:auto;padding:6px;margin-bottom:14px;-webkit-overflow-scrolling:touch}
.tab{flex:0 0 auto;min-height:40px;padding:8px 14px;border:0;border-radius:12px;background:transparent;color:var(--ink2);font:inherit;font-size:14px;cursor:pointer;white-space:nowrap}
.tab.on{background:rgba(94,234,212,.14);color:var(--ink);font-weight:600}
.tab:hover{background:rgba(255,255,255,.06)}
.box{padding:18px}.box+.box{margin-top:14px}
h2{font-size:16px;margin:0 0 12px}h3{font-size:14px;margin:14px 0 8px;color:var(--ink2)}
.grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.kpi{padding:14px 16px;border:1px solid var(--line);border-radius:var(--r)}
.kpi .l{font-size:12px;color:var(--ink3)}.kpi .v{font-size:22px;font-weight:700;margin-top:4px}
.kpi.warn .v{color:var(--coral)}
.row{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:8px 0}
input,select,textarea{font:inherit;color:var(--ink);background:rgba(255,255,255,.06);border:1px solid var(--line);border-radius:10px;padding:9px 11px;min-height:40px}
input:focus,select:focus,textarea:focus{border-color:var(--teal);outline:none}
textarea{min-height:64px;width:100%}
input.w8{width:9em}input.w12{width:13em}input.wf,select.wf{flex:1 1 220px}
.btn{font:inherit;font-weight:600;min-height:40px;padding:9px 16px;border-radius:12px;border:1px solid var(--line);background:rgba(255,255,255,.06);color:var(--ink);cursor:pointer}
.btn.pri{background:linear-gradient(135deg,#5EEAD4,#6FB6F2);color:#0B0D17;border:0}
.btn.ghost{background:transparent}.btn.sm{min-height:32px;padding:5px 10px;font-size:13px}
.btn:disabled{opacity:.5;cursor:default}
.scroll{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r)}
table{width:100%;border-collapse:collapse;min-width:560px;font-size:14px}
th,td{padding:9px 11px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
th{font-size:12px;color:var(--ink3);font-weight:600;background:rgba(255,255,255,.04)}
tr:last-child td{border-bottom:0}td.r,th.r{text-align:right}
.tag{display:inline-block;padding:1px 8px;border-radius:999px;font-size:11px;border:1px solid var(--line);color:var(--ink2)}
.tag.ok{color:var(--teal);border-color:var(--teal)}.tag.warn{color:var(--gold);border-color:var(--gold)}.tag.bad{color:var(--coral);border-color:var(--coral)}
.note{font-size:13px;color:var(--ink3);line-height:1.6;margin-top:10px}
.notice{padding:12px 14px;border-radius:var(--r);border:1px solid rgba(245,199,107,.5);background:rgba(245,199,107,.08);font-size:13px;line-height:1.6}
.empty{color:var(--ink3);padding:18px;text-align:center}
.skel{height:120px;border-radius:16px;background:linear-gradient(90deg,rgba(255,255,255,.05),rgba(255,255,255,.12),rgba(255,255,255,.05));background-size:200% 100%;animation:sh 1.2s infinite}
@keyframes sh{to{background-position:-200% 0}}
.toasts{position:fixed;right:16px;top:16px;display:flex;flex-direction:column;gap:8px;z-index:50;max-width:min(92vw,420px)}
.toast{padding:10px 14px;border-radius:12px;border:1px solid var(--line);background:var(--glass-solid);font-size:14px;box-shadow:var(--shadow)}
.toast.bad{border-color:var(--coral)}.toast.ok{border-color:var(--teal)}
.login{max-width:520px;margin:12vh auto;text-align:center}
.steps{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}.step{padding:6px 10px;border-radius:999px;border:1px solid var(--line);font-size:12px;color:var(--ink3)}.step.on{color:var(--ink);border-color:var(--teal)}
.how{font-size:12px;color:var(--ink3)}
@media (prefers-reduced-motion:reduce){.skel{animation:none}}
@media (max-width:640px){.box{padding:14px}.top{padding:12px 14px}.kpi .v{font-size:19px}}

/* 보기(예시) 조각 — 모든 빈칸 아래 (2026-09-20) */
.exrow{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;margin:-2px 0 10px;font-size:12px}
label>.exrow{margin:6px 0 0}
label>.exrow .muted,.form .f>.exrow .muted{display:none}  /* 라벨이 이미 위에 있어 보기 앞 이름은 겹말 */  /* 라벨 안에서는 이름을 다시 적지 않습니다 */
.exg{display:inline-flex;flex-wrap:wrap;gap:4px;align-items:center}
.exg .muted{margin-right:2px}
.btn.ex{min-height:28px;padding:3px 9px;font-size:12px;font-weight:500;border-style:dashed}

/* 줄 맞춘 양식 — 권민준님 「칸이 너무 중구난방이고 정렬하도록해 그리고 한칸에 한가지로만」 (2026-09-20)
   라벨은 칸 위에, 칸은 모두 같은 너비의 격자 칸을 차지합니다. 한 칸 = 한 값.
   https://uxplanet.org/designing-more-efficient-forms-structure-inputs-labels-and-actions-e3a47007114f */
.form{display:grid;gap:12px 14px;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));align-items:start;margin:10px 0}
.form .f{display:flex;flex-direction:column;gap:5px;min-width:0}
.form .f>span{font-size:12px;color:var(--ink3)}
.form .f input,.form .f select,.form .f textarea{width:100%;min-width:0}
.form .f.wide{grid-column:1/-1}
.form .acts{grid-column:1/-1;display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:2px}
.form .f>.exrow{margin:0}
/* 등록증 읽기 결과 — 표 색을 칸 테두리에도 옅게 (색만으로 안 가르고 글자 표도 같이 둡니다) */
.form .f.bc-warn input{border-color:rgba(245,199,107,.7)}.form .f.bc-miss input{border-color:rgba(240,110,110,.7)}
.form .f>small.how{margin-top:2px}
.certs{display:grid;gap:8px;grid-template-columns:1fr 130px 40px;align-items:center}
.certs input{width:100%}
.bulk{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
@media (max-width:640px){.form{grid-template-columns:1fr}.certs{grid-template-columns:1fr 110px 36px}}

/* 로고·브랜드 탭 — 2026-09-21 */
.cands{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px}
.cand{padding:10px;border:1px solid var(--line,#2a2f3a);border-radius:12px;cursor:pointer;min-height:44px}
.cand:hover,.cand:focus-visible{outline:2px solid var(--accent,#4da3ff);outline-offset:2px}
.cand img{width:100%;height:auto;display:block}
.gx-logo{max-width:100%;height:auto;background:#fff;border-radius:10px;padding:8px;margin:8px 8px 0 0}
#gx-view{display:flex;flex-wrap:wrap;align-items:flex-start}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;flex-direction:column;gap:2px;padding:10px 14px;border:1px solid var(--line,#2a2f3a);
      border-radius:999px;text-decoration:none;min-height:44px;justify-content:center}
.chip i{font-style:normal;font-size:11px;opacity:.6}
.chip:hover,.chip:focus-visible{outline:2px solid var(--accent,#4da3ff);outline-offset:2px}
@media (max-width:640px){.cands{grid-template-columns:repeat(auto-fill,minmax(110px,1fr))}}

/* 🔴 체크 상자가 큰 회색 네모로 나왔습니다 — 폼 칸 공통 크기가 checkbox 에도 먹었습니다.
   누를 자리는 24px 이상을 지키되(WCAG 2.2 2.5.8) 칸 크기는 안 씁니다.
   https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html */
.form input[type=checkbox]{width:24px;height:24px;min-height:24px;padding:0;accent-color:var(--accent,#4da3ff);
                           background:none;border:0;cursor:pointer}