@charset "utf-8";

/* ========== Theme Tokens ========== */
:root{
  --bg:#f4f6f8;
  --card:#ffffff;
  --ink:#1e2329;
  --ink-2:#4a5568;
  --ink-3:#8a94a6;
  --brand:#3b82f6; /* 파랑 */
  --brand-2:#2563eb;
  --line:#e5e7eb;
  --radius:16px;
  --shadow:0 8px 30px rgba(0,0,0,.06);
}

/* ========== Reset & Base ========== */
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);}
html{-webkit-text-size-adjust:none;text-size-adjust:none;}
body,input,textarea{
  font: 15px/1.8 -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo","Helvetica Neue", Arial, sans-serif;
  letter-spacing: -.2px;
}
img{max-width:100%;border:0;}
a{color:var(--ink);text-decoration:none;transition:color .2s ease,opacity .2s ease}
a:hover{color:var(--brand)}
.clear{clear:both;width:100%}
*{box-sizing:border-box}

/* ========== Layout ========== */
#sidebar{
  position: fixed; inset: 0 auto 0 0; width: 280px;
  background: rgba(255,255,255,.9);
  backdrop-filter: blur(10px);
  border-right:1px solid var(--line);
  box-shadow: 0 0 0 rgba(0,0,0,0);
  overflow-y:auto;
}
#sidebar .blank{height:72px}
#sidebar h1{
  margin:0; padding:0 16px; text-align:center; font-weight:700; font-size:18px;
  color:#111; line-height:1; letter-spacing:-.3px;
}
#sidebar .widget{margin:22px 0;padding:0 18px}
#sidebar .widget li{list-style:none;word-break:break-word}
#sidebar .counter{display:flex;gap:10px;justify-content:center;color:var(--ink-3);font-size:13px}
#sidebar .counter .today{color:var(--brand)}
#sidebar .search input{
  width:100%; padding:12px 14px; border:1px solid var(--line); border-radius:10px;
  background:#fff; outline:none;
}
#sidebar .search input:focus{border-color:#cbd5e1; box-shadow: 0 0 0 4px rgba(59,130,246,.08)}

#content{ margin:0 0 0 280px; padding:40px 24px}
#content-inner{ max-width:1100px; margin:0 auto}

/* ========== Head (Title Bar) ========== */
#head{ padding-top:24px; text-align:center; position:relative}
#head h2{
  display:inline-block; margin:0 0 18px; padding:0 10px 8px;
  font-weight:800; font-size:22px; color:#0b1220; border-bottom:2px solid var(--ink);
}
#head .date{
  position:static; display:inline-block; margin-left:8px; padding:4px 8px;
  font-size:12px; color:#fff; background:var(--ink-2); border-radius:999px;
}

/* ========== Card (본문 컨테이너) ========== */
#body{
  background:var(--card); border:1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding:28px; word-break: break-word;
}

/* ========== 본문(글) 중앙 배치 & 타이포 ========== */
#article-view{
  max-width: 760px;    /* 본문 폭 */
  margin: 8px auto 40px; /* 가로 가운데 정렬 */
  padding: 0; color: var(--ink);
}
#article-view p{margin:0 0 1.1em}
#article-view h2, #article-view h3, #article-view h4{
  color:#0b1220; letter-spacing:-.4px; margin:1.2em 0 .6em; font-weight:800;
}
#article-view h2{font-size:28px; line-height:1.3}
#article-view h3{font-size:22px}
#article-view h4{font-size:18px}
#article-view a{color:var(--brand); text-decoration:underline}
#article-view pre code.hljs{
  font: 13px/1.6 SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  background:#0b122008; border:1px solid #e5e7eb; border-radius:12px; padding:16px; display:block;
}

/* 태그 라벨 */
.tag_label{max-width:760px;margin:0 auto 12px; padding:0; text-align:left}
.tag_label a{color:var(--ink-3); font-size:13px}
.tag_label a:hover{color:var(--brand)}

/* ========== 리스트(목록) ========== */
.list #body{padding:0}
.list ul{margin:0;padding:0}
.list ul li{
  list-style:none; border-bottom:1px solid var(--line); padding:18px 20px; display:flex; gap:10px; align-items:center
}
.list ul li a{flex:1; font-weight:600}
.list ul li .date{color:var(--ink-3); font-size:13px}
.list ul li .cnt{color:var(--brand); font-size:13px}

/* ========== 태그 클라우드 ========== */
.tag a{display:inline-block; padding:6px 10px; border-radius:999px; background:#f1f5f9; color:#0b1220; margin:0 8px 8px 0}
.tag a:hover{background:#e2e8f0}
.tag .cloud1{font-size:18px;background:#dbeafe}
.tag .cloud2{font-size:16px;background:#e0f2fe}
.tag .cloud3{font-size:15px}
.tag .cloud4{font-size:14px;opacity:.9}
.tag .cloud5{font-size:13px;opacity:.75}

/* ========== 댓글/방명록 영역 공통 정돈 ========== */
#communicate .communicateList ol>li{
  background:var(--card); border:1px solid var(--line); border-radius:12px; padding:16px; margin-top:18px;
}
#communicate .communicateWrite .textarea textarea{
  border:1px solid var(--line); border-radius:12px; padding:14px; outline:none
}
#communicate .communicateWrite .textarea textarea:focus{
  border-color:#cbd5e1; box-shadow:0 0 0 4px rgba(59,130,246,.08)
}
#communicate .communicateWrite .submit input{
  border:1px solid var(--line); border-radius:10px; padding:12px 16px; background:#fff
}
#communicate .communicateWrite .submit input:hover{border-color:#94a3b8}

/* ========== 페이징 ========== */
#paging{ padding:26px 0 8px; text-align:center}
#paging a{
  display:inline-flex; align-items:center; justify-content:center;
  height:36px; min-width:36px; padding:0 10px; margin:0 6px 12px;
  border:1px solid var(--line); border-radius:10px; background:#fff; font-weight:600
}
#paging .selected{color:#fff; background:var(--brand); border-color:var(--brand)}
#paging .no-more-prev, #paging .no-more-next{opacity:.5; cursor:default}

/* ========== Recent Posts ========== */
#recent-post{ padding:36px 0 12px}
#recent-post h4{ margin:0 0 12px; font-weight:800}
#recent-post ul{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; padding:0; list-style:none }
#recent-post .box{
  height:150px; overflow:hidden; position:relative; border-radius:12px; background:#eef2f7; box-shadow: var(--shadow)
}
#recent-post .box .title{
  position:absolute; left:0; right:0; bottom:0; height:48px; line-height:48px; text-align:center;
  color:#fff; background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.55) 100%);
}

/* ========== Footer ========== */
#foot{ color:var(--ink-3); font-size:13px; display:flex; justify-content:space-between; align-items:center; padding:24px 0}
#foot a{ color:var(--ink-2); border-bottom:1px dotted #cbd5e1}
#foot a:hover{ color:var(--brand)}

/* ========== 보호글(비번) ========== */
.entry.protected{
  display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:220px;
  background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow)
}
.entry.protected input[type="password"]{
  margin-top:10px; padding:14px 12px; width:280px; border:1px solid var(--line); border-radius:10px; outline:none
}
.entry.protected .submit{
  margin-top:10px; padding:10px 16px; border:1px solid var(--line); border-radius:10px; background:#fff; cursor:pointer
}

/* ========== 반응형 ========== */
#sidebar-toggle{
  display:none; position:fixed; left:14px; bottom:14px; width:52px; height:52px;
  border-radius:14px; background:#ffffff; color:#0b1220; box-shadow:var(--shadow);
  display:flex; align-items:center; justify-content:center; z-index:101;
}
@media (max-width: 1024px){
  #content{margin-left:0}
  #sidebar{
    transform: translate3d(-105%,0,0); transition: transform .25s ease;
    box-shadow: var(--shadow);
  }
  html.open #sidebar{ transform: translate3d(0,0,0) }
  #sidebar-toggle{display:flex}
  #content-inner{padding:0}
  #recent-post ul{ grid-template-columns: 1fr 1fr }
}
@media (max-width: 640px){
  #recent-post ul{ grid-template-columns: 1fr }
  #article-view{ max-width: 92vw }
}

/* ========== 기존 요소 살짝 다듬기 (호환용) ========== */
.entry{ font-size:16px }
.entry table{ width:100%; border-collapse: collapse; border:1px solid var(--line); border-radius:12px; overflow:hidden }
.entry table td{ padding:10px; border-top:1px solid var(--line) }

#head h2 a{ color:inherit }
#head h2 a:hover{opacity:.8}

/* 링크 강조 */
#article-view p a{ color:var(--brand); text-decoration:underline }

/* 사이드바 카테고리 트리 살짝 간격 */
#sidebar .category ul li{ padding:2px 0 }
#sidebar .category ul li ul{ margin-left:10px }

/* 스크롤바(웹킷) 미묘하게 */
#sidebar::-webkit-scrollbar{ width:10px }
#sidebar::-webkit-scrollbar-thumb{ background:#e5e7eb; border-radius:10px }
#sidebar::-webkit-scrollbar-track{ background:transparent }