/* ============================================================ 공통 스타일 (모든 도구가 공유) - 색상/폰트/간격 토큰, 헤더·푸터, 기본 요소 스타일 - 도구별 고유 스타일은 각 도구 폴더의 style.css 에 작성 ============================================================ */ /* ---- 자체 호스팅 웹폰트 (외부 요청 없음 · 서버 0원) ---- 강원교육모두체 (강원도교육청 무료 배포, 상업·웹 사용 무료) */ @font-face { font-family: "GangwonEduAll"; src: url("/assets/fonts/GangwonEduAll-Light.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "GangwonEduAll"; src: url("/assets/fonts/GangwonEduAll-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } /* ---- 헤드라인용 명조(나눔명조 Bold) — 한글만 subset한 경량 웹폰트 ---- 제목이 항상 같은 명조로 보이도록 자가 호스팅. 본문엔 쓰지 않음. font-display:swap → 다운로드 중에도 폴백 명조로 즉시 표시(렌더 안 막음) */ @font-face { font-family: "NanumMyeongjoDisplay"; src: url("/assets/fonts/NanumMyeongjo-Display.woff") format("woff"); font-weight: 400 900; font-style: normal; font-display: swap; } /* ---- 디자인 토큰 (여기만 바꾸면 사이트 전체 톤 변경) ---- */ :root { --color-bg: #f3f0e8; /* 따뜻한 종이색 바탕 — 사이트 톤의 핵심 */ --color-surface: #fdfbf6; /* 카드/헤더: 바탕보다 밝은 종이 */ --color-text: #26221c; /* 잉크(따뜻한 먹색) */ --color-text-sub: #6f6656; /* 보조 텍스트(따뜻한 회갈색) */ --color-border: #e4dccc; /* 종이 위 옅은 경계 */ --color-primary: #c23b30; /* 포인트 컬러: 진짜 원고지 주색(주묵색) */ --color-primary-weak: #f1e0d9; /* 옅은 붉은 종이 */ --color-accent: #b03a2e; /* 링크도 원고지 붉은 계열로 통일 */ --color-grid: #e2b3ab; /* 원고지 격자선(옅은 붉은색) */ --color-grid-strong: #cf9088; /* 원고지 바깥 테두리(붉은색) */ --radius: 12px; --radius-sm: 8px; --shadow-sm: 0 1px 2px rgba(0,0,0,.05); --shadow: 0 4px 16px rgba(0,0,0,.06); --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --font-sans: system-ui, -apple-system, "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", sans-serif; /* 헤드라인용 명조(바탕) — 문학적 신뢰감. 도구 미리보기와 같은 계열. 자가 호스팅 명조 우선 → OS별 명조 폴백(리눅스 Noto/윈도 바탕/맥 명조) */ --font-serif: "NanumMyeongjoDisplay", "Nanum Myeongjo", "Noto Serif KR", "Noto Serif CJK KR", "Batang", "바탕", "AppleMyungjo", serif; --maxw: 960px; /* 원고지 격자선 기본 두께(모티프에서 재사용) */ --grid-cell: 34px; } /* ---- 다크 테마 값 ---- 기본값: 시스템 환경설정을 따름(prefers-color-scheme). 단, 사용자가 토글로 명시 지정하면 가 우선. - data-theme 미지정: 시스템 설정 사용(단, light 강제 시 제외) - data-theme="dark": 항상 다크 - data-theme="light": 항상 라이트(:root 기본값 유지) */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --color-bg: #17130e; /* 따뜻한 먹빛 바탕 */ --color-surface: #201b15; --color-text: #ece6da; --color-text-sub: #a89d8b; --color-border: #342d24; --color-primary: #e0574a; /* 어두운 바탕에서 밝게 조정 */ --color-primary-weak: #3a231f; --color-accent: #e08a7e; --color-grid: #5f4842; --color-grid-strong: #8a655d; --shadow: 0 4px 16px rgba(0,0,0,.35); } } :root[data-theme="dark"] { --color-bg: #17130e; --color-surface: #201b15; --color-text: #ece6da; --color-text-sub: #a89d8b; --color-border: #342d24; --color-primary: #e0574a; --color-primary-weak: #3a231f; --color-accent: #e08a7e; --color-grid: #5f4842; --color-grid-strong: #8a655d; --shadow: 0 4px 16px rgba(0,0,0,.35); } /* ---- 테마 세그먼트 스위치 (common.js가 헤더에 주입) ---- */ .theme-switch { margin-left: auto; display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--color-border); border-radius: 999px; background: var(--color-bg); } .theme-opt { font: inherit; font-size: .8rem; line-height: 1; cursor: pointer; white-space: nowrap; border: 0; border-radius: 999px; padding: 6px 12px; background: transparent; color: var(--color-text-sub); } .theme-opt:not(.is-active):hover { color: var(--color-text); } .theme-opt.is-active { background: var(--color-primary); color: #fff; font-weight: 700; } /* ---- 기본 리셋/타이포 ---- */ * { box-sizing: border-box; } /* hidden 속성은 어떤 display 지정보다 우선 (display:flex 등이 덮어쓰는 사고 방지) */ [hidden] { display: none !important; } body { margin: 0; font-family: var(--font-sans); background: var(--color-bg); color: var(--color-text); line-height: 1.6; -webkit-text-size-adjust: 100%; } a { color: var(--color-accent); text-decoration: none; } a:hover { text-decoration: underline; } /* 제목은 명조 디스플레이로 — 사이트 전체의 문학적 톤을 만든다 */ h1, h2, h3 { font-family: var(--font-serif); line-height: 1.28; letter-spacing: -.01em; text-wrap: balance; font-weight: 700; } h1 { font-size: clamp(1.9rem, 4.2vw, 2.7rem); letter-spacing: -.02em; } h2 { font-size: clamp(1.35rem, 2.4vw, 1.65rem); } /* ---- 레이아웃 컨테이너 ---- */ .container { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--space-4); } /* ---- 헤더 ---- */ .site-header { background: var(--color-surface); border-bottom: 1px solid var(--color-border); } .site-header .inner { max-width: var(--maxw); margin: 0 auto; padding: var(--space-3) var(--space-4); display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; /* 좁은 화면에서 테마 스위치가 줄바꿈되도록 */ } .site-header .brand { display: inline-flex; align-items: center; gap: 9px; font-weight: 700; font-size: 1.05rem; letter-spacing: -.01em; color: var(--color-text); } .site-header .brand:hover { text-decoration: none; } /* 원고지 2×2 칸을 축약한 로고 마크 — 이모지 대신 사이트 정체성 */ .brand-mark { width: 20px; height: 20px; flex: none; border: 1.5px solid var(--color-primary); background-image: linear-gradient(var(--color-primary) 1px, transparent 1px), linear-gradient(90deg, var(--color-primary) 1px, transparent 1px); background-size: 50% 50%; border-radius: 2px; } /* ---- 카드 ---- */ .card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: var(--space-5); } /* ============================================================ 히어로 — 옅은 원고지 격자를 배경 텍스처로 쓰는 편집형 도입부 ============================================================ */ .hero { position: relative; padding: clamp(40px, 7vw, 88px) 0 clamp(28px, 4vw, 48px); overflow: hidden; } /* 허브(전체 도구 모음)용 배경: 중립적인 점 격자. 특정 도구(원고지)에 얽매이지 않는 범용 텍스처 — 어떤 도구가 들어와도 어울림 */ .hero::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(var(--color-grid) 1.4px, transparent 1.6px); background-size: 22px 22px; opacity: .55; -webkit-mask-image: linear-gradient(115deg, rgba(0,0,0,.6), transparent 62%); mask-image: linear-gradient(115deg, rgba(0,0,0,.6), transparent 62%); pointer-events: none; } .hero > * { position: relative; } /* 원고지 계열 도구 도입부용 배경: 실제 원고지 사각 격자. .tool-intro 에 함께 붙이면 그 도구만의 정체성을 배경으로 드러냄 */ .paper-grid { position: relative; overflow: hidden; } .paper-grid > * { position: relative; } .paper-grid::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(var(--color-grid) 1px, transparent 1px), linear-gradient(90deg, var(--color-grid) 1px, transparent 1px); background-size: var(--grid-cell) var(--grid-cell); opacity: .55; -webkit-mask-image: linear-gradient(115deg, rgba(0,0,0,.55), transparent 58%); mask-image: linear-gradient(115deg, rgba(0,0,0,.55), transparent 58%); pointer-events: none; } /* 눈썹(eyebrow): 붉은 선 + 대문자 라벨 */ .eyebrow { display: inline-flex; align-items: center; gap: 12px; margin: 0 0 var(--space-4); font-size: .74rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--color-primary); } .eyebrow::before { content: ""; width: 46px; height: 1px; background: var(--color-primary); opacity: .6; } .hero h1 { margin: 0 0 var(--space-4); max-width: 16ch; font-size: clamp(2.3rem, 5.6vw, 3.5rem); line-height: 1.16; letter-spacing: -.025em; word-break: keep-all; } .hero h1 .accent, .tool-intro h1 .accent { color: var(--color-primary); box-shadow: inset 0 -.16em 0 var(--color-grid); } .hero .lede { font-size: 1.06rem; line-height: 1.75; color: var(--color-text-sub); max-width: 48ch; margin: 0; } /* ============================================================ 허브 도구 카드 — "No." 마커가 붙은 편집형 카드 ============================================================ */ /* ---- 홈: 카테고리 그룹 ---- */ .tool-group { margin-top: clamp(34px, 5vw, 52px); } .tool-group:first-of-type { margin-top: clamp(28px, 4vw, 44px); } .group-head { display: flex; align-items: baseline; gap: var(--space-3); padding-bottom: var(--space-2); margin-bottom: var(--space-4); border-bottom: 2px solid var(--color-text); } .group-head h2 { margin: 0; font-family: var(--font-serif); font-size: clamp(1.2rem, 2.4vw, 1.55rem); font-weight: 700; letter-spacing: -.01em; } .group-head .group-count { font-size: .72rem; font-weight: 700; letter-spacing: .12em; color: var(--color-primary); font-variant-numeric: tabular-nums; } .tool-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--space-4); } .tool-group .tool-cards { margin-top: 0; } .tool-card { display: block; position: relative; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 3px; /* 각진 편집 감성 */ padding: var(--space-5) var(--space-5) calc(var(--space-5) + 2px); color: var(--color-text); text-decoration: none; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; } .tool-card::before { /* 좌측 붉은 세로 레일 */ content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--color-primary); opacity: 0; transition: opacity .18s ease; } .tool-card:hover { text-decoration: none; transform: translateY(-3px); border-color: var(--color-primary); box-shadow: 6px 7px 0 var(--color-primary-weak); } .tool-card:hover::before { opacity: 1; } .tool-card .tc-no { font-size: .68rem; font-weight: 700; letter-spacing: .14em; color: var(--color-primary); font-variant-numeric: tabular-nums; } .tool-card .tc-title { display: block; font-family: var(--font-serif); font-size: 1.3rem; font-weight: 700; letter-spacing: -.01em; margin: var(--space-2) 0 var(--space-1); } .tool-card .tc-desc { margin: 0; font-size: .9rem; line-height: 1.6; color: var(--color-text-sub); } /* 아직 준비 중인 도구 자리 */ .tool-card.is-soon { border-style: dashed; pointer-events: none; } .tool-card.is-soon .tc-title, .tool-card.is-soon .tc-desc { color: var(--color-text-sub); opacity: .8; } @media (prefers-reduced-motion: reduce) { .tool-card { transition: none; } .tool-card:hover { transform: none; } } /* ---- 광고 자리 (승인 후 코드 삽입, CLS 방지용 고정 높이) ---- */ .ad-slot { min-height: 90px; display: flex; align-items: center; justify-content: center; color: var(--color-text-sub); font-size: .85rem; background: repeating-linear-gradient( 45deg, transparent, transparent 10px, rgba(0,0,0,.02) 10px, rgba(0,0,0,.02) 20px); border: 1px dashed var(--color-border); border-radius: var(--radius-sm); margin: var(--space-5) 0; } /* ---- 푸터 ---- */ .site-footer { border-top: 1px solid var(--color-border); margin-top: var(--space-6); padding: var(--space-5) 0; color: var(--color-text-sub); font-size: .9rem; } .site-footer nav { display: flex; gap: var(--space-4); flex-wrap: wrap; } /* ---- 버튼 ---- */ .btn { font: inherit; cursor: pointer; border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text); padding: var(--space-2) var(--space-4); border-radius: var(--radius-sm); } .btn:hover { border-color: var(--color-primary); } .btn-primary { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }