/* 미부장 꾸미기 — 공통 */
:root{--bg:#f4f5f7;--card:#ffffff;--card2:#f0f2f5;--line:#e2e5ea;--tx:#1a1d23;--tx2:#5a626e;--tx3:#98a0ac;--ac:#0f9d8c;--good:#128a5b;--goodbg:#e4f5ec;--warn:#c47d1a;--warnbg:#fbf1de;--bad:#c5453f;--badbg:#fbe8e7;--pop:#6b4fc4;--popbg:#efe9fb;--gold:#c47d1a;--real:#e08a3c;--svc:#0f9d8c;--tx1:#1a1d23;--bg2:#f0f2f5;--green:#128a5b}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--tx);font-family:'Pretendard','Apple SD Gothic Neo',system-ui,sans-serif;line-height:1.55;padding:0 0 70px}
.wrap{max-width:980px;margin:0 auto;padding:0 18px}
header{padding:22px 0 12px}
h1{font-size:20px;font-weight:800;letter-spacing:-.5px}
.sub{color:var(--tx3);font-size:13px;margin-top:4px}
.picker{display:flex;gap:7px;flex-wrap:wrap;margin:12px 0 4px;position:sticky;top:0;background:var(--bg);padding:10px 0;z-index:10;border-bottom:1px solid var(--line)}
.pbtn{background:var(--card);border:1px solid var(--line);color:var(--tx2);padding:9px 15px;border-radius:22px;font-size:14px;font-weight:700;cursor:pointer;transition:.15s}
.pbtn{display:inline-flex;align-items:center;gap:7px}
.pbtn:hover{border-color:var(--ac)}
.pbtn .px{font-size:10px;font-weight:800;opacity:.28;padding:2px 3px;border-radius:50%;line-height:1}
.pbtn .px:hover{opacity:1;color:var(--bad)}
.pbtn.on .px{opacity:.55}
.pbtn.on .px:hover{opacity:1;color:#fff}
.pbtn.on{background:var(--ac);color:#fff;border-color:var(--ac)}
/* 순서 바꾸기 (길게 눌러 끌기) */
.reordering{touch-action:none}
.reordering .pbtn,.reordering .tcard2,.reordering .crow-staff{transition:transform .12s;cursor:grabbing}
/* 잡고 있는 원본은 자리만 지킨다 (움직이는 건 아래 복제본) */
.pbtn.dragging,.tcard2.dragging{opacity:.2;box-shadow:none}
/* 급여 줄은 복제본 없이 제자리에서 오르내린다. 커지지도 흐려지지도 않는다. */
.crow-staff.dragging{background:var(--bg2);border-radius:9px;opacity:1}
/* 손가락을 따라다니는 복제본 */
.sortghost{position:fixed!important;z-index:9999!important;margin:0!important;pointer-events:none!important;
  transform:translate(-50%,-50%) scale(1.1);opacity:.97;
  box-shadow:0 12px 28px rgba(0,0,0,.3);
  background:var(--ac)!important;border-color:var(--ac)!important;color:#fff!important;
  display:flex;align-items:center;justify-content:center;overflow:hidden}
.sortghost.tcard2{transform:translate(-50%,-50%) scale(1.03);background:var(--card)!important;color:var(--tx)!important;border:1.5px solid var(--ac)!important}
/* 순서 저장 알림 */
#ordToast{position:fixed;left:50%;bottom:120px;transform:translate(-50%,10px);z-index:9998;
  background:rgba(26,29,35,.93);color:#fff;font-size:13px;font-weight:800;padding:10px 18px;border-radius:999px;
  opacity:0;pointer-events:none;transition:opacity .18s,transform .18s;box-shadow:0 6px 20px rgba(0,0,0,.25)}
#ordToast.on{opacity:1;transform:translate(-50%,0)}
body.capturing #ordToast,body.printing #ordToast{display:none}
/* 사진에는 지금 보고 있는 사람 하나만 (✕ 버튼도 빼고) */
body.capturing .pbtn:not(.on){display:none}
body.capturing .pbtn .px{display:none}
body.capturing .picker{position:static;border-bottom:0;padding:2px 0 0;margin:0}
.hero{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin:18px 0 4px;flex-wrap:wrap}
.hero .nm{font-size:26px;font-weight:800;letter-spacing:-.6px}
.hero .rk{color:var(--tx3);font-size:13px;margin-top:3px}
.hero .badge{font-size:13px;font-weight:700;padding:8px 15px;border-radius:16px;max-width:340px;text-align:right;line-height:1.45;word-break:keep-all}
.b-good{background:var(--goodbg);color:var(--good)}.b-warn{background:var(--warnbg);color:var(--warn)}.b-bad{background:var(--badbg);color:var(--bad)}.b-new{background:var(--popbg);color:var(--pop)}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:11px;margin:15px 0}
.kpis.k5{grid-template-columns:repeat(5,1fr)}
.kpis.k3{grid-template-columns:repeat(3,1fr)}
/* 개인 화면 2-B 배치 — 대표 하나 크게 / 작은 둘 / 나머지는 표 */
.kpis.k1{grid-template-columns:1fr}
.kpis.k2{grid-template-columns:repeat(2,minmax(0,1fr))}
.kp.big .v{font-size:27px;letter-spacing:-1px;margin-top:3px}
.kptbl-wrap{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:4px 14px 8px;margin:15px 0}
.kptbl{width:100%;border-collapse:collapse;font-size:12.5px;table-layout:fixed}
.kptbl th{color:var(--tx3);font-size:11px;font-weight:700;text-align:right;padding:9px 4px 6px;border-bottom:1.5px solid var(--line);white-space:nowrap}
.kptbl th:first-child{text-align:left}
.kptbl td{padding:9px 4px;border-top:1px solid var(--line);text-align:right;white-space:nowrap}
.kptbl td:first-child{text-align:left;color:var(--tx2);font-weight:700;white-space:normal}
.kptbl .mine{font-weight:800;color:var(--tx)}
.kptbl .bench{color:var(--tx3);font-size:11.5px}
.kptbl .zero{color:var(--tx3);font-weight:700}
.kp{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px}
.kp .l{color:var(--tx3);font-size:11px;font-weight:700}
.kp .v{font-size:17.5px;font-weight:800;margin-top:5px;letter-spacing:-.6px;color:var(--tx);white-space:nowrap}
.kp .v.v2{font-size:19px}
.kp .c{font-size:11px;margin-top:4px;font-weight:700;display:flex;align-items:center;gap:4px;white-space:nowrap}
.kp .kd{font-size:10.5px;color:var(--tx3);margin-top:6px;line-height:1.35;font-weight:500}
/* 개인화면 2-B — 대표 하나 크게 + 나머지는 표 */
.kp.big .v{font-size:26px;letter-spacing:-1px}
.kp.big .tw{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.kp.big .tw-c+.tw-c{border-left:1px solid var(--line);padding-left:12px}
.ptb{width:100%;border-collapse:collapse;font-size:12.5px;table-layout:fixed}
.ptb th{color:var(--tx3);font-size:11px;font-weight:700;padding:6px 4px;border-bottom:1px solid var(--line);text-align:left}
.ptb th.r,.ptb td.r{text-align:right}
.ptb td{padding:8px 4px;border-top:1px solid var(--line);vertical-align:top;white-space:normal}
.ptb .kk{color:var(--tx2);font-weight:700}
.ptb .dd{color:var(--tx3);font-size:10.5px;font-weight:500;margin-top:2px;line-height:1.35}
.ptb .mine{font-weight:800;color:var(--tx);white-space:nowrap}
.ptb .bench{color:var(--tx3);font-size:11.5px;font-weight:700;white-space:nowrap}
.ptb .note{color:var(--tx3);font-size:11.5px;font-weight:700;white-space:normal;line-height:1.4;display:inline-block}
.card:has(.ptb){overflow-x:visible}
/* 나란히 둔 두 카드의 높이 맞추기 (줄 수가 달라도 아래가 안 비어 보이게) */
.g2eq>.sec{display:flex;flex-direction:column}
.g2eq>.sec>.card{flex:1;display:flex;flex-direction:column}
.g2eq>.sec>.card>table{flex:none}
.g2eq .tk-note{margin-top:auto;padding-top:12px}
.up{color:var(--good)}.dn{color:var(--bad)}.eq{color:var(--tx3)}
.tcard{display:flex;gap:14px;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:0;margin-bottom:12px;overflow:hidden}
.tcard .trank{flex-shrink:0;width:64px;background:var(--ac);color:#fff;font-size:15px;font-weight:800;display:flex;align-items:center;justify-content:center;text-align:center;padding:6px}
.tcard.ttop .trank{background:var(--good)}
.tcard.tnew .trank{background:var(--pop)}
.tcard .tbody{flex:1;padding:16px 18px 16px 4px}
.tcard .th2{font-size:16px;font-weight:800;color:var(--tx);margin-bottom:10px}
.tflow{display:flex;align-items:center;gap:14px;margin-bottom:12px}
.tnow,.tnext{display:flex;flex-direction:column;gap:2px}
.tl2{font-size:11px;color:var(--tx3);font-weight:700}
.tv2{font-size:24px;font-weight:800;color:var(--tx2);letter-spacing:-.5px}
.tv2.tg{color:var(--good)}
.tarr{font-size:22px;color:var(--ac);font-weight:800}
.tbasis{font-size:13px;color:var(--tx2);background:var(--card2);border-radius:9px;padding:9px 12px;margin-bottom:8px;line-height:1.5}
.tbasis b{color:var(--tx)}
.tact{font-size:13.5px;color:var(--tx);font-weight:600;line-height:1.5}
@media(max-width:680px){.tcard .trank{width:52px;font-size:13px}.tv2{font-size:20px}}
.avgnote{font-size:11.5px;color:var(--tx2);background:var(--card2);border-radius:10px;padding:11px 14px;margin:2px 0 4px;line-height:1.5}
.avgnote b{color:var(--tx)}
.sec{margin-top:22px}
.sec>.st{font-size:13px;font-weight:800;color:var(--tx);margin-bottom:9px;display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.sec>.st .tip{font-weight:500;color:var(--tx3);font-size:11.5px}
/* ===== 엑셀 올리기 안내 : 제목 13 / 본문 12.5 두 가지만 쓴다 ===== */
.upl-tip{font-size:12.5px;font-weight:600;color:var(--ac);background:var(--goodbg);border-radius:9px;padding:9px 11px;line-height:1.7;margin-top:10px}
.upl-btn{border:1px solid var(--line);background:var(--card);color:var(--tx2);font-size:13px;font-weight:700;
  padding:10px 15px;border-radius:10px;cursor:pointer;font-family:inherit;margin-top:12px}
@media(max-width:680px){
  .upl-tip{font-size:13px}
  .upl-btn{font-size:13.5px;width:100%;padding:12px 15px}
}
/* ===== 엑셀 올리기 : 파일 사진 카드 ===== */
.fcards{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.fbox{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--card);cursor:pointer;text-align:left}
.fbox .shot{background:var(--card2);aspect-ratio:3/1;overflow:hidden;position:relative}
.fbox .shot img{width:100%;height:100%;object-fit:cover;display:block}
.fbox .zoom{position:absolute;right:6px;bottom:6px;background:rgba(26,29,35,.72);color:#fff;font-size:11px;font-weight:700;border-radius:7px;padding:3px 7px}
.fbox .ft{padding:10px 12px;border-top:1px solid var(--line)}
.fbox .fnm{font-size:13.5px;font-weight:800;color:var(--tx)}
.fbox .fnm.on{color:var(--ac)}
.fchip{display:inline-block;margin-top:5px;font-size:11.5px;font-weight:700;border-radius:7px;padding:2px 8px;background:var(--card2);color:var(--tx3)}
.fchip.on{background:var(--goodbg);color:var(--good)}
.fov{position:fixed;inset:0;background:rgba(0,0,0,.75);z-index:120;overflow:auto;padding:16px;display:none}
.fov.on{display:block}
.fov .sheet{max-width:620px;margin:0 auto;background:var(--card);border-radius:14px;padding:16px 16px 20px;position:relative}
.fov .sheet h3{margin:0 40px 12px 0;font-size:16px;font-weight:800}
.fov .sheet img{width:100%;border:1px solid var(--line);border-radius:10px;margin:8px 0 14px;display:block}
.fov .fx{position:absolute;top:10px;right:10px;width:32px;height:32px;border-radius:50%;border:1px solid var(--line);background:var(--card2);color:var(--tx2);font-size:15px;font-weight:800;cursor:pointer;font-family:inherit;line-height:1;padding:0}
.fov .fclose{width:100%;margin-top:6px;border:1px solid var(--line);background:var(--card2);color:var(--tx2);font-size:13.5px;font-weight:700;border-radius:10px;padding:11px;cursor:pointer;font-family:inherit}
@media(max-width:680px){.fbox .shot{aspect-ratio:3/1}.fbox .fnm{font-size:13px}}
/* ===== 시급계산기 ===== */
#wageView{max-width:520px;margin:0 auto}
.wcard{border:1px solid var(--line);border-radius:14px;background:var(--card);padding:15px 16px;margin-bottom:12px}
.wct{font-size:14.5px;font-weight:800;color:var(--tx);margin-bottom:10px}
.wrow{display:flex;gap:10px;align-items:center;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--line);flex-wrap:wrap}
.wrow:last-of-type{border-bottom:none}
.wlb{font-size:13.5px;font-weight:700;color:var(--tx2);line-height:1.5}
.wlb s{display:block;font-size:11.5px;font-weight:500;color:var(--tx3);text-decoration:none;margin-top:2px}
.wct2{font-size:13.5px;font-weight:700;color:var(--tx);text-align:right;white-space:nowrap}
.wct2 input[type=number]{width:120px;padding:7px 9px;border:1px solid var(--line);border-radius:9px;font-size:14px;font-weight:700;text-align:right;font-family:inherit;background:var(--card);color:var(--tx)}
.wct2 input[type=date]{padding:7px 9px;border:1px solid var(--line);border-radius:9px;font-size:13.5px;font-weight:700;font-family:inherit;background:var(--card);color:var(--tx)}
.wct2 select{padding:7px 9px;border:1px solid var(--line);border-radius:9px;font-size:13.5px;font-weight:700;font-family:inherit;background:var(--card);color:var(--tx);cursor:pointer}
.wsum{background:var(--card2);border-radius:9px;padding:9px 11px;font-size:12.5px;font-weight:600;color:var(--tx2);line-height:1.6;margin-top:10px}
.wbig{text-align:center;padding:6px 0 12px}
.wbig s{display:block;font-size:12px;font-weight:700;color:var(--tx3);text-decoration:none;margin-bottom:4px}
.wbig{font-size:34px;font-weight:800;color:var(--tx);letter-spacing:-1px;line-height:1.2}
.wbig em{font-style:normal;font-size:16px;font-weight:700;color:var(--tx2);margin-left:3px}
.wtb{width:100%;border-collapse:collapse;font-size:13px}
.wtb td{padding:7px 0;border-bottom:1px solid var(--line)}
.wtb td:first-child{color:var(--tx2);font-weight:600}
.wtb td:last-child{text-align:right;font-weight:800;color:var(--tx)}
.wtb tr:last-child td{border-bottom:none}
.wtb s{text-decoration:none;font-size:11.5px;font-weight:600}
.wok{background:var(--goodbg);color:var(--good);border-radius:9px;padding:10px 12px;font-size:12.5px;font-weight:700;line-height:1.6;margin-top:11px}
.wbad{background:var(--badbg);color:var(--bad);border-radius:9px;padding:10px 12px;font-size:12.5px;font-weight:700;line-height:1.6;margin-top:11px}
.wempty{text-align:center;color:var(--tx3);font-size:13px;font-weight:600;padding:18px 0}
.whint{background:var(--card2);border-radius:9px;padding:9px 11px;font-size:12px;font-weight:600;color:var(--tx2);line-height:1.6;margin-top:10px;display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:space-between}
.wmini{border:1px solid var(--line);background:var(--card);color:var(--tx2);font-size:12px;font-weight:700;border-radius:8px;padding:5px 10px;cursor:pointer;font-family:inherit;white-space:nowrap}
.wtb tr.hi td{color:var(--real);font-weight:800;font-size:14px}
.wtb tr.hi td:first-child{color:var(--real)}
.wsubt{font-size:12px;font-weight:700;color:var(--tx3);margin:14px 0 4px}
/* 자료 넣기 전에 보여주는 예시 틀 */
.smp{position:relative}
.smp .smph{background:var(--card2);border:1px dashed var(--line);border-radius:11px;padding:10px 13px;font-size:12.5px;font-weight:600;color:var(--tx2);line-height:1.7;margin-bottom:10px}
.smp .smpb{opacity:.62;pointer-events:none;filter:saturate(.85)}
tr.smprow td{opacity:.55}
tr.smphd td{background:var(--card2);font-size:12px;font-weight:700;color:var(--tx2);padding:9px 10px;border-radius:9px}
/* 💊 처방전 블록 */
.rx-eq{display:flex;align-items:center;gap:11px;flex-wrap:wrap;margin-top:12px}
.rx-eq .l{font-size:11.5px;font-weight:700;color:var(--tx3);display:block}
.rx-eq .v{font-size:18px;font-weight:800;letter-spacing:-.6px;color:var(--tx)}
.rx-eq .x{font-size:15px;color:var(--tx3);font-weight:800}
.rx-eq .res .v{color:var(--ac)}
.rx-gd{display:inline-block;font-size:11.5px;font-weight:800;padding:3px 10px;border-radius:20px;color:#fff}
.rx-two{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.rx-c{background:var(--card2);border-radius:14px;padding:14px;min-width:0}
.rx-c.on{border:2px solid var(--ac);background:var(--card)}
.rx-c .t{font-size:12px;font-weight:800;color:var(--tx3);display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.rx-c .g{font-size:13px;font-weight:700;color:var(--tx2);margin-top:9px}
.rx-c .n{font-size:21px;font-weight:800;letter-spacing:-.9px;margin-top:9px;color:var(--tx)}
.rx-c .n.a{color:var(--ac)}
.rx-c .n.q{font-size:17px;color:var(--tx3)}
.rx-c .d{font-size:12.5px;font-weight:600;color:var(--tx3);line-height:1.7;margin-top:9px}
.rx-c .d b{color:var(--tx);font-weight:800}
.rx-duo{display:flex;gap:16px;margin-top:9px}
.rx-duo .l{font-size:11px;font-weight:700;color:var(--tx3)}
.rx-tb{width:100%;border-collapse:collapse;margin-top:10px;font-size:13px;font-weight:700}
.rx-tb td{padding:6px 0;border-bottom:1px solid var(--line);text-align:right;color:var(--tx)}
.rx-tb td:first-child{text-align:left;color:var(--tx2)}
.rx-tb tr:first-child td{font-size:11.5px;font-weight:800;color:var(--tx3)}
.rx-tb tr:last-child td{border-bottom:0}
@media(max-width:520px){.rx-two{grid-template-columns:1fr}}
/* 처방 표 */
.rx-tb2{width:100%;border-collapse:collapse;margin-top:10px;font-size:13px}
.rx-tb2 th{text-align:left;padding:6px 8px;color:var(--tx3);font-weight:800;font-size:11.5px;border-bottom:1px solid var(--line)}
.rx-tb2 th:last-child{text-align:right}
.rx-tb2 td{padding:9px 8px;border-bottom:1px solid var(--line);line-height:1.6;vertical-align:top;font-weight:600;color:var(--tx2);text-align:left}
/* 칸마다 자리를 못 박는다. 안 그러면 아래쪽 전체 table 규칙(td 오른쪽 정렬)이 덮어써서
   머리글과 내용이 어긋난다. */
.rx-tb2 th,.rx-tb2 td{text-align:left}
.rx-tb2 th.c,.rx-tb2 td.c{text-align:center}
.rx-tb2 th.rr,.rx-tb2 td.rr{text-align:right}
.rx-tb2 th:first-child,.rx-tb2 td:first-child{text-align:left;font-weight:700}
.rx-tb2 td b{color:var(--tx);font-weight:800}
.rx-tb2 tr:last-child td{border-bottom:0}
.rx-tb2 td.rr{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.rx-tb2 td.rr b{color:var(--good)}
/* 내년 목표 표 — 휴대폰에서는 옆으로 밀어 볼 수 있게 감싼다 */
.yg-w{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-top:10px}
.yg-t{width:100%;min-width:560px;border-collapse:collapse;font-size:12.5px}
.yg-t th{text-align:left;padding:8px 10px;color:var(--tx3);font-weight:800;font-size:11px;
  border-bottom:1px solid var(--line);vertical-align:top;white-space:nowrap}
.yg-t th em{display:block;font-style:normal;font-weight:700;color:var(--tx3);opacity:.75;margin-top:2px}
.yg-t td{text-align:left;padding:10px;border-bottom:1px solid var(--line);
  vertical-align:top;font-weight:700;color:var(--tx2);line-height:1.5}
.yg-t td b{color:var(--tx);font-weight:800}
.yg-t td em{display:block;font-style:normal;font-size:11px;font-weight:700;color:var(--tx3);margin-top:2px}
.yg-t tr:last-child td{border-bottom:0}
.yg-t tr.sum td{background:var(--card2);font-weight:800}
/* 숫자 칸은 위(지금)·아래(목표) 두 줄로 쌓는다 */
.yg-t th.n,.yg-t td.n{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.yg-t td.n{color:var(--tx3);font-weight:700}
.yg-t td.n b{display:block;color:var(--good);font-size:14px;font-weight:800;margin-top:2px}
.yg-t th.n em{display:block;font-style:normal;color:var(--good);opacity:1;margin-top:1px}
/* 최고였던 달 — 숫자 위에 작게 */
.yg-t td.n .bm{display:block;font-size:10px;font-weight:800;color:var(--tx3);margin-bottom:2px}
/* 폰에서는 「달마다 흐름」 표처럼 글자와 여백만 줄여 한 화면에 넣는다 (옆으로 밀지 않게) */
@media(max-width:620px){
  .yg-w{overflow-x:visible}
  .yg-t{font-size:11px;min-width:0}   /* 최소폭을 풀어야 옆으로 안 밀린다 */
  .yg-t th{padding:6px 3px;font-size:10px}
  .yg-t td{padding:9px 3px;line-height:1.4}
  .yg-t td em,.yg-t th em{font-size:9.5px;margin-top:1px}
  .yg-t td.n b{font-size:12.5px}
  .yg-t td:first-child{font-size:12px}
}
/* 처방 표는 폰에서 두 줄로 쌓는다 (오른쪽 금액이 잘리지 않게) */
@media(max-width:620px){
  .rx-tb2,.rx-tb2 tbody,.rx-tb2 tr,.rx-tb2 td{display:block;width:auto}
  .rx-tb2 thead,.rx-tb2 th{display:none}
  .rx-tb2 tr{border-bottom:1px solid var(--line);padding:10px 0}
  .rx-tb2 tr:last-child{border-bottom:0}
  .rx-tb2 td{border:0;padding:0}
  .rx-tb2 td:empty{display:none}
  .rx-tb2 td.c{text-align:left;margin:2px 0}
  .rx-tb2 td.rr{text-align:right;margin-top:5px;font-size:13.5px}
}

/* 아래쪽 전체 table 규칙(오른쪽 정렬)이 덮어쓰지 않게 못 박는다 */
.yg-t th,.yg-t td{text-align:left}
.yg-t th:first-child,.yg-t td:first-child{text-align:left}
/* 찬 시간 / 시술 구성 막대 */
.rx-t{display:flex;justify-content:space-between;font-size:11.5px;font-weight:700;color:var(--tx3);margin-bottom:5px}
.rx-t b{color:var(--tx);font-weight:800;font-size:12.5px}
.rx-bar{display:flex;height:13px;border-radius:7px;overflow:hidden;background:var(--line)}
.rx-bar i{display:block;height:100%}
/* A안 — 결론 한 줄 + 방법 칩 */
.rx-a{background:var(--card2);border-radius:14px;padding:15px 16px;margin-top:12px}
.rx-a .cc{font-size:20px;font-weight:800;letter-spacing:-.8px;color:var(--tx);margin-bottom:5px}
.rx-a .cs{font-size:12.5px;font-weight:600;color:var(--tx3);line-height:1.65}
.rx-a .cs+.cs{margin-top:7px}
.rx-a .cs b{color:var(--tx);font-weight:800}
.rx-w{margin-top:12px;padding-top:11px;border-top:1px solid var(--line)}
.rx-w .wt{font-size:11.5px;font-weight:800;color:var(--tx3);margin-bottom:7px}
.rx-w .wt em{font-style:normal;font-weight:700;color:var(--tx2)}
.rx-chips{display:flex;flex-wrap:wrap;gap:6px}
.rx-chip{font-size:12px;font-weight:700;padding:6px 11px;border-radius:20px;background:var(--card);color:var(--tx2);border:1px solid var(--line)}
.rx-chip.k{background:var(--ac);color:#fff;border-color:var(--ac)}
/* 🔭 이렇게 하면 — 고칠 것 카드 */
.fx{border:1px solid var(--line);border-radius:13px;padding:13px 14px;margin-top:11px;background:var(--card)}
.fx .fh{display:flex;align-items:center;gap:8px}
.fx .fi{font-size:16px;flex:none}
.fx .ft{font-size:14px;font-weight:800;color:var(--tx);letter-spacing:-.3px}
.fx .fg{margin-left:auto;font-size:15px;font-weight:800;color:var(--good);white-space:nowrap}
.fx .fb{display:flex;align-items:center;gap:8px;margin:9px 0 8px;flex-wrap:wrap}
.fx .fb .a{font-size:12.5px;font-weight:700;color:var(--tx3);background:var(--card2);border-radius:7px;padding:4px 9px}
.fx .fb .ar{color:var(--tx3);font-weight:800}
.fx .fb .b{font-size:12.5px;font-weight:800;color:var(--ac);background:var(--goodbg);border-radius:7px;padding:4px 9px}
.fx .fd{font-size:12.5px;font-weight:500;color:var(--tx2);line-height:1.75}
.brf-sum{display:flex;align-items:center;gap:10px;margin-top:12px;background:var(--goodbg);border-radius:11px;padding:12px 14px;flex-wrap:wrap}
.brf-sum .l{font-size:13px;font-weight:800;color:var(--good)}
.brf-sum .v{margin-left:auto;font-size:14px;font-weight:800;color:var(--good)}
.brf-noc{font-size:12px;color:var(--tx3);font-weight:600;line-height:1.7;margin-top:12px;padding-top:11px;border-top:1px solid var(--line)}
/* 종합소득세 세율표 */
.rtb{width:100%;border-collapse:collapse;font-size:13px}
.rtb th{background:var(--card2);color:var(--tx3);font-size:11.5px;font-weight:800;text-align:left;padding:9px 14px;border-bottom:1px solid var(--line)}
.rtb th:nth-child(2),.rtb th:nth-child(3),.rtb td:nth-child(2),.rtb td:nth-child(3){text-align:right;white-space:nowrap}
.rtb td{padding:9px 14px;border-bottom:1px solid var(--line);color:var(--tx2);font-weight:700}
.rtb tbody tr:last-child td{border-bottom:0}
.rtb tr.on td{background:var(--goodbg);color:var(--good);font-weight:800}
.rtb-n{font-size:11.5px;color:var(--tx3);font-weight:600;line-height:1.75;padding:11px 14px;border-top:1px solid var(--line)}
@media(max-width:430px){.rtb{font-size:12px}.rtb th,.rtb td{padding:8px 10px}.rtb th{font-size:11px}}
.wpkl{font-size:13.5px;font-weight:700;color:var(--tx2);margin:14px 0 7px}
.wpick{display:flex;gap:6px;flex-wrap:wrap}
.wp{flex:1;min-width:54px;border:1px solid var(--line);background:var(--card);color:var(--tx2);font-size:13px;font-weight:700;border-radius:9px;padding:9px 6px;cursor:pointer;font-family:inherit}
.wp.on{background:var(--ac);border-color:var(--ac);color:#fff}
.wcond{font-size:12px;font-weight:600;color:var(--tx3);text-align:center;margin-top:-6px}
.wnote{font-size:11.5px;color:var(--tx3);line-height:1.7;margin-top:11px;padding-top:10px;border-top:1px solid var(--line)}
@media(max-width:680px){.wct2 input[type=number]{width:105px}.wbig{font-size:29px}}
.qm{display:inline-flex;align-items:center;justify-content:center;width:15px;height:15px;border-radius:50%;background:var(--tx3);color:var(--card);font-size:10.5px;font-weight:800;cursor:pointer;margin-left:4px;vertical-align:middle;flex:none;user-select:none;line-height:1}
.qm:hover{background:var(--ac)}
#qmPop{position:fixed;z-index:9999;max-width:280px;background:var(--card);border:1.5px solid var(--ac);border-radius:12px;padding:12px 14px;font-size:12.5px;line-height:1.7;color:var(--tx1);box-shadow:0 8px 28px rgba(0,0,0,.18);display:none;font-weight:500;text-align:left}
#qmPop b{color:var(--ac)}
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px 18px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.chartbox{position:relative;height:220px}
.chartbox.sm{height:200px}
table{width:100%;border-collapse:collapse;font-size:12.5px}
th,td{padding:7px 8px;text-align:right;border-bottom:1px solid var(--line)}
th{color:var(--tx3);font-weight:700;font-size:11px}
th:first-child,td:first-child{text-align:left;color:var(--tx2);font-weight:700}
tbody tr:last-child td{border-bottom:none}
td.hl{color:var(--tx);font-weight:800}
.mixlist{margin-top:6px}
.mixgroup{font-size:11px;font-weight:800;color:var(--tx3);margin:10px 0 5px;letter-spacing:.5px}
.mixgroup:first-child{margin-top:0}
/* 세부 항목 — 그 밖 N가지 열고 닫기
   `<details>` 는 사진으로 옮길 때 자리가 어긋나 안 쓴다 */
.mixmore{display:block;margin:2px 0 6px;border:none;background:none;padding:5px 0;
  font-family:inherit;font-size:11.5px;font-weight:700;color:var(--ac);cursor:pointer;text-align:left}
.mixmore:hover{text-decoration:underline}
.nm2{width:72px;font-size:12px;font-weight:700;color:var(--tx2);flex-shrink:0}
.mixrow{display:flex;align-items:center;gap:10px;margin-bottom:9px}
.mixrow .nm{width:44px;font-size:12.5px;font-weight:700;color:var(--tx2)}
.mixrow .track{flex:1;height:24px;background:var(--card2);border-radius:6px;position:relative;overflow:hidden}
.mixrow .track>i{position:absolute;left:0;top:0;bottom:0;border-radius:6px;display:flex;align-items:center;padding-left:8px;font-size:11.5px;font-weight:800;color:#fff;white-space:nowrap}
.mixrow .amt{width:118px;text-align:right;font-size:12px;color:var(--tx2);line-height:1.3}
.diag{margin-top:14px}
.diag .row{display:flex;gap:11px;align-items:flex-start;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px 16px;margin-bottom:10px}
.diag .ic{font-size:18px;flex-shrink:0;width:24px;text-align:center}
.diag .tx b{display:block;font-size:14px;margin-bottom:3px}
.diag .tx span{font-size:13px;color:var(--tx2)}
.diag .strong{border-left:4px solid var(--good)}
.diag .weak{border-left:4px solid var(--bad)}
.plan{background:var(--warnbg);border:1px solid #f0dcb5;border-radius:14px;padding:16px 18px;margin-bottom:10px}
.plan .ph{font-size:14px;font-weight:800;color:var(--gold);margin-bottom:4px}
.plan .pwhy{font-size:12.5px;color:var(--tx2);margin-bottom:10px}
.plan ol{margin:0 0 4px 18px;padding:0}
.plan li{font-size:13px;color:var(--tx);margin-bottom:6px;line-height:1.5}
.plan li b{color:var(--gold)}
.tgt{display:flex;align-items:center;gap:8px;margin-top:12px;padding-top:12px;border-top:1px dashed #e0cfa8;flex-wrap:wrap}
.tgt .tl{font-size:12px;font-weight:700;color:var(--tx2)}
.tgt input{border:1px solid var(--line);border-radius:8px;padding:6px 10px;font-size:13px;font-family:inherit;width:120px;background:#fff}
.tgt .cur{font-size:12px;color:var(--tx3)}
.legend{display:flex;gap:14px;flex-wrap:wrap;font-size:12px;color:var(--tx2);margin-top:9px}
.legend span{display:flex;align-items:center;gap:5px}
.dot{width:9px;height:9px;border-radius:50%}
@media(max-width:680px){.kpis,.kpis.k5{grid-template-columns:1fr 1fr}.grid2{grid-template-columns:1fr}.hero .nm{font-size:22px}.hero .badge{text-align:left;max-width:none}table{font-size:11.5px}th,td{white-space:nowrap;padding:6px 7px}.card:has(table){overflow-x:auto;-webkit-overflow-scrolling:touch}}
.foot-note{color:var(--tx3);font-size:12px;margin-top:30px;padding-top:14px;border-top:1px solid var(--line)}
/* 선예약 — 날짜별 표 */
.pre-tb th,.pre-tb td{padding:4px 6px;white-space:nowrap}
.pre-tb td:first-child{width:62px;color:var(--tx2)}
.pre-wd{color:var(--tx3);font-size:11px;font-weight:700;margin-left:3px}
.pre-in{padding:5px 7px;font-size:13px;max-width:82px;margin-left:auto;display:block}
.pre-in::placeholder{color:var(--tx3);font-weight:600}
/* 오늘 — 글자로 적지 않고 색으로만 알린다 (칸이 좁아 「오늘」이 잘렸다) */
.pre-tb tr.pre-today td{background:var(--goodbg)}
.pre-tb tr.pre-today td:first-child{color:var(--good);font-weight:800;box-shadow:inset 3px 0 0 var(--ac)}
.pre-tb tr.pre-today .pre-wd{color:var(--good)}
@media(max-width:680px){
  /* 폰에서는 여섯 칸(일곱 칸)을 옆으로 밀지 않고 **화면 안에 다 넣는다.**
     표가 든 칸의 좌우 여백을 줄이고, 칸 너비를 못 박고, 머리글은 두 줄로 접는다. */
  #preView .card:has(.pre-tb){padding:10px 6px;overflow-x:visible}
  #preView .pre-tb{table-layout:fixed;width:100%}
  #preView .pre-tb th{white-space:normal;font-size:10px;padding:4px 2px;line-height:1.25;word-break:keep-all}
  #preView .pre-tb td{padding:3px 2px;white-space:nowrap}

  /* 날짜별 표 — 날짜 40 · 비율 두 칸 44씩 · 남는 자리를 넣는 칸 셋이 나눠 갖는다 */
  .pre-tb th:first-child,.pre-tb td:first-child{width:40px}
  .pre-tb th:nth-child(5),.pre-tb td:nth-child(5),
  .pre-tb th:nth-child(6),.pre-tb td:nth-child(6){width:44px;font-size:11.5px}
  .pre-tb .pre-in{max-width:none;width:100%;margin:0;padding:6px 2px;text-align:center}
  .pre-wd{margin-left:2px;font-size:10px}


  /* 달은 6칸씩 두 줄로 딱 떨어지게 */
  #preMonths{display:grid!important;grid-template-columns:repeat(6,minmax(0,1fr));gap:5px}
  #preMonths .vtab{width:100%;padding:8px 2px!important;font-size:12.5px!important;text-align:center}
}
.foot-note b{color:var(--tx2)}
.dgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.dcard{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px 18px;position:relative;overflow:hidden}
.dcard::before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px}
.dcard.g::before{background:var(--good)}.dcard.w::before{background:var(--warn)}.dcard.b::before{background:var(--bad)}
.dcard .dhead{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px}
.dcard .dtitle{font-size:12.5px;font-weight:800;color:var(--tx2)}
.dcard .dtag{font-size:11px;font-weight:800;padding:4px 10px;border-radius:12px}
.dtag.g{background:var(--goodbg);color:var(--good)}.dtag.w{background:var(--warnbg);color:var(--warn)}.dtag.b{background:var(--badbg);color:var(--bad)}
.dcard .dnum{font-size:26px;font-weight:800;letter-spacing:-.6px;line-height:1.1}
.dcard .dsub{font-size:11.5px;color:var(--tx3);margin-top:2px;font-weight:600}
.dcard .dwhy{font-size:12px;color:var(--tx2);line-height:1.5;margin-top:10px;padding-top:10px;border-top:1px solid var(--line)}
@media(max-width:680px){.dgrid{grid-template-columns:1fr}}
.vtabs{display:flex;gap:8px;margin:8px 0 4px}
.ftabs{display:flex;gap:6px;margin-bottom:14px}
.ftab{border:1.5px solid var(--line);background:transparent;color:var(--tx2);font-weight:800;font-size:15px;padding:10px 26px;border-radius:14px;cursor:pointer}
.ftab.on{background:var(--tx1,#1c2733);border-color:var(--tx1,#1c2733);color:#fff}
.stabs{display:flex;gap:6px;margin-bottom:12px;flex-wrap:wrap}
/* 줄바꿈 자리 — 여기서부터 다음 줄로 내려간다 */
.stabs .stab-br{flex-basis:100%;height:0;margin:0}
/* 제목 줄 오른쪽 끝에 설정 — 사용설명서 바로 아래 자리 */
.h1row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.h1row h1{margin:0;min-width:0}
.h1row #cfgBtn{flex:none;border:1px solid var(--line);background:var(--card);border-radius:9px;
  padding:6px 12px;font-size:13px;font-weight:700;color:var(--tx2);cursor:pointer;white-space:nowrap}
.h1row #cfgBtn:hover{border-color:var(--ac);color:var(--ac)}
/* 서버 연동 단추 — 설정 단추와 같은 모양 */
.h1row #syncBtn{flex:none;border:1px solid var(--line);background:var(--card);border-radius:9px;
  padding:6px 12px;font-size:13px;font-weight:700;color:var(--tx2);cursor:pointer;white-space:nowrap}
.h1row #syncBtn:hover{border-color:var(--ac);color:var(--ac)}
/* 상세 내역 — 덩어리 칸 */
.ci-c{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:13px 14px;margin-bottom:10px}
.ci-c.hi{border-color:var(--ac);border-width:1.5px}
.ci-c.warn{border-color:var(--gold);border-width:1.5px;background:var(--warnbg)}
.ci-h{display:flex;align-items:center;gap:7px;flex-wrap:wrap;padding-bottom:9px;margin-bottom:4px;border-bottom:1px solid var(--line)}
.ci-h b{font-size:15px;font-weight:800;color:var(--tx)}
.ci-n{flex:none;width:20px;height:20px;border-radius:6px;background:var(--card2);color:var(--tx3);
  font-size:11.5px;font-weight:800;display:flex;align-items:center;justify-content:center}
.ci-r{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:8px 0}
.ci-r+.ci-r{border-top:1px solid var(--card2)}
.ci-r.tot{border-top:1.5px solid var(--line);margin-top:3px;padding-top:10px}
.ci-r.sm{color:var(--tx3)}
.ci-l{font-size:13px;font-weight:700;color:var(--tx2);min-width:0}
.ci-l b{color:var(--tx);font-weight:800}
.ci-l em{display:block;font-style:normal;font-size:11px;font-weight:600;color:var(--tx3);margin-top:2px;line-height:1.45}
.ci-v{font-size:13.5px;font-weight:700;color:var(--tx2);white-space:nowrap;text-align:right;font-variant-numeric:tabular-nums}
.ci-v b{font-weight:800;color:var(--tx)}
.ci-v .big{font-size:16px}
.ci-v .ok{color:var(--good)} .ci-v .mi{color:var(--bad)}
.ci-v .pl{color:var(--good)} .ci-v .pop{color:var(--pop)}
.pct{font-size:11px;font-weight:700;color:var(--tx3)}
.me{font-size:10.5px;font-weight:800;color:var(--ac)}
.cin{background:var(--card);border:1.5px solid var(--line);border-radius:8px;padding:8px 10px;color:var(--tx1);font-size:13.5px;font-weight:700;text-align:right;width:100%;font-family:inherit}
.cin:focus{outline:none;border-color:var(--ac)}
.crow{display:grid;grid-template-columns:1fr 130px;gap:8px;align-items:center;margin:6px 0}
.crow>*{min-width:0}
.crow-staff{grid-template-columns:22px 1fr 120px 1fr 32px;align-items:center}
/* 끌기 손잡이. 줄이 거의 다 입력칸이라 잡을 데가 없어서 따로 뒀다. */
.sthandle{display:flex;align-items:center;justify-content:center;height:100%;color:var(--tx3);
  font-size:15px;cursor:grab;user-select:none;touch-action:none;line-height:1}
.sthandle:active{cursor:grabbing}
/* 폰에서만 보이는 배지 하나 (컴퓨터에서는 탭 세 개가 대신한다) */
.stbadge{display:none;border:1px solid var(--line);background:var(--card);color:var(--tx3);
  font-family:inherit;font-weight:800;font-size:10.5px;padding:7px 2px;border-radius:8px;
  cursor:pointer;white-space:nowrap;width:100%}
.stbadge.k3{background:var(--popbg);border-color:var(--pop);color:var(--pop)}
.stbadge.k4{background:var(--goodbg);border-color:var(--good);color:var(--good)}
.stbadge.ka{background:var(--warnbg);border-color:var(--warn);color:var(--warn)}
/* 프리랜서 · 4대보험 · 알바 고르는 작은 탭 세 개 (붙어 있는 한 덩어리) */
.stkind{display:flex;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--card)}
.stkind button{flex:1;border:0;border-left:1px solid var(--line);background:none;color:var(--tx3);
  font-family:inherit;font-weight:700;font-size:10.5px;padding:7px 2px;cursor:pointer;white-space:nowrap;min-width:0}
.stkind button:first-child{border-left:0}
.stkind button.on{font-weight:800}
.stkind button.on.k3{background:var(--popbg);color:var(--pop)}
.stkind button.on.k4{background:var(--goodbg);color:var(--good)}
.stkind button.on.ka{background:var(--warnbg);color:var(--warn)}
.crow-tier{grid-template-columns:1fr 70px 30px;gap:6px}
.crow-two{grid-template-columns:1fr auto}
.taxbig{font-size:30px;font-weight:900;margin:10px 0}
.taxrev{font-size:17px;color:var(--tx2);font-weight:600;line-height:1.5;margin-top:4px;word-break:keep-all}
.taxsub{font-size:12.5px;color:var(--tx3);font-weight:600;margin-top:3px;line-height:1.5}
.taxrev b{font-size:20px;font-weight:900;color:var(--tx);letter-spacing:-.4px}
.crow label{font-size:13px;color:var(--tx2);font-weight:600}
.mtab{border:1px solid var(--line);background:var(--card);color:var(--tx2);font-weight:700;font-size:12.5px;padding:7px 13px;border-radius:9px;cursor:pointer}
.csave-row{display:flex;justify-content:flex-end;align-items:center;gap:10px;flex-wrap:wrap;margin-top:12px;padding-top:11px;border-top:1px solid var(--line)}
.csave{border:1.5px solid var(--ac);background:var(--card);color:var(--ac);font-weight:800;font-size:13px;padding:9px 20px;border-radius:10px;cursor:pointer;font-family:inherit;white-space:nowrap;transition:background .12s,color .12s}
.csave:hover{background:var(--ac);color:#fff}
.csave.done{background:var(--goodbg);border-color:var(--good);color:var(--good);cursor:default}
.csave:disabled{opacity:1}
.mtab.on{background:var(--ac);border-color:var(--ac);color:#fff}
/* 종합소득세 — 어느 달을 넣었는지 보여주는 1~12 칸 */
.incmg{display:flex;gap:3px;justify-content:center;flex-wrap:wrap;margin:10px 0 8px}
.incmg span{flex:0 0 auto;min-width:26px;padding:4px 2px;border-radius:6px;font-size:11px;font-weight:800;
  line-height:1.25;text-align:center;border:1px solid var(--line);color:var(--tx3);background:var(--card)}
.incmg span b{display:block;font-size:10px;line-height:1.1;min-height:11px}
.incmg span.ok{background:var(--goodbg);border-color:var(--good);color:var(--good)}
.incmg span.half{background:var(--warnbg);border-color:var(--warn);color:var(--warn)}
.incsf-box{border:1px solid var(--line);border-radius:11px;padding:11px 12px;margin-top:11px;text-align:left;background:var(--card2)}
.incsf-t{font-size:12px;font-weight:800;color:var(--tx2);margin-bottom:8px}
.incsf-t span{font-weight:500;font-size:10.5px;color:var(--tx3)}
.incsf{display:flex;align-items:center;gap:5px;margin-top:6px}
.incsf .l{flex:1;font-size:11.5px;color:var(--tx2);font-weight:700;min-width:0}
.incsf input{border:1px solid var(--line);border-radius:7px;padding:6px 7px;font-size:12.5px;
  text-align:right;background:var(--card);color:var(--tx1);font-family:inherit;font-weight:700}
.incsf .n{width:42px}
.incsf .p{width:92px}
.incsf .u{font-size:10.5px;color:var(--tx3);font-weight:700}
.incsf-s{font-size:10.5px;color:var(--tx3);line-height:1.6;margin-top:9px}
.incsf-r{display:flex;gap:6px;flex-wrap:wrap}
.incsf-r span{font-size:11px;font-weight:700;padding:5px 9px;border-radius:8px;border:1px solid var(--line);color:var(--tx3)}
.incsf-r .k4{background:var(--goodbg);border-color:var(--good);color:var(--good)}
.incsf-r .k3{background:var(--popbg);border-color:var(--pop);color:var(--pop)}
.incsf-r .k0{background:var(--warnbg);border-color:var(--warn);color:var(--warn)}
.taxrow{display:flex;align-items:center;gap:10px;margin:10px 0;flex-wrap:wrap}
.taxrow input[type=range]{flex:1;min-width:140px}
.taxrow .tv{font-weight:800;min-width:52px;text-align:right}
.stab{border:1.5px solid var(--line);background:var(--card);color:var(--tx2);font-weight:700;font-size:14px;padding:9px 22px;border-radius:12px 12px 4px 4px;cursor:pointer}
.stab.on{background:var(--acc,#0f9d8c);border-color:var(--acc,#0f9d8c);color:#fff}
.stab.guide{margin-left:auto;border-style:dashed;padding-left:16px;padding-right:16px}
.stab.guide.on{border-style:solid}
.vtab{flex:1 1 0;min-width:0;background:var(--card);border:1px solid var(--line);color:var(--tx2);
  padding:10px 6px;border-radius:12px;font-size:14px;font-weight:800;cursor:pointer;transition:.15s;
  line-height:1.3;white-space:nowrap;overflow:hidden}
.vtab s{display:block;font-size:11px;font-weight:700;color:var(--tx3);text-decoration:none;margin-top:3px;letter-spacing:-.2px}
.vtab.on s{color:rgba(255,255,255,.85)}
.vtab:hover{border-color:var(--ac)}
.vtab.on{background:var(--ac);color:#fff;border-color:var(--ac)}
/* 개인·매장 두 개짜리 탭은 글자만큼만 (가로 꽉 차지 않게) */
#vtabs{justify-content:flex-start}
#vtabs .vtab{flex:0 0 auto;padding:10px 18px}
.type-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:13px;margin-top:12px}
.tcard2{border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--card)}
.tcard2 .top{padding:14px 16px 10px;display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.tcard2 .nm{font-size:17px;font-weight:800;letter-spacing:-.4px}
.tcard2 .rk{font-size:11.5px;color:var(--tx3);margin-top:2px}
.tbadge{font-size:12px;font-weight:800;padding:6px 12px;border-radius:20px;white-space:nowrap;flex-shrink:0}
/* 바로 뜨는 툴팁 — 브라우저 기본 title 은 1초쯤 기다려야 나와서 직접 만든다 */
.tp{position:relative}
.tp:hover::after{content:attr(data-tp);position:absolute;left:50%;bottom:100%;transform:translateX(-50%);margin-bottom:7px;
  background:#2b3038;color:#fff;font-size:11px;font-weight:700;letter-spacing:-.2px;padding:5px 9px;border-radius:8px;
  white-space:nowrap;z-index:80;pointer-events:none;box-shadow:0 2px 8px rgba(0,0,0,.18)}
.tp:hover::before{content:'';position:absolute;left:50%;bottom:100%;transform:translateX(-50%);margin-bottom:-1px;
  border:5px solid transparent;border-top-color:#2b3038;z-index:80;pointer-events:none}
.bt-stable{background:var(--goodbg);color:var(--good)}.bt-sub{background:var(--badbg);color:var(--bad)}.bt-disc{background:var(--warnbg);color:var(--warn)}.bt-cut{background:var(--popbg);color:var(--pop)}.bt-new{background:#e7eef6;color:#37699e}
.tcard2 .subtags{display:flex;gap:6px;flex-wrap:wrap;padding:0 16px 10px}
.subtag{font-size:11px;font-weight:700;padding:4px 9px;border-radius:12px;background:var(--card2);color:var(--tx2)}
.tcard2 .mini{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);background:var(--card2)}
.tcard2 .mini>div{padding:9px 6px;text-align:center;border-right:1px solid var(--line)}
.tcard2 .mini>div:last-child{border-right:none}
.tcard2 .mini .ml{font-size:10px;color:var(--tx3);font-weight:700}.tcard2 .mini .mv{font-size:14px;font-weight:800;margin-top:3px}
.tcard2 .rx{padding:11px 16px;background:var(--card2);border-top:1px solid var(--line)}
.tcard2 .rx .rl{font-size:11px;font-weight:800;color:var(--ac);margin-bottom:4px}
.tcard2 .rx .rt{font-size:12.5px;color:var(--tx);line-height:1.5;font-weight:600}
.cmp-wrap{overflow-x:auto}
/* 칸 많은 표 — 폰에서는 덜 급한 칸(.hd)을 숨겨 옆으로 밀지 않게 한다 */
.mtb{overflow-x:auto}
@media(max-width:620px){
  .mtb{overflow-x:visible}
  .mtb-t{font-size:11px!important}
  .mtb-t th,.mtb-t td{padding:6px 3px!important}
  .mtb-t .hd{display:none}
}
.cmp{width:100%;border-collapse:collapse;font-size:12.5px;min-width:640px}
.cmp th,.cmp td{padding:8px 7px;text-align:right;border-bottom:1px solid var(--line);white-space:nowrap}
.cmp th{color:var(--tx3);font-weight:700;font-size:11px;cursor:pointer}
.cmp th:hover{color:var(--ac)}
.cmp th:first-child,.cmp td:first-child{text-align:left;position:sticky;left:0;background:var(--card)}
.cmp td:first-child{font-weight:700;color:var(--tx)}
.cmp td.hi{color:var(--good);font-weight:800}.cmp td.lo{color:var(--bad);font-weight:800}
@media(max-width:680px){.type-grid{grid-template-columns:1fr}}

/* ===== 표 단위 바꾸기 (PC=원 · 폰=만원) =====
   같은 숫자를 두 벌 넣어두고 화면 크기에 따라 하나만 보인다.
   폰에서 옆으로 밀지 않아도 한 화면에 다 들어오게 하려는 것. */
.uMO{display:none}
.monTip{display:none}
/* 개인 월별 흐름 */
.mtb-wrap{overflow-x:auto}
.mtb{width:100%;border-collapse:collapse;font-size:12.5px}
.mtb th,.mtb td{padding:9px 6px;text-align:right;border-bottom:1px solid var(--line);white-space:nowrap}
.mtb th{color:var(--tx3);font-weight:700;font-size:11px}
.mtb th:first-child,.mtb td:first-child{text-align:left;font-weight:800}
.mtb tr.hiS td{background:var(--goodbg)}
.mtb tr.hiC td{background:rgba(224,138,60,.10)}
.mtb tr.hiS.hiC td{background:linear-gradient(90deg,var(--goodbg),rgba(224,138,60,.12))}
.mtb tfoot td{border-top:2px solid var(--line);background:rgba(15,157,140,.07);font-weight:900}
.mtb td.big{font-weight:800}
.crownS{color:var(--good);font-size:11px;font-weight:800}
.crownC{color:#b5691f;font-size:11px;font-weight:800}

@media(max-width:620px){
  .uPC{display:none}
  .uMO{display:inline}
  .monTip{display:inline}
  /* 옆으로 밀 필요 없게 — 한 화면에 다 넣는다 */
  .cmp-wrap,.mtb-wrap{overflow-x:visible}
  .cmp{min-width:0;font-size:11px}
  .cmp th,.cmp td{padding:7px 2px}
  .cmp th{font-size:9.5px}
  .cmp th:first-child,.cmp td:first-child{position:static;max-width:66px;overflow:hidden;text-overflow:ellipsis}
  .mtb{font-size:11px}
  .mtb th,.mtb td{padding:8px 2px}
  .mtb th{font-size:9.5px}
  .colHide{display:none}
}


/* ===== 약값계산기 (scoped) ===== */
#drugView{
    --yk-navy:#2D4A6B;
    --yk-navy-dark:#1F3A57;
    --yk-blue:#4A7BA7;
    --yk-blue-lighter:#F4F8FC;
    --yk-green:#2E7D32;
    --yk-green-bg:#EDF7EE;
    --yk-yellow-bg:#FFF6DC;
    --yk-yellow-text:#8A6A08;
    --yk-text:#1A1A2E;
    --yk-muted:#8F97A8;
    --yk-border:#E9ECF2;
    --yk-page-bg:#F2F4F8;
  }#drugView *{box-sizing:border-box;}#drugView .drug-page{
    
    padding:18px 12px 36px;
    background:var(--yk-page-bg);
    font-family:"Apple SD Gothic Neo","Malgun Gothic","Noto Sans KR",sans-serif;
    color:var(--yk-text);
    
    
  }#drugView .drug-page{width:100%; max-width:460px;}#drugView h1{
    font-size:18px;
    font-weight:800;
    color:var(--yk-navy);
    text-align:center;
    margin:4px 0 16px;
  }#drugView .card{
    background:#fff;
    border-radius:14px;
    box-shadow:0 1px 8px rgba(31,45,80,0.06);
    padding:14px 16px;
    margin-bottom:12px;
  }#drugView .card-title{
    font-size:13px;
    font-weight:800;
    color:var(--yk-navy);
    margin-bottom:10px;
  }#drugView /* 입력 행 */
  .row{
    display:flex;
    align-items:center;
    gap:10px;
    padding:8px 0;
    border-bottom:1px solid var(--yk-border);
  }#drugView .row:last-child{border-bottom:none;}#drugView .row .label{
    flex:1;
    font-size:13px;
    font-weight:600;
  }#drugView .row .label small{
    display:block;
    font-size:10.5px;
    color:var(--yk-muted);
    font-weight:400;
    margin-top:1px;
  }#drugView .row input{
    width:130px;
    border:1.5px solid var(--yk-border);
    border-radius:8px;
    padding:7px 9px;
    font-size:13.5px;
    text-align:right;
    font-family:inherit;
    background:#FAFBFD;
    color:var(--yk-text);
  }#drugView .row input:focus{
    outline:none;
    border-color:var(--yk-blue);
    background:#fff;
  }#drugView .row .val{
    width:130px;
    text-align:right;
    font-size:13px;
    font-weight:700;
    padding-right:9px;
  }#drugView /* 다운펌 하위행 */
  .row.sub{
    padding-left:12px;
    border-left:2px solid #DCE4EE;
    margin-left:2px;
  }#drugView .row.sub .label{font-size:12.5px; font-weight:500; color:#5C6678;}#drugView .row.calc{
    background:var(--yk-green-bg);
    border-left:2px solid #A8D5AC;
    margin-left:2px;
    padding:8px 10px 8px 12px;
    border-radius:0 8px 8px 0;
    border-bottom:none;
  }#drugView .row.calc .label{font-size:12px; color:var(--yk-green); font-weight:600;}#drugView .row.calc .val{color:var(--yk-green);}#drugView .row.subtotal{
    background:#EEF4FB;
    border-radius:8px;
    padding:9px 10px;
    margin-top:6px;
    border-bottom:none;
  }#drugView .row.subtotal .label{color:var(--yk-navy); font-weight:800;}#drugView .row.subtotal .val{color:var(--yk-navy); font-weight:800; font-size:14px;}#drugView /* 접이식 설명 */
  details.info{
    background:#FFFCF2;
    border:1px solid #F2E3B8;
    border-radius:10px;
    margin-bottom:12px;
    overflow:hidden;
  }#drugView details.info summary{
    cursor:pointer;
    padding:10px 12px;
    font-size:12px;
    font-weight:700;
    color:#7A6009;
    list-style:none;
  }#drugView details.info summary::-webkit-details-marker{display:none;}#drugView details.info summary::after{content:" ▾"; color:#B99C3C;}#drugView details.info[open] summary::after{content:" ▴";}#drugView details.info .info-body{
    padding:0 12px 12px;
    font-size:11.5px;
    line-height:1.6;
    color:#6B5900;
  }#drugView details.info b{color:#4A3D00;}#drugView /* 결과 카드 */
  .result-card{
    background:linear-gradient(135deg, var(--yk-navy) 0%, var(--yk-navy-dark) 100%);
    color:#fff;
    border-radius:14px;
    padding:16px 18px;
    margin-bottom:12px;
    box-shadow:0 3px 14px rgba(45,74,107,0.22);
  }#drugView .result-card .rc-label{font-size:11.5px; opacity:.8;}#drugView .result-card .rc-amount{
    font-size:24px;
    font-weight:800;
    margin-top:2px;
    letter-spacing:-.5px;
  }#drugView .result-card .rc-amount .unit{font-size:14px; font-weight:600; opacity:.85;}#drugView .result-card .rc-note{
    font-size:10.5px;
    opacity:.75;
    margin-top:8px;
    line-height:1.5;
  }#drugView .rc-divider{
    height:1px;
    background:rgba(255,255,255,.15);
    margin:14px 0;
  }#drugView .rc-ratio-wrap{display:flex; align-items:flex-end; gap:12px;}#drugView .rc-ratio{
    font-size:30px;
    font-weight:800;
    line-height:1;
    color:#FFD98A;
  }#drugView .rc-status{
    font-size:12.5px;
    font-weight:700;
    padding-bottom:3px;
  }#drugView .rc-rec{
    margin-top:12px;
    background:rgba(255,255,255,.1);
    border-radius:10px;
    padding:10px 12px;
    font-size:11.5px;
    line-height:1.7;
  }#drugView .rc-rec .rec-line{display:flex; justify-content:space-between;}#drugView .rc-rec .rec-line b{font-weight:800;}#drugView .rc-rec .hl{color:#A8E6B0;}#drugView /* 저장 */
  .save-row{display:flex; gap:8px; align-items:center; margin-bottom:8px;}#drugView .save-row label{font-size:12.5px; font-weight:600; white-space:nowrap;}#drugView .save-row input{
    flex:1;
    border:1.5px solid var(--yk-border);
    border-radius:8px;
    padding:7px 9px;
    font-size:13px;
    text-align:right;
    font-family:inherit;
    background:#FAFBFD;
  }#drugView .save-btn{
    width:100%;
    background:var(--yk-navy);
    color:#fff;
    border:none;
    border-radius:9px;
    padding:11px;
    font-size:13px;
    font-weight:700;
    cursor:pointer;
  }#drugView .save-btn:hover{background:var(--yk-navy-dark);}#drugView .save-msg{
    text-align:center;
    font-size:11.5px;
    color:var(--yk-green);
    margin-top:7px;
    min-height:15px;
    font-weight:600;
  }#drugView /* 기록 */
  .history-empty{
    text-align:center;
    font-size:12px;
    color:#B4BCC9;
    padding:18px 8px;
  }#drugView #historyChart{width:100%; height:auto; display:block;}#drugView .chart-legend{
    display:flex;
    gap:14px;
    justify-content:center;
    font-size:10.5px;
    color:var(--yk-muted);
    margin:2px 0 10px;
  }#drugView .chart-legend .dot{
    display:inline-block;
    width:8px; height:8px;
    border-radius:50%;
    margin-right:4px;
    vertical-align:middle;
  }#drugView .dot-ratio{background:var(--yk-yellow-text);}#drugView .dot-rev{background:var(--yk-blue);}#drugView .history-table{width:100%; border-collapse:collapse; font-size:12px;}#drugView .history-table th{
    background:var(--yk-blue-lighter);
    color:var(--yk-navy);
    padding:7px 4px;
    font-size:11px;
    font-weight:700;
  }#drugView .history-table td{
    padding:8px 4px;
    text-align:center;
    border-bottom:1px solid var(--yk-border);
  }#drugView .history-table tr:last-child td{border-bottom:none;}#drugView .del-btn{
    background:none; border:none;
    color:#D16464; cursor:pointer;
    font-size:13px;
  }#drugView .reset-btn{
    display:block;
    margin:2px auto 0;
    background:#fff;
    border:1.5px solid var(--yk-border);
    border-radius:9px;
    padding:9px 18px;
    font-size:12px;
    color:var(--yk-muted);
    cursor:pointer;
    font-weight:600;
  }

