body{-webkit-font-smoothing:antialiased;letter-spacing:-.025em}
button, a, input, textarea{transition:background-color .16s,color .16s,border-color .16s}
.avatar{font-family:inherit;font-weight:700;font-size:16px;width:34px;height:34px}
main{width:100%;max-width:1024px;margin:0 auto;padding:28px 24px 64px}

.toolbar{gap:16px}
.tabs{border-radius:10px}
.tabs button{border:0!important}

.search-actions{margin:0;gap:8px}
.search-actions .search{padding:10px 13px}
.search:focus{outline:2px solid #11111130}
.primary{border-radius:0;font-size:12px;box-shadow:none}
.search-actions #write{padding:8px 14px}

.memo-title{margin-bottom:12px}
.memo-title span{display:none}
.memo textarea{border:0;min-height:58px;line-height:1.7}

.list-meta{margin-bottom:12px}
th{border-top:0}

td.title{line-height:1.5;padding:13px 8px 13px 0}

.badge{padding:3px 7px;margin-right:9px;font-weight:600}
.type{width:23px}
.tag{margin-top:5px}
.count{font-size:11px;color:var(--fz-g7)}

#side-menu{border-right:0;padding-right:0;gap:3px}

#side-menu a.side-parent{font-size:11px;color:#8a9383;font-weight:500;margin-bottom:9px}

.section{min-height:150px}
.section h2{margin-bottom:18px}
.section button{border-bottom:0;padding:8px 0}
.section>.subtitle{display:none}

#detail .detail-content{line-height:1.95;padding:24px 0 40px}

.comment p{line-height:1.8}
#comment-content, #compose input, #compose textarea{font-size:14px}
.quiet{font-size:12px;border-radius:8px}
.editor-placeholder{border-radius:9px 9px 0 0}

@media(max-width:760px){
.avatar{width:30px;height:30px}
main{padding-top:22px;margin:0 auto}
main:not(.home-page){padding-left:0;padding-right:0}
main.home-page{padding-left:16px;padding-right:16px}

.toolbar{gap:12px}
.tabs button{padding:9px 14px}
.search-actions{margin-top:0;width:100%}
.search-actions .search{height:40px;flex:1}
.search-actions #write{height:40px}
.memo{border-radius:0;padding:17px 14px;margin-bottom:22px}
.memo textarea{font-size:14px}
#side-menu{padding-bottom:14px!important;border-bottom:1px solid var(--line);margin-bottom:20px;gap:4px}
#side-menu a{padding:10px 12px}
#side-menu a.side-parent{display:none}

td{height:76px}
.sections{padding:0 12px;gap:12px}
.section{min-height:120px;padding:20px}

}
@media(prefers-reduced-motion:reduce){
button, a, input, textarea{transition:none}
}

main{padding-top:24px}

.heading{margin-bottom:28px}

.toolbar{margin-bottom:18px}
.tabs{padding:0;gap:18px}
.tabs button{background:none;border-radius:0;padding:10px 0}
.tabs button.active{box-shadow:none;border-bottom:1px solid var(--fz-g1)!important}
.search-actions .search{height:34px;border-radius:0;border:1px solid var(--fz-gd);width:185px;font-size:11px}
.search-actions #write{height:34px;border-radius:0;background:var(--fz-gf);color:var(--fz-g3);border:1px solid var(--fz-gd);font-size:11px}
.memo{border-radius:0;margin-bottom:24px}
.memo-title{color:var(--fz-g2);font-size:11px}
.memo textarea{padding:7px 0}
.memo-row button{background:var(--fz-g5);border-color:var(--fz-g5)}
th{font-size:10px;height:34px;border-bottom:1px solid var(--fz-gd)}
td{height:56px;border-bottom:1px solid var(--fz-ge);font-size:11px}

.type{font-size:11px;color:var(--fz-ga)}
.badge{font-size:9px;border-radius:0}
.tag{font-size:9px}

main.with-sidebar{grid-template-columns:125px minmax(0,1fr);column-gap:34px}
#side-menu a{border-radius:0;padding:10px 8px}

.sections{gap:14px}
.section{border-radius:0;border:1px solid var(--fz-ged);padding:22px}

.duck-post-heading h2{font-weight:500}

#detail-list{border-top:1px solid var(--fz-ge)}
@media(max-width:760px){
.crumb{padding-left:12px!important}
.heading{padding-left:12px;padding-right:12px}
.tabs{gap:16px}
.search-actions .search{width:auto}
.memo{border-left:0;border-right:0}
.main.with-sidebar{grid-template-columns:1fr}
}
#board table, #detail-list table{table-layout:fixed}
#board th:nth-child(2){width:auto}
#detail-list th:nth-child(2){width:90px}
#detail-list th:nth-child(3){width:100px}

#board td.title, #detail-list td.title{overflow:hidden}
#board td.title button, #detail-list td.title button{display:flex;align-items:center;width:100%;min-width:0;gap:0;white-space:nowrap}
.post-title-text{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.post-category{display:inline-block;flex:0 0 var(--post-category-width,auto);width:var(--post-category-width,auto);color:var(--green);font-size:11px;font-weight:500;margin-right:6px}
td.title .badge, td.title .type, td.title .count{flex:none}
@media(max-width:760px){

#detail-list th:nth-child(2){width:72px}
.post-category{font-size:10px;margin-right:5px}
}
.memo-row{align-items:center}
.memo .memo-input{flex:1;min-width:0;border-radius:0;font:inherit;font-size:14px;line-height:1.4}
.memo .memo-input::placeholder{color:var(--fz-g9)}
.memo-row button{align-self:center}
.toolbar{border-bottom:0}
#compose input, #compose textarea, #compose .editor-placeholder, #compose button{border-radius:0}
@media(min-width:1271px){
main.with-sidebar{display:block;position:relative;grid-template-columns:none}
main.with-sidebar> :not(#side-menu){grid-column:auto}
main.with-sidebar #side-menu{position:absolute;left:-123px;top:24px;width:123px;min-height:calc(100% - 24px);padding-left:12px;padding-right:4px}
}
@media(max-width:1270px){
main.with-sidebar{display:block;grid-template-columns:none}
main.with-sidebar> :not(#side-menu){grid-column:auto}
main.with-sidebar #side-menu{display:none!important}
}

td.title .count{position:relative;top:1px}
.new-mark{flex:none;display:inline-block;margin-left:6px;padding:1px 4px;background:var(--fz-g5);color:var(--fz-gf);font-size:9px;font-weight:700;line-height:12px;letter-spacing:.02em;vertical-align:1px}
.post-memo-mark{flex:none;display:inline-block;margin-right:6px;padding:1px 5px;border:1px solid var(--fz-gc);color:var(--fz-g7);font-size:10px;font-weight:500;line-height:14px;vertical-align:1px}

/* 목록 댓글 수 [3] — PC 는 위 1px 보정 그대로, 모바일은 제목 글자가 작아 보정하면 오히려 처진다 */

/* 모바일 목록 — 댓글 수 [3] 가 제목보다 아래로 보이던 것: 작은 글자는 가운데 맞춤이어도 아래로 쳐져 보여서 1px 올린다 */
@media(max-width:760px){td.title .count{top:-1px}}