/* ================================================================= theme.css — 소호팁 디자인 시스템 (딥 인디고 / 토스 스타일) 2026-06-27 신규 생성 — 사이트 단일 디자인 토큰·컴포넌트 출처 ----------------------------------------------------------------- · 순수 CSS, 프레임워크 없음. GitHub Pages 정적 사이트 전용. · 모든 페이지에서 sohotip.css '뒤'에 로드되어 토큰을 통일한다. · 기존 영수증 톤(크림 배경·주황·점선 절취선·도장)은 사용하지 않는다. 포함: 디자인 토큰 / 폰트 / 카드 / 버튼 / 태그 / 뱃지 / 입력창 / LIVE 점 ================================================================= */ :root { /* ── 색 (정밀 명세) ── */ --color-primary: #3D5AFE; --color-primary-light: #ECEEFF; --color-orange: #FF6A00; --color-orange-light: #FFF3EC; --color-bg: #F4F6FB; --color-surface: #FFFFFF; --color-text-primary: #191F28; --color-text-secondary: #6B7684; --color-text-muted: #ADB5BD; --color-border: #E8ECF0; --color-border-dashed: #D1D8E0; /* ── radius (정밀 명세) ── */ --radius-card: 24px; --radius-card-lg: 28px; --radius-btn: 14px; --radius-pill: 9999px; --radius-input: 16px; /* ── 그림자 (정밀 명세) ── */ --shadow-card: 0 1px 8px rgba(0,0,0,0.04); --shadow-card-hover: 0 6px 24px rgba(61,90,254,0.10); --shadow-float: 0 4px 20px rgba(61,90,254,0.30); /* ── 기존 변수명 호환 별칭 → 새 색 토큰에 매핑(사이트 전역 var 그대로 동작) ── */ --primary: var(--color-primary); --primary-light: var(--color-primary-light); --primary-dark: #2541E0; --primary-mid: #2541E0; --primary-grad: linear-gradient(135deg, #3D5AFE, #7B8FFF); --bg: var(--color-bg); --white: var(--color-surface); --bg-card: var(--color-surface); --g50: #FAFAFA; --g100: #F2F4F6; --g200: var(--color-border); --g400: var(--color-text-muted); --g600: var(--color-text-secondary); --g900: var(--color-text-primary); --text: var(--color-text-primary); --text-muted: var(--color-text-secondary); --text-light: var(--color-text-muted); --border: var(--color-border); --border-light: var(--g100); --red: #F04452; --green: #00C471; --yellow: #FFB800; /* 오렌지 보조색 토큰은 정의만(전역 적용 X) — 계산기상세(calc.css)·서식(forms)만 --accent로 사용 */ } /* ================================================================= 폰트 — Pretendard Variable (CDN 는 각 페이지 에서 로드) ================================================================= */ /* html body 로 특이도(0,0,2) ↑ — 페이지 인라인 body{}(0,0,1) 와 --bg/--sans 재정의를 이겨 Pretendard·#F4F6FB 를 전 페이지에 적용. (단 .article-title 등 컴포넌트 폰트는 그대로 우선) */ html body { font-family: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, system-ui, 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif; font-size: 16px; line-height: 1.55; color: var(--color-text-primary); background: var(--color-bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-text-size-adjust: 100%; } /* ================================================================= 타이포 스케일 (정밀 명세) ================================================================= */ .text-hero { font-size: 32px; font-weight: 900; line-height: 1.25; letter-spacing: -0.5px; } .text-title { font-size: 26px; font-weight: 900; line-height: 1.30; letter-spacing: -0.3px; } .text-h2 { font-size: 20px; font-weight: 800; line-height: 1.35; } .text-h3 { font-size: 17px; font-weight: 700; line-height: 1.40; } .text-body { font-size: 15px; font-weight: 500; line-height: 1.60; } .text-small { font-size: 13px; font-weight: 500; line-height: 1.55; } .text-micro { font-size: 11px; font-weight: 600; line-height: 1.45; } /* ================================================================= 애니메이션 ================================================================= */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } .animate-fade-in-up { animation: fadeInUp 220ms cubic-bezier(.23,1,.32,1) both; } /* 버튼 active 시 살짝 눌림 */ .t-btn:active, .sc-go:active, .btn-calc:active, .cchip:active, .f-dl:active { transform: scale(0.97); } /* ================================================================= 모바일 기본기 — 탭 하이라이트 제거 / 빠른 탭 / 스크롤바 숨김 ================================================================= */ html { -webkit-tap-highlight-color: transparent; } a, button, input, select, textarea, .t-card, .t-btn, .t-tag, .t-badge { -webkit-tap-highlight-color: transparent; touch-action: manipulation; } /* 스크롤바 숨김 유틸 */ .t-hide-scroll { -ms-overflow-style: none; scrollbar-width: none; } .t-hide-scroll::-webkit-scrollbar { display: none; } /* 숫자/금액 정렬 */ .t-num { font-variant-numeric: tabular-nums; letter-spacing: -.01em; } /* ================================================================= 카드 ================================================================= */ .t-card { background: var(--white); border-radius: var(--radius-card); box-shadow: var(--shadow-card); padding: 16px; transition: transform .18s cubic-bezier(.23,1,.32,1), box-shadow .18s cubic-bezier(.23,1,.32,1); } .t-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-card-hover); } .t-card:active { transform: scale(.98); } /* ================================================================= 버튼 ================================================================= */ .t-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: inherit; font-weight: 700; font-size: 15px; line-height: 1; color: #fff; background: var(--primary); border: none; border-radius: var(--radius-btn); padding: 15px 24px; cursor: pointer; text-decoration: none; transition: background .15s ease, transform .1s ease-out; } .t-btn:hover { background: var(--primary-dark); } .t-btn:active { transform: scale(.97); } .t-btn--ghost { color: var(--primary); background: var(--primary-light); } .t-btn--ghost:hover { background: #E0E4FF; } .t-btn--line { color: var(--g900); background: var(--white); border: 1px solid var(--g200); } .t-btn--line:hover { background: var(--g50); } /* ================================================================= 태그 (첫 태그 = 인디고 강조, 나머지 = 그레이) ================================================================= */ .t-tag { display: inline-flex; align-items: center; font-size: 12px; font-weight: 600; line-height: 1; padding: 4px 10px; border-radius: 100px; background: var(--g100); color: var(--g600); white-space: nowrap; } .t-tag--primary, .t-tag:first-child { background: var(--primary-light); color: var(--primary); } /* ================================================================= 뱃지 (NEW = 인디고, HOT = 연빨강) ================================================================= */ .t-badge { display: inline-flex; align-items: center; font-size: 10px; font-weight: 700; line-height: 1; padding: 3px 8px; border-radius: 100px; } .t-badge--new { background: var(--primary); color: #fff; } .t-badge--hot { background: #FFF0F0; color: var(--red); } /* ================================================================= 입력창 — 16px(iOS 줌 방지), 테두리 없이 연그레이 채움 ================================================================= */ .t-input { width: 100%; box-sizing: border-box; font-family: inherit; font-size: 16px; color: var(--g900); background: var(--g100); border: none; border-radius: var(--radius-input); padding: 14px 16px; outline: none; transition: box-shadow .15s ease; } .t-input::placeholder { color: var(--g400); } .t-input:focus { box-shadow: inset 0 0 0 2px var(--primary); } /* ================================================================= LIVE 점 — 빨강 점 1.5s 점멸 ================================================================= */ .t-live-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--red); animation: t-live-blink 1.5s ease-in-out infinite; } @keyframes t-live-blink { 0%, 100% { opacity: 1; } 50% { opacity: .25; } } /* ================================================================= 영수증 톤 강제 무력화 (혹시 남아있을 경우 인디고로 흡수) ================================================================= */ :root { --paper: var(--bg); --receipt: var(--white); --ink: var(--g900); --orange: var(--primary); --orange-d: var(--primary-dark); --soft: var(--primary-light); --sub: var(--g600); --line: var(--g200); } /* ================================================================= 공통 레이아웃 — 헤더 / 좌측 레일 / 하단 탭바 layout.js 주입 시 가 붙은 페이지에만 적용. (index/category 등 자체 레이아웃 페이지는 클래스가 없어 영향 없음) ================================================================= */ :root { --hdr-h: 56px; /* 헤더 높이(모바일/태블릿) */ --rail-w: 72px; /* 레일 폭(모바일) */ --tabbar-h: 72px; /* 하단 탭바 높이(모바일) */ } @media (min-width: 769px) { :root { --rail-w: 100px; } } /* 태블릿 */ @media (min-width: 1025px) { :root { --rail-w: 220px; --hdr-h: 64px; } } /* 데스크톱: 레일 220, 헤더 64 */ /* ★ 겹침 버그 해결 — 본문(메인 컨테이너=body)에 레일폭보다 큰 margin-left. html.soho-chrome 특이도(0,1,2) + !important 로 페이지 인라인 body{}·--bg 재정의를 이김. */ html.soho-chrome body { margin-left: 0 !important; /* 모바일: 레일 숨김 → 본문이 화면 좌우 풀폭 (좌우 패딩은 본문 컨테이너에서 16px) */ padding-top: var(--hdr-h); padding-bottom: 80px; /* 하단 탭바(72)에 안 가리게 */ background: var(--color-bg); /* 명세 배경 #F4F6FB 고정 */ } @media (min-width: 769px) { html.soho-chrome body { margin-left: 108px !important; padding-bottom: 24px; } } /* 태블릿: 레일 100 + 8, 탭바 숨김 */ @media (min-width: 1025px) { html.soho-chrome body { margin-left: 232px !important; } } /* 데스크톱: 레일 220 + 12 */ /* 미디어/광고/표가 레일 마진과 겹쳐 가로 넘침 나는 것 방지(모바일) */ html.soho-chrome img, html.soho-chrome iframe, html.soho-chrome ins.adsbygoogle, html.soho-chrome embed, html.soho-chrome video { max-width: 100% !important; } /* 광고망이 ins 안에 주입하는 고정폭 호스트(aswift 등)를 컨테이너로 클립 */ html.soho-chrome ins.adsbygoogle { display: block; overflow: hidden; } html.soho-chrome [id^="aswift_"] { max-width: 100% !important; } /* 공유 버튼 행이 좁은 화면에서 줄바꿈되게(가로 넘침 방지) */ html.soho-chrome .share-row { flex-wrap: wrap; } /* 레거시 #sticky-cta(near-black 풀폭 하단 바)는 글로벌 크롬에서 숨김 — 하단 탭바·인콘텐츠 상담 CTA와 중복, 레일/탭바와 겹치고 검정바라 비노출 */ html.soho-chrome #sticky-cta { display: none !important; } /* 공통 SVG 아이콘 기본 스타일 */ .soho-chrome svg.ic { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } /* ── 헤더 (전 페이지 동일, 56px, 흰 배경 + 하단 보더) ── */ .soho-header { position: fixed; top: 0; left: 0; right: 0; height: var(--hdr-h); display: flex; align-items: center; justify-content: space-between; padding: 0 14px; background: var(--color-surface); border-bottom: 1px solid var(--color-border); z-index: 50; } .soho-logo { font-weight: 900; font-size: 22px; letter-spacing: -.03em; text-decoration: none; line-height: 1; } .soho-logo .l1 { color: var(--g900); } .soho-logo .l2 { color: var(--primary); } .soho-hd-right { display: flex; align-items: center; gap: 4px; } .soho-iconbtn { position: relative; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border: none; background: transparent; color: var(--g600); border-radius: 10px; cursor: pointer; padding: 0; } .soho-iconbtn:hover { background: var(--g100); color: var(--g900); } .soho-iconbtn .ic { width: 22px; height: 22px; } .soho-iconbtn .dot { position: absolute; top: 8px; right: 9px; width: 7px; height: 7px; border-radius: 50%; background: var(--red); border: 2px solid var(--white); } /* 헤더 검색 (아이콘 → 확장 박스) */ .soho-search { position: relative; } .soho-search-box { display: none; position: absolute; right: 0; top: 46px; width: min(86vw, 360px); background: var(--white); border: 1px solid var(--g200); border-radius: 14px; box-shadow: 0 8px 24px rgba(0,0,0,.10); padding: 8px; } .soho-search.open .soho-search-box { display: block; } .soho-search-box input { width: 100%; box-sizing: border-box; font-size: 16px; color: var(--g900); background: var(--g100); border: none; border-radius: 10px; padding: 12px 14px; outline: none; } .soho-search-box input::placeholder { color: var(--g400); } /* ── 좌측 레일 (전 페이지 동일, 헤더 아래 ~ 바닥) ── */ .soho-rail { position: fixed; left: 0; top: var(--hdr-h); bottom: 0; width: var(--rail-w); /* 명시적 높이: 페이지 인라인 CSS의 nav{height:..} 누수 방지(레일이 56px로 잘리는 버그 차단) */ height: calc(100vh - var(--hdr-h)); box-sizing: border-box; background: var(--color-surface); border-right: 1px solid var(--color-border); display: flex; flex-direction: column; gap: 2px; padding: 8px 0; z-index: 40; overflow-y: auto; } /* 주입 크롬은 페이지의 bare 요소 셀렉터(nav/header) 영향 안 받게 핵심 속성 고정. ⚠️ inset-inline:auto 는 left/right 를 auto 로 만들어 fixed 레일이 viewport(0)이 아닌 본문 시작점(body margin)에 붙어 본문을 덮는 버그를 유발 → 사용하지 말고 left/right 명시. */ .soho-header, .soho-rail, .soho-tabbar { margin: 0; max-width: none; min-width: 0; } .soho-header { left: 0; right: 0; top: 0; bottom: auto; } /* 레일은 반드시 viewport 좌측(left:0)에 고정 — left:auto 면 본문 위로 겹침. !important로 못 덮게. */ .soho-rail { left: 0 !important; right: auto !important; width: var(--rail-w) !important; } /* top:auto 명시 — 페이지 인라인 nav{top:0} 누수로 탭바가 상단에 박혀 헤더를 덮던 버그 차단 */ .soho-tabbar { left: 0; right: 0; top: auto; bottom: 0; height: var(--tabbar-h); } /* nav{justify-content/align-items/border} 누수로 레일 항목이 퍼지거나 보더 생기는 것 차단 */ .soho-rail { justify-content: flex-start; align-items: stretch; border-top: none; border-bottom: none; } .soho-tabbar { justify-content: stretch; align-items: stretch; } .soho-rail::-webkit-scrollbar { width: 0; } .soho-rail-item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; min-height: 72px; padding: 6px 4px; /* 항목 높이 72px(모바일) */ text-decoration: none; color: var(--color-text-secondary); font-size: 11px; font-weight: 600; letter-spacing: -.02em; border-left: 3px solid transparent; } .soho-rail-item .ic { width: 26px; height: 26px; } /* 아이콘 26px(모바일) */ .soho-rail-item:hover { background: var(--g50); color: var(--color-text-primary); } .soho-rail-item.active { border-left-color: var(--color-primary); background: var(--color-primary-light); color: var(--color-primary); } .soho-rail-item.active .ic { stroke-width: 2.5; } @media (min-width: 1025px) { .soho-rail { padding: 12px 10px; gap: 4px; } .soho-rail-item { flex-direction: row; justify-content: flex-start; gap: 12px; min-height: 80px; padding: 12px 14px; font-size: 14px; border-radius: 12px; /* 항목 80px, 텍스트 14px(데스크톱) */ } .soho-rail-item .ic { width: 24px; height: 24px; } /* 아이콘 24px(데스크톱) */ } /* ── 하단 탭바 (모바일 전용) ── */ .soho-tabbar { position: fixed; left: 0; right: 0; bottom: 0; height: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px)); padding-bottom: env(safe-area-inset-bottom, 0px); box-sizing: border-box; display: flex; background: var(--color-surface); border-top: 1px solid var(--color-border); z-index: 50; } .soho-tab { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; text-decoration: none; color: var(--color-text-muted); font-size: 11px; font-weight: 600; letter-spacing: -.02em; } .soho-tab .ic { width: 24px; height: 24px; } .soho-tab.active { color: var(--color-primary); } .soho-tab.active .ic { stroke-width: 2.5; } @media (min-width: 769px) { .soho-tabbar { display: none; } } /* ── 반응형 분기: 모바일(~768px)은 좌측 레일 숨김 → 본문 풀폭, 이동은 하단 탭바. 태블릿+(769px~)은 레일 표시(탭바 숨김은 위 규칙). ── */ .soho-rail { display: none; } @media (min-width: 769px) { .soho-rail { display: flex; } } /* 모바일: 본문 컨테이너 좌우 패딩 16px 통일(레일 사라진 풀폭에서 시원한 가독성) */ @media (max-width: 768px) { html.soho-chrome .article-wrap, html.soho-chrome .page-wrap, html.soho-chrome .wrap, html.soho-chrome .srch-wrap { padding-left: 16px !important; padding-right: 16px !important; } }