텍스트이므로,
skin.html 의 스크립트가 /category/이름 링크를 생성해 ul.cat 으로 교체한다.
--------------------------------------------------------------------- */
/* 2026-09-11: 레퍼런스(daily-chronicle) 상단 메뉴처럼 왼쪽 정렬 — Home 다음에 카테고리 */
.gnb .cat{display:flex;flex-wrap:wrap;justify-content:flex-start;gap:26px;flex:1 1 auto}
.gnb .cat li{position:relative}
.gnb .gnb-home,
.gnb .cat a{
display:block;padding:10px 0;
/* 2026-09-11: 레퍼런스(daily-chronicle) 상단 메뉴처럼 좀 더 크고 자간을 벌려
무게감 있게 — 14.5px/-.01em → 16px/.03em
2026-09-11 재수정: 기존 ".gnb-home" 단독 셀렉터가 티스토리 기본 css의
".gnb a"(클래스+태그)에 밀려 12.5px로 깨짐 — ".gnb .gnb-home"으로 특정도 확보 */
font-size:16px !important;font-weight:700;letter-spacing:.03em;color:var(--ink);
border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap
}
.gnb-home:hover,
.gnb .cat a:hover,.gnb .cat a.is-cur{border-bottom-color:var(--ink)}
@media (max-width:760px){
.gnb .cat{flex-direction:column;justify-content:flex-start;gap:0;width:100%}
.gnb .cat li{border-bottom:1px solid var(--line)}
.gnb .cat a{padding:13px 2px;border:0;margin:0;white-space:normal}
.gnb-home{display:block;padding:13px 2px;border-bottom:1px solid var(--line);margin-bottom:0}
}
/* --- 푸터 메뉴 (소개 · 개인정보처리방침 · 문의하기) --------------------- */
.foot-links{
display:flex;gap:18px;flex-wrap:wrap;justify-content:center;
font-size:11px;letter-spacing:.02em;color:var(--mute)
}
.foot-links a{white-space:nowrap}
.foot-links a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
@media (max-width:760px){
.foot-links{justify-content:flex-start;gap:14px}
}
/* ==========================================================================
12. 검색 — 돋보기 아이콘 하나만 노출, hover/focus 시 입력창 펼침
HTML 을 고치지 않아도 되도록 기존 '→' 버튼을 CSS 마스크로 돋보기로 바꾼다.
버튼의 onclick(검색 제출)은 그대로 살아 있고, JS 가 필요 없다.
========================================================================== */
.gnb-search{gap:0}
/* 라이브 HTML의 '→' 버튼을 돋보기로 치환 */
.gnb-search button:not(.search-toggle){
font-size:0;line-height:0;display:grid;place-items:center;
width:30px;height:30px;padding:0;color:var(--mute)
}
.gnb-search button:not(.search-toggle):hover{color:var(--ink)}
.gnb-search button:not(.search-toggle)::before{
content:"";display:block;width:15px;height:15px;background:currentColor;
-webkit-mask:url("data:image/svg+xml;utf8,
") center/contain no-repeat;
mask:url("data:image/svg+xml;utf8,
") center/contain no-repeat;
}
/* skin.html 을 새로 붙여넣은 경우(아이콘이 이미 SVG) */
.gnb-search .search-toggle{
display:grid;place-items:center;width:30px;height:30px;padding:0;color:var(--mute)
}
.gnb-search .search-toggle:hover{color:var(--ink)}
.gnb-search .search-toggle svg{
width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round
}
/* 입력창은 기본으로 접어두고 hover/focus 에서 펼친다 */
.gnb-search input{
width:0;padding:6px 0;border-bottom-color:transparent;opacity:0;
pointer-events:none;transition:width .28s ease, opacity .2s ease
}
.gnb-search:hover input,
.gnb-search:focus-within input,
.gnb-search.is-open input{
width:150px;opacity:1;pointer-events:auto;
border-bottom-color:var(--line);margin-right:6px
}
.gnb-search input:focus{border-bottom-color:var(--ink)}
@media (max-width:760px){
/* 모바일은 hover 가 없으므로 항상 펼침 */
.gnb-search{gap:6px}
.gnb-search input,
.gnb-search:hover input,
.gnb-search:focus-within input,
.gnb-search.is-open input{
width:auto;flex:1;opacity:1;pointer-events:auto;border-bottom-color:var(--line)
}
}