/* ============================================================ STUDYMAX 공통 레이아웃 표준 · smx-layout.css (v6) ------------------------------------------------------------ v6 변경: 헤더를 다크 그라디언트 → 라이트(화이트+얇은 하단선)로 전환. 타이포 표준(Inter · weight 300 · rem 사이즈 · 색상 토큰)은 그대로 유지. ------------------------------------------------------------ 목적: 모든 STUDYMAX 웹페이지의 폭 / 여백 / 헤더 패턴을 하나로 통일. 기준: visa_search(760px)를 표준 폭으로 확정. 사용법: 각 페이지 에 아래 한 줄만 추가. 그 다음 페이지 성격에 맞는 프레임 클래스를 붙인다 (아래 규칙 참고). ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap'); :root { /* ── 브랜드 컬러 (기존 STUDYMAX 값 유지) ── */ --smx-primary: #1a73e8; --smx-primary-dark: #1557b0; --smx-primary-light: #e8f0fe; --smx-ink: #111827; --smx-gray: #6b7280; --smx-border: #e5e7eb; --smx-bg: #f5f6f8; /* v6: 하늘색 → 차분한 쿨그레이 */ --smx-card: #ffffff; --smx-green: #16a34a; --smx-gold: #f5a623; /* ── 표준 폭 (단 2개만 사용) ── */ --smx-w-content: 760px; /* 기본값: 텍스트 · 폼 · 대부분의 페이지 */ --smx-w-wide: 1040px; /* 표 · 카드 그리드 · 검색결과 · 지도 전용 */ --smx-w-form: 560px; /* 폼 입력 컬럼 (프레임 안쪽에서만 사용) */ /* ── 표준 여백 ── */ --smx-gutter: 16px; /* 콘텐츠 좌우 안전 여백 */ --smx-block-top: 22px; /* 헤더 아래 첫 콘텐츠까지 간격 */ --smx-block-bot: 44px; /* 페이지 하단 여백 */ /* ── 헤더 안내 문구 색 (v6: 라이트 헤더용으로 갱신) ── */ --smx-note-color: #6b7280; /* 문구 글자 (뉴트럴 그레이 · 흰 배경 대비) */ --smx-note-ico: #1a73e8; /* 일반 안내 아이콘 (프라이머리) */ --smx-note-ico-warn: #f5a623;/* 주의 안내 아이콘 (앰버/골드) */ /* ── 본문 타이포그래피 표준 (섹션제목/라벨/입력/도움말) ── */ --smx-fs-section: 1.35rem; /* 섹션 제목 (예: "검색 조건") — 표준 확정: 크게·가늘게 */ --smx-fs-label: 0.9rem; /* 입력 라벨 (예: "희망 국가", "GPA") */ --smx-fs-sub: 0.8rem; /* 라벨 옆 보조설명 · 필수표시 크기 */ --smx-fs-input: 0.95rem; /* 입력창 · 셀렉트 텍스트 */ --smx-fs-hint: 0.8rem; /* 하단 도움말 · ※ 주석 */ --smx-fs-body: 0.9rem; /* 일반 본문 텍스트 */ --smx-color-section: #111827;/* 섹션 제목 글자 */ --smx-color-label: #374151;/* 라벨 글자 */ --smx-color-sub: #6b7280;/* 보조설명 글자 */ --smx-color-hint: #6b7280;/* 도움말 글자 */ --smx-color-required:#dc2626;/* 필수 표시 (빨강) — 전 페이지 통일 */ --smx-fw-section: 300; /* 표준 확정: 가는 제목 */ --smx-fw-label: 300; /* 표준 확정: 가는 라벨 */ /* ── 본문 안내 박스 (info=블루, warn=앰버) ── */ --smx-notice-bg: #eff6ff; --smx-notice-border: #bfdbfe; --smx-notice-ink: #1e3a5f; --smx-warn-bg: #fffbeb; --smx-warn-border: #fde68a; --smx-warn-ink: #92400e; } /* ── 기본 리셋 (페이지마다 중복 선언하던 것 통일) ── */ .smx * { box-sizing: border-box; } /* ============================================================ 1. 헤더 — full-bleed(가로 100%) 배경 + 안쪽 콘텐츠는 표준 폭 ------------------------------------------------------------ 구조: .smx-header (그라디언트 배경, 화면 끝까지) └ .smx-header-inner (표준 폭으로 가둠) ├ .smx-titlebar (한 줄: 로고 좌 / 타이틀 우) │ ├ .smx-logo "STUDYMAX" (좌측 · 크게) │ └ .smx-page-title 한글 (우측 · 작게) └ .smx-header-note (말풍선 안내 · 선택, 없으면 생략) ============================================================ */ .smx-header { background: var(--smx-card); /* v6: 다크 그라디언트 → 화이트 */ color: var(--smx-ink); border-bottom: 1px solid var(--smx-border); /* 얇은 구분선만 */ padding: 22px 0 20px; /* 좌우 패딩 없음 → 배경은 full-bleed 유지 */ position: relative; font-family: 'Inter', 'Pretendard Variable', 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif; } .smx-header::before { content: none; } /* v6: 다크 전용 글로우 제거 */ .smx-header-inner { max-width: var(--smx-w-content); margin: 0 auto; padding: 0 var(--smx-gutter); /* 본문과 동일한 좌우 여백 → 로고·본문 정렬 */ position: relative; /* ::before 위로 올림 */ } .smx-header-inner--wide { max-width: var(--smx-w-wide); } /* 와이드 페이지 헤더 */ /* ── 한 줄 타이틀: 로고 + 한글 타이틀을 왼쪽에서 붙여 배치 ── ("7:30 am"처럼 큰 로고 옆에 작은 타이틀이 붙는 형태) */ .smx-titlebar { display: flex; align-items: baseline; /* 큰 로고와 작은 타이틀의 기준선을 맞춤 */ gap: 10px; } .smx-logo { font-size: 2.4rem; font-weight: 600; /* v6 표준: 라이트 헤더 워드마크 (세미볼드) */ letter-spacing: -1px; line-height: 1; flex-shrink: 0; color: var(--smx-ink); } .smx-logo span { color: var(--smx-primary); } /* v6: 흰 배경 대비 프라이머리 블루 */ .smx-page-title { font-size: 1.15rem; /* 로고 옆에 붙는 작은 타이틀 */ font-weight: 400; color: var(--smx-color-sub); line-height: 1.2; } /* ── 2번째 라인: 안내 문구 (아이콘 + 텍스트만) ── 박스/테두리/꼬리 없음. 지금은 비워두고 공간만 예약(향후 문구 삽입). 문구 색상은 나중에 결정 → --smx-note-color 변수만 바꾸면 됨. */ .smx-header-note { margin-top: 10px; min-height: 22px; /* 문구가 없어도 자리를 예약 */ display: flex; align-items: center; gap: 7px; font-size: 0.85rem; font-weight: 400; line-height: 1.5; color: var(--smx-note-color, #6b7280); } .smx-header-note .smx-note-ico { flex-shrink: 0; font-size: 0.95rem; line-height: 1; color: var(--smx-note-ico); } /* 꼭 봐야 하는 주의 안내: 아이콘만 앰버로 */ .smx-header-note--warn .smx-note-ico { color: var(--smx-note-ico-warn); } .smx-header-note:empty { /* 완전히 비어 있어도 min-height로 공간 유지 */ } /* ============================================================ 2. 페이지 콘텐츠 프레임 — 폭 통일의 핵심 ------------------------------------------------------------ .smx-page : 표준 폭(760). 텍스트·폼·대부분 페이지의 기본. .smx-page--wide : 와이드(1040). 표/그리드/검색결과/지도에만. .smx-form-col : 폼 입력 컬럼(560). .smx-page 안에 넣어서 사용. ============================================================ */ .smx-page { max-width: var(--smx-w-content); margin: var(--smx-block-top) auto var(--smx-block-bot); padding: 0 var(--smx-gutter); } .smx-page--wide { max-width: var(--smx-w-wide); } .smx-form-col { width: 100%; max-width: var(--smx-w-form); margin: 0 auto; } /* 헤더 바로 아래 붙는 얇은 안내 배너 등도 같은 폭에 정렬 */ .smx-band { max-width: var(--smx-w-content); margin: 20px auto 0; padding: 0 var(--smx-gutter); } .smx-band.smx-band--wide { max-width: var(--smx-w-wide); } /* ============================================================ 3. 반응형 — 표준 폭보다 좁은 화면에선 자동으로 100% (max-width 기반이라 별도 처리 거의 불필요, 여백만 살짝 조정) ============================================================ */ @media (max-width: 640px) { :root { --smx-gutter: 14px; } .smx-header { padding: 20px 0 20px; } .smx-titlebar { gap: 10px; } .smx-logo { font-size: 1.8rem; } .smx-page-title { font-size: 0.95rem; } .smx-header-note { font-size: 0.8rem; margin-top: 12px; } } /* ============================================================ 4. 본문 타이포그래피 표준 (공통 클래스) ------------------------------------------------------------ 각 페이지가 아래 클래스를 쓰면 섹션제목/라벨/필수/도움말/안내박스가 자동으로 통일된다. (토큰만 바꾸면 전 페이지에 일괄 반영) ============================================================ */ /* 섹션 제목 — 파란 세로바 + 제목 */ .smx-section-title { display: flex; align-items: center; gap: 8px; font-family: 'Inter', 'Pretendard Variable', 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif; font-size: var(--smx-fs-section); font-weight: var(--smx-fw-section); color: var(--smx-color-section); line-height: 1.3; margin: 0 0 14px; } .smx-section-title::before { content: ''; width: 3px; height: 1em; border-radius: 2px; background: var(--smx-primary); flex-shrink: 0; } /* 입력 라벨 */ .smx-label { display: block; font-family: 'Inter', 'Pretendard Variable', 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif; font-size: var(--smx-fs-label); font-weight: var(--smx-fw-label); color: var(--smx-color-label); margin-bottom: 6px; line-height: 1.4; } /* 라벨 옆 보조설명 (예: "(입력 시 GPA 없이 바로 조회)") */ .smx-sub { font-size: var(--smx-fs-sub); font-weight: 400; color: var(--smx-color-sub); margin-left: 5px; } /* 필수 표시 (빨강) */ .smx-required { color: var(--smx-color-required); font-weight: 700; font-size: var(--smx-fs-sub); margin-left: 3px; } /* 하단 도움말 · ※ 주석 */ .smx-hint { font-size: var(--smx-fs-hint); color: var(--smx-color-hint); line-height: 1.6; } /* 본문 안내 박스 — info(블루) / warn(앰버) */ .smx-notice { background: var(--smx-notice-bg); border: 1px solid var(--smx-notice-border); color: var(--smx-notice-ink); border-radius: 12px; padding: 12px 16px; font-size: var(--smx-fs-hint); line-height: 1.6; } .smx-notice--warn { background: var(--smx-warn-bg); border-color: var(--smx-warn-border); color: var(--smx-warn-ink); } /* ============================================================ 5. 폼/결과 컴포넌트 표준 (scholarship_search 확정본 승격) ------------------------------------------------------------ 필터 카드 · 입력 필드 · pill 버튼(균등 그리드) · 기본 액션 버튼 · 결과 카드 · 태그. 새 페이지는 아래 클래스를 그대로 붙여서 사용. 상태 클래스는 기존 관례에 맞춰 .on 사용. ============================================================ */ /* ── 필터/폼 카드 (상단 그라디언트 라인 + 카드) ── */ .smx-filter-card { background: var(--smx-card); border: 1px solid var(--smx-border); border-radius: 16px; padding: 28px; position: relative; overflow: hidden; box-shadow: 0 2px 16px rgba(30,64,175,0.07); } .smx-filter-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--smx-primary), transparent); } /* ── 입력 필드 (라벨 + 인풋/셀렉트) ── */ .smx-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; } .smx-field > label { font-family: 'Inter', 'Pretendard Variable', 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif; font-size: var(--smx-fs-label); font-weight: var(--smx-fw-label); color: var(--smx-color-label); letter-spacing: 0; } .smx-field input, .smx-field select { background: #fff; border: 1.5px solid #d1d5db; border-radius: 8px; padding: 8px 11px; font-size: var(--smx-fs-input); color: var(--smx-ink); font-family: 'Inter', 'Pretendard Variable', 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif; outline: none; transition: border-color .2s; } .smx-field input:focus, .smx-field select:focus { border-color: var(--smx-primary); box-shadow: 0 0 0 3px rgba(37,99,235,.1); } /* ── 필드 그리드 (2열/3열, 좁은 화면 1열) ── */ .smx-fg2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; } .smx-fg3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; margin-bottom: 14px; } @media (max-width: 520px) { .smx-fg2, .smx-fg3 { grid-template-columns: 1fr; } } /* ── pill 버튼 (점수/유형 토글) — 균등폭 3열 그리드 ── */ .smx-pill-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin-top: 2px; } .smx-pill { border: 1.5px solid #94a3b8; background: #fff; border-radius: 16px; padding: 6px 13px; font-size: 0.75rem; color: #475569; cursor: pointer; font-family: 'Inter', 'Pretendard Variable', 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif; white-space: nowrap; text-align: center; user-select: none; transition: all .15s; box-shadow: 0 1px 3px rgba(0,0,0,0.08); } .smx-pill:hover { border-color: #1a3a8f; color: #1a3a8f; } .smx-pill.on { border-color: #1a3a8f; background: #dbeafe; color: #1a3a8f; font-weight: 600; } /* 자유 배치형 pill (복수 선택 태그처럼 폭 가변) */ .smx-pill-wrap { display: flex; flex-wrap: wrap; gap: 8px; } .smx-pill-wrap .smx-pill { border-radius: 20px; } /* ── 기본 액션 버튼 (그라디언트, 가는 글꼴) ── */ .smx-btn-primary { width: 100%; padding: 16px; border: none; border-radius: 12px; background: var(--smx-primary-dark); /* v6 표준: 그라디언트 → 짙은 청색(플랫) */ color: #fff; font-size: 1rem; font-weight: 300; letter-spacing: .5px; font-family: 'Inter', 'Pretendard Variable', 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif; cursor: pointer; transition: background .15s, transform .15s, box-shadow .15s; } .smx-btn-primary:hover { background: #114490; transform: translateY(-1px); box-shadow: 0 6px 20px rgba(21,87,176,.28); } .smx-btn-primary:active { transform: none; } .smx-btn-primary:disabled { opacity: .5; cursor: not-allowed; transform: none; } /* ── 결과/일반 카드 ── */ .smx-card { background: var(--smx-card); border: 1px solid var(--smx-border); border-radius: 14px; padding: 22px 24px; margin-bottom: 14px; position: relative; overflow: hidden; box-shadow: 0 1px 8px rgba(30,64,175,0.05); transition: border-color .2s, transform .15s; } .smx-card--interactive { cursor: pointer; } .smx-card--interactive::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--smx-primary); border-radius: 2px 0 0 2px; } .smx-card--interactive:hover { border-color: var(--smx-primary); transform: translateX(2px); } /* ── 카드 태그 ── */ .smx-tag { font-family: 'Inter', 'Pretendard Variable', 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif; font-size: 0.7rem; padding: 3px 9px; border-radius: 4px; display: inline-block; } .smx-tag--country { background: rgba(217,119,6,.08); color: #92400e; border: 1px solid rgba(217,119,6,.25); } .smx-tag--type { background: rgba(37,99,235,.08); color: #1e40af; border: 1px solid rgba(37,99,235,.2); } .smx-tag--rank { background: rgba(5,150,105,.08); color: #065f46; border: 1px solid rgba(5,150,105,.2); }