/* 가계부 가져오기 (W61 ④ 엑셀 · CSV · ⑤ 문자 붙여넣기) — 값은 시안 W61/s4.py · s5.py 그대로
   PC 모양은 전부 @media (min-width:600px) 안. 폰 모양(600 미만)은 한 줄로 쌓습니다. */

/* ── 둘 다 */
.im-page{--pr:#1A6FD1;--line:#EDF0F3;--fill:#F5F7FA;--t4:#9AA4AE}
.im-card{background:#fff;border:1px solid var(--line);border-radius:22px;padding:14px 16px;min-width:0}
.im-ct{display:flex;align-items:center;gap:8px;margin-bottom:10px;min-height:22px}
.im-ct b{font-size:14.5px;font-weight:700}
.im-ct s{text-decoration:none;font-size:12.5px;color:var(--t3);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.im-cta{height:38px;padding:0 17px;border-radius:19px;background:var(--primary);color:#fff;font-size:13.5px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;gap:6px;white-space:nowrap}
.im-cta:hover{background:#1763BC}
.im-cta:disabled{background:rgba(26,111,209,.35);cursor:default}
.im-ghost{height:36px;padding:0 14px;border-radius:18px;border:1px solid #E3E7EC;background:#fff;font-size:13.5px;font-weight:600;display:inline-flex;align-items:center;gap:6px;color:var(--t2);white-space:nowrap}
.im-ghost:hover{background:var(--fill)}
.im-ghost:disabled{opacity:.45;cursor:default}
.im-ghost.sm{height:30px;padding:0 12px;margin-left:auto;font-size:13px}
.im-hint{font-size:12.5px;line-height:1.55;color:var(--t3)}
.im-warn{margin-top:8px;font-size:12px;color:#8A4A18;background:#FFF4DC;border-radius:10px;padding:8px 10px}
.im-note{font-size:12px;color:var(--t3);display:flex;gap:6px;align-items:flex-start;line-height:1.5;padding:0 4px}
.im-note svg{margin-top:2px}

/* 단계 */
.im-steps{display:flex;gap:8px;margin-bottom:14px}
.im-st{flex:1;min-width:0;height:44px;border-radius:14px;background:var(--fill);display:flex;align-items:center;gap:10px;padding:0 14px;font-size:13.5px;font-weight:600;color:var(--t3);white-space:nowrap}
.im-st i{width:24px;height:24px;border-radius:50%;background:#fff;border:1.5px solid #D5DAE0;display:flex;align-items:center;justify-content:center;font-style:normal;font-size:12px;font-weight:700;flex:none}
.im-st.ok{color:var(--ink)}.im-st.ok i{background:var(--green,#0FA958);border-color:#0FA958}
.im-st.on{background:var(--ink);color:#fff}.im-st.on i{background:#fff;color:var(--ink);border-color:#fff}

/* 올린 파일 */
.im-flist{overflow-y:auto;min-height:0}
.im-f{display:flex;align-items:center;gap:11px;padding:10px 6px;margin:0 -6px;border-bottom:1px solid var(--line);border-radius:10px;cursor:pointer}
.im-f:last-child{border-bottom:0}
.im-f.on{background:var(--fill)}
.im-f em{width:36px;height:36px;border-radius:10px;background:#E8F5EE;display:flex;align-items:center;justify-content:center;flex:none}
.im-f.bad em{background:#FFF4DC}
.im-f div{flex:1;min-width:0}
.im-f b{display:block;font-size:13.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.im-f span{display:block;font-size:11.5px;color:var(--t3);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.im-f.bad span{color:#8A4A18}
.im-x{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex:none}
.im-x:hover{background:#EEF1F5}
.im-drop{width:100%;margin-top:8px;border:1.5px dashed #BFD3EC;background:#F5F9FE;border-radius:14px;padding:12px;display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--t2);line-height:1.5;text-align:left}
.im-drop:hover{background:#EDF4FD;border-color:#9BBCE6}
.im-drop svg{flex:none}
.im-drop.big{padding:22px 16px}

/* 칸 맞추기 */
.im-r{display:grid;grid-template-columns:62px minmax(0,1fr);align-items:center;gap:8px;height:36px;font-size:13px}
.im-r>span:first-child{color:var(--t3)}
.im-sel{position:relative;display:block;min-width:0}
.im-sel select{appearance:none;-webkit-appearance:none;width:100%;height:30px;border:0;border-radius:10px;background:var(--fill);padding:0 28px 0 10px;font:inherit;font-weight:600;font-size:12.5px;color:var(--ink);cursor:pointer;text-overflow:ellipsis}
.im-sel select:hover{background:#EEF1F5}
.im-sel svg{position:absolute;right:9px;top:50%;transform:translateY(-50%);pointer-events:none}

/* 달마다 지출 */
.im-chart{display:flex;flex-direction:column}
.im-mb{flex:1;display:flex;align-items:stretch;gap:5px;min-height:90px;margin-top:10px}
.im-mb div{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:4px;font-size:10.5px;color:var(--t3);cursor:default}
.im-mb i{width:100%;border-radius:5px 5px 2px 2px;background:#C9DCF3;max-height:calc(100% - 18px)}
.im-mb div.hi i{background:var(--pr)}
.im-mb div.hi span{color:var(--ink);font-weight:700}

/* 표 카드 */
.im-tb{display:flex;flex-direction:column;padding:14px 0 0;min-height:0}
.im-tb>.im-ct{padding:0 18px}
.im-tb>.im-ct b{font-size:16px}
.im-flt{display:flex;gap:6px;padding:0 18px 10px;flex-wrap:wrap}
.im-flt button{height:30px;padding:0 12px;border-radius:15px;background:var(--fill);font-size:12.5px;font-weight:600;color:var(--t2);display:flex;align-items:center;gap:5px;white-space:nowrap}
.im-flt button:hover{background:#EDF0F4}
.im-flt button.on{background:var(--ink);color:#fff}
.im-flt button s{text-decoration:none;opacity:.6;font-variant-numeric:tabular-nums}
.im-tbw{min-height:0;overflow:auto}
.im-tb table{width:100%;border-collapse:collapse;font-size:13px;table-layout:auto}
.im-tb th{font-size:12px;color:var(--t3);font-weight:600;text-align:left;padding:8px 10px;background:var(--fill);border-top:1px solid var(--line);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:1;white-space:nowrap}
.im-tb td{padding:0 10px;height:40px;border-bottom:1px solid var(--line);white-space:nowrap}
.im-tb th:first-child,.im-tb td:first-child{padding-left:18px;width:38px}
.im-tb th:last-child,.im-tb td:last-child{padding-right:18px;text-align:right}
.im-tb td.m{font-weight:700;font-variant-numeric:tabular-nums}
.im-tb td.m.in{color:var(--green,#0FA958)}
.im-tb td.dt{font-variant-numeric:tabular-nums}
.im-tb td.sh{max-width:0;width:34%;overflow:hidden;text-overflow:ellipsis}
.im-shc{display:flex;align-items:center;min-width:0}
.im-shc .im-nm{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.im-shc .tag{flex:none}
.im-tb td.py{max-width:180px;overflow:hidden;text-overflow:ellipsis}
.im-tb tbody tr{cursor:pointer}
.im-tb tbody tr:hover td{background:#FAFBFC}
.im-tb tr.off td{color:var(--t4)}
.im-tb tr.off .im-cc{opacity:.75}
.im-tb tr.sel td,.im-tb tr.sel:hover td{background:#F2F7FD}
.im-tb .tag{margin-left:6px;height:20px;padding:0 7px;border-radius:10px;background:var(--fill);color:var(--t3);font-size:11px;font-weight:700;display:inline-flex;align-items:center;vertical-align:1px}
.im-tb .tag.warn{background:#FFF4DC;color:#8A4A18}
.im-tb tr.bad td{color:var(--t4);cursor:default}
.im-tb .mc{display:none}
.im-tb tr.more td{text-align:center!important;padding:0}
.im-more{height:40px;width:100%;font-size:12.5px;font-weight:600;color:var(--pr)}
.im-none{padding:28px 18px;text-align:center;font-size:12.5px;color:var(--t3)}
.im-cb{width:18px;height:18px;border-radius:6px;background:#fff;border:1.6px solid #D5DAE0;display:flex;align-items:center;justify-content:center;padding:0;flex:none}
.im-cb.on{background:var(--pr);border-color:var(--pr)}
.im-cb.no{background:#fff;opacity:.6}
.im-cc{display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 9px;border-radius:12px;font-size:12px;font-weight:600;white-space:nowrap}
.im-cc.none{border:1.5px dashed #F0B45A;color:#8A4A18;background:#FFF8EC}
button.im-cc:hover{filter:brightness(.97)}
.im-foot{margin-top:auto;display:flex;align-items:center;gap:6px 14px;flex-wrap:wrap;padding:12px 18px;border-top:1px solid var(--line);font-size:13px;color:var(--t2)}
.im-foot b{color:var(--ink);font-variant-numeric:tabular-nums;margin-left:6px}
.im-foot b.g{color:var(--green,#0FA958)}

/* 빈 표 */
.im-big{flex:1;margin:4px 18px 18px;border:1.5px dashed #BFD3EC;background:#F5F9FE;border-radius:18px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:28px 16px;text-align:center;min-height:220px}
.im-big:not(.stay):hover{background:#EDF4FD}
.im-big b{font-size:15px;font-weight:700;margin-top:6px}
.im-big span{font-size:12.5px;color:var(--t3)}
.im-big em{margin-top:10px;font-style:normal;height:38px;padding:0 17px;border-radius:19px;background:var(--pr);color:#fff;font-size:13.5px;font-weight:700;display:inline-flex;align-items:center;gap:6px}
.im-big.stay{border-style:solid;border-color:var(--line);background:var(--fill)}

/* 분류 고르기 작은 판 */
.im-pop{position:fixed;z-index:60;width:280px;background:#fff;border-radius:16px;padding:12px;box-shadow:0 12px 32px rgba(20,40,70,.16);border:1px solid #EDF0F3}
.im-pop>b{display:block;font-size:13px;font-weight:700;margin:0 2px 10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.im-pop>div{display:flex;flex-wrap:wrap;gap:6px}
.im-pop .im-cc{height:28px;padding:0 11px;font-size:12.5px}

/* 끌어다 놓는 동안 (시안 S6 .dropov) */
.im-body{position:relative}
.im-body.busy{opacity:.6;pointer-events:none}
.im-dropov{position:absolute;inset:0;z-index:20;border-radius:20px;background:rgba(236,244,253,.92);border:2px dashed #1A6FD1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;backdrop-filter:blur(2px);pointer-events:none}
.im-dropov i{width:56px;height:56px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 14px rgba(26,111,209,.18)}
.im-dropov b{font-size:18px;font-weight:700;color:var(--pr)}
.im-dropov span{font-size:13px;color:var(--t2)}

/* 문자 붙여넣기 — 왼쪽 */
.im-ta-card{display:flex;flex-direction:column}
.im-paper{flex:1;min-height:0;display:block;width:100%;border:0;outline:0;border-radius:14px;background:var(--fill);padding:14px 16px;font:inherit;font-size:13px;line-height:1.75;color:var(--t2);overflow:auto;resize:none;cursor:text}
.im-paper:focus-visible{box-shadow:inset 0 0 0 2px rgba(26,111,209,.35)}
textarea.im-paper{color:var(--ink)}
textarea.im-paper::placeholder{color:var(--t4)}
.im-paper p{margin-bottom:12px;padding-left:12px;border-left:3px solid #C9DCF3;cursor:pointer;word-break:break-all}
.im-paper p.bad{border-color:#F0B45A}
.im-paper p.on{background:#E6F0FB;border-color:#1A6FD1;border-radius:0 8px 8px 0;padding:6px 10px 6px 12px;color:#22282F}
.im-paper .cur{display:inline-block;width:2px;height:16px;background:var(--pr);vertical-align:-3px;animation:im-blink 1.1s steps(1) infinite}
@keyframes im-blink{50%{opacity:0}}
.im-ta-card .im-drop{margin-top:12px}

/* 문자 붙여넣기 — 고른 줄 고치기 */
.im-ed{margin:14px 18px 0;padding:14px 16px;border-radius:16px;background:var(--fill);flex:none}
.im-eh{display:flex;align-items:center;gap:8px;margin-bottom:10px;min-width:0}
.im-eh b{font-size:14px;font-weight:700;white-space:nowrap}
.im-eh s{text-decoration:none;font-size:12px;color:var(--t3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.im-eg{display:grid;grid-template-columns:1.35fr 1fr .9fr 1.3fr;gap:8px}
.im-eg label{font-size:11.5px;color:var(--t3);display:flex;flex-direction:column;gap:5px;min-width:0}
.im-eg input,.im-emm input{height:36px;border-radius:11px;background:#fff;border:1px solid #E3E7EC;padding:0 11px;font:inherit;font-size:13px;color:var(--ink);font-weight:500;width:100%;min-width:0;outline:0}
.im-eg input:focus,.im-emm input:focus{border-color:var(--pr)}
.im-eg .im-sel select{height:36px;border-radius:11px;background:#fff;border:1px solid #E3E7EC;font-weight:500;font-size:13px;padding-left:11px}
.im-ecs{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.im-ecs .im-cc{height:28px;padding:0 11px;font-size:12.5px}
.im-emm{display:grid;grid-template-columns:40px 1fr;align-items:center;gap:8px;margin-top:10px;font-size:11.5px;color:var(--t3)}

/* 엑셀로 내보내기 판 */
.im-ex{padding:20px 22px 22px;--fill:#F5F7FA}
.im-exh{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.im-exh b{font-size:17px;font-weight:700}
.im-exx{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-right:-6px}
.im-exx:hover{background:#F5F7FA}
.im-exs{font-size:12px;color:var(--t3);font-weight:600;margin-bottom:8px}
.im-ex .im-flt{padding:0 0 12px}
.im-ex .im-flt button{height:34px;padding:0 15px;border-radius:17px;font-size:13.5px}
.im-exd{display:flex;align-items:center;gap:8px;margin-bottom:12px}
.im-exd[hidden]{display:none}
.im-exd input{flex:1;min-width:0;height:38px;border-radius:11px;border:1px solid #E3E7EC;padding:0 10px;font:inherit;font-size:13.5px;color:var(--ink)}
.im-exd span{color:var(--t3)}
.im-exn{font-size:13.5px;color:var(--t2);padding:12px 14px;border-radius:12px;background:#F5F7FA}
.im-exn b{color:var(--ink)}
.im-exl{margin-top:8px;font-size:11.5px;color:var(--t3);line-height:1.5}
.im-exb{display:flex;gap:8px;justify-content:flex-end;margin-top:18px}

/* ══ PC (시안 1246 × 952) ══ */
@media (min-width:600px){
  .im-bar{display:none}
  .im-page{height:100%;min-height:600px;flex-wrap:wrap}
  .im-seg a{gap:6px}
  .im-seg a svg{margin:0}
  .im-tbar .im-ghost{margin-left:auto}
  .im-tbar .im-ghost+.im-put{margin-left:6px}
  .im-page>.im-body{height:calc(100% - 66px);display:flex;flex-direction:column;min-height:0}
  .im-main{flex:1;min-height:0;display:grid;grid-template-columns:318px minmax(0,1fr);gap:14px}
  .im-main.sms{grid-template-columns:minmax(0,1fr) minmax(0,1.25fr)}
  .im-lp{display:flex;flex-direction:column;gap:12px;min-height:0;overflow-y:auto;scrollbar-width:thin}
  .im-files{display:flex;flex-direction:column;min-height:0;max-height:46%;flex:none}
  .im-map{flex:none}
  .im-chart{flex:1 0 auto;min-height:150px}
  .im-tb{height:100%}
  .im-tbw{flex:0 1 auto}
  .im-tb:not(.im-empty) .im-tbw{flex:1}
  .im-tbw.sm{flex:0 1 auto!important}
  .im-ta-card{height:100%;padding:14px 16px}
  .im-ta-card>.im-ct b{font-size:16px}
  .im-putm{display:none!important}
}
/* 폭이 좁은 PC — 칸을 조금씩 줄입니다 */
@media (min-width:600px) and (max-width:1100px){
  .im-main{grid-template-columns:260px minmax(0,1fr)}
  .im-tb td.py,.im-tb th.py{display:none}
  .im-eg{grid-template-columns:1fr 1fr}
}
@media (min-width:600px) and (max-width:860px){
  .im-main,.im-main.sms{grid-template-columns:minmax(0,1fr);height:auto}
  .im-page>.im-body{height:auto}
  .im-page{height:auto}
  .im-tb{height:auto;min-height:420px}
  .im-ta-card{height:auto;min-height:360px}
}

/* ══ 폰 모양 (600 미만) — 한 줄로 쌓기 ══ */
@media (max-width:599px){
  .im-tbar{display:none}
  .im-bar .sv{margin-right:-8px}
  .im-seg{margin-bottom:12px}
  .im-seg a{display:flex;align-items:center;justify-content:center;gap:5px}
  .im-seg a svg{margin:0}
  .im-seg a.on svg{stroke:#454E57}
  .im-seg a:not(.on) svg{stroke:#707C88}
  .im-steps{display:none}
  .im-main{display:flex;flex-direction:column;gap:10px}
  .im-lp{display:flex;flex-direction:column;gap:10px}
  .im-chart{min-height:170px}
  .im-card{border-radius:18px}
  .im-tb td.ca,.im-tb th.ca,.im-tb td.py,.im-tb th.py{display:none}
  .im-tb .mc{display:block;margin-top:3px}
  .im-tb td.sh{white-space:normal;padding-top:8px;padding-bottom:8px}
  .im-tb td.dt{font-size:12px}
  .im-tb td.sh{width:100%;max-width:0}
  .im-tb td{height:52px;padding:0 6px}
  .im-tb th{padding:8px 6px}
  .im-tb th:first-child,.im-tb td:first-child{padding-left:12px;width:40px}
  .im-tb th:last-child,.im-tb td:last-child{padding-right:12px}
  .im-tbw{overflow:visible}
  .im-tb th{top:-1px}
  .im-foot{border-radius:0 0 18px 18px}
  .im-putm{position:sticky;bottom:12px;width:100%;height:50px;border-radius:16px;font-size:15px;margin-top:12px;box-shadow:0 6px 16px rgba(26,111,209,.3);z-index:3}
  .im-big{min-height:200px}
  .im-note{margin-bottom:4px}
}