#drugView{background:transparent;}
#drugView .drug-page{margin:0 auto;max-width:460px;width:100%;}


/* ===== 예시 자료 모드 ===== */
#xlsBtn{position:fixed;left:18px;bottom:18px;z-index:9997;border:none;background:var(--ac);color:#fff;
  font-family:inherit;font-size:13.5px;font-weight:800;padding:12px 18px;border-radius:26px;cursor:pointer;
  box-shadow:0 6px 20px rgba(15,157,140,.35)}
#xlsBtn:hover{filter:brightness(1.07)}
/* ===== 인쇄하기 ===== */
#prtBtn{position:fixed;right:18px;bottom:74px;z-index:9997;border:none;background:var(--card);color:var(--tx1);
  border:1.5px solid var(--line);border-radius:999px;padding:12px 17px;font-size:13.5px;font-weight:800;
  cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,.13);font-family:inherit}
#prtBtn:hover{background:var(--card2)}
body.capturing #prtBtn{display:none}
/* 폰에서 인쇄 단추 자리에 대신 놓는 로그인 단추.
   로그인하면 사라진다 (할 일이 없으므로). */
#loginFab{display:none;position:fixed;right:18px;bottom:74px;z-index:9997;
  background:#FEE500;color:#191600;border:none;border-radius:999px;padding:12px 17px;
  font-size:13.5px;font-weight:800;cursor:pointer;font-family:inherit;
  box-shadow:0 4px 14px rgba(0,0,0,.16)}
#loginFab:hover{filter:brightness(.96)}
body.capturing #loginFab{display:none!important}
.printhead{display:none}
@media(max-width:520px){#prtBtn{right:12px;bottom:64px;font-size:12.5px;padding:11px 15px}}
@media print{
  @page{size:A4 portrait;margin:7mm}
  /* ── 종이 수 줄이기: 화면용 여백을 인쇄용으로 조인다 ── */
  body.printing [data-printnode]{zoom:.82}
  body.printing .sec{margin-top:11px!important}
  body.printing .card,body.printing .tcard2{padding:9px 11px!important;border-radius:10px!important}
  body.printing .kp,body.printing .rx-c{padding:8px 9px!important;border-radius:10px!important}
  body.printing .kpis{gap:7px!important;margin:8px 0!important}
  body.printing .type-grid{gap:8px!important;margin-top:8px!important}
  body.printing .brf{margin-top:8px!important;border-radius:10px!important}
  body.printing .hero{margin:9px 0 3px!important}
  body.printing .st{margin-bottom:5px!important}
  /* 큰 파트도 앞 장에 자리가 남으면 이어서 (강제 쪽나눔 해제) */
  body.printing [data-printnode] .pgbreak{break-before:auto;page-break-before:auto}
  html,body{background:#fff!important}
  /* 고른 화면만 남기고 나머지는 숨긴다 */
  body.printing *{visibility:hidden!important}
  body.printing [data-printnode],body.printing [data-printnode] *{visibility:visible!important}
  body.printing [data-printnode]{position:absolute!important;left:0;top:0;width:100%!important;margin:0!important;padding:0!important}
  body.printing .printhead{display:block!important}
  #prtBtn,#capBtn,#mcBtn,#mcOv,#xlsBtn,#cfgBtn,#syncBtn,#loginFab,#cfgPanel,#mUploadWrap,.nocap,.ftabs,.vtabs,.stabs,.picker{display:none!important}
  /* 파트 제목만 종이 맨 아래에 혼자 남지 않게 */
  .sec>.st{break-after:avoid;page-break-after:avoid}
  /* 카드·표가 장 넘어가며 반 토막 나지 않게 */
  .card,.tcard2,.brf,.kp,.rx-c,.sec>.card,.type-grid>*{break-inside:avoid;page-break-inside:avoid}
  tr,thead{break-inside:avoid;page-break-inside:avoid}
  .sec{break-inside:auto}
  /* 화면에서 옆으로 밀던 표는 종이에선 다 펴서 보이게 */
  .tbl-wrap,.scrollx,[style*="overflow-x"]{overflow:visible!important}
  /* 색을 그대로 살려서 인쇄 */
  *{-webkit-print-color-adjust:exact!important;print-color-adjust:exact!important}
}
/* ===== 이미지로 저장 ===== */
/* 여러 명 저장 버튼 — 이미지 저장 버튼 바로 위에 */
#mcBtn{position:fixed;right:18px;bottom:74px;z-index:9997;border:1px solid var(--ac);background:#fff;color:var(--ac);
  font-size:14px;font-weight:800;padding:12px 17px;border-radius:26px;cursor:pointer;
  box-shadow:0 6px 18px rgba(0,0,0,.13)}
#mcBtn:hover{background:var(--ac);color:#fff}
body.capturing #mcBtn{display:none}
@media(max-width:520px){#mcBtn{right:12px;bottom:66px;font-size:12.5px;padding:10px 14px}}
/* 사람 고르는 창 */
#mcOv .mc-bg{position:fixed;inset:0;z-index:10050;background:rgba(0,0,0,.45);
  display:flex;align-items:center;justify-content:center;padding:18px}
#mcOv .mc-box{background:#fff;border-radius:16px;width:100%;max-width:380px;
  max-height:82vh;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 18px 50px rgba(0,0,0,.3)}
