v0.1.7 헤더 및 사이드바 디테일 수정

assets/built/screen.css

@@ -8,7 +8,8 @@
     --text: #1b1918;
     --text-soft: #6e6661;
     --text-dim: #9a9087;
-    --border: #ece5dc;
+    --border: #ece4d9;
+    --border-strong: #dfd4c8;
     --accent: #f0632f;
     --accent-strong: #d84d1d;
     --shadow: 0 8px 24px rgba(20, 16, 12, 0.035);
@@ -91,6 +92,8 @@ input {
     min-height: calc(100vh - var(--topbar-height));
     width: min(100%, var(--shell-width));
     margin: 0 auto;
+    border-left: 1px solid var(--border);
+    border-right: 1px solid var(--border);
 }
 
 .site-shell-wrap {
@@ -124,7 +127,7 @@ input {
 .sidebar__inner--right {
     display: flex;
     flex-direction: column;
-    gap: 18px;
+    gap: 0;
 }
 
 .brand {
@@ -173,7 +176,7 @@ input {
     background: none;
     color: inherit;
     cursor: pointer;
-    transition: background-color 0.22s ease, color 0.22s ease;
+    transition: background-color 0.22s ease, color 0.22s ease, transform 0.22s ease;
 }
 
 .menu-group__content {
@@ -259,6 +262,10 @@ input {
     background: var(--surface-muted);
 }
 
+.menu-group__trigger:hover {
+    transform: translateX(1px);
+}
+
 .menu-group__trigger:hover .menu-link__marker,
 .menu-group__trigger[aria-expanded="true"] .menu-link__marker {
     width: 12px;
@@ -280,7 +287,7 @@ input {
 }
 
 .sidebar-card {
-    padding: 20px 0 0;
+    padding: 18px 0 0;
     border-top: 1px solid var(--border);
 }
 
@@ -292,7 +299,7 @@ input {
     display: flex;
     align-items: center;
     justify-content: space-between;
-    margin-bottom: 12px;
+    margin-bottom: 14px;
 }
 
 .sidebar-card__header h2 {
@@ -304,6 +311,12 @@ input {
     color: var(--text-soft);
 }
 
+.sidebar-card__action {
+    color: var(--text-dim);
+    font-size: 13px;
+    line-height: 1;
+}
+
 .category-grid {
     display: grid;
     grid-template-columns: repeat(2, minmax(0, 1fr));
@@ -339,6 +352,17 @@ input {
     background: linear-gradient(135deg, #5d66ff, #29b6f6);
 }
 
+.category-chip:nth-child(10n + 1) .category-chip__dot { background: #f26d21; }
+.category-chip:nth-child(10n + 2) .category-chip__dot { background: #3d49f5; }
+.category-chip:nth-child(10n + 3) .category-chip__dot { background: #3e9bb6; }
+.category-chip:nth-child(10n + 4) .category-chip__dot { background: #67d7d0; }
+.category-chip:nth-child(10n + 5) .category-chip__dot { background: #ac38ff; }
+.category-chip:nth-child(10n + 6) .category-chip__dot { background: #f64096; }
+.category-chip:nth-child(10n + 7) .category-chip__dot { background: #50b236; }
+.category-chip:nth-child(10n + 8) .category-chip__dot { background: #6d36ff; }
+.category-chip:nth-child(10n + 9) .category-chip__dot { background: #8a35ff; }
+.category-chip:nth-child(10n + 10) .category-chip__dot { background: #f4c31d; }
+
 .category-chip__label {
     min-width: 0;
     overflow: hidden;
@@ -402,8 +426,6 @@ input {
     margin: 0 auto;
     background: color-mix(in srgb, var(--bg) 94%, transparent);
     backdrop-filter: blur(10px);
-    border-left: 1px solid var(--border);
-    border-right: 1px solid var(--border);
 }
 
 .topbar__brand,
@@ -510,6 +532,35 @@ input {
     cursor: pointer;
 }
 
+.icon-button--profile span {
+    position: relative;
+    display: block;
+    width: 16px;
+    height: 16px;
+}
+
+.icon-button--profile span::before,
+.icon-button--profile span::after {
+    content: "";
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+    border: 1.75px solid currentColor;
+    border-radius: 999px;
+}
+
+.icon-button--profile span::before {
+    top: 1px;
+    width: 6px;
+    height: 6px;
+}
+
+.icon-button--profile span::after {
+    bottom: 0;
+    width: 12px;
+    height: 8px;
+}
+
 .icon-button--search-mobile {
     display: none;
 }
@@ -528,7 +579,7 @@ input {
     display: grid;
     justify-items: center;
     gap: 16px;
-    padding: 38px 20px 28px;
+    padding: 42px 20px 28px;
     text-align: center;
     border-bottom: 1px solid var(--border);
 }
@@ -606,7 +657,7 @@ input {
 .tab-row {
     display: flex;
     flex-wrap: wrap;
-    gap: 20px;
+    gap: 22px;
     padding-bottom: 14px;
     border-bottom: 1px solid var(--border);
 }
@@ -745,6 +796,7 @@ input {
     gap: 14px;
     align-items: center;
     padding-top: 18px;
+    padding-bottom: 18px;
 }
 
 .about-block h2,
@@ -787,16 +839,23 @@ input {
     border-radius: 10px;
     line-height: 1.5;
     font-size: 0.94rem;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
 }
 
 .author-feature {
     display: flex;
     gap: 14px;
     align-items: center;
-    padding-bottom: 8px;
+    padding: 18px 0;
     border-bottom: 1px solid var(--border);
 }
 
+.author-feature--top {
+    padding-top: 18px;
+}
+
 .avatar,
 .avatar--fallback {
     width: 34px;
@@ -853,6 +912,7 @@ input {
     flex-wrap: wrap;
     gap: 10px;
     color: var(--text-soft);
+    font-size: 0.95rem;
 }
 
 .post-feature-image img {
@@ -870,6 +930,17 @@ input {
     min-width: 0;
 }
 
+.kg-content a {
+    text-decoration: underline;
+    text-underline-offset: 0.12em;
+}
+
+.kg-content p,
+.kg-content ul,
+.kg-content ol {
+    max-width: 100%;
+}
+
 .kg-content > * + * {
     margin-top: 1.2em;
 }
@@ -1086,6 +1157,8 @@ input {
     .site-shell {
         width: 100%;
         grid-template-columns: 240px minmax(0, 1fr);
+        border-left: 0;
+        border-right: 0;
     }
 
     .sidebar--right {
@@ -1130,6 +1203,8 @@ input {
 
     .site-shell {
         grid-template-columns: 1fr;
+        border-left: 0;
+        border-right: 0;
     }
 
     .sidebar--left {
@@ -1186,4 +1261,12 @@ input {
     .post-navigation__link--next {
         text-align: left;
     }
+
+    .hero__title {
+        font-size: 2.2rem;
+    }
+
+    .post-title {
+        font-size: 2.15rem;
+    }
 }