미디어위키:Common.css: 두 판 사이의 차이

← 이전 편집 다음 편집 →

@@ 47번째 줄: / 47번째 줄: @@
 .page-대문 .mai
-/* ===== 메인/공용 버튼 스타일 ===== */
+/* ===== 세그먼트형 버튼 블록 ===== */
-.portal-buttons {
+.portal-segments {
-   display: flex;
+  /* 커스텀 변수 */
-   flex-wrap: wrap;
+  --seg-gap: 1px;
-   gap: 10px;
+  --seg-radius: 12px;
+  --seg-divider: #c8ccd1; /* 무채색 구분선 */
+  --seg-bg: #fff;         /* 칸 배경 */
+   display: grid;
+   grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); /* 자동 칼럼 */
+  gap: var(--seg-gap);              /* 이 간격이 곧 구분선 두께가 됩니다 */
+   background: var(--seg-divider);   /* gap 사이로 보이는 색 = 칸막이 */
+  border-radius: var(--seg-radius);
+  overflow: hidden;                 /* 둥근 모서리 안으로 자르기 */
    margin: 16px 0 24px;
+  box-shadow: 0 1px 0 rgba(0,0,0,.04);
 }
-.portal-buttons .btn {
+/* 각 칸(세그먼트) */
-   display: inline-block;
+.portal-segments .seg {
-   padding: 0.6em 1.0em;
+  background: var(--seg-bg);
+   display: flex;      /* a 태그를 칸 전체로 확장 */
+}
+/* 링크(버튼) – 칸 전체가 클릭되도록 block + flex:1 */
+.portal-segments .seg a {
+  flex: 1 1 auto;
+  display: block;
+   padding: 12px 16px;
+  min-height: 44px;   /* 터치 여유 */
+  text-align: center;
    font-weight: 600;
-   border-radius: 10px;
+   color: #202122;
-  border: 1px solid #a2a9b1;
    text-decoration: none;
-   line-height: 1.2;
+   line-height: 1.25;
-   background: #f8f9fa;       /* 기본(세컨더리) */
+   background: transparent;
-  color: #202122;
-}
-.portal-buttons .btn:hover {
-  background: #eaecf0;
-  border-color: #72777d;
 }
-/* 강조(프라이머리) 버튼 */
+/* 호버/액티브 – 무채색 유지 */
-.portal-buttons .btn.primary {
+.portal-segments .seg a:hover  { background: #f6f7f8; }
-  background: #36c;  /* 미디어위키 기본 파란색 계열 */
+.portal-segments .seg a:active { background: #eaecf0; }
-  color: #fff;
-  border-color: #36c;
-}
-.portal-buttons .btn.primary:hover {
-  filter: brightness(0.95);
-}
-/* 모바일에서 꽉 차게 보이도록(선택) */
+/* 모바일에서 2열로 줄이기(원하면 조정) */
 @media (max-width: 720px) {
-   .portal-buttons {
+   .portal-segments {
-     gap: 8px;
+     grid-template-columns: repeat(2, 1fr);
-  }
-  .portal-buttons .btn {
-    flex: 1 1 auto;
-    text-align: center;
    }
 }