#mcOv .mc-t{font-size:15px;font-weight:800;color:var(--tx);padding:16px 18px 12px;
  border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center}
#mcOv .mc-lim{font-size:11.5px;font-weight:700;color:var(--tx3)}
#mcOv .mc-warn{font-size:12px;font-weight:700;color:#c5453f;background:#fbe8e7;
  padding:9px 18px;border-top:1px solid var(--line)}
#mcOv .mc-l{overflow-y:auto;padding:6px 0}
#mcOv .mc-i{display:flex;align-items:center;gap:9px;padding:11px 18px;font-size:14px;
  font-weight:700;color:var(--tx2);cursor:pointer;border-bottom:1px solid var(--card2)}
#mcOv .mc-i:hover{background:var(--card2)}
#mcOv .mc-i input{width:17px;height:17px;accent-color:var(--ac);cursor:pointer}
#mcOv .mc-i input:disabled{cursor:default}
#mcOv .mc-b{display:flex;gap:8px;padding:13px 16px;border-top:1px solid var(--line)}
#mcOv .mc-c{flex:0 0 84px;border:1px solid var(--line);background:#fff;color:var(--tx2);
  font-size:13.5px;font-weight:700;border-radius:10px;padding:11px 0;cursor:pointer}
#mcOv .mc-go{flex:1;border:none;background:var(--ac);color:#fff;font-size:14px;font-weight:800;
  border-radius:10px;padding:11px 0;cursor:pointer}
