/* LoginGuard 화면 조각 공통 모양 — 서비스가 --lg-accent · --lg-font · --lg-radius 로 맞출 수 있다 */
:root{
  --lg-accent:#2f6fed; --lg-font:-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Pretendard","Malgun Gothic","Noto Sans KR",sans-serif; --lg-radius:12px;
  --bg:transparent; --card:#ffffff; --ink:#1b2230; --sub:#5d6678; --faint:#8a93a5; --line:#e4e7ed; --soft:#f4f6f9;
  --ok:#15803d; --ok-bg:#e8f6ee; --warn:#b45309; --warn-bg:#fdf3e2; --bad:#b91c1c; --bad-bg:#fdecec; --wait:#6d28d9; --wait-bg:#f1ebfd; --off:#5d6678; --off-bg:#eef0f4;
}
@media (prefers-color-scheme:dark){:root{
  --card:#1b1f27; --ink:#e7eaf0; --sub:#a1a9b9; --faint:#7d8697; --line:#2c323d; --soft:#232833;
  --ok:#4ade80; --ok-bg:#163021; --warn:#fbbf24; --warn-bg:#33270f; --bad:#f87171; --bad-bg:#3a1a1a; --wait:#c4b5fd; --wait-bg:#2a2140; --off:#a1a9b9; --off-bg:#262b35;
}}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.55 var(--lg-font);-webkit-text-size-adjust:100%}
body{padding:2px}
button{font:inherit;cursor:pointer;border-radius:8px;border:1px solid var(--line);background:var(--card);color:var(--ink);padding:7px 12px;min-height:36px}
button:hover{border-color:var(--lg-accent)}
button:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible{outline:2px solid var(--lg-accent);outline-offset:2px}
button.primary{background:var(--lg-accent);border-color:var(--lg-accent);color:#fff}
button.danger{color:var(--bad)}
button.danger.solid{background:var(--bad);border-color:var(--bad);color:#fff}
button:disabled{opacity:.5;cursor:default}
input,select{font:inherit;color:var(--ink);background:var(--card);border:1px solid var(--line);border-radius:8px;padding:8px 10px;min-height:38px}
.lg-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap;margin:0 0 14px}
.lg-head h1{font-size:18px;margin:0 0 2px}
.lg-head p{margin:0;color:var(--sub);font-size:13px}
.lg-list{display:flex;flex-direction:column;gap:10px}
.dev{display:grid;grid-template-columns:40px 1fr auto;gap:12px;align-items:start;background:var(--card);border:1px solid var(--line);border-radius:var(--lg-radius);padding:14px}
.dev.current{border-color:var(--lg-accent);box-shadow:0 0 0 1px var(--lg-accent) inset}
.dev .ic{width:40px;height:40px;border-radius:10px;background:var(--soft);display:grid;place-items:center;color:var(--sub)}
.dev .ic svg{width:22px;height:22px}
.dev .name{font-weight:600;display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.dev .meta{color:var(--sub);font-size:13px;margin-top:2px}
.dev .meta span+span:before{content:"·";margin:0 6px;color:var(--faint)}
.dev .acts{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.badge{display:inline-block;font-size:12px;font-weight:600;border-radius:999px;padding:1px 8px;line-height:20px;white-space:nowrap}
.b-on{color:var(--ok);background:var(--ok-bg)} .b-off{color:var(--off);background:var(--off-bg)} .b-rev{color:var(--warn);background:var(--warn-bg)}
.b-wait{color:var(--wait);background:var(--wait-bg)} .b-bad{color:var(--bad);background:var(--bad-bg)} .b-cur{color:#fff;background:var(--lg-accent)}
.empty{padding:28px;text-align:center;color:var(--sub);background:var(--card);border:1px dashed var(--line);border-radius:var(--lg-radius)}
.note{font-size:13px;color:var(--sub);margin-top:12px}
.msg{padding:10px 12px;border-radius:10px;margin:0 0 12px;font-size:14px}
.msg.err{background:var(--bad-bg);color:var(--bad)} .msg.ok{background:var(--ok-bg);color:var(--ok)} .msg.info{background:var(--soft);color:var(--sub)}
.modal-bg{position:fixed;inset:0;background:rgba(10,14,22,.45);display:flex;align-items:flex-start;justify-content:center;padding:40px 16px;z-index:10}
.modal{background:var(--card);color:var(--ink);border-radius:14px;max-width:420px;width:100%;padding:18px;box-shadow:0 10px 40px rgba(0,0,0,.25)}
.modal h2{font-size:16px;margin:0 0 8px} .modal p{margin:0 0 12px;color:var(--sub);font-size:14px}
.modal .row{display:flex;gap:8px;justify-content:flex-end;margin-top:14px}
.modal input{width:100%}
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:14px;overflow-x:auto}
.tabs button{border:0;border-bottom:2px solid transparent;border-radius:0;background:transparent;padding:9px 12px;color:var(--sub);white-space:nowrap}
.tabs button.on{color:var(--ink);border-bottom-color:var(--lg-accent);font-weight:600}
.split{display:grid;grid-template-columns:260px 1fr;gap:14px}
.people{display:flex;flex-direction:column;gap:6px}
.person{display:flex;justify-content:space-between;gap:8px;align-items:center;text-align:left;width:100%}
.person.on{border-color:var(--lg-accent);box-shadow:0 0 0 1px var(--lg-accent) inset}
.person small{color:var(--sub)}
table{width:100%;border-collapse:collapse;font-size:13px;background:var(--card);border-radius:var(--lg-radius);overflow:hidden}
th,td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--line);vertical-align:top}
th{color:var(--sub);font-weight:600;background:var(--soft)}
.form{background:var(--card);border:1px solid var(--line);border-radius:var(--lg-radius);padding:4px 16px}
.form .item{display:grid;grid-template-columns:1fr auto;gap:10px;padding:14px 0;border-bottom:1px solid var(--line);align-items:center}
.form .item:last-child{border-bottom:0}
.form .item b{display:block} .form .item small{color:var(--sub);display:block}
.form .sub{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:8px;font-size:14px}
.form .sub input[type=number]{width:72px}
.form .item.dis{opacity:.55}
.form .sub label{display:inline-flex;gap:6px;align-items:center}
.form .sub input[type=checkbox]{min-height:0;width:16px;height:16px}
.sw{position:relative;width:46px;height:26px;flex:none}
.sw input{opacity:0;width:0;height:0}
.sw span{position:absolute;inset:0;background:var(--line);border-radius:999px;transition:.15s;cursor:pointer}
.sw span:before{content:"";position:absolute;width:20px;height:20px;left:3px;top:3px;background:#fff;border-radius:50%;transition:.15s}
.sw input:checked+span{background:var(--lg-accent)} .sw input:checked+span:before{transform:translateX(20px)}
.sw input:disabled+span{cursor:not-allowed}
.toolbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:10px}
.toolbar input{flex:1;min-width:140px}
@media (max-width:640px){
  .dev{grid-template-columns:36px 1fr}
  .dev .acts{grid-column:1/-1;justify-content:flex-start}
  .split{grid-template-columns:1fr}
  .hide-m{display:none}
}

/* ── Bizportal 관리 화면에 맞춘 모양 (theme="bizportal") — Bizportal portal.css v1.1 · admin.css 토큰 그대로 ──
   글꼴 Pretendard(OFL, /fonts) · 남색 #00497D · 카드 16px · 조절 10px · 버튼 36px · 휴대폰 390px.
   Bizportal 관리 화면은 밝은 화면만 쓰므로 어두운 설정에서도 밝게 둔다. */
@font-face { font-family: "Pretendard"; src: url(/fonts/Pretendard-Regular.subset.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Pretendard"; src: url(/fonts/Pretendard-SemiBold.subset.woff2) format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Pretendard"; src: url(/fonts/Pretendard-Bold.subset.woff2) format("woff2"); font-weight: 700; font-display: swap; }
html[data-theme="bizportal"] {
  --lg-accent: #00497D; --lg-font: "Pretendard Variable", "Pretendard", system-ui, -apple-system, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif; --lg-radius: 16px;
  --card: #FFFFFF; --ink: #16212B; --sub: #5B6672; --faint: #6B7681; --line: #E1E9F0; --soft: #F7FAFC;
  --ok: #14706D; --ok-bg: #E6F4F3; --warn: #8A6A18; --warn-bg: #FBF6EC; --bad: #93261F; --bad-bg: #FBEDEC; --wait: #00497D; --wait-bg: #E8F0F6; --off: #5B6672; --off-bg: #EEF2F6;
  color-scheme: light;
}
html[data-theme="bizportal"] body { font-size: 13.5px; letter-spacing: -.01em; -webkit-font-smoothing: antialiased; }
html[data-theme="bizportal"] button { height: 36px; min-height: 36px; padding: 0 14px; border: 1px solid #CBD5DE; border-radius: 10px; font-size: 13.5px; font-weight: 600; color: #3C4854; background: #FFFFFF; }
html[data-theme="bizportal"] button:hover { border-color: #00497D; color: #00497D; }
html[data-theme="bizportal"] button:focus-visible, html[data-theme="bizportal"] input:focus-visible, html[data-theme="bizportal"] select:focus-visible { outline: 3px solid rgba(0,73,125,.16); outline-offset: 1px; }
html[data-theme="bizportal"] button.primary { background: #00497D; border-color: #00497D; color: #FFFFFF; box-shadow: 0 1px 2px rgba(0,51,90,.28); }
html[data-theme="bizportal"] button.primary:hover { background: #003C68; border-color: #003C68; color: #FFFFFF; }
html[data-theme="bizportal"] button.danger { color: #93261F; border-color: #E6B3AD; }
html[data-theme="bizportal"] button.danger.solid { background: #C0342B; border-color: #C0342B; color: #FFFFFF; }
html[data-theme="bizportal"] input, html[data-theme="bizportal"] select { height: 42px; min-height: 42px; border: 1px solid #D5DEE6; border-radius: 10px; font-size: 13.5px; }
html[data-theme="bizportal"] .dev, html[data-theme="bizportal"] .form, html[data-theme="bizportal"] .empty, html[data-theme="bizportal"] table {
  border: 1px solid rgba(0,73,125,.09); box-shadow: 0 1px 2px rgba(0,51,90,.05), 0 8px 20px rgba(0,51,90,.06); }
html[data-theme="bizportal"] .empty { border-style: solid; }
html[data-theme="bizportal"] .dev .ic { background: #E8F0F6; color: #00497D; border-radius: 10px; }
html[data-theme="bizportal"] .tabs button { height: 44px; min-height: 44px; border: 0; border-bottom: 2px solid transparent; border-radius: 0; box-shadow: none; color: #6B7681; background: transparent; padding: 0 16px; }
html[data-theme="bizportal"] .tabs button.on { color: #00497D; border-bottom-color: #00497D; font-weight: 700; }
html[data-theme="bizportal"] th { background: #F7FAFC; color: #6B7681; font-size: 12px; letter-spacing: .02em; }
html[data-theme="bizportal"] .lg-head h1 { font-size: 20px; font-weight: 700; letter-spacing: -.03em; }
html[data-theme="bizportal"] .seg { background: #F1F5F8; border-color: #E1E9F0; }
html[data-theme="bizportal"] .seg button { height: 32px; min-height: 32px; border: 0; box-shadow: none; }
html[data-theme="bizportal"] .seg button.on { background: #FFFFFF; color: #00497D; box-shadow: 0 1px 2px rgba(0,51,90,.12); }

/* v0.2.0 — 서비스 고르기 · 설정 세 가지 · 승인 */
.seg { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; border-radius: 10px; background: var(--soft); border: 1px solid var(--line); }
.seg button { border: 0; background: transparent; min-height: 32px; }
.seg button.on { background: var(--card); color: var(--lg-accent); font-weight: 600; }
.chip { display: inline-block; font-size: 11.5px; font-weight: 600; color: var(--sub); background: var(--soft); border: 1px solid var(--line); border-radius: 6px; padding: 0 6px; line-height: 18px; }
.presets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.preset { text-align: left; height: auto !important; min-height: 0 !important; padding: 14px !important; border-radius: var(--lg-radius) !important; display: flex; flex-direction: column; gap: 4px; align-items: flex-start; white-space: normal; }
.preset b { font-size: 15px; } .preset small { color: var(--sub); font-weight: 400; line-height: 1.5; }
.preset.on { border-color: var(--lg-accent) !important; box-shadow: 0 0 0 1px var(--lg-accent) inset !important; }
.preset:disabled { opacity: .5; }
.choice { display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; margin-top: 8px; cursor: pointer; font-size: 14px; }
.choice input { margin-top: 3px; min-height: 0; height: auto; width: auto; }
.modal textarea { width: 100%; font: inherit; border: 1px solid var(--line); border-radius: 8px; padding: 8px; min-height: 70px; }
.inline { display: inline-flex; gap: 6px; align-items: center; }
.inline input[type=checkbox] { min-height: 0; height: auto; width: auto; }
@media (max-width: 640px) { .presets { grid-template-columns: 1fr; } }
html[data-theme="bizportal"] .person { height: auto; min-height: 52px; padding: 8px 14px; font-weight: 600; line-height: 1.35; }
html[data-theme="bizportal"] .person small { font-weight: 500; color: #6B7681; }
html[data-theme="bizportal"] .person.on { border-color: #00497D; background: #F2F7FB; }
.pick-hint-m{display:none}
@media (max-width:640px){.pick-hint-pc{display:none}.pick-hint-m{display:inline}}