/* VIP 컨택 CRM 사이트 CSS — 앞부분은 목업(mockup\vip_contact_mockup.html) <style> 그대로다. 직접 고치지 말고 목업을 고친 뒤 tools\sync_css.py 를 돌린다. */
/* 레이아웃: 왼쪽 메뉴 + 오른쪽 작업판. 화면마다 맨 위 짙은 남색 띠(제목) → 흰 바탕 수치 줄(가는 선으로 나눔) → 흰 판(가는 선 테두리) 순서.
   스타일 = DESIGN-bmw.md(10-26 준님): 흰 바탕 · 파랑 하나만 행동 색 · 모서리 0 · 그림자 없음 · 굵기 700/300.
   원내 CRM 은 밝은 화면 하나만 쓰므로 밝은 화면으로 고정한다(어두운 화면 블록을 두지 않고 모든 색을 직접 정한다). */
:root {
  --canvas:#ffffff; --soft:#f7f7f7; --plate:#fafafa; --strong:#ebebeb;
  --night:#1a2129; --night-2:#262e38; --on-night:#ffffff; --on-night-soft:#bbbbbb; --night-line:#3a4452;
  --ink:#262626; --body:#3c3c3c; --sub:#6b6b6b; --mute:#9a9a9a; --line:#e6e6e6; --line-strong:#cccccc;
  --blue:#1c69d4; --blue-press:#0653b6; --blue-soft:#eaf1fb;
  --green:#15803d; --green-soft:#e9f6ee; --red:#dc2626; --red-soft:#fdeeee; --amber:#a35a00; --amber-soft:#fdf3e1; --orange:#b45309; --slate:#6b6b6b;
  --dia:#1a2129; --dia-ink:#ffffff; --pla:#4f5d70; --pla-ink:#ffffff; --gold:#e8b931; --gold-ink:#3d2c00; --sil:#ebebeb; --sil-ink:#3c3c3c;
  --bg:var(--canvas); --card:var(--canvas); --gray-soft:var(--soft); --row:var(--plate);
  --slack:#1d1c1d; --slack-sub:#616061;
  --font:'Inter','Noto Sans KR',-apple-system,'Segoe UI','Malgun Gothic','Apple SD Gothic Neo',sans-serif;
  --gl:32px; --gr:max(32px, env(safe-area-inset-right, 0px));
  color-scheme:light;
}
* { box-sizing:border-box; }
[hidden] { display:none !important; }   /* .dim{display:flex} 같은 클래스가 hidden 속성을 덮지 않게 */
body { margin:0; background:var(--bg); color:var(--body); font-family:var(--font); font-weight:300; font-size:14px; line-height:1.55; -webkit-font-smoothing:antialiased; }
button, input, select, textarea { font-family:inherit; color:inherit; }
::placeholder { color:var(--mute); opacity:1; }
b, strong { font-weight:700; }
:focus-visible { outline:2px solid var(--blue); outline-offset:2px; }
.app { display:flex; min-height:100vh; }

/* 왼쪽 메뉴 */
.side { width:224px; flex:none; background:var(--canvas); border-right:1px solid var(--line); padding:28px 0 20px max(0px, env(safe-area-inset-left, 0px)); position:sticky; top:env(safe-area-inset-top, 0px); height:100vh; overflow-y:auto; display:flex; flex-direction:column; }
.brand { font-size:18px; font-weight:700; color:var(--ink); padding:0 20px 2px; line-height:1.3; }
.brand-sub { font-size:12px; font-weight:400; letter-spacing:.5px; color:var(--sub); padding:0 20px 20px; border-bottom:1px solid var(--line); margin-bottom:8px; }
.nav { display:flex; align-items:center; justify-content:space-between; gap:8px; width:100%; border:0; border-left:2px solid transparent; background:transparent; font-size:14px; font-weight:400; letter-spacing:.3px; color:var(--body); padding:12px 18px; border-radius:0; cursor:pointer; text-align:left; line-height:1.3; }
.nav:hover { background:var(--soft); }
.nav.on { color:var(--blue); border-left-color:var(--blue); background:var(--soft); font-weight:700; }
.nav.sub { font-size:13.5px; padding:9px 18px 9px 30px; }
.nav em { font-style:normal; font-size:12px; font-weight:400; color:var(--sub); background:var(--soft); padding:2px 7px; font-variant-numeric:tabular-nums; letter-spacing:0; }
.nav.on em { background:var(--canvas); color:var(--blue); }
.nav em.alert { background:var(--red); color:var(--on-night); } .nav em.zero { background:var(--green-soft); color:var(--green); }
.navcap { font-size:11px; font-weight:700; letter-spacing:1px; color:var(--mute); padding:14px 18px 4px 30px; }
.gap { height:8px; } .grow { flex:1; }
.who { padding:16px 20px 0; border-top:1px solid var(--line); margin-top:12px; }
.who label { display:block; font-size:12px; font-weight:700; letter-spacing:.5px; color:var(--sub); margin-bottom:6px; }
.who select { width:100%; font-size:14px; font-weight:400; border:1px solid var(--line-strong); border-radius:0; padding:10px; background:var(--canvas); color:var(--ink); }
.who p { margin:8px 0 0; font-size:12px; color:var(--sub); line-height:1.5; }

