:root{--bg:#f6f7f9;--card:#fff;--ink:#1d2433;--muted:#6b7385;--line:#e3e6ec;--pri:#2457d6;--ok:#11845b;--bad:#c53030;--warn:#b7791f;--dr:#2457d6;--cr:#c2410c}
*{box-sizing:border-box}
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;background:var(--bg);color:var(--ink);font-size:15px;line-height:1.5}
.top{display:flex;flex-wrap:wrap;gap:8px;justify-content:space-between;align-items:center;padding:12px 16px;background:#fff;border-bottom:1px solid var(--line)}
.brand h1{margin:0;font-size:20px}.sub{margin:0;color:var(--muted);font-size:13px}
.acct{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:13px}#acctStatus{color:var(--muted)}
.tabs{display:flex;gap:4px;padding:8px 16px 0;background:#fff;border-bottom:1px solid var(--line);overflow-x:auto}
.tab{border:0;background:none;padding:10px 14px;font-size:15px;color:var(--muted);border-bottom:3px solid transparent;cursor:pointer;white-space:nowrap}
.tab.active{color:var(--pri);border-color:var(--pri);font-weight:700}
main{max-width:1180px;margin:0 auto;padding:12px}
.panel{display:none}.panel.active{display:block}
.grid2{display:grid;grid-template-columns:320px 1fr;gap:12px}
@media(max-width:860px){.grid2{grid-template-columns:1fr}}
#t2 .grid2{grid-template-columns:1fr 1fr}@media(max-width:860px){#t2 .grid2{grid-template-columns:1fr}}
.card{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:14px;margin-bottom:12px}
.card h2{font-size:16px;margin:0 0 10px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}.card h2 small{color:var(--muted);font-weight:400}
button{font:inherit;border-radius:8px;padding:7px 12px;cursor:pointer;border:1px solid var(--line);background:#fff;color:var(--ink)}
button.primary{background:var(--pri);border-color:var(--pri);color:#fff;font-weight:700}
button.danger{color:var(--bad)}button.wide{width:100%;margin-top:8px}
.filebtn{display:inline-block;border:1px solid var(--line);border-radius:8px;padding:7px 12px;cursor:pointer;background:#fff}.filebtn input{display:none}
.hidden{display:none!important}
.scenarios{list-style:none;padding:0;margin:0;max-height:520px;overflow:auto}
.scenarios li{padding:8px 10px;border-radius:8px;cursor:pointer;display:flex;gap:8px;align-items:center}
.scenarios li:hover{background:#f0f3fa}.scenarios li.cur{background:#e8eefc;font-weight:700}
.scenarios .st{width:20px;text-align:center}
.qhead{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.pill{background:#eef1f6;border-radius:999px;padding:2px 10px;font-size:13px;color:var(--muted)}
.qtext{font-size:17px;margin:10px 0 14px;padding:12px;background:#f8fafc;border-left:4px solid var(--pri);border-radius:6px}
.freehead{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:10px}.freehead .grow{flex:1;min-width:200px}.freehead input{width:100%}
input,select{font:inherit;padding:7px 8px;border:1px solid var(--line);border-radius:8px;background:#fff;max-width:100%}
table{border-collapse:collapse;width:100%}th,td{padding:7px 8px;border-bottom:1px solid var(--line);text-align:left;vertical-align:middle}
th{font-size:13px;color:var(--muted);font-weight:600;background:#fafbfc}.num{text-align:right;font-variant-numeric:tabular-nums}
table.entry select.side{width:76px}table.entry select.acc{width:100%;min-width:150px}table.entry input.amt{width:140px;text-align:right}
@media(max-width:560px){table.entry input.amt{width:100px}table.entry select.acc{min-width:110px}}
.dr{color:var(--dr);font-weight:700}.cr{color:var(--cr);font-weight:700}
.entrytools{display:flex;justify-content:space-between;align-items:center;margin:8px 0;flex-wrap:wrap;gap:8px}
.sum{font-size:13px}.sum.okc{color:var(--ok)}.sum.badc{color:var(--bad)}
.actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.feedback{margin-top:12px;padding:12px;border-radius:8px;font-size:14px}.feedback.good{background:#e9f8f1;border:1px solid #b7e4cf}.feedback.bad{background:#fdecec;border:1px solid #f5c2c2}.feedback.info{background:#eef3fd;border:1px solid #c9d7f7}
.feedback ul{margin:6px 0 0;padding-left:18px}
details{margin-top:10px}summary{cursor:pointer;color:var(--muted)}.row{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-top:8px}
.mini td,.mini th{font-size:13px;padding:5px 8px}.muted{color:var(--muted)}.small{font-size:13px}.err{color:var(--bad);min-height:1.2em}
.tablewrap{overflow-x:auto}
.journal td{font-size:14px}.journal tr.grp td{border-bottom:0}.journal tr.sep td{border-bottom:2px solid var(--line)}
.banner{padding:10px 14px;border-radius:8px;margin-bottom:12px;background:#e9f8f1;border:1px solid #b7e4cf}.banner.badb{background:#fdecec;border-color:#f5c2c2}.banner.warn{background:#fff8e6;border-color:#f3dca2}
.fs td{padding:5px 8px}.fs .h td{font-weight:700;background:#fafbfc}.fs .t td{font-weight:700;border-top:2px solid var(--ink)}.fs .ind td:first-child{padding-left:22px}
.calcout{font-size:16px}
dialog{border:1px solid var(--line);border-radius:12px;max-width:420px;width:92vw}dialog label{display:block;margin:8px 0}dialog input{width:100%}
.foot{max-width:1180px;margin:0 auto;padding:8px 16px 30px;color:var(--muted);font-size:12px}

/* ===== 표 줄바꿈 방지 + 검색·접기·기간 (2026-11-03) ===== */
.tablewrap th,.tablewrap td{white-space:nowrap}
.acccell{display:flex;flex-direction:column;gap:4px}
.accqrow{display:flex;gap:6px;align-items:center}.accqrow input{flex:1;min-width:0;font-size:13px;padding:5px 8px}
.acchint{font-size:12px;min-width:28px}
details.fold{margin:0 0 10px}details.fold>summary{padding:6px 2px;color:var(--ink);font-size:15px}
details.fold>summary small{color:var(--muted);font-weight:400}
.genbar{display:flex;gap:6px;margin:6px 0}.genbar button{flex:1}
.periodbar{display:flex;gap:12px;align-items:center;flex-wrap:wrap;padding:10px 14px}
.monthsel{font-size:14px;padding:5px 8px}
.card h2 .monthsel{margin-left:auto}

/* ===== 만화로 배우기 ===== */
.guide .steps{margin:0;padding-left:0;list-style:none;counter-reset:st;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:8px}
.guide .steps li{counter-increment:st;background:#f8fafc;border:1px solid var(--line);border-radius:8px;padding:10px 10px 10px 44px;position:relative}
.guide .steps li::before{content:counter(st);position:absolute;left:10px;top:10px;width:24px;height:24px;border-radius:50%;background:var(--pri);color:#fff;font-weight:700;display:flex;align-items:center;justify-content:center;font-size:13px}
.guide .steps li>b{display:block}.guide .steps span{font-size:14px;color:#374151}.guide .steps span b{display:inline}
.eplist{display:flex;gap:6px;overflow-x:auto;margin:0 0 12px;padding-bottom:4px}
.epchip{white-space:nowrap;text-decoration:none;color:var(--pri);background:#fff;border:1px solid #c9d7f7;border-radius:999px;padding:6px 12px;font-size:14px}
.episode h2{font-size:18px}.epno{background:var(--pri);color:#fff;border-radius:6px;padding:1px 8px;font-size:14px}
.comic{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media(max-width:640px){.comic{grid-template-columns:1fr}}
.cpanel{border:3px solid #1f2937;border-radius:10px;padding:12px;background:#fffdf7;min-height:170px;display:flex;flex-direction:column;justify-content:center;gap:10px}
.crow{display:flex;align-items:flex-end;gap:8px}.crow.ssam{flex-direction:row-reverse}
.cface{display:flex;flex-direction:column;align-items:center;flex:0 0 auto}
.chr{width:96px;height:120px;filter:drop-shadow(0 2px 2px rgba(0,0,0,.12))}
@media(max-width:640px){.chr{width:84px;height:105px}}.cname{font-size:12px;color:var(--muted);font-weight:700}
.bubble{position:relative;background:#fff;border:2px solid #1f2937;border-radius:16px;padding:10px 12px;font-size:15px;line-height:1.55;flex:1}
.crow.moi .bubble::before{content:'';position:absolute;left:-11px;bottom:22px;border:9px solid transparent;border-right-color:#1f2937;border-left:0}
.crow.ssam .bubble::before{content:'';position:absolute;right:-11px;bottom:22px;border:9px solid transparent;border-left-color:#1f2937;border-right:0}
.crow.moi .bubble{background:#fff7ed}.crow.ssam .bubble{background:#eef3fd}
.board{background:#14532d;color:#f0fdf4;border-color:#0f3d21}
.btitle{font-weight:700;font-size:15px;color:#fde68a}
.taccount{display:grid;grid-template-columns:1fr 1fr;border-top:2px solid #f0fdf4}
.tside{padding:6px 8px}.tside:first-child{border-right:2px solid #f0fdf4}
.th{font-size:13px;font-weight:700;margin-bottom:4px}.th.dr{color:#93c5fd}.th.cr{color:#fdba74}
.tl{display:flex;justify-content:space-between;gap:6px;font-size:14px;padding:2px 0}.tl b{font-variant-numeric:tabular-nums}
.blines{margin:0;padding-left:18px;font-size:15px;line-height:1.7}.bcap{font-size:14px;color:#dcfce7;border-top:1px dashed #86efac;padding-top:8px}
.board b{color:#fef08a}

/* ===== 글 페이지 (guide/journal/accounts) ===== */
.docnav{display:flex;gap:12px;flex-wrap:wrap;font-size:14px;margin-top:4px}.docnav a{color:var(--pri);text-decoration:none}
.brandlink{color:inherit;text-decoration:none}.sitename{margin:0;font-size:20px}
.docmain{max-width:900px;margin:0 auto;padding:12px}
.docmain h1{font-size:22px;margin:6px 0 10px}.docmain .card h2{margin-top:14px}.docmain article.card h2:first-of-type{margin-top:4px}
.lead{font-size:16px;color:#374151}
.crumb{font-size:13px;color:var(--muted);margin:4px 0 8px}.crumb a{color:var(--muted)}
.btn{display:inline-block;text-decoration:none;border:1px solid var(--line);border-radius:8px;padding:8px 14px;color:var(--ink);background:#fff}
.btn.primary{background:var(--pri);border-color:var(--pri);color:#fff;font-weight:700}
.jlinks{columns:2;gap:16px;padding-left:18px;margin:0}.jlinks li{margin:4px 0;break-inside:avoid}
@media(max-width:640px){.jlinks{columns:1}}
.eplinks{padding-left:20px}.eplinks li{margin:6px 0}
.jtable .tot td{font-weight:700;border-top:2px solid var(--ink)}
.accnotes{padding-left:18px}.accnotes li{margin:4px 0}
.pager{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;margin:8px 0 16px}.pager a{color:var(--pri)}
.foot a{color:var(--muted)}
.pill{display:inline-block}

/* ===== 공유 버튼 ===== */
.sharebar{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px;padding-top:12px;border-top:1px dashed var(--line)}
.sbtn{font-size:13px;padding:6px 10px;border-radius:999px;border:1px solid var(--line);background:#fff;cursor:pointer}
.sbtn.native{background:var(--pri);color:#fff;border-color:var(--pri);font-weight:700}
.sbtn.kakao{background:#fee500;border-color:#fee500;color:#191919;font-weight:700}
.sbtn.naver{color:#03a94d;border-color:#b7ebcc}.sbtn.band{color:#16a34a}.sbtn.x{color:#111}.sbtn.fb{color:#1877f2;border-color:#c7dbfb}
.sbtn.img{background:#fdf2f8;border-color:#fbcfe8;color:#be185d;font-weight:700}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(20px);background:#1f2937;color:#fff;padding:10px 16px;border-radius:999px;font-size:14px;opacity:0;pointer-events:none;transition:all .25s;z-index:99;max-width:90vw;text-align:center}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ===== 모바일 (2026-11-03) ===== */
html,body{overflow-x:hidden}
img{max-width:100%}
.grid2>*{min-width:0} /* 그리드 안 표가 화면 밖으로 밀어내지 않도록 */
.tablewrap{-webkit-overflow-scrolling:touch}
@media(max-width:640px){
  body{font-size:15px}
  input,select,button{font-size:16px} /* iOS 입력 시 자동 확대 방지 */
  .top{padding:10px 12px}
  .brand h1{font-size:18px}
  .acct{width:100%;gap:6px}
  #acctStatus{width:100%;font-size:12px}
  .acct button,.acct .filebtn{flex:1;padding:8px 6px;font-size:14px;text-align:center}
  .tabs{padding:6px 8px 0}.tab{padding:9px 10px;font-size:14px}
  main{padding:8px}
  .card{padding:12px;border-radius:8px}
  .scenarios{max-height:210px}
  .qtext{font-size:16px;padding:10px}
  /* 분개 입력표 → 줄마다 카드 형태: [차대][금액][✕] / [계정(전체폭)] */
  table.entry thead{display:none}
  table.entry,table.entry tbody{display:block;width:100%}
  table.entry tr{display:grid;grid-template-columns:84px 1fr 40px;grid-template-areas:"side amt del" "acc acc acc";gap:6px;padding:8px;margin-bottom:8px;border:1px solid var(--line);border-radius:8px;background:#fafbfc}
  table.entry tr[data-side="D"]{border-left:4px solid var(--dr)}
  table.entry tr[data-side="C"]{border-left:4px solid var(--cr)}
  table.entry td{display:block;padding:0;border:0}
  table.entry td:nth-child(1){grid-area:side}
  table.entry td:nth-child(2){grid-area:acc}
  table.entry td:nth-child(3){grid-area:amt}
  table.entry td:nth-child(4){grid-area:del}
  table.entry select.side,table.entry select.acc,table.entry input.amt{width:100%;min-width:0}
  table.entry td:nth-child(4) button{width:100%;padding:8px 0}
  .entrytools{flex-direction:column;align-items:stretch}
  .sum{text-align:center}
  .actions button{flex:1 1 45%}
  .row label{width:100%}.row input[type=text]{width:100%}
  th,td{padding:6px 6px}
  .journal td,.journal th{font-size:13px;white-space:nowrap}
  .fs td{font-size:14px}
  .banner{font-size:13px}
  #t2 .card h2 select{width:100%}
  .accqrow input{font-size:16px}
  .card h2 .monthsel{margin-left:0;width:100%}
  .periodbar label,.periodbar select{width:100%}
  .fs td:first-child{white-space:normal}
}
