From 526359381685d179b11c350fa6304a9f53e8b901 Mon Sep 17 00:00:00 2001 From: Haewon Kam Date: Fri, 11 Sep 2026 14:07:10 +0900 Subject: [PATCH] =?UTF-8?q?style(supporters):=20=ED=83=9C=EB=B8=94?= =?UTF-8?q?=EB=A6=BF=C2=B7=EB=AA=A8=EB=B0=94=EC=9D=BC=20=ED=97=A4=EB=8D=94?= =?UTF-8?q?=20=EA=B7=9C=EC=B9=99=20=EC=9D=B4=EC=8B=9D=20(=EB=B8=8C?= =?UTF-8?q?=EB=9E=9C=EB=93=9C+=EC=96=B8=EC=96=B4=20=EC=A0=84=ED=99=98=20?= =?UTF-8?q?=ED=95=9C=20=EC=A4=84,=20=EB=A9=94=EB=89=B4=20=EA=B0=80?= =?UTF-8?q?=EB=A1=9C=20=EC=8A=A4=ED=81=AC=EB=A1=A4)=20=C2=B7=20=EB=A1=9C?= =?UTF-8?q?=EA=B3=A0=EC=99=80=20=EB=A9=94=EB=89=B4=20=EA=B2=B9=EC=B9=A8=20?= =?UTF-8?q?=ED=95=B4=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-Authored-By: Claude Fable 5.1 --- supporters/src/styles/global.css | 15 +++++++++++++++ templates/supporters-astro/src/styles/global.css | 15 +++++++++++++++ 2 files changed, 30 insertions(+) diff --git a/supporters/src/styles/global.css b/supporters/src/styles/global.css index bf77bc9..964bc7d 100644 --- a/supporters/src/styles/global.css +++ b/supporters/src/styles/global.css @@ -496,3 +496,18 @@ td { color: var(--slate-700); } background: rgba(255, 255, 255, 0.82); color: var(--slate-600, #475569); font-size: 0.66rem; padding: 0.1rem 0.35rem; border-top-left-radius: 6px; } + +/* 뷰 사이트 헤더 규칙 이식 (2026-09-11) */ +.site-header .lang-switch { display: inline-grid; place-items: center; min-width: 2.4rem; height: 2rem; padding: 0 0.6rem; border-radius: 999px; border: 1px solid var(--slate-200); color: var(--slate-600); font-family: Inter, Pretendard, sans-serif; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; text-decoration: none; } +.site-header .lang-switch:hover { color: var(--primary-900); border-color: var(--primary-900); text-decoration: none; } +/* 태블릿·모바일 헤더 (≤900px): 첫 줄 브랜드 + 상담 예약, 둘째 줄 메뉴 가로 스크롤. 메뉴 6개가 두 줄로 겹치던 문제를 DOM 변경 없이 CSS만으로 해결한다 (2026-09-10) */ +@media (max-width: 900px) { + .site-header .bar { height: auto; flex-wrap: wrap; padding-top: 0.6rem; padding-bottom: 0; row-gap: 0.1rem; } + .site-header .brand { flex: 1; } + .site-header .right { display: contents; } + .site-header .lang-switch, .site-header .langswitch { order: 2; margin-right: 0.5rem; } + .site-header .cta { order: 2; } + .site-header .nav { order: 3; display: flex; gap: 1rem; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: 0.35rem 0 0.7rem; width: 100%; } + .site-header .nav::-webkit-scrollbar { display: none; } + .site-header .nav a { margin-left: 0; flex: none; font-size: 0.9rem; } +} diff --git a/templates/supporters-astro/src/styles/global.css b/templates/supporters-astro/src/styles/global.css index bf77bc9..964bc7d 100644 --- a/templates/supporters-astro/src/styles/global.css +++ b/templates/supporters-astro/src/styles/global.css @@ -496,3 +496,18 @@ td { color: var(--slate-700); } background: rgba(255, 255, 255, 0.82); color: var(--slate-600, #475569); font-size: 0.66rem; padding: 0.1rem 0.35rem; border-top-left-radius: 6px; } + +/* 뷰 사이트 헤더 규칙 이식 (2026-09-11) */ +.site-header .lang-switch { display: inline-grid; place-items: center; min-width: 2.4rem; height: 2rem; padding: 0 0.6rem; border-radius: 999px; border: 1px solid var(--slate-200); color: var(--slate-600); font-family: Inter, Pretendard, sans-serif; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; text-decoration: none; } +.site-header .lang-switch:hover { color: var(--primary-900); border-color: var(--primary-900); text-decoration: none; } +/* 태블릿·모바일 헤더 (≤900px): 첫 줄 브랜드 + 상담 예약, 둘째 줄 메뉴 가로 스크롤. 메뉴 6개가 두 줄로 겹치던 문제를 DOM 변경 없이 CSS만으로 해결한다 (2026-09-10) */ +@media (max-width: 900px) { + .site-header .bar { height: auto; flex-wrap: wrap; padding-top: 0.6rem; padding-bottom: 0; row-gap: 0.1rem; } + .site-header .brand { flex: 1; } + .site-header .right { display: contents; } + .site-header .lang-switch, .site-header .langswitch { order: 2; margin-right: 0.5rem; } + .site-header .cta { order: 2; } + .site-header .nav { order: 3; display: flex; gap: 1rem; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: 0.35rem 0 0.7rem; width: 100%; } + .site-header .nav::-webkit-scrollbar { display: none; } + .site-header .nav a { margin-left: 0; flex: none; font-size: 0.9rem; } +}