/* 매일유틸 메인 페이지 레이아웃
   색/간격 토큰은 tokens.css, 도구 페이지 컴포넌트는 common.css 에 있다 */
:root {
  --sidebar-w:232px;
}
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { font-family:'Noto Sans KR','Malgun Gothic','Apple SD Gothic Neo',system-ui,-apple-system,sans-serif; background:var(--bg-primary); color:var(--text-primary); min-height:100vh; line-height:1.6; transition:background .3s,color .3s; }

/* Header */
.topbar { position:fixed; top:0; left:0; right:0; z-index:200; height:54px; background:var(--bg-primary); border-bottom:1px solid var(--border-color); display:flex; align-items:center; padding:0 1rem; gap:.75rem; }
.topbar.sc { border-bottom-color:var(--border-hover); }
.topbar-logo { font-size:1.02rem; font-weight:800; color:var(--text-primary); text-decoration:none; display:flex; align-items:center; gap:.5rem; letter-spacing:-.035em; white-space:nowrap; }
.topbar-logo:hover { color:var(--accent-color); }
.topbar-search { flex:1; max-width:380px; position:relative; }
.topbar-search input { width:100%; padding:.45rem .85rem .45rem 2.2rem; font-size:.85rem; font-family:inherit; border:1px solid var(--border-color); border-radius:5px; background:var(--bg-surface); color:var(--text-primary); transition:border-color .15s; }
.topbar-search input:focus { outline:none; border-color:var(--accent-color); }
.topbar-search input::placeholder { color:var(--text-muted); }
.topbar-search .si { position:absolute; left:.65rem; top:50%; transform:translateY(-50%); color:var(--text-muted); pointer-events:none; }
.topbar-actions { display:flex; align-items:center; gap:.5rem; }
.tb { background:none; border:1px solid var(--border-color); width:32px; height:32px; border-radius:5px; cursor:pointer; display:flex; align-items:center; justify-content:center; color:var(--text-muted); transition:all .15s; position:relative; flex-shrink:0; }
.tb:hover { border-color:var(--border-hover); color:var(--text-primary); }
.tb .s1,.tb .s2 { position:absolute; transition:all .3s; }
.tb .s1 { opacity:0; transform:scale(.8); }
body.dark-mode .tb .s1 { opacity:1; transform:scale(1); }
.tb .s2 { opacity:1; transform:scale(1); }
body.dark-mode .tb .s2 { opacity:0; transform:scale(.8); }
.menu-btn { display:none; }

/* Layout */
.layout { display:flex; padding-top:54px; min-height:100vh; }

/* Sidebar */
.sidebar { width:var(--sidebar-w); position:fixed; top:54px; left:0; bottom:0; overflow-y:auto; border-right:1px solid var(--border-color); background:var(--bg-primary); padding:1.1rem .5rem; z-index:100; transition:transform .3s ease; }
.sidebar::-webkit-scrollbar { width:4px; }
.sidebar::-webkit-scrollbar-thumb { background:var(--border-color); border-radius:2px; }
.sb-section { margin-bottom:1.1rem; }
.sb-cat-label { display:flex; align-items:center; gap:.4rem; font-size:.7rem; font-weight:700; letter-spacing:.02em; color:var(--text-muted); padding:.35rem .55rem; cursor:pointer; text-decoration:none; transition:color .15s; }
.sb-cat-label:hover { color:var(--text-primary); }
.sb-cat-label svg { display:none; }
.sb-item { display:block; padding:.36rem .55rem; border-left:2px solid transparent; font-size:.83rem; font-weight:400; color:var(--text-secondary); text-decoration:none; transition:all .12s; }
.sb-item:hover { border-left-color:var(--accent-color); color:var(--text-primary); background:var(--accent-light); }
.sb-item .sb-icon { display:none; }

/* Main content */
.content { flex:1; margin-left:var(--sidebar-w); padding:2.25rem 2.5rem 4rem; max-width:calc(100% - var(--sidebar-w)); }
.inner { max-width:880px; }

/* Hero */
.hero { margin-bottom:2.25rem; }
.hero h1 { font-size:1.55rem; font-weight:800; letter-spacing:-.04em; line-height:1.3; margin-bottom:.3rem; }
.hero p { font-size:.87rem; color:var(--text-muted); }