/* 오른쪽 작업판 */
.main { flex:1; min-width:0; padding-block:0 80px; padding-left:var(--gl); padding-right:var(--gr); }
.banner, .top, .top + .fresh { margin-left:calc(-1 * var(--gl)); margin-right:calc(-1 * var(--gr)); padding-left:var(--gl); padding-right:var(--gr); }
.banner { background:var(--soft); color:var(--sub); font-size:12.5px; font-weight:400; line-height:1.55; padding-block:10px; border-bottom:1px solid var(--line); }
section > * + * { margin-top:24px; }
section > .top + .fresh, section > .top + .kpis, section > .fresh + .kpis { margin-top:0; }
.top { display:flex; align-items:flex-end; justify-content:space-between; gap:12px 20px; flex-wrap:wrap; background:var(--night); color:var(--on-night); padding-block:40px 28px; }
.top:has(+ .fresh) { padding-bottom:14px; }
h1 { font-size:32px; font-weight:700; line-height:1.15; color:var(--on-night); margin:0; text-wrap:balance; }
h1 .date { font-size:16px; font-weight:300; color:var(--on-night-soft); margin-left:10px; white-space:nowrap; }
.top .tag { border-color:var(--night-line); color:var(--on-night-soft); }
.top .tag.blue { border-color:var(--on-night-soft); color:var(--on-night); }
.top .chip { background:transparent; color:var(--on-night); border-color:var(--night-line); }
.top .chip.on { background:var(--on-night); color:var(--ink); border-color:var(--on-night); }
.fresh { display:flex; flex-wrap:wrap; gap:6px 20px; font-size:12.5px; font-weight:400; letter-spacing:.3px; color:var(--on-night-soft); background:var(--night); padding-block:0 26px; }
.fresh b { color:var(--on-night); font-weight:700; }
.fresh span::before { content:''; display:inline-block; width:6px; height:6px; background:var(--green-soft); margin-right:8px; vertical-align:2px; }
h2 { font-size:18px; font-weight:700; line-height:1.4; color:var(--ink); margin:0 0 16px; display:flex; align-items:center; gap:10px; flex-wrap:wrap; text-wrap:balance; }
.card { background:var(--card); border:1px solid var(--line); border-radius:0; padding:24px; min-width:0; }
.sec { margin-top:16px; }

