/* SoFit 공통: 웹 글꼴 + 통합 머리글(D안) + 리본 탭 스타일 */
@font-face{font-family:'Pretendard';font-weight:45 920;font-style:normal;font-display:swap;src:local('Pretendard'),local('Pretendard Variable'),url(vendor/fonts/PretendardVariable.woff2) format('woff2-variations'),url(vendor/fonts/PretendardVariable.woff2) format('woff2')}
:root{--app:#1d4ed8;--app-soft:#eaf1ff;--app-ink:#1e3a8a}
.sfh{display:flex;align-items:center;gap:8px;height:52px;padding:0 14px 0 16px;background:#fff;border-bottom:1px solid #e8edf3;flex:none;font-family:"Pretendard","Malgun Gothic","Segoe UI",sans-serif;color:#0f172a;position:relative;z-index:60;user-select:none;font-size:13px}
.sfh *{box-sizing:border-box}
.sfh-left{display:flex;align-items:center;gap:8px;min-width:0;flex:1 1 0}
.sfh-brand{display:flex;align-items:center;gap:8px;text-decoration:none;color:#0f172a;font-weight:800;font-size:16px;padding:4px 6px 4px 0;border-radius:8px;flex:none}
.sfh-brand img{width:28px;height:28px;display:block}
.sfh-brand:hover{background:#f8fafc}
.sfh-sep{color:#cbd5e1;font-size:15px;flex:none}
.sfh-link{color:#64748b;text-decoration:none;font-size:13.5px;padding:4px 6px;border-radius:6px;cursor:pointer;white-space:nowrap;flex:none}
.sfh-link:hover{background:#f1f5f9;color:#0f172a}
.sfh-chip{display:flex;align-items:center;gap:7px;background:var(--app-soft);border-radius:8px;padding:4px 6px 4px 6px;min-width:0;flex:0 1 auto}
.sfh-ext{background:var(--app);color:#fff;font-size:10.5px;font-weight:700;border-radius:5px;padding:2px 6px;letter-spacing:.02em;flex:none}
.sfh .sfh-chip input#title{all:unset;box-sizing:border-box;font-family:inherit;font-weight:700;font-size:14.5px;color:var(--app-ink);min-width:60px;width:220px;max-width:36vw;padding:2px 4px;border-radius:5px;cursor:text;user-select:text;border:1px solid transparent}
.sfh .sfh-chip input#title:hover{border-color:color-mix(in srgb,var(--app) 30%,transparent)}
.sfh .sfh-chip input#title:focus{background:#fff;border-color:var(--app)}
.sfh-status{display:flex;align-items:center;gap:4px;color:#64748b;font-size:12.5px;white-space:nowrap;flex:none}
.sfh-status svg{width:15px;height:15px;color:#16a34a}
.sfh-status.warn{color:#b45309}.sfh-status.warn svg{color:#b45309}
.sfh-status.dirty svg{color:#94a3b8}
.sfh-hold{display:none!important}
.sfh-center{flex:none;display:flex;justify-content:center}
.sfh-search{position:relative;width:340px}
.sfh-search>svg{position:absolute;left:11px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:#94a3b8;pointer-events:none}
.sfh-search input{width:100%;height:36px;border:1px solid transparent;background:#f1f5f9;border-radius:10px;padding:0 12px 0 34px;font:inherit;font-size:13.5px;color:#0f172a;outline:none}
.sfh-search input:focus{background:#fff;border-color:var(--app);box-shadow:0 0 0 3px var(--app-soft)}
.sfh-res{position:absolute;left:0;right:0;top:42px;background:#fff;border:1px solid #e2e8f0;border-radius:10px;box-shadow:0 12px 32px rgba(15,23,42,.14);padding:5px;max-height:360px;overflow:auto;display:none;z-index:2000}
.sfh-res.on{display:block}
.sfh-res .it{display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:7px;cursor:pointer;font-size:13px;color:#1e293b}
.sfh-res .it small{margin-left:auto;color:#94a3b8;font-size:11.5px;white-space:nowrap}
.sfh-res .it.on{background:var(--app-soft);color:var(--app-ink)}
.sfh-res .none{padding:10px;color:#94a3b8;font-size:13px}
.sfh-right{display:flex;align-items:center;justify-content:flex-end;gap:6px;flex:1 1 0}
.sfh-ib{width:34px;height:34px;border:none;background:none;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;color:#475569;cursor:pointer;padding:0}
.sfh-ib:hover{background:#f1f5f9;color:#0f172a}
.sfh-ib svg{width:19px;height:19px}
.sfh-btn{height:34px;border-radius:9px;padding:0 13px;font:inherit;font-size:13px;font-weight:600;display:inline-flex;align-items:center;gap:6px;cursor:pointer;white-space:nowrap}
.sfh-btn svg{width:16px;height:16px}
.sfh-btn.outline{border:1px solid #e2e8f0;background:#fff;color:#0f172a}
.sfh-btn.outline:hover{background:#f8fafc;border-color:#cbd5e1}
.sfh-btn.solid{border:1px solid #0f172a;background:#0f172a;color:#fff}
.sfh-btn.solid:hover{background:#1e293b}
.sfh-av{width:32px;height:32px;border-radius:50%;border:none;background:var(--app);color:#fff;font:inherit;font-weight:700;font-size:13px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;overflow:hidden;padding:0;flex:none;margin-left:2px}
.sfh-av.anon{background:#e2e8f0;color:#64748b}
.sfh-av img{width:100%;height:100%;object-fit:cover}
.sfh-av svg{width:18px;height:18px}
.sfh-menu{position:fixed;z-index:3000;background:#fff;border:1px solid #e2e8f0;border-radius:10px;box-shadow:0 12px 32px rgba(15,23,42,.16);padding:5px;min-width:200px;font-family:"Pretendard","Malgun Gothic",sans-serif;font-size:13px;color:#1e293b}
.sfh-menu .who{padding:8px 10px 9px;border-bottom:1px solid #f1f5f9;margin-bottom:4px}
.sfh-menu .who b{display:block;font-size:13.5px}.sfh-menu .who small{color:#64748b}
.sfh-menu .mi{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:7px;cursor:pointer;white-space:nowrap}
.sfh-menu .mi:hover{background:#f1f5f9}
.sfh-menu .mi small{margin-left:auto;color:#94a3b8;font-size:11.5px}
.sfh-menu hr{border:none;border-top:1px solid #f1f5f9;margin:4px 0}
.sfh-toast{position:fixed;left:50%;bottom:44px;transform:translateX(-50%);background:#0f172a;color:#fff;padding:10px 18px;border-radius:10px;font-family:"Pretendard","Malgun Gothic",sans-serif;font-size:13.5px;z-index:5000;box-shadow:0 8px 24px rgba(15,23,42,.25);pointer-events:none;opacity:0;transition:opacity .2s}
.sfh-toast.on{opacity:1}
@media (max-width:1180px){.sfh-search{width:240px}.sfh-btn .lbl{display:none}}
@media (max-width:920px){.sfh-center{display:none}}

/* ---- 리본 탭 (D안): 머리글과 한 덩어리, 맨 아래 선 하나 ---- */
.sfh:has(~ .tabs),.sfh:has(~ .menubar),.sfh:has(~ .titlebar.sfh-sub){border-bottom:none}
body .tabs{display:flex;align-items:stretch;gap:0;height:38px;padding:0 16px;margin:0;background:#fff;border-bottom:1px solid #e8edf3;flex:none}
body .tabs button,body .tabs button.file{display:flex;align-items:center;height:100%;line-height:1;border:none;background:none;border-radius:0;color:#64748b;font:inherit;font-size:13.5px;font-weight:500;padding:0 12px;margin:0;cursor:pointer;position:relative}
body .tabs>button:first-child{padding-left:0}
body .tabs button:hover{background:none;color:#0f172a}
body .tabs button.on{color:var(--app-ink);font-weight:700;background:none}
body .tabs button.on::after{content:"";position:absolute;left:12px;right:12px;bottom:-1px;top:auto;height:2px;border-radius:2px;background:var(--app)}
body .tabs>button:first-child.on::after{left:0}
body .tabs button.ctx{color:var(--app)}
body .tabs button.file::after{display:none}
/* 메모장 메뉴 막대 */
body .menubar{background:#fff;border-bottom:1px solid #e8edf3;height:38px;padding:0 12px 0 16px}
body .menubar .mb{color:#64748b;font-size:13.5px;border-radius:6px;line-height:1}
body .menubar .mb:first-of-type{margin-left:-11px}
body .menubar .mb:hover,body .menubar .mb.open{background:#f1f5f9;color:#0f172a}
html.in-tabs .titlebar a[href="index.html"]{display:none}
/* 디자인: 예전 상단 막대 → 보조 도구 막대 */
body>.titlebar.sfh-sub{height:44px!important;padding-left:16px!important;border-bottom:1px solid #e8edf3}
body>.titlebar.sfh-sub #btnFile{margin-left:-10px}

/* ---- 리본: 머리글·탭과 한 덩어리 (흰색, 그림자/모서리/여백 없음) ---- */
body .tabs{border-bottom:1px solid #eef2f6}
body .ribbon{margin:0!important;border-radius:0!important;box-shadow:none!important;background:#fff!important;border-bottom:1px solid #e2e8f0;min-height:0!important;height:108px;padding:0 8px!important;align-items:stretch;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;position:relative}
body .ribbon::-webkit-scrollbar{height:0;width:0;display:none}
body .ribbon .grp{position:relative;border-right:none;padding:4px 8px 0}
body .ribbon .grp::after{content:"";position:absolute;right:0;top:8px;bottom:8px;width:1px;background:#eef2f6}
body .ribbon .grp>.lbl{font-size:11.5px;color:#94a3b8;padding:0 0 4px;line-height:1.3;display:flex;align-items:center;justify-content:center;gap:3px}
body .ribbon .rb.big{height:74px;gap:1px;padding:3px 6px}
body .ribbon .grp>.body{min-height:0;overflow:hidden}
body .ribbon .panel{height:100%}
body .ribbon .grp{height:100%}
body .ribbon .rb.lblbtn{height:16px;min-width:16px;width:16px;padding:0;border-radius:4px;color:#94a3b8}
body .ribbon .rb.lblbtn svg{width:12px;height:12px}
body .ribbon .rb.lblbtn:hover{color:var(--app);background:var(--app-soft);border-color:transparent}
.sfr-arrow{position:fixed;z-index:50;width:26px;border:none;cursor:pointer;display:none;align-items:center;justify-content:center;color:#475569;padding:0;font-size:18px;line-height:1}
.sfr-arrow.l{background:linear-gradient(90deg,#fff 55%,rgba(255,255,255,0))}
.sfr-arrow.r{background:linear-gradient(270deg,#fff 55%,rgba(255,255,255,0))}
.sfr-arrow.on{display:flex}
.sfr-arrow:hover{color:var(--app)}

/* 내 설정: 화면 밀도 "촘촘하게" */
.sofit-compact .sfh{height:44px!important}
.sofit-compact .tabs button{padding-top:3px!important;padding-bottom:4px!important}
.sofit-compact .ribbon{min-height:0!important}
.sofit-compact .rb.big{min-height:54px!important;padding-top:3px!important}
.sofit-compact .rb{height:24px}
.sofit-compact .grp>.lbl{padding-bottom:1px!important}

/* 컴팩트 헤더 (전체 높이 축소) */
.sfh{height:44px}
.sfh-brand img{width:24px;height:24px}.sfh-brand{font-size:15px}
.sfh-search input{height:32px}
.sfh-ib{width:30px;height:30px}.sfh-btn{height:30px;padding:0 11px}
.sfh-av{width:28px;height:28px}
body .tabs{height:34px}
body .menubar{height:34px}
body .ribbon{height:100px}
body .ribbon .rb:not(.big){height:24px}
body .ribbon .rb.big{height:62px}
body .ribbon .rb.big svg{width:26px;height:26px}
body .ribbon .grp{padding-top:3px}
body .ribbon .grp>.lbl{font-size:11px;padding:0 0 3px}
body .ribbon .stylegal{height:58px}
body .ribbon select.rs,body .ribbon input.rs{height:24px}
body.sfh-min .sfh{display:none!important}
.sfh-restore{position:fixed;top:4px;right:10px;z-index:900;width:28px;height:22px;border:1px solid #e2e8f0;background:#fff;border-radius:6px;color:#64748b;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;box-shadow:0 1px 3px rgba(15,23,42,.08)}
.sfh-restore:hover{color:#0f172a;background:#f1f5f9}.sfh-restore svg{width:16px;height:16px}
body .ribbon .rb.big{white-space:nowrap}