/* Featured */
.feat { margin-bottom:2.5rem; }
.sec-label { font-size:.72rem; font-weight:700; letter-spacing:.04em; color:var(--text-muted); margin-bottom:.7rem; }
.fg { display:grid; grid-template-columns:repeat(auto-fit,minmax(178px,1fr)); gap:.5rem; }
.fc { background:var(--bg-surface); border:1px solid var(--border-color); border-radius:5px; padding:.8rem .85rem; text-decoration:none; color:var(--text-primary); transition:border-color .12s,background .12s; display:block; }
.fc:hover { border-color:var(--accent-color); background:var(--accent-light); }
.fc.hd { display:none; }
.fct { font-size:.9rem; font-weight:700; letter-spacing:-.02em; margin-bottom:.2rem; }
.fcd { font-size:.75rem; color:var(--text-muted); line-height:1.45; }

/* Category sections */
.cat-section { margin-bottom:2.25rem; scroll-margin-top:70px; }
.cat-header { display:flex; align-items:baseline; gap:.45rem; margin-bottom:.5rem; padding-bottom:.5rem; border-bottom:1.5px solid var(--text-primary); }
.cat-header h2 { font-size:.95rem; font-weight:800; letter-spacing:-.02em; }
.cat-header .cat-count { font-size:.72rem; font-weight:400; color:var(--text-muted); font-variant-numeric:tabular-nums; }

/* Tool list (dense) */
.tl { display:flex; flex-direction:column; }
.tc { display:flex; align-items:baseline; gap:.75rem; padding:.52rem .4rem; border-bottom:1px solid var(--border-color); text-decoration:none; color:var(--text-primary); transition:background .12s; }
.tc:hover { background:var(--accent-light); }
.tc:hover .tct { color:var(--accent-color); }
.tc.hd { display:none; }
.tci { display:none; }
.tct { font-size:.86rem; font-weight:500; white-space:nowrap; flex-shrink:0; }
.tcd { font-size:.76rem; color:var(--text-muted); margin-left:auto; text-align:right; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* Ad */
.adw { margin:2.25rem 0; }
.adl { font-size:.62rem; color:var(--text-muted); margin-bottom:.35rem; letter-spacing:.1em; text-transform:uppercase; }
.adb { background:var(--bg-surface); border:1px solid var(--border-color); border-radius:5px; padding:1rem; min-height:90px; display:flex; align-items:center; justify-content:center; }

/* Footer */
.footer-section { margin-top:2.5rem; padding-top:1.5rem; border-top:1px solid var(--border-color); }
.footer-section h2 { font-size:.95rem; font-weight:800; letter-spacing:-.02em; margin-bottom:.6rem; }
.footer-section p { color:var(--text-secondary); font-size:.83rem; line-height:1.75; margin-bottom:.75rem; }
footer { margin-top:1.5rem; padding-top:1rem; border-top:1px solid var(--border-color); display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:.5rem; font-size:.76rem; color:var(--text-muted); }
.fs { display:flex; gap:1rem; font-variant-numeric:tabular-nums; }
.fl { display:flex; gap:1.1rem; flex-wrap:wrap; justify-content:center; }
.fl a { color:var(--text-muted); text-decoration:none; }
.fl a:hover { color:var(--text-primary); }

/* Overlay for mobile sidebar */
.sb-overlay { display:none; position:fixed; inset:54px 0 0 0; background:rgba(0,0,0,.4); z-index:99; }

/* Mobile */
@media(max-width:768px) {
  .topbar-search { display:none; }
  .menu-btn { display:flex; }
  .sidebar { transform:translateX(-100%); box-shadow:2px 0 12px rgba(0,0,0,.1); }
  .sidebar.open { transform:translateX(0); }
  .sb-overlay.show { display:block; }
  .content { margin-left:0; padding:1.4rem 1.15rem 3rem; max-width:100%; }
  .hero h1 { font-size:1.3rem; }
  .fg { grid-template-columns:1fr 1fr; }
  .tc { padding:.6rem .25rem; gap:.5rem; }
  .tcd { font-size:.72rem; }
  .footer-section { display:none; }
}
@media(max-width:420px) {
  .fg { grid-template-columns:1fr; }
  .tcd { display:none; }
}

/* Focus */
button:focus-visible, a:focus-visible, input:focus-visible { outline:2px solid var(--accent-color); outline-offset:2px; }