/* 수치 줄 — 값 위 · 이름 아래 · 가는 선으로 나눔 */
.kpis { display:flex; flex-wrap:wrap; overflow:hidden; border-bottom:1px solid var(--line); }
.kpi.card { flex:1 1 190px; border:0; border-right:1px solid var(--line); margin-right:-1px; background:transparent; padding:22px 24px 20px; display:flex; flex-direction:column; gap:2px; }
.kpi .val { order:-1; font-size:28px; font-weight:700; line-height:1.15; color:var(--ink); font-variant-numeric:tabular-nums; }
.kpi .val small { font-size:14px; font-weight:400; color:var(--sub); margin-left:3px; }
.kpi .lab { font-size:12.5px; font-weight:700; letter-spacing:.5px; color:var(--body); margin-top:6px; }
.kpi .rate { font-size:12.5px; font-weight:300; color:var(--sub); min-height:19px; }
.kpi.good .val { color:var(--green); } .kpi.bad .val { color:var(--red); }
.two { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.two > * { min-width:0; }
.tag { display:inline-block; font-size:12px; font-weight:400; letter-spacing:.3px; padding:3px 8px; border:1px solid var(--line-strong); border-radius:0; background:transparent; color:var(--sub); line-height:1.4; }
.tag.blue { border-color:var(--blue); color:var(--blue); } .tag.green { border-color:var(--green); color:var(--green); }
.note { font-size:13px; font-weight:300; color:var(--sub); line-height:1.65; margin:14px 0 0; max-width:96ch; }
.note b { color:var(--ink); }

/* 칩 */
.chiprow { display:flex; gap:10px 20px; flex-wrap:wrap; align-items:center; margin-bottom:16px; }
.chips { display:flex; gap:6px; flex-wrap:wrap; align-items:center; }
.chiplab { font-size:11px; font-weight:700; letter-spacing:1px; color:var(--mute); margin-right:4px; }
.chip { border:1px solid var(--line-strong); font-size:13px; font-weight:400; letter-spacing:.3px; padding:7px 13px; border-radius:0; background:var(--canvas); color:var(--ink); cursor:pointer; line-height:1.3; }
.chip.on { background:var(--ink); color:var(--on-night); border-color:var(--ink); }
.chip em { font-style:normal; opacity:.6; margin-left:6px; font-variant-numeric:tabular-nums; }
.chip[disabled] { opacity:.35; cursor:default; }

/* 표 */
.tablewrap { overflow-x:auto; }
table { width:100%; border-collapse:collapse; font-size:14px; }
th { text-align:left; font-size:12px; font-weight:700; letter-spacing:.3px; color:var(--sub); padding:10px 8px; border-bottom:1px solid var(--line-strong); white-space:nowrap; }
td { padding:9px 8px; border-bottom:1px solid var(--line); white-space:nowrap; vertical-align:middle; font-weight:400; color:var(--body); }
th.r, td.r { text-align:right; } td.b { font-weight:700; color:var(--ink); } .num, td.tel { font-variant-numeric:tabular-nums; }
td b { color:var(--ink); }
td .bin, td .sub2 { display:block; font-size:11.5px; font-weight:300; color:var(--sub); margin-top:2px; }
td .from { display:block; font-size:11.5px; font-weight:300; color:var(--mute); margin-top:3px; }
tr.done td { background:var(--row); }
tr.click { cursor:pointer; } tr.click:hover td { background:var(--soft); } tr.sel td { background:var(--blue-soft); }
tr.grp td { background:var(--soft); font-weight:700; color:var(--ink); font-size:12.5px; letter-spacing:.5px; }
.empty { text-align:center; color:var(--sub); padding:32px 0; font-weight:300; }
table.sheet { font-size:13px; }
table.sheet td { padding:7px 6px; } table.sheet th { padding:9px 6px; }
.gb { display:inline-block; font-size:11.5px; font-weight:700; letter-spacing:.3px; padding:3px 8px; border-radius:0; line-height:1.4; }
.gb.dia { background:var(--dia); color:var(--dia-ink); } .gb.pla { background:var(--pla); color:var(--pla-ink); }
.gb.gold { background:var(--gold); color:var(--gold-ink); } .gb.sil { background:var(--sil); color:var(--sil-ink); }
.tier { display:block; font-size:11px; font-weight:400; color:var(--sub); margin-top:4px; }
select.dd { appearance:none; -webkit-appearance:none; border:0; font-size:12.5px; font-weight:700; letter-spacing:.3px; border-radius:0; padding:6px 24px 6px 10px; cursor:pointer; color:var(--on-night); min-width:80px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23ffffff'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 9px center; }
select.dd.r-none { background-color:var(--strong); color:var(--body);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%233c3c3c'/%3E%3C/svg%3E"); }
.r-miss { background-color:var(--orange); } .r-hold { background-color:var(--night-2); } .r-book { background-color:var(--green); } .r-no { background-color:var(--red); } .r-bad { background-color:var(--slate); }
.resfix { display:inline-block; font-size:12.5px; font-weight:700; letter-spacing:.3px; padding:6px 10px; min-width:80px; } .r-has { background-color:var(--blue-soft); color:var(--blue); }
select.csdd { font-size:12.5px; font-weight:400; border:1px solid var(--line-strong); border-radius:0; padding:5px 6px; background:var(--canvas); color:var(--ink); cursor:pointer; max-width:120px; }
select.csdd.none { border-color:var(--amber); color:var(--amber); font-weight:700; }
.nth { border:1px solid var(--line-strong); font-size:11.5px; font-weight:700; padding:3px 8px; border-radius:0; background:var(--canvas); color:var(--sub); cursor:pointer; white-space:nowrap; }
.nth.re { border-color:var(--blue); color:var(--blue); }
td.memo { width:100%; min-width:150px; }
td.memo textarea { font-size:12.5px; font-weight:400; line-height:27px; border:1px solid var(--line-strong); border-radius:0; padding:0 8px; width:100%; min-width:150px; height:29px; resize:none; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:block; background:var(--canvas); }
td.memo textarea:focus { height:88px; line-height:18px; padding:5px 8px; white-space:pre-wrap; overflow:auto; outline:none; border-color:var(--ink); box-shadow:inset 0 0 0 1px var(--ink); }
td.again input[type=date] { font-size:12px; font-weight:400; border:1px solid var(--line-strong); border-radius:0; padding:4px 6px; color:var(--ink); background:var(--canvas); width:124px; }
td.again .why { display:block; font-size:11px; font-weight:700; color:var(--green); margin-top:3px; max-width:150px; overflow:hidden; text-overflow:ellipsis; }
td.again .why.rule { color:var(--mute); font-weight:400; }
.kos { display:inline-block; font-size:12.5px; font-weight:400; padding:4px 9px; border-radius:0; background:var(--soft); color:var(--sub); }
.kos.ok { background:var(--green-soft); color:var(--green); } .kos.wait { background:var(--amber-soft); color:var(--amber); } .kos.bad { background:var(--red-soft); color:var(--red); }
.kos.found { background:var(--blue-soft); color:var(--blue); }
.kosgo { font-size:12.5px; font-weight:700; letter-spacing:.5px; padding:7px 12px; border:0; border-radius:0; background:var(--blue); color:var(--on-night); cursor:pointer; white-space:nowrap; }
.kosgo:active { background:var(--blue-press); }
.pill { display:inline-block; font-size:12.5px; font-weight:400; padding:4px 10px; border-radius:0; }
.pill.wait { background:var(--blue-soft); color:var(--blue); } .pill.done { background:var(--green-soft); color:var(--green); }
.pill.zero { background:var(--amber-soft); color:var(--amber); } .pill.lost { background:var(--soft); color:var(--sub); }

/* 흐름 막대 */
.flow { display:flex; height:36px; overflow:hidden; background:var(--soft); gap:2px; }
.flow i { display:flex; align-items:center; justify-content:center; font-style:normal; font-size:12.5px; font-weight:700; color:var(--on-night); min-width:0; white-space:nowrap; overflow:hidden; }
.legend { display:flex; gap:16px; flex-wrap:wrap; margin-top:12px; font-size:13px; font-weight:400; color:var(--sub); } .legend b { color:var(--ink); margin-left:5px; }
.legend span::before { content:''; display:inline-block; width:10px; height:10px; margin-right:7px; vertical-align:-1px; background:var(--c); }

/* 창 */
.dim { position:fixed; inset:0; background:rgba(26,33,41,.6); display:flex; align-items:center; justify-content:center; z-index:50; padding:16px; }
.modal { width:600px; max-width:100%; max-height:calc(100vh - 32px); overflow-y:auto; background:var(--canvas); border-radius:0; padding:32px; }
.modal h3 { margin:0 0 18px; font-size:24px; font-weight:700; line-height:1.25; color:var(--ink); display:flex; justify-content:space-between; align-items:center; gap:12px; }
.modal .x { border:1px solid var(--line-strong); background:var(--canvas); width:40px; height:40px; border-radius:0; font-size:20px; font-weight:300; color:var(--ink); cursor:pointer; flex:none; }
.mcust { display:flex; flex-wrap:wrap; align-items:center; gap:6px 14px; background:var(--soft); padding:14px 16px; margin-bottom:14px; font-size:13.5px; font-weight:400; color:var(--sub); }
.mcust b { color:var(--ink); font-size:15px; }
.mmemo { font-size:13px; font-weight:300; color:var(--body); background:var(--green-soft); padding:10px 14px; margin-bottom:16px; line-height:1.55; }
.mmemo b { color:var(--green); }
.modal .grid { display:grid; grid-template-columns:1fr 1fr; gap:16px 14px; }
.modal .f { display:flex; flex-direction:column; gap:6px; min-width:0; } .modal .f.full { grid-column:1 / -1; }
.modal .f label, .modal .f .lab { font-size:12.5px; font-weight:700; letter-spacing:.3px; color:var(--body); } .modal .f label b, .modal .f .lab b { color:var(--red); }
.modal .f .read { font-size:11px; font-weight:700; color:var(--green); background:var(--green-soft); padding:1px 6px; margin-left:6px; }
.modal .f input, .modal .f select, .modal .f textarea { font-size:14.5px; font-weight:400; border:1px solid var(--line-strong); border-radius:0; padding:11px 14px; background:var(--canvas); color:var(--ink); min-width:0; height:46px; }
.modal .f textarea { height:72px; resize:none; }
.modal .f input.filled, .modal .f select.filled { border-color:var(--green); background:var(--green-soft); }
.modal .f input:focus, .modal .f textarea:focus, .modal .f select:focus { outline:none; border-color:var(--ink); box-shadow:inset 0 0 0 1px var(--ink); }
.chipset { display:flex; flex-wrap:wrap; gap:6px; }
.chipset button { border:1px solid var(--line-strong); background:var(--canvas); font-size:13.5px; font-weight:400; color:var(--ink); padding:9px 14px; border-radius:0; cursor:pointer; }
.chipset button.on { border-color:var(--blue); box-shadow:inset 0 0 0 1px var(--blue); font-weight:700; }
.chipset.bad button { border-color:var(--red); }
.modal .warn { grid-column:1 / -1; background:var(--blue-soft); color:var(--body); font-size:12.5px; font-weight:300; padding:10px 14px; line-height:1.55; }
.modal .err { grid-column:1 / -1; background:var(--red-soft); color:var(--red); font-size:13px; font-weight:700; padding:10px 14px; }
.modal .foot { display:flex; gap:10px; margin-top:24px; }
.modal .foot button { flex:1; font-size:14px; font-weight:700; letter-spacing:.5px; height:48px; padding:0 24px; border-radius:0; cursor:pointer; }
.modal .foot .cancel { background:var(--canvas); color:var(--ink); border:1px solid var(--line-strong); }
.modal .foot .save { background:var(--blue); color:var(--on-night); border:0; flex:2; } .modal .foot .save:active { background:var(--blue-press); }
.modal .foot .save:disabled { background:var(--strong); color:var(--sub); cursor:default; }
.hist-list { display:grid; gap:2px; }
.hist-list div { display:grid; grid-template-columns:44px 96px 1fr; gap:8px; align-items:start; font-size:13.5px; padding:11px 14px; background:var(--soft); }
.hist-list .n { font-weight:700; color:var(--blue); } .hist-list .d { font-weight:400; color:var(--ink); font-variant-numeric:tabular-nums; } .hist-list .m { color:var(--sub); font-weight:300; }
.toast { position:fixed; left:50%; bottom:calc(28px + env(safe-area-inset-bottom, 0px)); transform:translateX(-50%); background:var(--night); color:var(--on-night); font-weight:400; font-size:14px; padding:14px 20px; border-radius:0; z-index:60; max-width:calc(100% - 32px); }
.toast.bad { background:var(--red); }

/* 마감 공지 */
.form { display:grid; gap:18px; }
.form .f { display:flex; flex-direction:column; gap:7px; }
.form .f > label, .form .lab { font-size:12.5px; font-weight:700; letter-spacing:.3px; color:var(--body); }
.form input[type=time], .form input[type=text], .form select { font-size:14.5px; font-weight:400; border:1px solid var(--line-strong); border-radius:0; padding:10px 14px; height:46px; background:var(--canvas); color:var(--ink); max-width:280px; }
.form input:focus { outline:none; border-color:var(--ink); box-shadow:inset 0 0 0 1px var(--ink); }
.checks { display:grid; gap:10px; }
.checks label { display:flex; align-items:center; gap:10px; font-size:14px; font-weight:300; color:var(--ink); cursor:pointer; }
input[type=checkbox] { width:17px; height:17px; accent-color:var(--blue); }
.btnrow { display:flex; gap:8px; flex-wrap:wrap; }
.btn { border:1px solid var(--line-strong); font-size:14px; font-weight:700; letter-spacing:.5px; height:46px; padding:0 28px; border-radius:0; cursor:pointer; background:var(--canvas); color:var(--ink); }
.btn.pri { background:var(--blue); color:var(--on-night); border-color:var(--blue); } .btn.pri:active { background:var(--blue-press); }
.btn.sm { height:34px; padding:0 14px; font-size:12.5px; }
.slack { border:1px solid var(--line); padding:18px; font-size:14px; font-weight:400; color:var(--slack); line-height:1.55; }
.slack .hd { display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.slack .av { width:36px; height:36px; background:var(--dia); color:var(--on-night); font-weight:700; display:flex; align-items:center; justify-content:center; font-size:15px; flex:none; }
.slack .nm { font-weight:700; } .slack .apptag { font-size:10.5px; font-weight:700; background:var(--soft); color:var(--slack-sub); padding:1px 5px; margin-left:6px; vertical-align:1px; }
.slack .tm { font-size:12px; color:var(--slack-sub); margin-left:8px; font-weight:400; }
.slack .body { padding-left:46px; }
.slack .h { font-weight:700; margin-top:10px; }
.slack .h.ok { color:var(--green); } .slack .h.ng { color:var(--red); } .slack .h.nn { color:var(--slack-sub); }
.slack .ln { margin:2px 0 0 0; word-break:keep-all; overflow-wrap:anywhere; }
.slack .ln .who { font-weight:700; }
.slack .mute { color:var(--slack-sub); }
.slack .ttl { font-weight:700; margin-bottom:6px; }
.slack .sec .lab { font-weight:700; margin-top:2px; } .slack .sec .lab .k { font-size:11px; font-weight:700; letter-spacing:.4px; color:var(--blue); margin-right:6px; }
.slack hr.dv { border:0; border-top:1px solid var(--line); margin:10px 0; }
.slack .foot { margin-top:10px; font-size:12.5px; }
.slack .thread { margin:12px 0 0 46px; border-left:3px solid var(--line); padding-left:12px; }
.slack .thread .tlab { font-size:12px; font-weight:700; color:var(--blue); margin-bottom:6px; }
.slack .thread .reply { padding:8px 0; border-top:1px solid var(--line); }
.slack + .linebox, .linebox + .slack { margin-top:12px; }
.linebox { border:1px solid var(--line); background:var(--soft); padding:14px 16px; }
.linebox .lhd { font-size:12px; font-weight:700; color:var(--sub); margin-bottom:8px; }
.linebox pre { margin:0; white-space:pre-wrap; word-break:keep-all; overflow-wrap:anywhere; font-family:inherit; font-size:13.5px; line-height:1.6; color:var(--ink); }
.hist { display:grid; gap:2px; margin-top:4px; }
.hist div { display:flex; justify-content:space-between; gap:10px; font-size:13px; font-weight:300; color:var(--sub); padding:10px 12px; background:var(--soft); flex-wrap:wrap; }
.hist b { color:var(--ink); }

/* 기준 · 배정 */
.rulegrid { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.rulegrid > .span2 { grid-column:1 / -1; }
table.mini th, table.mini td { padding:8px 8px; font-size:13.5px; }
table.mini td.wrap { white-space:normal; min-width:220px; line-height:1.5; color:var(--sub); font-weight:300; font-size:13px; }
.formula { background:var(--soft); padding:14px 16px; font-size:14px; font-weight:400; color:var(--ink); margin:14px 0; line-height:1.6; }
.formula code { font-family:inherit; font-weight:700; color:var(--blue); }
table.inct { border-collapse:separate; border-spacing:4px 0; }
table.inct th, table.inct td { border-bottom:0; padding:4px 2px; }
table.inct th { text-align:center; }
table.inct input, input.qt, input.rn, input.mx { font-size:13.5px; font-weight:400; text-align:right; border:1px solid var(--line-strong); border-radius:0; padding:7px 9px; color:var(--ink); font-variant-numeric:tabular-nums; background:var(--canvas); }
table.inct input { width:88px; } input.qt { width:64px; } input.rn { width:60px; } input.mx { width:54px; }
table.inct input:focus, input.qt:focus, input.rn:focus, input.mx:focus { outline:none; border-color:var(--ink); box-shadow:inset 0 0 0 1px var(--ink); }
.switch { position:relative; display:inline-flex; align-items:center; gap:10px; cursor:pointer; font-size:13px; font-weight:400; color:var(--body); }
.switch input { position:absolute; opacity:0; width:1px; height:1px; }
.switch i { width:38px; height:20px; background:var(--line-strong); position:relative; transition:background .15s; flex:none; }
.switch i::after { content:''; position:absolute; top:3px; left:3px; width:14px; height:14px; background:var(--canvas); transition:transform .15s; }
.switch input:checked + i { background:var(--blue); } .switch input:checked + i::after { transform:translateX(18px); }
.switch input:focus-visible + i { outline:2px solid var(--blue); outline-offset:2px; }
.rules-list { margin:0; padding-left:18px; font-size:14px; font-weight:300; line-height:1.75; color:var(--body); max-width:110ch; }
.rules-list li + li { margin-top:4px; }
.rules-list li::marker { color:var(--mute); font-weight:400; }
.inline { display:flex; gap:12px 18px; flex-wrap:wrap; align-items:flex-end; margin-top:14px; }
.inline .f { display:flex; flex-direction:column; gap:6px; }
.inline label { font-size:12.5px; font-weight:700; letter-spacing:.3px; color:var(--body); }
.inline input, .inline select { font-size:14px; font-weight:400; border:1px solid var(--line-strong); border-radius:0; padding:9px 12px; background:var(--canvas); color:var(--ink); }
.ex { display:grid; gap:2px; margin-top:14px; }
.ex div { display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; font-size:13px; padding:9px 12px; background:var(--soft); }
.ex b { font-weight:700; } .ex span { color:var(--green); font-weight:700; }
.memo-try { display:flex; gap:10px; flex-wrap:wrap; margin-top:12px; }
.memo-try input { flex:1 1 220px; min-width:0; font-size:14px; font-weight:400; border:1px solid var(--line-strong); border-radius:0; padding:10px 12px; color:var(--ink); }
.memo-try output { font-size:13.5px; font-weight:700; color:var(--green); align-self:center; }
.comp { font-size:13px; font-weight:300; color:var(--sub); margin:-4px 0 12px; } .comp b { color:var(--ink); font-weight:700; }
table.cyc td, table.cyc th { text-align:right; } table.cyc td:first-child, table.cyc th:first-child { text-align:left; }
table.cyc td small { display:block; font-size:11px; color:var(--mute); font-weight:400; }
td .hk { display:inline-block; font-size:11px; font-weight:700; color:var(--green); background:var(--green-soft); padding:1px 6px; margin-top:4px; }
td .tier.sms { color:var(--blue); font-weight:700; }
td .tbd { color:var(--amber); font-weight:700; }

/* 문자 · 자동예약 */
.smsbox { white-space:pre-line; font-size:14px; font-weight:300; line-height:1.7; background:var(--soft); padding:16px 18px; margin-top:14px; color:var(--ink); }
.smsbox a { color:var(--blue); font-weight:700; word-break:break-all; }
.phone { max-width:330px; margin:0 auto; border:1px solid var(--line-strong); border-radius:28px; padding:24px 18px 18px; background:var(--canvas); }
.phone .ph-h { font-size:20px; font-weight:700; color:var(--ink); margin:0 0 6px; } .phone .ph-s { font-size:12.5px; font-weight:300; color:var(--sub); margin:0 0 16px; line-height:1.55; }
.phone .f { display:flex; flex-direction:column; gap:5px; margin-bottom:12px; }
.phone label, .phone .lab { font-size:12px; font-weight:700; letter-spacing:.3px; color:var(--body); }
.phone input, .phone select { font-size:14px; font-weight:400; border:1px solid var(--line-strong); border-radius:0; padding:9px 11px; height:42px; background:var(--canvas); color:var(--ink); width:100%; }
.phone .row2 { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.phone .agree { display:flex; gap:8px; align-items:flex-start; font-size:12px; color:var(--sub); font-weight:300; line-height:1.5; margin:4px 0 14px; }
.phone .agree input { width:auto; height:auto; flex:none; margin:2px 0 0; padding:0; }
.phone .go { display:grid; gap:8px; }
.phone .go button { border-radius:0; height:46px; font-size:14px; font-weight:700; letter-spacing:.5px; cursor:pointer; }
.phone .go .p { background:var(--blue); color:var(--on-night); border:0; } .phone .go .s { background:var(--canvas); color:var(--ink); border:1px solid var(--line-strong); }

@media (max-width:1500px) {
  :root { --gl:24px; --gr:max(24px, env(safe-area-inset-right, 0px)); }
  .side { width:184px; } .nav { font-size:13.5px; padding:11px 14px; } .nav.sub { padding-left:24px; } .navcap { padding-left:24px; }
  .brand, .brand-sub, .who { padding-left:16px; padding-right:16px; }
  .card { padding:20px; }
}
@media (max-width:1100px) { .two, .rulegrid { grid-template-columns:1fr; } }
@media (max-width:900px) {
  :root { --gl:max(16px, env(safe-area-inset-left, 0px)); --gr:max(16px, env(safe-area-inset-right, 0px)); }
  .app { flex-direction:column; }
  .side { width:100%; height:auto; position:static; flex-direction:row; flex-wrap:wrap; gap:0; padding:14px max(16px, env(safe-area-inset-right, 0px)) 12px max(16px, env(safe-area-inset-left, 0px)); border-right:0; border-bottom:1px solid var(--line); }
  .brand { width:100%; padding:0; } .brand-sub { width:100%; padding:0 0 10px; margin-bottom:6px; }
  .nav { width:auto; border-left:0; border-bottom:2px solid transparent; padding:9px 10px; } .nav.on { border-bottom-color:var(--blue); }
  .nav.sub { padding-left:10px; } .navcap, .grow, .gap { display:none; }
  #subnav { display:flex; flex-wrap:wrap; width:100%; order:1; padding-bottom:4px; }
  .nav[data-v="today"] { order:0; } .nav[data-v]:not([data-v="today"]) { order:2; } .who { order:3; width:100%; padding:12px 0 0; }
  .top { padding-block:28px 20px; }
  .card { padding:16px; }
  /* 오늘 컨택 표는 휴대폰에서 옆으로 길게 민다 — 결과·다시 올릴 날 칸에서도 누구 줄인지 보이게 이름 칸을 왼쪽에 붙인다 */
  #v-today th:nth-child(2), #v-today td:nth-child(2) { position:sticky; left:0; z-index:1; background:var(--canvas); box-shadow:1px 0 0 var(--line); }
  #v-today tr.done td:nth-child(2) { background:var(--row); } #v-today tr.sel td:nth-child(2) { background:var(--blue-soft); }
}
@media (max-width:560px) { .modal { padding:22px 18px; } .modal .grid { grid-template-columns:1fr; } h1 { font-size:24px; } .kpi .val { font-size:24px; }
  /* 수치 줄 — 휴대폰에선 한 줄에 한 칸씩 세로로 쌓여 화면 하나를 다 먹었다 → 두 칸 격자(홀수면 마지막 칸은 한 줄 전체) */
  .kpis { display:grid; grid-template-columns:1fr 1fr; }
  .kpi.card { padding:14px 16px 12px; border-bottom:1px solid var(--line); margin-bottom:-1px; }
  .kpi.card:last-child:nth-child(odd) { grid-column:1 / -1; } }
@media (prefers-reduced-motion:reduce) { * { transition:none !important; } }
/* ── 사이트에만 있는 것(목업에 없음) ── */
/* 로그인 */
.login { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:16px; background:var(--soft); }
.login .card { width:100%; max-width:380px; padding:36px 32px; }
.login h1 { color:var(--ink); font-size:24px; margin:0 0 6px; }
.login p { margin:0 0 22px; color:var(--sub); font-size:13px; }
.login input { width:100%; border:1px solid var(--line-strong); padding:12px 14px; font-size:15px; height:48px; background:var(--canvas); border-radius:0; }
.login input:focus { outline:none; border-color:var(--ink); box-shadow:inset 0 0 0 1px var(--ink); }
.login button { width:100%; margin-top:12px; border:0; background:var(--blue); color:var(--on-night); font-weight:700; letter-spacing:.5px; font-size:14px; height:48px; cursor:pointer; border-radius:0; }
.login button:active { background:var(--blue-press); } .login button:disabled { background:var(--strong); color:var(--sub); cursor:default; }
.login .msg { min-height:20px; margin-top:12px; font-size:13px; font-weight:400; color:var(--red); }
/* 왼쪽 아래 — 로그인한 사람 */
.who .me { font-size:14px; font-weight:400; color:var(--ink); margin-bottom:10px; } .who .me b { font-weight:700; }
.who .btn.sm { width:100%; }
@media (max-width:900px) { .who { display:flex; align-items:center; gap:12px; flex-wrap:wrap; } .who label { display:none; } .who .me { margin:0; } .who .btn.sm { width:auto; } .who p { display:none; } }
/* 다음 단계에서 열리는 칸·메뉴 */
.nav em.soon { background:transparent; color:var(--mute); padding:0; }
.nav.on em.soon { background:transparent; }
td select.dd:disabled, td textarea:disabled, td .nth:disabled { cursor:not-allowed; }
td.memo textarea:disabled { background:var(--soft); color:var(--mute); border-color:var(--line); }
.banner.warn { background:var(--amber-soft); color:var(--amber); }