#mcOv .mc-go:disabled{opacity:.55;cursor:default}
#capBtn{position:fixed;right:18px;bottom:18px;z-index:9997;border:none;background:var(--ac);color:#fff;
  font-family:inherit;font-size:13.5px;font-weight:800;padding:12px 18px;border-radius:26px;cursor:pointer;
  box-shadow:0 6px 20px rgba(15,157,140,.35)}
#capBtn:hover{filter:brightness(1.07)}
#capBtn:disabled{opacity:.6;cursor:default}
body.capturing #capBtn,body.capturing #xlsBtn{display:none}
@media(max-width:680px){
  #capBtn{right:12px;bottom:12px;font-size:12.5px;padding:11px 15px}
  #xlsBtn{left:12px;bottom:12px;font-size:12.5px;padding:11px 15px}
}

/* ===== 파일 선택 버튼 (손가락으로 누르기 쉽게) ===== */
#mFile{font-size:14px;width:100%;max-width:430px;color:var(--tx2)}
#mFile::file-selector-button{padding:12px 20px;margin-right:11px;border:1.5px solid var(--ac);
  border-radius:11px;background:var(--acbg,#e4f5ec);color:var(--ac);font-family:inherit;
  font-size:14.5px;font-weight:800;cursor:pointer}
#mFile::file-selector-button:hover{filter:brightness(.97)}
#mDrop{padding:16px 16px 18px!important}
@media(max-width:680px){
  #mFile{font-size:13px;max-width:none}
  #mFile::file-selector-button{display:block;width:100%;margin:0 0 10px;padding:15px 18px;font-size:16px}
}

/* ===== 사용설명서 ===== */
.ftabs{flex-wrap:wrap}
@media(max-width:680px){.ftab{padding:9px 13px;font-size:13px}}
#guideView .gsteps{display:flex;flex-direction:column;gap:10px}
#guideView .gs{display:flex;align-items:center;gap:11px}
#guideView .gs b{flex:none;width:27px;height:27px;border-radius:50%;background:var(--bad);color:#fff;font-size:14px;font-weight:800;display:flex;align-items:center;justify-content:center}
#guideView .gs span{font-size:15px;font-weight:700;color:var(--tx);word-break:keep-all}
#guideView .gs em{font-style:normal;background:var(--card2);border:1px solid var(--line);border-radius:6px;padding:1px 7px;font-weight:800}
#guideView img{display:block;width:100%;height:auto;border:1px solid var(--line);border-radius:12px;background:var(--card);margin:2px 0 8px}
#guideView .gnote{background:var(--card);border:1px solid var(--line);border-left:4px solid var(--ac);border-radius:11px;padding:12px 15px;margin-top:10px;font-size:13px;color:var(--tx2);line-height:1.6}
#guideView .gnote b{color:var(--tx)}
#guideView .gnote em{font-style:normal;font-weight:800;color:var(--tx)}
#guideView .gwarn{border-left-color:var(--bad)}
#guideView .gbig{display:flex;align-items:center;gap:11px;margin:26px 0 13px}
#guideView .gbig:first-child{margin-top:4px}
#guideView .gbig b{flex:none;width:34px;height:34px;border-radius:11px;background:var(--ac);color:#fff;
  font-size:17px;font-weight:800;display:flex;align-items:center;justify-content:center}
#guideView .gbig span{font-size:17px;font-weight:800;letter-spacing:-.3px}
#guideView .gbig span s{display:block;font-size:12.5px;font-weight:600;color:var(--tx3);text-decoration:none;margin-top:2px}
#guideView .gwarn b{color:var(--bad)}
@media(max-width:680px){#guideView .gs span{font-size:13.5px}#guideView .gs b{width:24px;height:24px;font-size:12.5px}}

/* ===== 휴대폰 화면에 추가하는 법 (pv- 접두어 · 다른 화면과 안 겹침) ===== */
#phoneView .pv-addr{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px 16px;margin-bottom:14px}
#phoneView .pv-addr-l{font-size:11.5px;font-weight:800;color:var(--tx3);margin-bottom:7px}
#phoneView .pv-addr-row{display:flex;gap:8px;flex-wrap:wrap}
#phoneView .pv-addr-row input{flex:1 1 240px;min-width:0;padding:11px 13px;border:1.5px solid var(--line);border-radius:10px;
  font-family:inherit;font-size:15px;font-weight:800;color:var(--tx);background:var(--bg)}
#phoneView .pv-addr-row button{flex:none;padding:11px 17px;border:none;background:var(--ac);color:#fff;border-radius:10px;
  font-family:inherit;font-size:14px;font-weight:800;cursor:pointer;white-space:nowrap}
#phoneView .pv-addr-row button.done{background:var(--good)}
#phoneView .pv-addr-d{font-size:12.5px;color:var(--tx2);font-weight:600;line-height:1.7;margin-top:9px}
#phoneView .pv-addr-d em{font-style:normal;font-weight:800;color:var(--ac)}
.pv-os{display:flex;gap:7px;margin-bottom:16px}
#phoneView .pv-ob{border:1.5px solid var(--line);background:var(--card);color:var(--tx2);font-weight:800;font-size:14px;padding:9px 20px;border-radius:22px;cursor:pointer}
#phoneView .pv-ob.on{background:var(--ac);border-color:var(--ac);color:#fff}
#phoneView .pv-grid{display:flex;gap:26px;align-items:flex-start}
#phoneView .pv-left{flex:none;width:250px}
#phoneView .pv-right{flex:1;min-width:0}

/* 폰 몸통 */
#phoneView .pv-phone{position:relative;width:250px;height:500px;background:#1c1d21;border-radius:34px;padding:10px;box-shadow:0 10px 30px rgba(0,0,0,.18)}
#phoneView .pv-notch{position:absolute;top:10px;left:50%;transform:translateX(-50%);width:86px;height:19px;background:#1c1d21;border-radius:0 0 13px 13px;z-index:6}
#phoneView .pv-screen{position:relative;width:100%;height:100%;background:#f4f5f7;border-radius:26px;overflow:hidden}
#phoneView .pv-sc{position:absolute;inset:0;opacity:0;transition:opacity .35s}
#phoneView .pv-sc.on{opacity:1}

/* 주소창 · 본문 · 툴바 */
#phoneView .pv-bar{position:absolute;top:0;left:0;right:0;height:52px;background:#e8eaee;display:flex;align-items:flex-end;justify-content:center;padding-bottom:8px}
#phoneView .pv-bar span{background:#fff;border-radius:9px;padding:5px 12px;font-size:9.5px;color:#5a626e;max-width:80%;overflow:hidden;white-space:nowrap}
#phoneView .pv-page{position:absolute;top:52px;left:0;right:0;bottom:44px;background:#fff;padding:16px 14px}
#phoneView .pv-pl{height:11px;background:#eef0f3;border-radius:5px;margin-bottom:10px}
#phoneView .pv-pl.w80{width:80%}#phoneView .pv-pl.w60{width:60%}#phoneView .pv-pl.w70{width:70%}#phoneView .pv-pl.w45{width:45%}
#phoneView .pv-tool{position:absolute;bottom:0;left:0;right:0;height:44px;background:#e8eaee;display:flex;align-items:center;justify-content:space-around;font-size:16px;color:#8a919c}

/* 눌러야 하는 자리 강조 */
#phoneView .pv-hit,#phoneView .pv-hit2,#phoneView .pv-hit3{position:relative;color:var(--ac);font-weight:800}
#phoneView .pv-hit::after,#phoneView .pv-hit3::after{content:'';position:absolute;left:50%;top:50%;width:34px;height:34px;margin:-17px 0 0 -17px;border:2px solid var(--ac);border-radius:50%;animation:pvPing 1.4s infinite}
#phoneView .pv-hit2{background:var(--goodbg);color:var(--good)}
#phoneView .pv-hit2::after{content:'';position:absolute;left:22px;top:50%;width:34px;height:34px;margin-top:-17px;border:2px solid var(--good);border-radius:50%;animation:pvPing 1.4s infinite}
@keyframes pvPing{0%{transform:scale(.55);opacity:1}80%,100%{transform:scale(1.5);opacity:0}}

/* 올라오는 메뉴 */
#phoneView .pv-dim{position:absolute;inset:0;background:rgba(0,0,0,.32)}
#phoneView .pv-sheet{position:absolute;left:0;right:0;bottom:0;background:#fff;border-radius:16px 16px 0 0;padding:9px 0 16px;animation:pvUp .4s}
@keyframes pvUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
#phoneView .pv-hand{width:34px;height:4px;background:#d5d8de;border-radius:2px;margin:0 auto 9px}
#phoneView .pv-mi{padding:11px 18px;font-size:11.5px;color:#3a4049;border-top:1px solid #f0f2f5}
#phoneView .pv-mi.pv-hit2{font-weight:800}

/* 확인 창 */
#phoneView .pv-dlg{position:absolute;left:12px;right:12px;top:64px;background:#fff;border-radius:14px;overflow:hidden;animation:pvPop .3s}
@keyframes pvPop{from{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}}
#phoneView .pv-dh{display:flex;align-items:center;justify-content:space-between;padding:11px 14px;border-bottom:1px solid #eef0f3;font-size:11px;color:#0f9d8c}
#phoneView .pv-dh b{color:#1a1d23;font-size:11.5px}
#phoneView .pv-db{display:flex;align-items:center;gap:11px;padding:14px}
#phoneView .pv-ic{width:44px;height:44px;border-radius:10px;flex:none}
#phoneView .pv-nm{font-size:12.5px;font-weight:800;color:#1a1d23}
#phoneView .pv-ur{font-size:9.5px;color:#98a0ac}

/* 홈 화면 */
#phoneView .pv-home{position:absolute;inset:0;background:linear-gradient(160deg,#2c3140,#4a5265);display:grid;grid-template-columns:repeat(4,1fr);gap:15px 8px;align-content:start;padding:52px 14px}
#phoneView .pv-app{text-align:center}
#phoneView .pv-app span{display:block;font-size:8px;color:#fff;margin-top:5px;overflow:hidden;white-space:nowrap}
#phoneView .pv-box{width:41px;height:41px;border-radius:10px;background:rgba(255,255,255,.22);margin:0 auto}
#phoneView .pv-ic2{width:41px;height:41px;border-radius:10px;display:block;margin:0 auto}
#phoneView .pv-new{animation:pvNew .7s .25s both}
@keyframes pvNew{0%{transform:scale(0);opacity:0}65%{transform:scale(1.18)}100%{transform:scale(1);opacity:1}}

/* 그림 밑 설명 */
#phoneView .pv-cap{margin-top:11px;text-align:center;font-size:12.5px;color:var(--tx2)}
#phoneView .pv-cap b{color:var(--ac);margin-right:5px}

/* 오른쪽 글 */
#phoneView .pv-steps{list-style:none;padding:0;margin:0}
#phoneView .pv-steps li{display:flex;gap:12px;padding:13px 14px;border:1px solid var(--line);background:var(--card);border-radius:12px;margin-bottom:9px;transition:.25s}
#phoneView .pv-steps li.on{border-color:var(--ac);background:var(--card);box-shadow:0 2px 10px rgba(15,157,140,.13)}
#phoneView .pv-steps li b{flex:none;width:27px;height:27px;border-radius:50%;background:var(--line);color:var(--tx3);font-size:13.5px;font-weight:800;display:flex;align-items:center;justify-content:center;transition:.25s}
#phoneView .pv-steps li.on b{background:var(--ac);color:#fff}
#phoneView .pv-steps .t{display:block;font-size:14.5px;font-weight:800;color:var(--tx);word-break:keep-all}
#phoneView .pv-steps .d{display:block;font-size:12.5px;color:var(--tx2);margin-top:3px;line-height:1.65;word-break:keep-all}
#phoneView .pv-steps em{font-style:normal;background:var(--card2);border:1px solid var(--line);border-radius:6px;padding:1px 6px;font-weight:800;color:var(--tx)}
#phoneView .pv-play{margin-top:12px}
#phoneView .pv-play button{border:1px solid var(--line);background:var(--card);color:var(--tx2);border-radius:9px;padding:8px 15px;font-size:13px;font-weight:700;cursor:pointer}

/* 아이폰/안드로이드 갈아끼우기 */
#phoneView.os-and .ios-only{display:none}
#phoneView.os-ios .and-only{display:none}
/* 설치 단추가 진짜로 뜨는 안드로이드에서는 그림 설명을 감춘다.
   단추 한 번이면 끝이라 설명이 필요 없다.
   단추가 못 뜨는 기기(삼성 인터넷 등)에서는 설명이 그대로 나온다. */
#phoneView.os-and.can-install .pv-grid{display:none}
/* 카톡·인스타 같은 앱 안 브라우저에서는 그림 설명이 소용없다.
   거기서는 어떤 방법으로도 홈 화면에 못 넣는다. 브라우저를 옮기는 게 먼저다. */
#phoneView.in-app .pv-grid{display:none}
#pvInstall.warn{border-color:var(--warn);background:var(--warnbg)}
/* 카톡 안에서 열렸을 때 맨 앞에 덮는 안내 화면.
   여기서는 엑셀 올리기가 안 되기 때문에 그냥 두면 못 쓴다. */
#appOut{position:fixed;inset:0;z-index:99999;background:rgba(20,22,26,.72);
  display:flex;align-items:center;justify-content:center;padding:22px}
#appOut .ao-box{background:var(--card);border-radius:18px;padding:26px 22px;max-width:380px;width:100%;
  text-align:center;box-shadow:0 18px 50px rgba(0,0,0,.3)}
#appOut .ao-t{font-size:18px;font-weight:900;color:var(--tx1);line-height:1.45;margin-bottom:9px;word-break:keep-all}
#appOut .ao-d{font-size:13.5px;color:var(--tx2);font-weight:600;line-height:1.7;word-break:keep-all}
#appOut .ao-d b{color:var(--bad)}
#appOut .ao-b{display:block;width:100%;margin:16px 0 0;border:0;background:var(--ac);color:#fff;
  font-weight:800;font-size:16px;padding:15px;border-radius:12px;cursor:pointer;font-family:inherit}
#appOut .ao-b2{display:block;width:100%;margin:9px 0 0;border:1.5px solid var(--line);background:var(--card);
  color:var(--tx2);font-weight:700;font-size:13.5px;padding:12px;border-radius:11px;cursor:pointer;font-family:inherit}
#appOut .ao-x{display:block;width:100%;margin:12px 0 0;border:0;background:none;color:var(--tx3);
  font-weight:600;font-size:12.5px;cursor:pointer;font-family:inherit;text-decoration:underline}
#pvInstall.warn .pvi-t{color:var(--warn)}
#pvInstall .pvi-b2{display:block;margin:9px auto 0;border:1.5px solid var(--line);background:var(--card);color:var(--tx2);font-weight:700;font-size:13px;padding:10px 18px;border-radius:10px;cursor:pointer;font-family:inherit}
#pvInstall{border:1.5px solid var(--ac);background:var(--card);border-radius:14px;padding:18px 16px;margin:0 0 16px;text-align:center}
#pvInstall .pvi-t{font-size:15px;font-weight:800;color:var(--tx1);margin-bottom:4px}
#pvInstall .pvi-d{font-size:12.5px;color:var(--tx3);font-weight:600;line-height:1.6}
#pvInstall .pvi-b{display:block;margin:12px auto 0;border:0;background:var(--ac);color:#fff;font-weight:800;font-size:15px;padding:13px 30px;border-radius:12px;cursor:pointer;font-family:inherit}
#pvInstall .pvi-b:disabled{opacity:.55;cursor:default}
#pvInstall.done{border-color:var(--good);background:var(--goodbg)}
#pvInstall.done .pvi-t{color:var(--good)}

@media(max-width:680px){
  #phoneView .pv-grid{flex-direction:column;align-items:center;gap:18px}
  #phoneView .pv-right{width:100%}
  #phoneView .pv-steps .t{font-size:13.5px}
}

/* ===== 브리핑 (읽기 편하게) ===== */
.brf{background:var(--card);border:1px solid var(--line);border-radius:16px;margin-top:12px;overflow:hidden}
.brf-h{display:flex;align-items:center;gap:7px;padding:11px 16px;border-bottom:1px solid var(--line);background:var(--card2)}
.brf-h .ic{font-size:14px;line-height:1}
.brf-h .tt{font-size:13px;font-weight:800;color:var(--tx);letter-spacing:-.2px}
.brf-b{padding:15px 16px}
.brf-b>*:first-child{margin-top:0}
.brf-big{font-size:22px;font-weight:800;letter-spacing:-.7px;color:var(--tx);margin:3px 0 2px;line-height:1.3}
.brf-sub{font-size:12.5px;color:var(--tx3);font-weight:600;line-height:1.6}
.brf-eq{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:var(--card2);border-radius:12px;padding:12px 14px;margin-top:12px}
.brf-eq .u{display:flex;flex-direction:column;gap:2px}
.brf-eq .u .l{font-size:10.5px;color:var(--tx3);font-weight:700}
.brf-eq .u .v{font-size:16px;font-weight:800;color:var(--tx);white-space:nowrap;letter-spacing:-.4px}
.brf-eq .u.res .v{color:var(--ac)}
.brf-eq .x{font-size:15px;color:var(--tx3);font-weight:800}
.chips-t{font-size:11.5px;font-weight:800;color:var(--tx3);margin-top:14px}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.chip{font-size:12px;font-weight:700;padding:5px 10px;border-radius:9px;white-space:nowrap}
.chip.up{background:var(--goodbg);color:var(--good)}
.chip.dn{background:var(--badbg);color:var(--bad)}
.chip.eqc{background:var(--card2);color:var(--tx2);border:1px solid var(--line)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:13px}
.opt{border:1px solid var(--line);border-radius:13px;padding:13px 14px;background:var(--card)}
.opt.easy{border-color:var(--ac);background:var(--goodbg)}
.opt .ot{font-size:12px;font-weight:800;color:var(--tx2)}
.opt .ov{font-size:20px;font-weight:800;color:var(--ac);letter-spacing:-.6px;margin-top:5px;white-space:nowrap}
.opt .od{font-size:11.5px;color:var(--tx3);font-weight:600;margin-top:4px;line-height:1.5}
.opt .otag{display:inline-block;font-size:10.5px;font-weight:800;padding:3px 8px;border-radius:7px;margin-top:8px}
.opt.easy .otag{background:var(--ac);color:#fff}
.opt.hard .otag{background:var(--card2);color:var(--tx2);border:1px solid var(--line)}
.brf-note{font-size:12.5px;color:var(--tx2);background:var(--card2);border-radius:11px;padding:11px 13px;margin-top:12px;line-height:1.7}
.brf-note b{color:var(--tx);font-weight:800}
/* ── 브리핑 v2 : 큰 숫자 + 넓은 여백 ── */
.brf-b{padding:20px}
.brf-lab{font-size:12px;font-weight:800;color:var(--tx3)}
.brf-hero{font-size:44px;font-weight:800;letter-spacing:-2.4px;line-height:1.05;margin-top:8px;color:var(--ac)}
.brf-hero u{font-size:22px;letter-spacing:-.8px;text-decoration:none;margin-left:2px}
.brf-hero.dk{color:var(--tx)}
.brf-cap{font-size:13.5px;font-weight:700;color:var(--tx3);margin-top:10px;line-height:1.6}
.brf-cap b{color:var(--tx2)}
.brf-p{font-size:13.5px;color:var(--tx2);line-height:1.85;font-weight:500;margin-top:14px}
.brf-p b{color:var(--tx);font-weight:800}
.brf-dv{border:0;border-top:1px solid var(--line);margin:18px 0;opacity:.7}
.brf-t{font-size:12px;font-weight:800;color:var(--tx3);margin-top:18px}
.brf-bar{display:flex;height:14px;border-radius:7px;overflow:hidden;margin-top:9px;background:var(--card2)}
.brf-bar i{display:block}
.brf-lg{display:flex;flex-wrap:wrap;gap:12px;margin-top:11px}
.brf-lg span{font-size:12.5px;font-weight:700;color:var(--tx2);display:flex;align-items:center;gap:6px}
.brf-lg em{width:10px;height:10px;border-radius:3px;font-style:normal;flex:none}
.brf-lg b{color:var(--tx);font-weight:800}
.brf-2{display:flex;margin-top:16px}
.brf-2 .g{flex:1;padding-right:16px;min-width:0}
.brf-2 .g+.g{border-left:1px solid var(--line);padding-left:16px;padding-right:0}
.brf-2 .g .l{font-size:12px;font-weight:800;color:var(--tx3)}
.brf-2 .g .v{font-size:26px;font-weight:800;letter-spacing:-1.1px;margin-top:5px;white-space:nowrap}
.brf-2 .g .v.a{color:var(--ac)}
.brf-3 .g .v{font-size:20px;letter-spacing:-.8px}
/* 세금 브리핑 : 시기별로 얼마씩 빼둘지 (전반기·하반기는 시기가 달라 겹치지 않는다) */
.per{display:flex;gap:12px;margin-top:14px;flex-wrap:wrap}
.per .p{flex:1 1 160px;border:1.5px solid var(--line);border-radius:14px;padding:14px;min-width:0}
.per .p.now{border-color:var(--ac);background:var(--goodbg)}
.per .p .when{font-size:12px;font-weight:800;color:var(--tx3)}
.per .p .amt{font-size:25px;font-weight:800;letter-spacing:-1.1px;color:var(--ac);margin-top:5px;white-space:nowrap}
.per .p .brk{font-size:11.5px;color:var(--tx3);font-weight:600;margin-top:7px;line-height:1.6}
.brf-2 .g .d{font-size:11.5px;color:var(--tx3);font-weight:600;margin-top:5px;line-height:1.5}
.brf-hint{border:1.5px solid var(--ac);background:var(--goodbg);border-radius:15px;padding:16px 17px;margin-top:16px}
.brf-hint .ht{font-size:12px;font-weight:800;color:var(--ac)}
.brf-hint .hv{font-size:28px;font-weight:800;color:var(--ac);letter-spacing:-1.2px;margin-top:5px}
.brf-hint .hd{font-size:13px;color:var(--tx2);font-weight:500;margin-top:9px;line-height:1.8}
.brf-hint .hd b{color:var(--tx);font-weight:800}
.brf-hint .hr2{display:flex;align-items:center;gap:9px;background:rgba(255,255,255,.75);border-radius:11px;padding:11px 12px;margin-top:10px}
.brf-hint .hr2 .k{font-size:12.5px;font-weight:700;color:var(--tx2)}
.brf-hint .hr2 .v{margin-left:auto;font-size:14.5px;font-weight:800;color:var(--tx)}
.brf-prog{margin-top:16px}
.brf-prog .pt{display:flex;justify-content:space-between;font-size:12px;font-weight:800;color:var(--tx3)}
.brf-prog .pb{display:flex;gap:3px;margin-top:9px}
.brf-prog .pb i{flex:1;height:10px;border-radius:4px;background:var(--card2)}
.brf-prog .pb i.d{background:var(--ac)}
.brf-prog .pb i.l{background:repeating-linear-gradient(45deg,#cfd4dc,#cfd4dc 3px,#e6e9ee 3px,#e6e9ee 6px)}
.brf-ppl{display:flex;gap:4px;margin-top:10px}
.brf-ppl i{flex:1;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:12.5px;font-style:normal;font-weight:800}
.brf-ppl i.n{background:var(--warnbg);color:var(--warn)}
.brf-ppl i.r{background:var(--goodbg);color:var(--good)}
.brf-gg{margin-top:16px}
.brf-gg .gt{display:flex;justify-content:space-between;font-size:12px;font-weight:800;color:var(--tx3)}
.brf-gg .gb{height:18px;border-radius:9px;background:var(--card2);margin-top:9px;position:relative;overflow:hidden}
.brf-gg .gb i{display:block;height:100%;background:var(--ac);border-radius:9px}
.brf-gg .gb u{position:absolute;top:-3px;bottom:-3px;width:2px;background:var(--tx2);text-decoration:none}
.brf-tl{display:flex;gap:4px;margin-top:8px}
.brf-tl div{flex:1;text-align:center;font-size:11px;font-weight:800;color:var(--tx3);padding:10px 0 9px;border-radius:9px;background:var(--card2);line-height:1.35}
.brf-tl div.p1{background:var(--warnbg);color:var(--warn)}
.brf-tl div.p2{background:var(--bad);color:#fff}
.brf-tl div s{display:block;font-size:9.5px;font-weight:700;text-decoration:none;opacity:.85}
.brf-mb{margin-top:10px;display:flex;gap:5px;align-items:flex-end;height:100px}
.brf-mb .c{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;height:100%;justify-content:flex-end;min-width:0}
.brf-mb .c .pv{font-size:10px;font-weight:800;color:var(--tx2);letter-spacing:-.4px}
.brf-mb .c .bx{width:100%;border-radius:6px 6px 0 0;background:var(--ac);opacity:.42}
.brf-mb .c.best .bx{opacity:1}
.brf-mb .c.best .pv{color:var(--ac)}
.brf-mb .c .mn{font-size:10.5px;font-weight:700;color:var(--tx3);letter-spacing:-.4px}
.brf-mb .c.best .mn{color:var(--ac);font-weight:800}
.brf-goal{display:flex;align-items:center;gap:10px;border:1px dashed var(--ac);border-radius:14px;padding:13px 14px;margin-top:12px;background:var(--card)}
.brf-goal .gi{font-size:17px;flex:none}
.brf-goal .l{font-size:11.5px;font-weight:800;color:var(--tx3);display:block}
.brf-goal .v{font-size:14.5px;font-weight:800;letter-spacing:-.4px;margin-top:2px;display:block}
.brf-duo{display:flex;gap:9px;margin-top:10px}
.brf-duo .d1{flex:1;border-radius:15px;padding:14px 15px;min-width:0}
.brf-duo .d1.svc{background:var(--goodbg);border:1.5px solid #b9e3cd}
.brf-duo .d1.cash{background:#fdf1e3;border:1.5px solid #edcba1}
.brf-duo .d1 .l{font-size:11.5px;font-weight:800}
.brf-duo .d1.svc .l{color:var(--good)}
.brf-duo .d1.cash .l{color:#b5691f}
.brf-duo .d1 .v{font-size:24px;font-weight:800;letter-spacing:-1.1px;margin-top:4px;white-space:nowrap}
.brf-duo .d1.svc .v{color:var(--good)}
.brf-duo .d1.cash .v{color:#b5691f}
.brf-duo .d1 .d{font-size:11.5px;color:var(--tx3);font-weight:600;margin-top:5px;line-height:1.5}
.brf-sz{margin-top:14px}
.brf-sz .szt{font-size:12px;font-weight:800;color:var(--tx3)}
.brf-sz .r{display:flex;align-items:center;gap:11px;background:var(--card2);border-radius:13px;padding:13px 14px;margin-top:8px}
.brf-sz .r .ic{font-size:16px;flex:none}
.brf-sz .r .k{font-size:13.5px;font-weight:800;letter-spacing:-.3px;min-width:0}
.brf-sz .r .k s{display:block;font-size:11.5px;color:var(--tx3);font-weight:600;text-decoration:none;margin-top:3px}
.brf-sz .r .v{margin-left:auto;font-size:14.5px;font-weight:800;color:var(--tx2);white-space:nowrap}
.brf-yr{font-size:12px;color:var(--tx3);font-weight:700;margin-top:9px;line-height:1.6}
@media(max-width:400px){.brf-duo{display:block}.brf-duo .d1+.d1{margin-top:9px}.brf-sz .r .k{font-size:12.5px}}
.brf-goal .v b{color:var(--ac)}
@media(max-width:680px){
  .brf-hero{font-size:36px}.brf-hero u{font-size:19px}
  .brf-b{padding:17px}
  .brf-2{display:block}
  .brf-2 .g{padding-right:0}
  .brf-2 .g+.g{border-left:0;border-top:1px solid var(--line);padding-left:0;padding-top:14px;margin-top:14px}
  .brf-ppl i{height:25px;font-size:11px}
  .brf-tl div{font-size:10px;padding:8px 0 7px}
  .brf-mb{height:88px;gap:3px}
  .brf-mb .c .pv{font-size:9px}.brf-mb .c .mn{font-size:9.5px}
  .brf-hint .hv{font-size:24px}
  .brf-2 .g .v{font-size:23px}
}
@media(max-width:680px){.two{grid-template-columns:1fr}.brf-big{font-size:19px}.opt .ov{font-size:18px}.brf-eq{gap:8px;padding:11px 12px}.brf-eq .u .v{font-size:14.5px}}

/* ==========================================================
   모바일 보정 (휴대폰에서 잘리거나 확대되지 않게)
   ========================================================== */
@media(max-width:680px){
  .wrap{padding:0 13px}
  body{padding-bottom:96px}
  /* iOS에서 입력칸 누를 때 화면이 확대되는 것 방지 (16px 미만이면 확대됨) */
  input,select,textarea,.cin{font-size:16px!important}
  .cin{padding:9px 10px}
  /* 탭 줄바꿈 */
  .ftabs,.vtabs,.stabs,.picker,.legend,.subtags{flex-wrap:wrap}
  .vtabs{gap:6px}
  .vtab{padding:10px 4px;font-size:13.5px}
  .vtab s{font-size:10.5px;margin-top:2px}
  .stab{font-size:13px;padding:8px 16px}
  /* 폰에서는 맨 윗줄이 시계·배터리에 가려 눌리지 않는다.
     홈 화면에 추가해 쓰면 특히 심해서, 기기가 알려주는 안전영역만큼 더 내린다. */
  header{padding:calc(34px + env(safe-area-inset-top,0px)) 0 10px}
  h1{font-size:17px;line-height:1.4}
  .sub{font-size:12px}
  /* 숫자 카드 */
  .kp{padding:12px 11px}
  .kp .v{font-size:16px;letter-spacing:-.7px}
  .kp .l{font-size:10.5px}
  /* 표는 손가락으로 옆으로 밀 수 있게 */
  .card:has(table),.cmp-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
  /* 입력 줄: 이름·금액·메모·삭제가 한 줄에 다 안 들어가므로 두 줄로 */
  .crow{grid-template-columns:1fr 148px;gap:7px}
  .crow-two{grid-template-columns:1fr auto}
  /* 급여 줄: 1줄=이름·금액·삭제 / 2줄=메모 */
  /* 폰: 한 줄에 다 넣는다 — 손잡이 · 이름 · 금액 · 배지 · ✕
     탭 세 개를 늘어놓으면 한 사람이 두 줄을 먹어서 배지 하나로 바꾼다. */
  /* 금액은 천만 단위(12,400,000)까지 안 잘리게 잡는다 */
  .crow-staff{grid-template-columns:15px 1fr 108px 36px 22px;gap:4px;row-gap:5px}
  .crow-staff .cin{font-size:12.5px;padding:8px 6px}
  .crow-staff .stkind{display:none}
  .crow-staff .stbadge{display:block}
  .crow-staff .memo{display:none}
  .crow-staff .px{padding:7px 4px!important}
  .sthandle{font-size:14px}
  /* 배분율 구간 줄 */
  .crow-tier{grid-template-columns:1fr 82px 36px;gap:6px}
  /* 큰 숫자 카드: 두 값이 들어가면 줄바꿈 허용 */
  .kp .v.v2{font-size:15px;white-space:normal;line-height:1.3}
  .taxbig{font-size:24px}
  .taxrev{font-size:16px}.taxrev b{font-size:19px}.taxsub{font-size:12px}
  /* ⚙️설정 버튼이 폴더 탭 위에 겹치지 않게 */
  .h1row #cfgBtn,.h1row #syncBtn{font-size:12px;padding:5px 10px}
  /* 표가 들어간 카드는 손가락으로 옆으로 밀 수 있게 (:has 미지원 기기 대비) */
  .sec>.card{overflow-x:auto}
  /* 입력칸은 16px 유지(확대 방지)하되 안내문구만 작게 → 「예: 32,000,000」이 안 잘림 */
  input::placeholder{font-size:12px;opacity:1;color:var(--tx3)}
  input::placeholder,textarea::placeholder{opacity:.55;font-weight:400}
  /* 용어 설명 말풍선은 화면 가로 전체로 */
  #qmPop{left:12px!important;right:12px!important;max-width:none!important;width:auto!important}
  /* 목표 입력 */
  .tgt input{width:110px}
  .tgt{gap:6px}
  /* 세금 슬라이더 */
  .taxrow input[type=range]{min-width:110px}
  /* 약값계산기 */
  #drugView .drug-page{padding:14px 0 30px}
  #drugView .row input,#drugView .row .val{width:118px}
  /* 아래 떠 있는 버튼 */
  #capBtn{right:12px;bottom:12px;font-size:13px;padding:11px 15px}
  #xlsBtn{left:12px;bottom:12px;font-size:12.5px;padding:11px 15px}
  /* 카드 안 숫자 설명줄도 좁으면 줄바꿈 */
  .kp .c{white-space:normal}
  /* 약값계산기 기록 표 가로 스크롤 */
  #drugView .card{overflow-x:auto}
  #drugView .rc-rec .rec-line{flex-wrap:wrap;gap:2px 10px}
}
@media(max-width:380px){
  /* 아주 작은 화면(아이폰 SE 등)에서 8자리 금액이 안 잘리게 */
  .kp .v{font-size:13.5px}
  .kp .v.v2{font-size:12.5px}
  .taxbig{font-size:19px}
  .taxrev{font-size:14px}.taxrev b{font-size:17px}.taxsub{font-size:11.5px}
}
@media(max-width:430px){
  /* 예시 띠와 이미지저장 버튼이 나란히 놓이면 겹치므로 위아래로 */
  body{padding-bottom:124px}
  .wrap{padding:0 11px}
  .ftab{padding:8px 11px;font-size:12.5px}
  .hero .nm{font-size:20px}
  .kpis,.kpis.k5,.kpis.k3{grid-template-columns:1fr 1fr;gap:9px}
  .kp .v{font-size:15px}
  .kp .v.v2{font-size:13.5px}
  .kp .c{white-space:normal}
  .taxbig{font-size:21px}
  .taxrev{font-size:15px}.taxrev b{font-size:18px}.taxsub{font-size:12px}
  /* 유형 카드 안 4칸 → 2칸 */
  .tcard2 .mini{grid-template-columns:1fr 1fr}
  .tcard2 .mini>div:nth-child(2n){border-right:none}
  .tcard2 .mini>div:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .tcard .trank{width:46px;font-size:12px}
  .tcard .tbody{padding:13px 14px 13px 4px}
  .tv2{font-size:18px}
  .mixrow .amt{width:96px;font-size:11px}
  .nm2{width:54px}
  .chartbox,.chartbox.sm{height:190px}
  #guideView .gs span{font-size:13px}
  #capBtn{font-size:12.5px;padding:10px 13px}
}

/* ── 인센계산기 매출별 급여표 ─────────────────────────────
   폰에서 잘리지 않게 상자 안에서 옆으로 밀리고,
   좁을 때는 꼭 필요한 칸(매출·인센티브·실수령)만 남긴다. */
.inc-tw{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);border-radius:11px}
.inc-tb{width:100%;border-collapse:collapse;font-size:12.5px;background:var(--card)}
.inc-tb th,.inc-tb td{padding:9px 10px;text-align:right;white-space:nowrap;border-bottom:1px solid var(--line)}
.inc-tb th{background:var(--bg2);color:var(--tx2);font-weight:800;font-size:11.5px;position:sticky;top:0}
.inc-tb td:first-child,.inc-tb th:first-child{text-align:left;font-weight:700}
.inc-tb tbody tr:last-child td{border-bottom:0}
/* 실수령만 크게. 나머지는 줄여서 한눈에 들어오게 */
.inc-tb td.net{font-weight:800;color:var(--ac);font-size:13.5px}
.inc-tb td{font-size:11px;color:var(--tx2)}
.inc-tb td:first-child{font-size:12px;color:var(--tx1)}
/* 눈여겨볼 구간 — 300 · 500 · 700 · 1,000만 */
.inc-tb tr.mk td{background:var(--warnbg);font-weight:800}
.inc-tb tr.mk td:first-child{box-shadow:inset 3px 0 0 var(--warn)}
/* 지금 넣은 매출 — 색을 겹쳐 쓰지 않고 작은 표로 알린다 */
.inc-tb .nowtag{display:inline-block;margin-left:6px;background:var(--ac);color:#fff;
  font-size:9.5px;font-weight:800;padding:2px 6px;border-radius:999px;vertical-align:1px}
/* 머리글 밑에 붙는 작은 비율 (부가세 10% 처럼) */
.inc-tb th s{display:block;font-size:9.5px;font-weight:600;text-decoration:none;color:var(--tx3);margin-top:1px}
.inc-tb td.mi{color:var(--bad)}
/* 매출 칸은 옆으로 밀어도 따라온다 — 어느 줄인지 잃지 않게 */
.inc-tb th:first-child,.inc-tb td:first-child{position:sticky;left:0;z-index:2;background:var(--card)}
.inc-tb th:first-child{background:var(--bg2);z-index:3}
.inc-tb tr.mk td:first-child{background:var(--warnbg)}
.inc-hint{font-size:11px;color:var(--tx3);line-height:1.6;margin:0 0 7px}
@media(max-width:680px){
  .inc-tb{font-size:11.5px}
  .inc-tb th,.inc-tb td{padding:8px 8px}
}
/* 실수령이 목표를 처음 넘은 줄에 붙는 작은 표 */
.inc-tb .goaltag{display:inline-block;margin-left:5px;background:var(--warn);color:#fff;
  font-size:9px;font-weight:800;padding:2px 5px;border-radius:999px;vertical-align:1px}

/* 체험 중일 때 화면 맨 위에 뜨는 띠 */
#trialBar{position:sticky;top:0;z-index:60;background:var(--warnbg);border-bottom:1px solid var(--warn);
  padding:8px 14px;font-size:11.5px;color:var(--tx2);line-height:1.55;text-align:center}
#trialBar b{color:var(--warn)}
#trialBar span{display:block;font-size:10.5px}
@media(max-width:680px){ #trialBar{padding:7px 10px;font-size:11px} }

/* ===== 💈 미용실 체크인 (보여주기 · 분위기 · 문의) ===== */
/* 한글은 낱말 가운데서 끊으면 안 읽힌다 (「고르」/「면」 으로 갈라졌었다) */
#checkinView{padding-bottom:20px;word-break:keep-all}
.ck-hero{background:linear-gradient(135deg,#1c2733,#26333f);color:#fff;border-radius:16px;padding:26px 24px;margin-bottom:14px}
.ck-h1{font-size:22px;font-weight:800;letter-spacing:-.6px;line-height:1.4}
.ck-h1 b{color:#5fd6c4}
.ck-h2{font-size:14.5px;line-height:1.9;color:rgba(255,255,255,.8);margin-top:12px;font-weight:600}
.ck-h2 b{color:#fff}
.ck-h2 span{color:rgba(255,255,255,.5);font-size:13px}

.ck-card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:20px;margin-bottom:14px}
.ck-ct{font-size:16px;font-weight:800;margin-bottom:14px;letter-spacing:-.3px}
.ck-ct s{text-decoration:none;font-size:12.5px;font-weight:600;color:var(--tx3);margin-left:8px}

/* 매장 분위기 고르기 */
.ck-moods{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:16px}
.ck-mo{background:var(--card);border:1.5px solid var(--line);color:var(--tx2);
  border-radius:12px;padding:9px 14px;font-size:13.5px;font-weight:800;cursor:pointer;
  font-family:inherit;text-align:left;line-height:1.25;transition:.15s}
.ck-mo s{display:block;text-decoration:none;font-size:11px;font-weight:600;color:var(--tx3);margin-top:2px}
.ck-mo:hover{border-color:var(--ac)}
.ck-mo.on{background:var(--ac);border-color:var(--ac);color:#fff}
.ck-mo.on s{color:rgba(255,255,255,.75)}

/* 데모 */
.ck-demo{display:flex;gap:20px;align-items:flex-start;flex-wrap:wrap}
.ck-frame{flex:0 0 auto;width:300px;aspect-ratio:9/16;border-radius:20px;overflow:hidden;
  border:8px solid #1c2733;background:#161616;box-shadow:0 10px 30px rgba(0,0,0,.18)}
.ck-frame iframe{width:100%;height:100%;border:0;display:block}
.ck-dside{flex:1;min-width:200px;display:flex;flex-direction:column;gap:12px}
.ck-dnote{font-size:14.5px;font-weight:700;color:var(--tx2);line-height:1.8}
.ck-dnote b{color:var(--ac)}
.ck-b1{display:inline-flex;align-items:center;justify-content:center;gap:6px;
  background:var(--ac);color:#fff;border:1px solid var(--ac);border-radius:11px;
  padding:12px 18px;font-size:14px;font-weight:800;cursor:pointer;text-decoration:none;
  font-family:inherit;white-space:nowrap}

/* 문의 */
.ck-ask{background:var(--card);border:2px solid var(--ac);border-radius:16px;
  padding:22px;text-align:center;margin-bottom:14px}
.ck-askl{font-size:14px;font-weight:700;color:var(--tx2);margin-bottom:13px}
.ck-askb{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:var(--ac);color:#fff;border-radius:13px;padding:16px 30px;
  font-size:24px;font-weight:900;letter-spacing:-.5px;text-decoration:none}
.ck-askc{display:block;margin:11px auto 0;background:var(--card);border:1px solid var(--line);
  color:var(--tx2);border-radius:10px;padding:9px 16px;font-size:13px;font-weight:700;
  cursor:pointer;font-family:inherit}
.ck-msg{font-size:13px;font-weight:700;color:var(--ac);margin-top:9px;min-height:18px}

@media(max-width:680px){
  .ck-hero{padding:20px 16px}
  .ck-h1{font-size:18.5px;line-height:1.42}
  .ck-h2{font-size:13.5px;line-height:1.75;margin-top:10px}
  .ck-h2 span{font-size:12px}
  .ck-card{padding:16px 14px}
  .ck-ct{font-size:15.5px}
  /* 괄호말은 제목 옆에 붙이면 두 줄로 갈라진다 — 밑으로 내린다 */
  .ck-ct s{display:block;margin:5px 0 0;font-size:12px;line-height:1.6}
  /* 판 고르는 단추는 둘씩 딱 맞춰 세운다 (들쭉날쭉하지 않게) */
  .ck-moods{display:grid;grid-template-columns:1fr 1fr;gap:7px}
  .ck-mo{padding:9px 11px;font-size:13px}
  .ck-mo s{font-size:10.5px}
  .ck-demo{gap:14px}
  .ck-frame{width:100%;max-width:300px;margin:0 auto}
  .ck-dnote{font-size:13.5px}
  .ck-b1{width:100%}
  /* 오른쪽 아래 떠 있는 단추(공유하기 등)가 번호를 가린다 — 왼쪽으로 붙인다 */
  .ck-ask{text-align:left;padding:18px 16px}
  .ck-askl{font-size:13.5px}
  .ck-askb{font-size:19.5px;padding:14px 20px}
  .ck-askc{margin-left:0}
}

/* ═══ 🌱 백일나무 — 미부장 안에서 (js/m100.js) ═══ */
#m100View{padding-bottom:28px;word-break:keep-all}
.m1-wrap{max-width:560px;margin:0 auto}
.m1-empty{text-align:center;padding:60px 10px;color:var(--tx2);font-weight:700;line-height:2}
.m1-hero{display:flex;align-items:center;gap:14px;background:linear-gradient(135deg,#eaf7ef,#f6fbf8);border:1px solid #d7ecdf;border-radius:18px;padding:12px 16px}
.m1-tree{flex:none;width:150px}
.m1-tree svg{width:150px;height:auto;display:block}
.m1-tree.grow svg{animation:m1grow .7s cubic-bezier(.2,1.4,.4,1)}
.m1-side{flex:1;min-width:0}
.m1-cnt{font-size:14px;font-weight:800;color:var(--tx2)}
.m1-cnt b{font-size:38px;font-weight:900;color:var(--tx);letter-spacing:-1.5px;margin-right:2px}
.m1-cnt s{text-decoration:none;font-size:13px;font-weight:800;color:var(--tx3);margin-left:7px}
.m1-tot{margin-top:8px;font-size:12px;font-weight:800;color:var(--tx3)}
.m1-pkh{text-align:center;font-size:22px;font-weight:900;letter-spacing:-.6px;margin:8px 0 2px}
.m1-pkh s{display:block;text-decoration:none;font-size:12.5px;font-weight:700;color:var(--tx3);margin-top:5px;line-height:1.6}
.m1-pks{text-align:center;font-size:14.5px;font-weight:800;color:var(--tx2);margin:16px 0 10px}
.m1-pk{background:var(--card);border:1.5px solid var(--line);border-radius:18px;padding:16px;margin-bottom:12px}
.m1-pk .pt{font-size:19px;font-weight:900;letter-spacing:-.5px}
.m1-pk{cursor:pointer;transition:border-color .15s,background .15s}
.m1-pk.on{border-color:#1f9d5c;background:var(--goodbg)}
.m1-pk .ph{font-size:14px;font-weight:800;color:#1f9d5c;margin-top:5px;line-height:1.5}
.pa-s{display:block;text-decoration:none;font-size:12px;font-weight:700;color:var(--tx3);margin-top:6px}
.m1-trs{display:flex;gap:7px;margin-bottom:12px}
.m1-tr{flex:1;border:1.5px solid var(--line);background:var(--card);border-radius:14px;padding:6px 2px 8px;cursor:pointer;font-family:inherit;text-align:center}
.m1-tr.on{border-color:#1f9d5c;background:var(--goodbg)}
.m1-tr svg{width:100%;height:auto;display:block}
.m1-tr s{display:block;text-decoration:none;font-size:11.5px;font-weight:800;color:var(--tx2);margin-top:-6px}
.m1-wd{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:10px}
.m1-wd button{flex:1;min-width:38px;border:1.5px solid var(--line);background:var(--card);color:var(--tx2);font-weight:800;font-size:14px;border-radius:12px;padding:10px 4px;cursor:pointer;font-family:inherit}
.m1-wd button.on{border-color:#1f9d5c;background:#1f9d5c;color:#fff}
.m1-pk .po{margin-top:10px;font-size:12.5px;font-weight:800;color:var(--tx3);background:var(--card2);border-radius:10px;padding:8px 11px}
.m1-pkf{text-align:center;font-size:12px;font-weight:700;color:var(--tx3);line-height:1.6;margin:4px 0 10px}
.m1-pk .pt em{display:block;font-style:normal;font-size:13px;font-weight:800;color:#1f9d5c;letter-spacing:-.2px;margin-top:3px}
/* 알림 시각 — 원장님 : 「몇 시 몇 시 알람이 발송됩니다 이거 명시해놔」 */
.m1-bell{margin:14px 0 10px;padding:11px 13px;border-radius:12px;background:var(--card2);font-size:12.5px;font-weight:700;color:var(--tx2);line-height:1.55;word-break:keep-all}
.m1-bell b{color:#1f9d5c;font-weight:900}
.m1-many{margin-top:12px;text-align:center;background:var(--goodbg);border-radius:14px;padding:11px 14px;font-size:13px;font-weight:800;color:#1f9d5c}
.m1-many b{font-size:15px}
.m1-lv{margin-top:10px;background:#fff8e6;border-radius:14px;padding:12px 14px;font-size:12.5px;font-weight:800;color:#7a5c12;line-height:1.6}
.m1-lv .m1-b2{margin-top:8px}
.m1-back{margin-top:12px;background:#eef6ff;border:1px solid #cfe3fb;border-radius:14px;padding:11px 14px;font-size:13px;font-weight:800;color:#2b6cb0;line-height:1.6}
.m1-stg{font-size:13px;font-weight:700;color:var(--tx2);margin-top:2px}
.m1-stg em{font-style:normal;color:#1f9d5c}
.m1-bar{height:8px;background:#d9ece1;border-radius:99px;overflow:hidden;margin-top:10px}
.m1-bar i{display:block;height:100%;background:linear-gradient(90deg,#34c27a,#0f9d8c);border-radius:99px;transition:width .8s}
.m1-round{display:inline-block;margin-top:8px;font-size:12px;font-weight:800;color:#8a5a12;background:#fff3d6;border-radius:99px;padding:2px 10px}
.m1-card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:17px 16px;margin-top:12px}
.m1-ct{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:12px}
.m1-ct span{font-size:17px;font-weight:900;letter-spacing:-.4px}
.m1-ct em{font-style:normal;font-size:12.5px;font-weight:700;color:var(--tx3);white-space:nowrap}
.m1-tabs{display:flex;gap:6px;margin:-2px 0 12px}
.m1-tabs button{flex:1;border:1.5px solid var(--line);background:var(--card);color:var(--tx2);font-weight:800;font-size:13.5px;border-radius:12px;padding:8px 6px;cursor:pointer;font-family:inherit}
.m1-tabs button.on{border-color:#1f9d5c;background:var(--goodbg);color:#1f9d5c}
.m1-tabs button s{text-decoration:none;display:block;font-size:11px;font-weight:600;color:var(--tx3)}
.m1-mhead{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}
.m1-cat{display:inline-flex;align-items:center;gap:5px;font-size:13px;font-weight:900;color:#fff;background:var(--c);border-radius:99px;padding:4px 11px}
.m1-no{font-size:12px;font-weight:800;color:var(--tx3);white-space:nowrap}
.m1-mt{font-size:21px;font-weight:900;letter-spacing:-.6px;line-height:1.35}
.m1-sub{font-size:12.5px;font-weight:800;color:var(--tx3);margin:14px 0 6px}
.m1-steps{list-style:none;counter-reset:st;display:flex;flex-direction:column;gap:8px;margin:0;padding:0}
.m1-steps li{counter-increment:st;position:relative;padding:11px 12px 11px 42px;background:#fbfcfd;border:1px solid var(--line);border-radius:14px;font-size:14.5px;font-weight:700;line-height:1.55}
.m1-steps li::before{content:counter(st);position:absolute;left:12px;top:11px;width:22px;height:22px;border-radius:50%;background:var(--c);color:#fff;
  font-size:12px;font-weight:900;display:flex;align-items:center;justify-content:center}
/* 왜 하나요 — 숙제가 아니라 성장훈련 (원장님) */
.m1-why{margin-top:9px;font-size:14px;font-weight:700;line-height:1.55;color:var(--tx2);background:var(--card2,#f3f6f4);border-left:3px solid var(--ac);border-radius:9px;padding:8px 12px}
.m1-why b{color:var(--ac);font-weight:900;margin-right:7px}
.m1-allm .m1-why{font-size:12.5px;padding:6px 10px;margin-top:6px}
/* 예) 한 줄 — 실제로 적을 것 · 말할 것 (원장님 : 「좀 더 구체적으로 · 너무 길면 안 되니까」) */
.m1-ex{margin-top:9px;font-size:13px;font-weight:700;line-height:1.55;color:var(--tx);background:var(--card2,#f3f6f4);border:1px dashed var(--line);border-radius:9px;padding:8px 11px}
.m1-ex b{color:var(--tx3);font-weight:900;margin-right:6px}
.m1-allm .m1-ex{font-size:12px;padding:6px 10px;margin-top:6px}
/* 🎓 100일 수료증 — 늘 밝은 종이 (사진으로 저장해 자랑하는 것이라 어두운 화면에서도 같게) */
.m1-dip{position:relative;margin-top:12px;background:#fffdf6;color:#2b2416;border:2px solid #c9a24a;border-radius:16px;box-shadow:inset 0 0 0 6px #fffdf6,inset 0 0 0 7px #e6cf93;padding:26px 18px 18px;text-align:center}
.m1-dip .dp-demo{position:absolute;top:12px;right:12px;font-size:11px;font-weight:800;color:#a0781e;border:1px solid #e6cf93;border-radius:99px;padding:2px 8px}
.m1-dip .dp-ic{font-size:40px;line-height:1}
.m1-dip .dp-h{font-family:'Gowun Batang',serif;font-size:28px;font-weight:900;letter-spacing:6px;margin-top:6px;color:#6b4f12}
.m1-dip .dp-lv{font-size:15px;font-weight:800;color:#8a6a24;margin-top:6px}
.m1-dip .dp-nm{margin:14px auto 0;min-width:60%;display:inline-block;font-size:24px;font-weight:900;border-bottom:1.5px solid #c9a24a;padding:2px 10px 4px;outline:none}
.m1-dip .dp-nm:empty::before{content:attr(data-ph);font-size:14px;font-weight:700;color:#b9a67a}
.m1-dip .dp-nm.dp-hide::before{content:''}
.m1-dip .dp-txt{font-size:13.5px;font-weight:700;line-height:1.7;color:#4a3f2a;margin-top:12px}
.m1-dip .dp-tree{width:150px;height:150px;margin:10px auto 0;overflow:visible}
.m1-dip .dp-tree svg{width:150px;height:150px;display:block;overflow:visible}
.m1-dip .dp-sub{font-size:12px;font-weight:900;letter-spacing:2px;color:#a0781e;margin-top:14px;border-top:1px dashed #e6cf93;padding-top:12px}
.m1-dip .dp-list{list-style:none;margin:8px 0 0;padding:0;text-align:left}
.m1-dip .dp-list li{display:flex;gap:10px;padding:7px 2px;border-bottom:1px solid #f1e6c8;font-size:13px;line-height:1.5}
.m1-dip .dp-list li b{flex:0 0 84px;font-weight:900;color:#6b4f12}
.m1-dip .dp-list li span{flex:1 1 0;min-width:0;font-weight:700;color:#2b2416}
.m1-dip .dp-acts{list-style:none;margin:8px 0 0;padding:0;text-align:left}
.m1-dip .dp-acts li{padding:8px 2px;border-bottom:1px solid #f1e6c8}
.m1-dip .da-h{display:flex;align-items:baseline;justify-content:space-between;gap:8px;font-size:14px;font-weight:900;color:#2b2416}
.m1-dip .da-h b{font-size:17px;color:#1f9d5c;flex:none}
.m1-dip .da-ex{font-size:11.5px;font-weight:700;color:#8a7a58;margin-top:3px;line-height:1.5}
.m1-dip .dp-piled{margin-top:14px;background:#f3faf5;border:1.5px solid #bfe3cc;border-radius:12px;padding:12px 12px 10px}
.m1-dip .dpp-h{font-size:14px;font-weight:900;color:#1f7a47}
.m1-dip .dpp-l{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 8px;margin-top:8px}
.m1-dip .dpp-l span{background:#fff;border:1px solid #d7ecdf;border-radius:99px;padding:5px 10px;font-size:12.5px;font-weight:800;color:#2b2416}
.m1-dip .dpp-l b{color:#1f9d5c;font-size:14px}
.m1-dip .dpp-s{font-size:11.5px;font-weight:700;color:#5b8a6c;margin-top:8px}
.m1-dip .dp-next{margin-top:12px;font-size:13px;font-weight:800;color:#1f9d5c}
.m1-dip .dp-foot{margin-top:10px;font-size:11.5px;font-weight:700;color:#a38d5e}
/* 졸업 인사 */
.m1-grad{margin-top:10px;text-align:center;border-radius:14px;background:#fff8e6;color:#8a5a00;font-weight:800;font-size:14px;padding:12px 10px;line-height:1.5}
.m1-grad s{display:block;text-decoration:none;font-size:12.5px;color:var(--tx2);margin-top:3px}
.m1-grad-ic{font-size:52px;line-height:1;text-align:center;margin-bottom:8px}
.m1-tip{margin-top:10px;font-size:13px;font-weight:700;color:var(--tx2);background:#fff8e6;border-radius:12px;padding:9px 12px}
.m1-ok{margin-top:10px;font-size:13px;font-weight:800;color:#1f9d5c}
.m1-clr{display:block;width:100%;margin-top:14px;border:0;border-radius:16px;padding:15px 10px;font-size:18px;font-weight:900;color:#fff;cursor:pointer;font-family:inherit;
  background:linear-gradient(135deg,#27b36b,#0f9d8c);box-shadow:0 6px 18px rgba(15,157,140,.25)}
.m1-clr:disabled{opacity:.45;box-shadow:none}
.m1-clr s{display:block;text-decoration:none;font-size:12px;font-weight:700;opacity:.85;margin-top:1px}
.m1-done{margin-top:14px;text-align:center;border-radius:16px;background:var(--goodbg);color:#1f9d5c;font-weight:900;font-size:16.5px;padding:13px 10px}
.m1-done button{border:0;background:none;color:var(--tx3);font-size:12px;font-weight:700;text-decoration:underline;margin-left:6px;cursor:pointer;font-family:inherit}
.m1-next{margin-top:9px;text-align:center;font-size:12.5px;font-weight:700;color:var(--tx3)}
.m1-msg{font-size:12.5px;font-weight:700;color:var(--bad);margin-top:8px}
.m1-off{margin-top:14px;padding:11px 13px;border-radius:12px;background:#fff6e5;border:1px solid #f0dcb4;font-size:13px;font-weight:800;color:#8a6414;line-height:1.5}
.m1-off s{display:block;text-decoration:none;font-size:12px;font-weight:700;color:#a07c2a;margin-top:3px}
.m1-pile{margin-top:14px;padding-top:12px;border-top:1px dashed var(--line);display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.m1-pile s{text-decoration:none;font-size:12px;font-weight:800;color:var(--tx3);width:100%}
.m1-pile b{font-size:12.5px;font-weight:800;color:#1f7a55;background:#e9f7f0;border-radius:999px;padding:5px 10px}
.m1-cells{display:grid;grid-template-columns:repeat(10,1fr);gap:5px}
.m1-cells i{aspect-ratio:1;border-radius:6px;background:#edf2ef;display:flex;align-items:center;justify-content:center;font-style:normal;font-size:10px;line-height:1}
.m1-cells i.f{background:linear-gradient(135deg,#46c586,#16a57a)}
.m1-cells i.ms::after{content:attr(data-ic);opacity:.55}
.m1-cells i.f.ms::after{opacity:1}
.m1-cells i.nw{animation:m1cell .9s cubic-bezier(.2,1.6,.4,1)}
.m1-b2{display:block;width:100%;margin-top:12px;border:1.5px solid var(--line);border-radius:13px;padding:11px 10px;font-size:14px;font-weight:800;color:var(--tx2);background:var(--card);cursor:pointer;font-family:inherit}
.m1-cats{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.m1-stgh{font-size:15px;font-weight:900;margin:20px 2px 8px;color:#1f9d5c}
.m1-allm{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:13px 14px;margin-top:8px}
.m1-allm .m1-mt{font-size:16px}
.m1-allm ol{margin:6px 0 0 18px;font-size:13px;color:var(--tx2);font-weight:600;line-height:1.7}
.m1-allm .m1-tip,.m1-allm .m1-ok{font-size:12px;margin-top:6px}
/* 나무 — 방금 생긴 잎이 톡 */
#m100View .pop{transform-box:fill-box;transform-origin:center;animation:m1pop .9s cubic-bezier(.2,1.6,.4,1) both}
#m100View .spark{transform-box:fill-box;transform-origin:center;animation:m1spark 1.8s ease-in-out infinite}
@keyframes m1pop{0%{transform:scale(0);opacity:0}60%{opacity:1}100%{transform:scale(1)}}
@keyframes m1spark{0%,100%{transform:scale(.6);opacity:.5}50%{transform:scale(1.15);opacity:1}}
@keyframes m1grow{0%{transform:scale(.94)}100%{transform:scale(1)}}
@keyframes m1cell{0%{transform:scale(.2)}100%{transform:scale(1)}}
/* 클리어 축하 */
#m1Yay{position:fixed;inset:0;z-index:99980;display:flex;align-items:center;justify-content:center;background:rgba(243,250,245,.75);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);animation:m1fade .25s}
#m1Yay .yb{text-align:center;animation:m1rise .6s cubic-bezier(.2,1.5,.4,1)}
#m1Yay .y1{font-size:64px;line-height:1}
#m1Yay .y2{font-size:26px;font-weight:900;letter-spacing:-.8px;margin-top:8px;color:#1a1d23}
#m1Yay .y3{font-size:15px;font-weight:800;color:#1f9d5c;margin-top:4px}
#m1Yay .fl{position:absolute;top:-40px;font-size:22px;animation:m1fall linear forwards;pointer-events:none}
@keyframes m1fade{from{opacity:0}to{opacity:1}}
@keyframes m1rise{0%{transform:translateY(24px) scale(.7);opacity:0}100%{transform:none;opacity:1}}
@keyframes m1fall{0%{transform:translateY(0) rotate(0)}100%{transform:translateY(110vh) rotate(540deg)}}
/* 들어올 때 작은 알림 창 — 「허용 안 함 · 허용」 */
#m1Al{position:fixed;inset:0;z-index:99990;background:rgba(0,0,0,.3);display:flex;align-items:center;justify-content:center;padding:24px;animation:m1fade .2s}
#m1Al .pa-box{width:280px;max-width:100%;background:rgba(246,246,248,.97);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-radius:15px;
  overflow:hidden;text-align:center;color:#000;box-shadow:0 12px 40px rgba(0,0,0,.18);font-family:-apple-system,'Apple SD Gothic Neo','Pretendard',system-ui,sans-serif;
  animation:m1alpop .28s cubic-bezier(.2,1.3,.4,1)}
#m1Al .pa-body{padding:20px 17px 17px}
#m1Al .pa-ic{width:46px;height:46px;border-radius:11px;display:block;margin:0 auto 10px}
#m1Al .pa-t{font-size:17px;font-weight:600;line-height:1.3;letter-spacing:-.3px}
#m1Al .pa-d{font-size:13px;line-height:1.45;margin-top:6px;color:#1c1c1e;word-break:keep-all}
#m1Al .pa-steps{list-style:none;margin:12px 0 0;padding:0;text-align:left;display:flex;flex-direction:column;gap:8px}
#m1Al .pa-steps li{display:flex;gap:9px;align-items:flex-start;font-size:13.5px;line-height:1.45;word-break:keep-all}
#m1Al .pa-steps i{flex:none;width:20px;height:20px;border-radius:50%;background:#007aff;color:#fff;font-style:normal;font-size:11.5px;font-weight:700;
  display:flex;align-items:center;justify-content:center;margin-top:1px}
#m1Al .pa-steps s{display:block;text-decoration:none;font-size:11.5px;color:#8e8e93}
#m1Al .pa-steps svg{display:inline-block;vertical-align:-3px}
#m1Al .pa-pv{display:flex;gap:9px;align-items:center;text-align:left;margin:12px 0 0;padding:9px 11px;border-radius:11px;
  background:rgba(255,255,255,.95);box-shadow:0 1px 6px rgba(0,0,0,.09)}
#m1Al .pa-pv i{flex:none;width:26px;height:26px;border-radius:7px;background:url('/icon-180.png') center/cover}
#m1Al .pa-pv b{display:block;font-size:11.5px;font-weight:700;color:#8e8e93;letter-spacing:-.2px}
#m1Al .pa-pv span{display:block;font-size:13px;font-weight:600;color:#1c1c1e;line-height:1.35;margin-top:1px;word-break:keep-all}
#m1Al .pa-s2{font-size:11.5px;color:#8e8e93;margin-top:10px}
#m1Al .pa-btns{display:flex;border-top:.5px solid rgba(60,60,67,.29)}
#m1Al .pa-btns button{flex:1;border:0;background:none;padding:12px 6px;font-size:17px;color:#007aff;cursor:pointer;font-family:inherit;line-height:1.25}
#m1Al .pa-btns button+button{border-left:.5px solid rgba(60,60,67,.29)}
#m1Al .pa-btns .b{font-weight:600}
@keyframes m1alpop{0%{transform:scale(1.12);opacity:0}100%{transform:none;opacity:1}}
#m1Toast{position:fixed;left:50%;top:calc(14px + env(safe-area-inset-top));transform:translateX(-50%);z-index:99991;background:rgba(26,29,35,.93);color:#fff;
  font-size:13.5px;font-weight:800;padding:10px 16px;border-radius:999px;width:max-content;max-width:92vw;text-align:center;box-shadow:0 6px 20px rgba(0,0,0,.2)}
@media(max-width:680px){
  .m1-hero{padding:10px 12px;gap:8px}
  .m1-tree,.m1-tree svg{width:120px}
  .m1-cnt b{font-size:32px}
  .m1-mt{font-size:19px}
}
@media (prefers-reduced-motion:reduce){#m100View .pop,#m100View .spark,.m1-tree.grow svg,.m1-cells i.nw,#m1Yay,#m1Yay .yb,#m1Yay .fl,#m1Al,#m1Al .pa-box{animation:none!important}}

/* ⚙️ 설정 › 🔔 알림 (js/m100.js m1PaintCfgPush) */
.cfg-push{display:flex;flex-direction:column;gap:8px;max-width:460px}
.cfg-push .cp-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;border:1px solid var(--line);border-radius:11px;background:var(--card)}
.cfg-push .cp-tx{display:flex;flex-direction:column;gap:2px;min-width:0}
.cfg-push .cp-tx b{font-size:14px;font-weight:800;color:var(--tx)}
.cfg-push .cp-tx s{text-decoration:none;font-size:12px;font-weight:600;color:var(--tx3);line-height:1.4;word-break:keep-all}
.cfg-push .cp-btn{flex:none;padding:7px 14px;border-radius:9px;font-size:13px;font-weight:800;cursor:pointer;font-family:inherit;border:1px solid var(--line);background:var(--card);color:var(--tx2)}
.cfg-push .cp-btn.on{border-color:var(--ac);background:var(--ac);color:#fff}
.cfg-push .cp-btn:disabled{opacity:.5;cursor:default}
.cfg-push .cp-ok{flex:none;font-size:13px;font-weight:800;color:#1f9d5c}
.cfg-push .cp-note{font-size:12.5px;font-weight:600;color:var(--tx2);line-height:1.65;word-break:keep-all}
.cfg-push .cp-note svg{vertical-align:-3px}
.cfg-push .cp-msg{font-size:12px;font-weight:700;color:var(--ac);min-height:0}

/* 수익계산 묶어보기 + 달 상자 — 컴퓨터에선 없는 셈 (폰에서만 한 줄로 · css/mobile.css) */
#cvBar{display:contents}

/* 폰이 공유 창을 막았을 때 — 「한 번 더 누르면 보내져요」 단추를 눈에 띄게 (js/sample.js capReadyBtn) */
#capBtn.cap-again{animation:capAgain 1s ease-in-out infinite;box-shadow:0 0 0 0 rgba(31,157,122,.55)}
@keyframes capAgain{0%,100%{transform:scale(1);box-shadow:0 0 0 0 rgba(31,157,122,.55)}50%{transform:scale(1.07);box-shadow:0 0 0 10px rgba(31,157,122,0)}}