/* ========================================================================== We Place — Common Design System 파일: /assets/css/common.css 원칙: 뼈대는 하나, 옷만 갈아입는다. - 베이스 팔레트와 타이포는 모든 페이지 공통 - 페이지별 텐션은 로 스위치 업데이트 이력: - 2026-04: 모바일 타이포 토큰 한국어 기준으로 정렬, keep-all/br-d/br-m 유틸 신설 ========================================================================== */ /* -------------------------------------------------------------------------- 1. Font Import -------------------------------------------------------------------------- */ @import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css'); @import url('https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@400;500;600;700&display=swap'); /* -------------------------------------------------------------------------- 2. Design Tokens (CSS Variables) -------------------------------------------------------------------------- */ :root { /* === Base Palette — 모든 페이지 공통 === */ --color-ink: #0F1724; --color-ink-soft: #3A4252; --color-ink-mute: #8A8F98; --color-line: #E6E3DE; --color-paper: #F6F3EE; --color-paper-soft: #FBF9F5; --color-white: #FFFFFF; --color-dark: #0F1724; --color-dark-soft: #1A2130; /* === Accent — 기본값은 Signal Blue === */ --color-accent: #4A5FE8; --color-accent-soft: #ECEEFD; --color-accent-ink: #2D3FB8; /* === Typography === */ --font-sans: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; --font-serif: 'Noto Serif KR', 'Pretendard', serif; --font-head: var(--font-sans); /* === Type Scale (Mobile First, 한국어 기준 정돈) === */ --fs-display: 30px; /* 헤드라인 영문 36 → 한글 30 */ --fs-h1: 24px; --fs-h2: 20px; --fs-h3: 18px; --fs-body-l: 16px; --fs-body: 15px; --fs-caption: 13px; --lh-tight: 1.3; --lh-normal: 1.55; --lh-loose: 1.75; --ls-tight: -0.02em; --ls-normal: 0; --ls-wide: 0.03em; /* === Layout === */ --max-w: 1120px; --max-w-text: 720px; --gap-sm: 12px; --gap-md: 20px; --gap-lg: 32px; --gap-xl: 56px; --gap-2xl: 96px; --radius-sm: 8px; --radius-md: 14px; --radius-lg: 20px; --radius-pill: 999px; --shadow-sm: 0 1px 2px rgba(15,23,36,.04), 0 1px 3px rgba(15,23,36,.06); --shadow-md: 0 4px 12px rgba(15,23,36,.06), 0 2px 4px rgba(15,23,36,.04); --shadow-lg: 0 12px 32px rgba(15,23,36,.08), 0 4px 8px rgba(15,23,36,.04); --ease: cubic-bezier(.2,.7,.2,1); } /* === 좁은 모바일 (iPhone SE, 갤럭시 S20 등) — 한 번 더 다운 === */ @media (max-width: 380px) { :root { --fs-display: 26px; --fs-h1: 22px; --fs-h2: 19px; } } /* === Desktop Scale (변경 없음) === */ @media (min-width: 768px) { :root { --fs-display: 56px; --fs-h1: 40px; --fs-h2: 30px; --fs-h3: 20px; --fs-body-l: 18px; --fs-body: 16px; --fs-caption: 14px; } } /* -------------------------------------------------------------------------- 3. Tone Classes — 페이지별 텐션 스위치 -------------------------------------------------------------------------- */ .tone-default { --color-accent: #4A5FE8; --color-accent-soft: #ECEEFD; --color-accent-ink: #2D3FB8; --font-head: var(--font-sans); --ls-head: var(--ls-tight); --lh-head: var(--lh-tight); } .tone-calm { --color-accent: #7A9684; --color-accent-soft: #EAF0EC; --color-accent-ink: #4E6B58; --font-head: var(--font-serif); --ls-head: 0; --lh-head: 1.4; } .tone-premium { --color-accent: #A17A3E; --color-accent-soft: #F3EDE2; --color-accent-ink: #6E4F21; --font-head: var(--font-serif); --ls-head: 0.01em; --lh-head: 1.45; } .tone-urgency { --color-accent: #E8553A; --color-accent-soft: #FCEAE5; --color-accent-ink: #B93921; --font-head: var(--font-sans); --ls-head: -0.025em; --lh-head: 1.25; } .tone-industrial { --color-accent: #4A5568; --color-accent-soft: #E6E8EC; --color-accent-ink: #2D3748; --font-head: var(--font-sans); --ls-head: -0.015em; --lh-head: 1.3; } .tone-premium, .tone-calm { --lh-normal: 1.8; } /* -------------------------------------------------------------------------- 4. Reset & Base -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; font-family: var(--font-sans); font-size: var(--fs-body); line-height: var(--lh-normal); color: var(--color-ink); background: var(--color-paper); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* 한국어 줄바꿈 안전망 — 사이트 전체 기본 */ word-break: keep-all; overflow-wrap: break-word; } img, svg, video { display: block; max-width: 100%; height: auto; } a { color: inherit; text-decoration: none; } button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; } ul, ol { padding: 0; margin: 0; list-style: none; } p { margin: 0 0 1em; } /* -------------------------------------------------------------------------- 5. Typography Utilities -------------------------------------------------------------------------- */ .t-display { font-family: var(--font-head); font-size: var(--fs-display); line-height: var(--lh-head, var(--lh-tight)); letter-spacing: var(--ls-head, var(--ls-tight)); font-weight: 700; margin: 0 0 .4em; } .t-h1 { font-family: var(--font-head); font-size: var(--fs-h1); line-height: var(--lh-head, var(--lh-tight)); letter-spacing: var(--ls-head, var(--ls-tight)); font-weight: 700; margin: 0 0 .5em; } .t-h2 { font-family: var(--font-head); font-size: var(--fs-h2); line-height: var(--lh-head, 1.35); letter-spacing: var(--ls-head, var(--ls-tight)); font-weight: 700; margin: 0 0 .5em; } .t-h3 { font-family: var(--font-sans); font-size: var(--fs-h3); line-height: 1.4; font-weight: 600; margin: 0 0 .5em; } .t-lead { font-size: var(--fs-body-l); line-height: var(--lh-loose); color: var(--color-ink-soft); } .t-caption { font-size: var(--fs-caption); color: var(--color-ink-mute); letter-spacing: var(--ls-wide); } .t-eyebrow { display: inline-block; font-family: var(--font-sans); font-size: var(--fs-caption); font-weight: 600; color: var(--color-accent); letter-spacing: var(--ls-wide); text-transform: uppercase; margin-bottom: .8em; } .t-accent { color: var(--color-accent); } .t-mute { color: var(--color-ink-mute); } /* -------------------------------------------------------------------------- 6. Layout -------------------------------------------------------------------------- */ .container { width: 100%; max-width: var(--max-w); margin: 0 auto; padding: 0 20px; } .container-narrow { width: 100%; max-width: var(--max-w-text); margin: 0 auto; padding: 0 20px; } .section { padding: var(--gap-xl) 0; } .section-lg { padding: var(--gap-2xl) 0; } @media (min-width: 768px) { .container, .container-narrow { padding: 0 32px; } } .bg-paper { background: var(--color-paper); } .bg-paper-soft { background: var(--color-paper-soft); } .bg-white { background: var(--color-white); } .bg-dark { background: var(--color-dark); color: var(--color-paper); } .bg-dark .t-lead { color: rgba(255,255,255,.7); } .bg-accent-soft { background: var(--color-accent-soft); } /* -------------------------------------------------------------------------- 7. Buttons (CTA) -------------------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 24px; font-family: var(--font-sans); font-size: var(--fs-body); font-weight: 600; border-radius: var(--radius-pill); transition: transform .2s var(--ease), background .2s var(--ease), box-shadow .2s var(--ease); white-space: nowrap; } .btn:hover { transform: translateY(-1px); } .btn:active { transform: translateY(0); } .btn-primary { background: var(--color-ink); color: var(--color-paper); } .btn-primary:hover { background: #000; box-shadow: var(--shadow-md); } .btn-accent { background: var(--color-accent); color: #fff; } .btn-accent:hover { background: var(--color-accent-ink); box-shadow: var(--shadow-md); } .btn-ghost { background: transparent; color: var(--color-ink); border: 1px solid var(--color-ink); } .btn-ghost:hover { background: var(--color-ink); color: var(--color-paper); } .btn-lg { padding: 18px 32px; font-size: var(--fs-body-l); } .btn-sm { padding: 10px 18px; font-size: var(--fs-caption); } .btn-kakao { background: #FEE500; color: #181600; } .btn-kakao:hover { background: #FFDC00; } /* -------------------------------------------------------------------------- 8. Cards -------------------------------------------------------------------------- */ .card { background: var(--color-white); border: 1px solid var(--color-line); border-radius: var(--radius-md); padding: 24px; transition: transform .3s var(--ease), box-shadow .3s var(--ease); } .card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); } .card-title { font-size: var(--fs-h3); font-weight: 600; margin: 0 0 8px; color: var(--color-ink); } .card-body { font-size: var(--fs-body); color: var(--color-ink-soft); line-height: var(--lh-normal); } .tone-premium .card, .tone-calm .card { padding: 32px; border-radius: var(--radius-lg); } /* -------------------------------------------------------------------------- 9. Grid Patterns -------------------------------------------------------------------------- */ .grid { display: grid; gap: var(--gap-md); } .grid-2 { grid-template-columns: 1fr; } .grid-3 { grid-template-columns: 1fr; } .grid-4 { grid-template-columns: 1fr; } @media (min-width: 640px) { .grid-2 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(2, 1fr); } .grid-4 { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 960px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-4 { grid-template-columns: repeat(4, 1fr); } } /* -------------------------------------------------------------------------- 10. Header & Footer -------------------------------------------------------------------------- */ .site-header { position: sticky; top: 0; z-index: 50; background: rgba(246,243,238,.85); backdrop-filter: saturate(180%) blur(12px); -webkit-backdrop-filter: saturate(180%) blur(12px); border-bottom: 1px solid var(--color-line); } .site-header__inner { display: flex; align-items: center; justify-content: space-between; height: 64px; max-width: var(--max-w); margin: 0 auto; padding: 0 20px; } .site-logo { font-family: var(--font-serif); font-size: 20px; font-weight: 600; letter-spacing: -0.01em; color: var(--color-ink); } .site-logo .logo-comma { color: var(--color-accent); } .site-logo .logo-dot { color: var(--color-accent); } .site-nav { display: none; gap: 28px; } .site-nav a { font-size: var(--fs-caption); font-weight: 500; color: var(--color-ink-soft); } .site-nav a:hover { color: var(--color-ink); } @media (min-width: 768px) { .site-nav { display: flex; } } .site-footer { background: var(--color-dark); color: rgba(255,255,255,.7); padding: var(--gap-xl) 0 var(--gap-md); font-size: var(--fs-caption); } .site-footer a { color: rgba(255,255,255,.85); } .site-footer a:hover { color: #fff; } .site-footer__cols { display: grid; gap: var(--gap-lg); grid-template-columns: 1fr; margin-bottom: var(--gap-lg); } @media (min-width: 768px) { .site-footer__cols { grid-template-columns: 2fr 1fr 1fr 1fr; } } .site-footer__brand { font-family: var(--font-serif); font-size: 22px; color: #fff; margin-bottom: 12px; } .site-footer__title { font-size: var(--fs-caption); color: rgba(255,255,255,.5); letter-spacing: var(--ls-wide); text-transform: uppercase; margin-bottom: 12px; } .site-footer__links li { margin-bottom: 8px; } .site-footer__bottom { border-top: 1px solid rgba(255,255,255,.1); padding-top: var(--gap-md); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; color: rgba(255,255,255,.45); } /* -------------------------------------------------------------------------- 11. Section Patterns — 반복 사용 블록 -------------------------------------------------------------------------- */ /* Hero (light) */ .hero { padding: var(--gap-xl) 0 var(--gap-2xl); text-align: center; } .hero__title { font-family: var(--font-head); font-size: var(--fs-display); line-height: var(--lh-head, var(--lh-tight)); letter-spacing: var(--ls-head, var(--ls-tight)); font-weight: 700; margin: 0 auto .5em; max-width: 18ch; /* 모바일에서 좀 더 좁게 */ } @media (min-width: 768px) { .hero__title { max-width: 22ch; } } .hero__lead { font-size: var(--fs-body-l); line-height: var(--lh-loose); color: var(--color-ink-soft); max-width: 38ch; /* 모바일에서 좀 더 좁게 */ margin: 0 auto var(--gap-lg); } @media (min-width: 768px) { .hero__lead { max-width: 48ch; } } .hero__cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; } /* Hero over dark image (메인 스타일) */ .hero-dark { position: relative; min-height: 100vh; display: flex; align-items: center; justify-content: center; color: #fff; background: var(--color-dark); overflow: hidden; } .hero-dark::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15,23,36,.55), rgba(15,23,36,.85)); z-index: 1; } .hero-dark__bg { position: absolute; inset: 0; background-size: cover; background-position: center; z-index: 0; } .hero-dark__inner { position: relative; z-index: 2; padding: 0 20px; text-align: center; } .hero-dark__title { font-family: var(--font-head); font-size: var(--fs-display); font-weight: 700; line-height: var(--lh-head, 1.25); letter-spacing: var(--ls-head, var(--ls-tight)); margin: 0 0 .6em; } /* Symptom List */ .symptom-list { max-width: 640px; margin: 0 auto; } .symptom-list li { display: flex; align-items: flex-start; gap: 12px; padding: 16px 20px; background: var(--color-white); border: 1px solid var(--color-line); border-radius: var(--radius-md); margin-bottom: 10px; font-size: var(--fs-body); color: var(--color-ink-soft); } .symptom-list li::before { content: '✓'; flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; background: var(--color-accent-soft); color: var(--color-accent-ink); display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; margin-top: 1px; } /* FAQ */ .faq-list { max-width: 720px; margin: 0 auto; } .faq-item { background: var(--color-white); border: 1px solid var(--color-line); border-radius: var(--radius-md); margin-bottom: 10px; overflow: hidden; } .faq-item summary { list-style: none; padding: 18px 22px; font-size: var(--fs-body-l); font-weight: 600; color: var(--color-ink); cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary::after { content: '+'; font-size: 22px; font-weight: 400; color: var(--color-ink-mute); transition: transform .2s var(--ease); } .faq-item[open] summary::after { transform: rotate(45deg); } .faq-item__body { padding: 0 22px 22px; color: var(--color-ink-soft); line-height: var(--lh-loose); font-size: var(--fs-body); } /* Closing CTA */ .cta-block { background: var(--color-dark); color: var(--color-paper); border-radius: var(--radius-lg); padding: var(--gap-xl) var(--gap-md); text-align: center; } .cta-block__title { font-family: var(--font-head); font-size: var(--fs-h1); line-height: var(--lh-head, 1.3); margin: 0 0 .5em; color: #fff; } .cta-block__lead { color: rgba(255,255,255,.7); font-size: var(--fs-body-l); max-width: 40ch; margin: 0 auto var(--gap-md); } .cta-block .btn-ghost { color: #fff; border-color: rgba(255,255,255,.4); } .cta-block .btn-ghost:hover { background: #fff; color: var(--color-ink); } /* Internal Links Block */ .related-links { background: var(--color-paper-soft); border-top: 1px solid var(--color-line); padding: var(--gap-lg) 0; } .related-links__title { font-size: var(--fs-caption); color: var(--color-ink-mute); letter-spacing: var(--ls-wide); text-transform: uppercase; margin-bottom: 16px; } .related-links__grid { display: grid; gap: 12px; grid-template-columns: 1fr; } @media (min-width: 640px) { .related-links__grid { grid-template-columns: repeat(3, 1fr); } } .related-link { display: block; padding: 18px 20px; background: var(--color-white); border: 1px solid var(--color-line); border-radius: var(--radius-md); transition: border-color .2s var(--ease), transform .2s var(--ease); } .related-link:hover { border-color: var(--color-accent); transform: translateY(-2px); } .related-link__label { font-size: var(--fs-caption); color: var(--color-accent); font-weight: 600; letter-spacing: var(--ls-wide); margin-bottom: 6px; text-transform: uppercase; } .related-link__title { font-size: var(--fs-body-l); font-weight: 600; color: var(--color-ink); } /* -------------------------------------------------------------------------- 12. Utilities -------------------------------------------------------------------------- */ .text-center { text-align: center; } .text-left { text-align: left; } .mt-0 { margin-top: 0; } .mt-sm { margin-top: var(--gap-sm); } .mt-md { margin-top: var(--gap-md); } .mt-lg { margin-top: var(--gap-lg); } .mb-0 { margin-bottom: 0; } .mb-sm { margin-bottom: var(--gap-sm); } .mb-md { margin-bottom: var(--gap-md); } .mb-lg { margin-bottom: var(--gap-lg); } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; } /* --- Mobile-safe line breaking --------------------------------------------- .keep-all : 한국어 단어 가운데서 끊기지 않게 (overflow-wrap도 함께 적용) .br-d : 데스크탑에서만 줄바꿈 표시 — 모바일(≤720px)에선 자연 wrap .br-m : 모바일에서만 줄바꿈 표시 — 거의 사용 X, 필요할 때만 사용 예) "위플레이스가 일하는 방식
을 봅니다." --------------------------------------------------------------------------- */ .keep-all { word-break: keep-all; overflow-wrap: break-word; } .br-d { display: inline; } .br-m { display: none; } @media (max-width: 720px) { .br-d { display: none; } .br-m { display: inline; } } /* Fade in on load */ @media (prefers-reduced-motion: no-preference) { .fade-in { animation: fadeIn .8s var(--ease) both; } @keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } }