/*
Theme Name: 서울건설정보 선택센터 (Seoulmna Child)
Theme URI: https://seoulmna.kr
Description: Astra 자식 테마 v1.9.4 — 메인페이지 시각 디자인 polish (자율 의사결정 8개 옵션 평가 후 A+G+B+D+F 결합): ① Hero 빌딩 silhouette SVG (gold opacity 0.10, 1.6s fade-in, 우측 하단 480×280) ② Hero mesh gradient orb (3개 radial gradient, 28s drift animation) ③ How-it-works 단계 연결선 (gold dotted line, 1→2→3 시각화) + 번호 typography (48px circle, hover scale 1.06 + rotate -3deg) ④ Section transition gradient (60px gold thin) ⑤ Card hover (사진 scale 1.05 + saturate 1.1 + gold tint + lift -6px + glow) ⑥ Hero CTA metallic gold gradient + sweep animation ⑦ Bento diagnose ribbon sweep. v1.9.1 typography fix + clamp padding + stagger reveal 유지.
Author: 행정사사무소 하랑 (하랑랩스)
Author URI: https://seoulmna.co.kr
Template: astra
Version: 1.9.4
Text Domain: seoulmna-child
*/
/* ============================================================
Design Tokens — .co.kr 브랜드 DNA 동기화
============================================================ */
:root {
/* v1.8.0: Primary palette — prestigious B2B 톤 강화 (Linear/Vercel/김앤장 영감)
navy 채도·명도 모두 down (deeper), gold 채도 up (brighter) */
--smk-navy: #001f3d; /* was #003764, deeper */
--smk-navy-deep: #001028; /* was #002847, deepest backdrop */
--smk-navy-soft: color-mix(in srgb, #001f3d 6%, #ffffff);
--smk-gold: #d4af37; /* was #c9a961, brighter (true gold leaf) */
--smk-gold-warm: #b8924d; /* hover state, warm tone */
--smk-gold-soft: color-mix(in srgb, #d4af37 14%, #ffffff);
--smk-gold-line: color-mix(in srgb, #d4af37 35%, transparent);
--smk-mint: #19c2c2;
--smk-cream: #fbf6e7;
/* Text */
--smk-text: #1a1f2e;
--smk-text-soft: #5b6273;
--smk-text-muted: #8b909a;
/* Surface */
--smk-bg: #ffffff;
--smk-bg-alt: #f7f9fc;
--smk-line: color-mix(in srgb, #003764 8%, transparent);
/* Typography */
--font-sans: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
--font-display: 'IBM Plex Sans KR', var(--font-sans);
--font-mono: 'JetBrains Mono', 'Fira Code', monospace;
/* Layout */
--container-max: 1200px;
/* Spacing scale — v1.1: 20·24·32 추가 + 데스크탑 호흡감 96-128 */
--space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
--space-5: 20px; --space-6: 24px; --space-7: 28px; --space-8: 32px;
--space-10: 40px; --space-12: 48px; --space-14: 56px; --space-16: 64px;
--space-20: 80px; --space-24: 96px; --space-32: 128px;
/* Radius */
--radius: 10px;
--radius-sm: 6px;
--radius-lg: 16px;
/* Shadows */
--shadow-card: 0 2px 12px rgba(10,30,60,0.06);
--shadow-card-hover: 0 12px 28px rgba(10,30,60,0.10);
--shadow-sticky: 0 -2px 12px rgba(0,0,0,0.08);
/* Motion */
--ease: cubic-bezier(0.4, 0, 0.2, 1);
--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
--ease-smooth: cubic-bezier(0.65, 0, 0.35, 1);
--ease-expo: cubic-bezier(0.16, 1, 0.3, 1); /* premium feel */
/* v1.1: 한글 가독성 본문 */
--line-height-body: 1.78;
}
/* ============================================================
v1.1 Grain texture (subtle premium feel) — 1KB SVG noise
============================================================ */
.smk-grain::after {
content: '';
position: absolute;
inset: 0;
background-image: url("data:image/svg+xml;utf8,");
opacity: 0.6;
mix-blend-mode: overlay;
pointer-events: none;
}
/* ============================================================
v1.1 SVG 카드 placeholder 패턴 — 카테고리별 시각 차별화
각 카테고리는 다른 노이즈 시드 + 다른 배경 그라디언트
============================================================ */
.smk-card-thumb-placeholder[data-cat="decide"] {
background:
radial-gradient(circle at 70% 30%, color-mix(in srgb, var(--smk-gold) 22%, transparent), transparent 55%),
linear-gradient(135deg, var(--smk-navy) 0%, #001a30 100%);
}
.smk-card-thumb-placeholder[data-cat="checklist"] {
background:
radial-gradient(circle at 30% 70%, color-mix(in srgb, var(--smk-mint) 18%, transparent), transparent 55%),
linear-gradient(135deg, #0a3a52 0%, var(--smk-navy-deep) 100%);
}
.smk-card-thumb-placeholder[data-cat="criteria"] {
background:
linear-gradient(135deg, var(--smk-navy) 0%, #0a2540 50%, #001a30 100%);
}
.smk-card-thumb-placeholder[data-cat="cases"] {
background:
radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--smk-gold) 16%, transparent), transparent 60%),
linear-gradient(135deg, #1a2a40 0%, var(--smk-navy-deep) 100%);
}
.smk-card-thumb-placeholder[data-cat="qna"] {
background:
radial-gradient(circle at 80% 80%, color-mix(in srgb, var(--smk-mint) 22%, transparent), transparent 55%),
linear-gradient(135deg, var(--smk-navy) 0%, #003a52 100%);
}
/* ============================================================
View Transitions API — Smooth navigation (Chrome 111+)
Progressive enhancement: 미지원 브라우저는 일반 navigation
============================================================ */
@view-transition {
navigation: auto;
}
::view-transition-old(root),
::view-transition-new(root) {
animation-duration: 0.25s;
animation-timing-function: var(--ease);
}
/* ============================================================
Cascade Layers — 우선순위 명확화
============================================================ */
@layer reset, base, components, utilities;
@layer reset {
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; }
img, picture, video, canvas, svg { display: block; max-width: 100%; }
button { cursor: pointer; }
}
@layer base {
html { scroll-behavior: smooth; }
body {
font-family: var(--font-sans);
color: var(--smk-text);
background: var(--smk-bg);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
font-size: 17px; /* v1.1: 한글 가독성 16→17 */
line-height: var(--line-height-body); /* v1.1: 1.6→1.78 */
font-feature-settings: 'palt' 1, 'ss01' 1; /* 한글 자간 미세 조정 */
}
h1, h2, h3, h4, h5 {
font-family: var(--font-display);
color: var(--smk-navy);
letter-spacing: -0.01em;
font-weight: 700;
line-height: 1.3;
}
h1 { font-size: clamp(28px, 4vw, 44px); font-weight: 800; line-height: 1.15; }
h2 { font-size: clamp(22px, 2.6vw, 32px); margin: var(--space-12) 0 var(--space-4); }
h3 { font-size: 20px; margin: var(--space-8) 0 var(--space-3); }
a {
color: var(--smk-navy);
text-decoration: none;
transition: color 0.15s var(--ease);
}
a:hover { color: var(--smk-gold); }
::selection { background: var(--smk-gold); color: var(--smk-navy-deep); }
}
@layer components {
/* Container */
.smk-container {
max-width: var(--container-max);
margin: 0 auto;
padding: 0 var(--space-6);
container-type: inline-size;
}
/* Buttons */
.smk-btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 12px 22px;
border-radius: var(--radius);
font-weight: 600;
font-size: 15px;
transition: transform .15s var(--ease), box-shadow .15s var(--ease), background .15s var(--ease);
cursor: pointer;
border: 0;
text-decoration: none;
}
.smk-btn-gold {
background: var(--smk-gold);
color: var(--smk-navy-deep);
}
.smk-btn-gold:hover {
transform: translateY(-1px);
box-shadow: 0 6px 18px color-mix(in srgb, var(--smk-gold) 40%, transparent);
color: var(--smk-navy-deep);
}
.smk-btn-navy { background: var(--smk-navy); color: #fff; }
.smk-btn-navy:hover { background: var(--smk-navy-deep); color: #fff; transform: translateY(-1px); }
.smk-btn-outline {
background: transparent;
color: var(--smk-navy);
border: 1.5px solid var(--smk-navy);
}
.smk-btn-outline:hover {
background: var(--smk-navy);
color: #fff;
}
.smk-btn-ghost { background: transparent; color: var(--smk-navy); }
/* Cards */
.smk-card {
background: var(--smk-bg);
border: 1px solid var(--smk-line);
border-left: 1px solid color-mix(in srgb, var(--smk-navy) 8%, transparent); /* v1.1: 골드 hairline → subtle navy (강조력 분리) */
border-radius: var(--radius);
padding: var(--space-6);
transition: box-shadow .4s var(--ease-expo), transform .4s var(--ease-expo), border-color .25s var(--ease);
}
.smk-card:hover {
box-shadow: var(--shadow-card-hover);
transform: translateY(-4px); /* v1.1: -2 → -4 (premium feel) */
border-left-color: var(--smk-gold); /* hover 시 골드 등장 */
}
/* ============================================================
v1.1 Header & Trust mini-bar — 정보 밀도 ↓, 모바일 컴팩트
============================================================ */
.smk-trust-mini-bar {
background: var(--smk-navy-deep);
color: #fff;
font-size: 11.5px;
padding: 7px 0;
font-feature-settings: 'tnum';
letter-spacing: 0.01em;
}
.smk-trust-mini-bar .smk-container {
display: flex;
flex-wrap: wrap;
gap: 4px 12px;
align-items: center;
justify-content: center;
}
.smk-trust-mini-bar .smk-sep { color: rgba(255,255,255,0.32); }
.smk-trust-mini-bar strong { font-weight: 700; color: #fff; }
/* 모바일에선 핵심 1줄만 (등록번호·특허는 footer에서 노출) */
@media (max-width: 768px) {
.smk-trust-mini-bar { padding: 6px 0; font-size: 11px; }
.smk-trust-mini-bar span:nth-child(n+5),
.smk-trust-mini-bar .smk-sep:nth-of-type(n+3) { display: none; }
}
.smk-header {
background: rgba(255,255,255,0.85);
backdrop-filter: blur(16px) saturate(180%);
-webkit-backdrop-filter: blur(16px) saturate(180%);
border-bottom: 1px solid var(--smk-line);
position: sticky;
top: 0;
z-index: 50;
transition: box-shadow 0.3s var(--ease-smooth);
}
.smk-header.scrolled {
box-shadow: 0 2px 24px rgba(0,55,100,0.06);
}
.smk-header-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 0;
gap: var(--space-6);
}
/* v1.3.8: 로고 = "서울건설정보" + 빌딩 마크 이미지 (운영 주체는 푸터·소개에서 안내) */
.smk-logo {
display: flex;
align-items: center;
gap: 10px;
font-family: var(--font-display);
font-weight: 800;
font-size: 18px;
color: var(--smk-navy);
text-decoration: none;
}
.smk-logo-mark {
width: 32px;
height: 32px;
object-fit: contain;
flex-shrink: 0;
display: block;
}
.smk-logo-text { font-size: 18px; font-weight: 800; letter-spacing: -0.01em; }
.smk-nav { display: flex; gap: var(--space-6); }
.smk-nav a {
font-weight: 600;
font-size: 15px;
color: var(--smk-text);
padding: 6px 4px;
border-bottom: 2px solid transparent;
transition: color .15s var(--ease), border-color .15s var(--ease);
}
.smk-nav a:hover { color: var(--smk-navy); border-bottom-color: var(--smk-gold); }
.smk-header-cta { display: flex; align-items: center; gap: 8px; }
/* v1.3.5: CTA 색상 위계 재정렬 — 전화 = 강조(골드 솔리드), 카톡 = outline 보조 */
.smk-tel {
display: inline-flex;
align-items: center;
gap: 6px;
background: var(--smk-gold);
color: var(--smk-navy);
padding: 7px 12px;
border-radius: 6px;
font-family: var(--font-mono);
font-weight: 700;
font-size: 13px;
text-decoration: none;
transition: background .15s var(--ease), transform .15s var(--ease);
}
.smk-tel:hover { background: #d9b76d; transform: translateY(-1px); }
.smk-tel svg { color: var(--smk-navy); }
.smk-kakao {
display: inline-flex;
align-items: center;
gap: 5px;
background: transparent;
color: var(--smk-text);
padding: 6px 10px;
border: 1px solid var(--smk-line);
border-radius: 6px;
font-weight: 600;
font-size: 13px;
text-decoration: none;
transition: border-color .15s var(--ease), color .15s var(--ease);
}
.smk-kakao:hover { color: var(--smk-navy); border-color: var(--smk-navy); }
.smk-kakao svg { color: var(--smk-text-soft); }
/* v1.1: 모바일 햄버거 (필수) */
.smk-hamburger {
display: none;
background: transparent;
border: 0;
padding: 8px;
cursor: pointer;
width: 40px;
height: 40px;
position: relative;
}
.smk-hamburger span {
display: block;
width: 22px;
height: 1.5px;
background: var(--smk-navy);
margin: 5px auto;
transition: transform .3s var(--ease-smooth), opacity .2s;
transform-origin: center;
}
.smk-hamburger.is-open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.smk-hamburger.is-open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.smk-hamburger.is-open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
.smk-mobile-menu {
position: fixed;
inset: 0;
background: rgba(255,255,255,0.98);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
z-index: 49;
padding: 96px var(--space-6) var(--space-6);
transform: translateX(100%);
transition: transform .35s var(--ease-expo);
display: flex;
flex-direction: column;
overflow-y: auto;
}
.smk-mobile-menu.is-open { transform: translateX(0); }
.smk-mobile-menu a {
display: block;
padding: 18px 4px;
font-size: 20px;
font-weight: 600;
color: var(--smk-text);
border-bottom: 1px solid var(--smk-line);
font-family: var(--font-display);
}
.smk-mobile-menu a:active { background: var(--smk-gold-soft); }
.smk-mobile-menu .smk-mm-cta {
margin-top: var(--space-8);
display: flex;
gap: var(--space-3);
flex-direction: column;
}
.smk-mobile-menu .smk-mm-cta a {
border-bottom: 0;
padding: 16px;
border-radius: var(--radius);
text-align: center;
}
.smk-mobile-menu .smk-mm-tel {
background: var(--smk-navy);
color: #fff;
}
.smk-mobile-menu .smk-mm-kakao {
background: #fee500;
color: #3c1e1e;
}
/* ============================================================
Footer — v1.3.4 슬림 미니멀 (Linear/Vercel·NHN 트렌드)
============================================================ */
.smk-footer {
background: var(--smk-bg-alt);
border-top: 1px solid var(--smk-line);
padding: var(--space-8) 0 var(--space-5);
margin-top: var(--space-16);
color: var(--smk-text-soft);
font-size: 12.5px;
line-height: 1.7;
}
.smk-footer-nav {
display: flex;
flex-wrap: wrap;
gap: 4px 18px;
padding-bottom: var(--space-3);
margin-bottom: var(--space-3);
border-bottom: 1px solid var(--smk-line);
}
.smk-footer-nav a {
color: var(--smk-navy);
font-weight: 600;
font-size: 13px;
text-decoration: none;
transition: color .2s var(--ease);
}
.smk-footer-nav a:hover { color: var(--smk-gold); }
.smk-footer-info {
color: var(--smk-text-soft);
opacity: 0.85;
}
.smk-footer-info p {
margin: 2px 0;
font-size: 12.5px;
}
.smk-footer-info strong {
color: var(--smk-navy);
font-weight: 700;
}
/* v1.3.7: footer 운영 주체 강조 라인 */
.smk-footer-brand-line {
color: var(--smk-text) !important;
font-size: 13px !important;
margin-bottom: 6px !important;
opacity: 1;
}
.smk-footer-info a {
color: var(--smk-text-soft);
text-decoration: none;
}
.smk-footer-info a:hover {
color: var(--smk-navy);
text-decoration: underline;
}
.smk-footer-sep {
color: rgba(15, 23, 42, 0.22);
margin: 0 4px;
font-size: 11px;
}
.smk-footer-bottom {
margin-top: var(--space-4);
padding-top: var(--space-3);
border-top: 1px solid var(--smk-line);
font-size: 11.5px;
opacity: 0.7;
}
.smk-footer-bottom a {
color: var(--smk-text-soft);
text-decoration: none;
}
.smk-footer-bottom a:hover { color: var(--smk-navy); }
.smk-footer-disclaimer {
margin: var(--space-2) 0 0;
font-size: 11px;
opacity: 0.55;
color: var(--smk-text-soft);
}
/* ============================================================
Card system + Archive grid
============================================================ */
.smk-card-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-6);
margin: var(--space-8) 0;
}
.smk-post-card {
padding: 0;
overflow: hidden;
}
.smk-post-card .smk-card-link { display: block; color: inherit; }
.smk-card-thumb {
aspect-ratio: 16/9;
overflow: hidden;
background: var(--smk-bg-alt);
}
.smk-card-thumb img {
width: 100%; height: 100%;
object-fit: cover;
transition: transform .5s var(--ease);
}
.smk-post-card:hover .smk-card-thumb img { transform: scale(1.05); }
.smk-card-thumb-placeholder {
background: linear-gradient(135deg, var(--smk-navy) 0%, var(--smk-navy-deep) 100%);
color: rgba(255,255,255,0.85);
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-display);
font-weight: 700;
font-size: 16px;
padding: var(--space-4);
text-align: center;
position: relative;
}
.smk-card-thumb-placeholder::after {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(circle at 80% 30%, rgba(201,169,97,0.15), transparent 50%);
}
.smk-card-body { padding: var(--space-4) var(--space-6); }
.smk-card-cat {
display: inline-block;
font-size: 11px;
font-weight: 700;
color: var(--smk-gold);
background: var(--smk-gold-soft);
padding: 3px 8px;
border-radius: 4px;
margin-bottom: 8px;
}
.smk-card-title {
font-size: 17px;
line-height: 1.4;
margin: 0 0 8px;
color: var(--smk-navy);
}
.smk-card-excerpt {
font-size: 13px;
color: var(--smk-text-soft);
line-height: 1.6;
margin: 0 0 12px;
}
.smk-card-meta {
font-size: 12px;
color: var(--smk-text-soft);
display: flex;
gap: 6px;
}
/* Archive */
.smk-archive-head { margin: var(--space-12) 0 var(--space-8); }
.smk-archive-head h1 { font-size: 32px; }
.smk-archive-desc { color: var(--smk-text-soft); font-size: 15px; }
.smk-pagination {
margin: var(--space-12) 0;
text-align: center;
}
.smk-pagination .page-numbers {
display: inline-block;
padding: 8px 14px;
margin: 0 2px;
border: 1px solid var(--smk-line);
border-radius: var(--radius-sm);
color: var(--smk-text);
transition: all .15s var(--ease);
}
.smk-pagination .page-numbers:hover { background: var(--smk-bg-alt); }
.smk-pagination .current {
background: var(--smk-navy);
color: #fff;
border-color: var(--smk-navy);
}
/* ============================================================
ConversionBridge (양수·자가진단·신규 3-card)
============================================================ */
.smk-conversion-bridge {
margin: var(--space-16) 0 var(--space-12);
padding-top: var(--space-8);
border-top: 1px solid var(--smk-line);
}
.smk-conversion-bridge h2 {
text-align: center;
font-size: 22px;
}
.smk-cb-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-4);
margin-top: var(--space-6);
}
.smk-cb-card {
display: block;
padding: var(--space-6);
border-radius: var(--radius);
border: 1px solid var(--smk-line);
transition: transform .15s var(--ease), box-shadow .15s var(--ease);
color: inherit;
}
.smk-cb-card:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-card-hover);
}
.smk-cb-transfer { background: color-mix(in srgb, var(--smk-navy) 4%, var(--smk-bg)); }
.smk-cb-decide {
background: var(--smk-gold-soft);
border-color: var(--smk-gold);
}
.smk-cb-new { background: color-mix(in srgb, var(--smk-mint) 6%, var(--smk-bg)); }
.smk-cb-tag {
display: inline-block;
font-size: 11px;
font-weight: 700;
padding: 3px 8px;
border-radius: 4px;
background: color-mix(in srgb, var(--smk-navy) 12%, transparent);
color: var(--smk-navy);
}
.smk-cb-tag-gold {
background: var(--smk-gold);
color: var(--smk-navy-deep);
}
.smk-cb-card h3 {
font-size: 16px;
margin: 8px 0;
color: var(--smk-navy);
}
.smk-cb-card p {
font-size: 13px;
color: var(--smk-text-soft);
margin: 0 0 12px;
line-height: 1.5;
}
.smk-cb-cta {
font-weight: 600;
color: var(--smk-navy);
font-size: 14px;
}
/* ============================================================
v1.3 Home Hero — Corporate Enterprise (Samsung·LG·McKinsey 톤)
단톤 deep navy + 단일 subtle accent · 미세 그라디언트만
============================================================ */
.smk-home-hero {
background:
radial-gradient(ellipse 90% 50% at 50% 0%, color-mix(in srgb, var(--smk-gold) 8%, transparent), transparent 60%),
radial-gradient(ellipse 60% 40% at 50% 100%, color-mix(in srgb, var(--smk-mint) 6%, transparent), transparent 60%),
linear-gradient(180deg, #00111e 0%, #001a30 50%, #002238 100%);
color: #fff;
padding: var(--space-24) 0 var(--space-20);
position: relative;
overflow: hidden;
view-transition-name: hero;
isolation: isolate;
}
/* v1.3: subtle 격자 grid 패턴 — 코퍼레이트 톤 (Apple·Stripe annual report) */
.smk-home-hero::before {
content: '';
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
background-size: 64px 64px;
pointer-events: none;
z-index: 0;
mask-image: radial-gradient(ellipse 80% 60% at 50% 50%, black, transparent);
-webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 50%, black, transparent);
}
.smk-home-hero::after { display: none; }
/* v1.3.1: 모든 hero 자식 요소 강제 가운데 정렬 (Astra 부모 override) */
.smk-hero-inner,
.smk-hero-inner * {
text-align: center;
}
.smk-hero-inner {
position: relative;
z-index: 2;
max-width: 920px;
margin: 0 auto;
}
/* v1.3.1 Eyebrow — small caps + subtle glow */
.smk-hero-eyebrow {
display: inline-block;
font-size: 12px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--smk-gold);
font-weight: 600;
margin-bottom: var(--space-6);
font-family: var(--font-mono);
text-shadow: 0 0 24px color-mix(in srgb, var(--smk-gold) 45%, transparent);
animation: smk-eyebrow-fade 0.8s var(--ease-expo) both;
}
@keyframes smk-eyebrow-fade {
from { opacity: 0; transform: translateY(-8px); }
to { opacity: 1; transform: translateY(0); }
}
/* v1.3.1 H1 — Champagne gradient text + radial glow + @starting-style entry
specificity 강화 (.smk-home-hero .smk-hero-inner h1) + !important fallback */
.smk-home-hero .smk-hero-inner h1,
.smk-home-hero h1.smk-hero-title {
color: #ffffff !important;
background: linear-gradient(180deg, #ffffff 0%, #ffffff 60%, color-mix(in srgb, var(--smk-gold) 50%, #ffffff) 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
font-size: clamp(36px, 6vw, 64px);
line-height: 1.12;
margin: 0 auto var(--space-6);
letter-spacing: -0.025em;
font-weight: 800;
text-wrap: pretty; /* Chrome 117+ — 더 자연스러운 줄바꿈 */
max-width: 820px;
position: relative;
animation: smk-h1-enter 1.0s var(--ease-expo) both;
animation-delay: 0.15s;
}
/* Radial glow behind H1 — depth 효과 */
.smk-home-hero .smk-hero-inner h1::before {
content: '';
position: absolute;
inset: -40% -20%;
background: radial-gradient(ellipse 60% 40% at 50% 50%, color-mix(in srgb, var(--smk-gold) 12%, transparent), transparent 70%);
z-index: -1;
pointer-events: none;
opacity: 0;
animation: smk-glow-fade 1.6s var(--ease-expo) 0.4s both;
}
@keyframes smk-h1-enter {
from { opacity: 0; transform: translateY(20px); filter: blur(8px); }
to { opacity: 1; transform: translateY(0); filter: blur(0); }
}
@keyframes smk-glow-fade {
from { opacity: 0; }
to { opacity: 1; }
}
/* @starting-style — entry animation (Chrome 117+) — fallback은 위 keyframes */
@starting-style {
.smk-home-hero .smk-hero-inner h1 {
opacity: 0;
transform: translateY(20px);
}
}
.smk-hero-sub {
font-size: clamp(16px, 1.8vw, 20px);
color: rgba(255,255,255,0.82);
max-width: 640px;
margin: 0 auto var(--space-8);
line-height: 1.65;
font-weight: 400;
text-wrap: pretty;
animation: smk-sub-fade 1.0s var(--ease-expo) 0.5s both;
}
@keyframes smk-sub-fade {
from { opacity: 0; transform: translateY(12px); }
to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
.smk-hero-eyebrow,
.smk-home-hero .smk-hero-inner h1,
.smk-home-hero .smk-hero-inner h1::before,
.smk-hero-sub { animation: none; }
}
.smk-hero-slogan {
display: none; /* v1.3: 코퍼레이트 톤 — slogan 제거, h1+sub로 충분 */
}
.smk-hero-cta {
display: flex;
gap: var(--space-3);
justify-content: center;
flex-wrap: wrap;
margin-bottom: var(--space-16);
animation: smk-cta-fade 1.0s var(--ease-expo) 0.6s both;
}
@keyframes smk-cta-fade {
from { opacity: 0; transform: translateY(12px); }
to { opacity: 1; transform: translateY(0); }
}
/* v1.3.1: prominent CTA — bigger·brighter·shadow halo */
.smk-hero-cta .smk-btn-gold {
padding: 18px 36px;
font-size: 16px;
font-weight: 700;
color: var(--smk-navy-deep);
background: linear-gradient(180deg, #d6b76d 0%, var(--smk-gold) 100%);
box-shadow:
0 8px 24px color-mix(in srgb, var(--smk-gold) 40%, transparent),
0 0 0 1px color-mix(in srgb, var(--smk-gold) 30%, transparent);
letter-spacing: -0.005em;
}
.smk-hero-cta .smk-btn-gold:hover {
transform: translateY(-2px);
box-shadow:
0 12px 32px color-mix(in srgb, var(--smk-gold) 55%, transparent),
0 0 0 1px color-mix(in srgb, var(--smk-gold) 50%, transparent);
color: var(--smk-navy-deep);
}
.smk-hero-cta .smk-btn-outline {
padding: 18px 32px;
font-size: 15px;
color: rgba(255,255,255,0.92);
border-color: rgba(255,255,255,0.32);
background: rgba(255,255,255,0.02);
backdrop-filter: blur(10px);
}
.smk-hero-cta .smk-btn-outline:hover {
background: rgba(255,255,255,0.1);
border-color: rgba(255,255,255,0.6);
color: #fff;
}
/* ============================================================
v1.3.1 Hero Trust Strip — 코퍼레이트 카드 (가독성 ↑, 컬러 명확)
============================================================ */
.smk-hero-trust {
background: linear-gradient(180deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.03) 100%);
border: 1px solid rgba(255,255,255,0.14);
border-radius: var(--radius-lg);
padding: var(--space-6) var(--space-4);
max-width: 960px;
margin: 0 auto;
backdrop-filter: blur(20px) saturate(140%);
-webkit-backdrop-filter: blur(20px) saturate(140%);
box-shadow: 0 8px 32px rgba(0,0,0,0.2);
animation: smk-trust-fade 1.0s var(--ease-expo) 0.7s both;
}
@keyframes smk-trust-fade {
from { opacity: 0; transform: translateY(16px); }
to { opacity: 1; transform: translateY(0); }
}
.smk-trust-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--space-2);
}
.smk-trust-item {
text-align: center;
padding: var(--space-2) var(--space-3);
border-right: 1px solid rgba(255,255,255,0.12);
transition: background .2s var(--ease);
}
.smk-trust-item:last-child { border-right: 0; }
.smk-trust-item:hover {
background: rgba(201,169,97,0.05);
border-radius: var(--radius);
}
.smk-trust-label {
display: block;
font-size: 11px;
color: rgba(255,255,255,0.62);
letter-spacing: 0.16em;
text-transform: uppercase;
margin-bottom: 6px;
font-family: var(--font-mono);
font-weight: 500;
}
.smk-trust-value {
display: block;
font-size: 15px;
color: rgba(255,255,255,0.96);
font-weight: 600;
line-height: 1.4;
}
.smk-trust-value strong {
color: var(--smk-gold);
font-weight: 700;
text-shadow: 0 0 12px color-mix(in srgb, var(--smk-gold) 25%, transparent);
}
.smk-trust-value small {
display: block;
font-size: 11px;
color: rgba(255,255,255,0.5);
margin-top: 2px;
font-weight: 400;
}
.smk-hero-disclaimer {
text-align: center;
margin-top: var(--space-4);
font-size: 11.5px;
color: rgba(255,255,255,0.5);
letter-spacing: 0.02em;
}
@media (max-width: 768px) {
.smk-trust-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-3); }
.smk-trust-item { border-right: 0; padding: var(--space-3); }
.smk-trust-item:nth-child(odd) { border-right: 1px solid rgba(255,255,255,0.08); }
.smk-trust-item:nth-child(-n+2) { border-bottom: 1px solid rgba(255,255,255,0.08); padding-bottom: var(--space-3); }
.smk-hero-cta { flex-direction: column; align-items: stretch; padding: 0 var(--space-6); }
.smk-hero-cta .smk-btn-gold,
.smk-hero-cta .smk-btn-outline { width: 100%; }
}
/* ============================================================
Sections
============================================================ */
/* v1.1: 데스크탑 96-128px 호흡감, 모바일은 절제 */
.smk-section { padding: var(--space-24) 0 var(--space-12); }
@media (max-width: 768px) {
.smk-section { padding: var(--space-12) 0 var(--space-8); }
}
.smk-section-head {
text-align: center;
margin-bottom: var(--space-10);
}
/* v1.1: scroll reveal — fade + slight Y */
@media (prefers-reduced-motion: no-preference) {
.smk-section { animation: smk-section-reveal 0.6s var(--ease-expo) both; animation-timeline: view(); animation-range: entry 0% cover 30%; }
@keyframes smk-section-reveal {
from { opacity: 0; transform: translateY(24px); }
to { opacity: 1; transform: translateY(0); }
}
}
.smk-eyebrow {
display: inline-block;
font-size: 11px;
letter-spacing: 0.15em;
font-weight: 700;
color: var(--smk-mint);
margin-bottom: 4px;
font-family: var(--font-mono);
}
.smk-section-head h2 { margin: 0; }
/* Q&A Widget */
.smk-qna-quick { max-width: 720px; margin: 0 auto; }
.smk-qna-quick input {
width: 100%;
padding: 14px 18px;
border: 1.5px solid var(--smk-line);
border-radius: var(--radius);
font-size: 15px;
font-family: inherit;
transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.smk-qna-quick input:focus {
outline: 0;
border-color: var(--smk-navy);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--smk-navy) 10%, transparent);
}
.smk-qna-chips {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: var(--space-3);
justify-content: center;
}
.smk-qna-chips a {
display: inline-block;
padding: 6px 12px;
background: var(--smk-bg-alt);
border: 1px solid var(--smk-line);
border-radius: 999px;
font-size: 13px;
color: var(--smk-text);
transition: all .15s var(--ease);
}
.smk-qna-chips a:hover {
background: var(--smk-gold-soft);
border-color: var(--smk-gold);
color: var(--smk-navy);
}
/* Category tiles */
.smk-cat-tiles {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: var(--space-4);
}
.smk-cat-tile {
background: var(--smk-bg);
border: 1px solid var(--smk-line);
border-radius: var(--radius);
padding: var(--space-6);
text-align: center;
transition: all .2s var(--ease);
color: inherit;
}
.smk-cat-tile:hover {
border-color: var(--smk-gold);
transform: translateY(-2px);
box-shadow: var(--shadow-card-hover);
}
.smk-cat-tile h3 {
color: var(--smk-navy);
margin: 0 0 6px;
font-size: 16px;
}
.smk-cat-tile p {
color: var(--smk-text-soft);
font-size: 12px;
margin: 0;
}
/* ============================================================
Decision Wizard
============================================================ */
.smk-decide-wrap { padding: var(--space-12) 0 var(--space-16); }
.smk-decide-head {
text-align: center;
margin-bottom: var(--space-12);
}
.smk-decide-eyebrow {
font-size: 12px;
font-weight: 700;
letter-spacing: 0.1em;
color: var(--smk-mint);
font-family: var(--font-mono);
}
.smk-decide-head h1 {
font-size: clamp(28px, 4vw, 44px);
margin: 8px 0 12px;
}
.smk-decide-head p {
color: var(--smk-text-soft);
font-size: 15px;
max-width: 580px;
margin: 0 auto;
}
.smk-progress {
background: var(--smk-line);
height: 4px;
border-radius: 2px;
position: relative;
margin: var(--space-8) 0;
overflow: hidden;
}
.smk-progress-bar {
background: linear-gradient(90deg, var(--smk-gold) 0%, color-mix(in srgb, var(--smk-gold) 80%, var(--smk-mint)) 100%);
height: 100%;
width: 20%;
border-radius: 2px;
transition: width .4s var(--ease-spring);
}
.smk-progress-label {
position: absolute;
right: 0;
top: -22px;
font-size: 12px;
color: var(--smk-text-soft);
font-family: var(--font-mono);
}
.smk-q {
border: 0;
padding: 0;
margin: 0;
display: none;
animation: smk-q-fade 0.3s var(--ease);
}
.smk-q-active { display: block; }
.smk-q legend {
font-size: clamp(18px, 2.2vw, 22px);
font-weight: 700;
color: var(--smk-navy);
margin-bottom: var(--space-6);
display: block;
}
@keyframes smk-q-fade {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
.smk-q-options {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-4);
}
.smk-q-options label {
display: block;
cursor: pointer;
}
.smk-q-options input[type="radio"] {
position: absolute;
opacity: 0;
pointer-events: none;
}
.smk-opt {
display: flex;
flex-direction: column;
gap: 6px;
padding: var(--space-6);
background: #fff;
border: 1.5px solid var(--smk-line);
border-radius: var(--radius);
transition: all .15s var(--ease);
min-height: 100px;
}
.smk-opt strong {
font-size: 17px;
font-weight: 700;
color: var(--smk-navy);
}
.smk-opt em {
font-style: normal;
font-size: 13px;
color: var(--smk-text-soft);
}
/* Modern :has() — checked radio의 부모 카드 강조 */
.smk-q-options label:has(input:checked) .smk-opt,
.smk-q-options input:checked + .smk-opt {
border-color: var(--smk-navy);
box-shadow: 0 0 0 2px color-mix(in srgb, var(--smk-navy) 15%, transparent);
background: var(--smk-gold-soft);
}
.smk-q-options label:hover .smk-opt {
border-color: var(--smk-gold);
transform: translateY(-2px);
}
.smk-wizard-nav {
display: flex;
justify-content: space-between;
margin-top: var(--space-8);
}
/* ============================================================
Decision Result Page
============================================================ */
.smk-result-wrap { padding: var(--space-12) 0 var(--space-16); }
.smk-result-head {
text-align: center;
margin-bottom: var(--space-12);
}
.smk-result-tag {
display: inline-block;
font-weight: 700;
padding: 4px 14px;
border-radius: 999px;
font-size: 13px;
margin-bottom: var(--space-3);
}
.smk-tag-transfer { background: color-mix(in srgb, var(--smk-navy) 8%, white); color: var(--smk-navy); }
.smk-tag-new { background: color-mix(in srgb, var(--smk-mint) 12%, white); color: var(--smk-mint); }
.smk-tag-hybrid { background: var(--smk-gold-soft); color: var(--smk-gold); }
.smk-tag-consult { background: #fff4e6; color: #c97a16; }
.smk-result-head h1 {
font-size: clamp(24px, 3vw, 36px);
margin: 0 0 12px;
max-width: 820px;
margin-left: auto;
margin-right: auto;
}
.smk-result-reason {
color: var(--smk-text-soft);
max-width: 720px;
margin: 0 auto var(--space-6);
font-size: 15px;
line-height: 1.7;
}
.smk-result-summary {
background: var(--smk-bg-alt);
padding: var(--space-3) var(--space-6);
border-radius: var(--radius);
display: inline-block;
font-size: 13px;
color: var(--smk-text-soft);
}
.smk-result-summary strong {
color: var(--smk-navy);
margin-right: 8px;
}
.smk-result-cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-6);
margin: var(--space-12) 0 var(--space-8);
}
.smk-result-card {
display: block;
background: #fff;
border: 1px solid var(--smk-line);
border-left: 3px solid var(--smk-gold);
padding: var(--space-6);
border-radius: var(--radius);
position: relative;
transition: all .15s var(--ease);
color: inherit;
}
.smk-result-card:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-card-hover);
}
.smk-result-num {
position: absolute;
top: 14px; right: 14px;
font-family: var(--font-mono);
font-weight: 700;
color: var(--smk-gold);
font-size: 14px;
}
.smk-result-icon {
font-size: 28px;
display: block;
margin-bottom: var(--space-3);
}
.smk-result-card h3 {
font-size: 17px;
margin: 0 0 8px;
color: var(--smk-navy);
}
.smk-result-card p {
font-size: 13px;
color: var(--smk-text-soft);
margin: 0 0 var(--space-4);
line-height: 1.6;
}
.smk-result-cta {
font-weight: 600;
color: var(--smk-navy);
font-size: 14px;
}
.smk-result-replay {
text-align: center;
margin: var(--space-8) 0;
}
.smk-result-replay a {
color: var(--smk-text-soft);
font-size: 14px;
}
/* ============================================================
About + Contact pages
============================================================ */
.smk-about-wrap { padding: var(--space-12) 0 var(--space-16); }
.smk-about-head {
text-align: center;
margin-bottom: var(--space-12);
}
.smk-about-head h1 {
font-size: clamp(36px, 5vw, 56px);
margin: 8px 0 12px;
}
.smk-about-titles {
color: var(--smk-text-soft);
font-size: 15px;
}
/* v1.3.7: 운영 주체 안내 (서울건설정보 = 행정사사무소 하랑 운영) */
.smk-about-brand-note {
margin-top: var(--space-3);
padding: 12px 18px;
background: var(--smk-bg-alt);
border-left: 3px solid var(--smk-gold);
border-radius: 4px;
color: var(--smk-text-soft);
font-size: 13.5px;
line-height: 1.6;
text-align: left;
display: inline-block;
}
.smk-about-brand-note strong { color: var(--smk-navy); font-weight: 700; }
.smk-about-creds h2, .smk-about-activity h2,
.smk-about-press h2, .smk-about-business h2 {
font-size: 20px;
border-bottom: 1px solid var(--smk-gold-soft);
padding-bottom: 8px;
margin-bottom: var(--space-4);
}
/* v1.3.5: creds-grid 이모지 제거 + 라벨 골드 + 라인 미니멀 */
.smk-creds-grid {
list-style: none;
padding: 0;
margin: 0;
display: grid;
grid-template-columns: 1fr;
gap: 0;
border-top: 1px solid var(--smk-line);
}
.smk-creds-grid li {
padding: 16px 0;
border-bottom: 1px solid var(--smk-line);
font-size: 15px;
line-height: 1.6;
color: var(--smk-text);
display: flex;
align-items: baseline;
gap: var(--space-4);
}
.smk-creds-label {
flex-shrink: 0;
width: 88px;
font-size: 11.5px;
font-weight: 700;
letter-spacing: 0.8px;
color: var(--smk-gold);
text-transform: uppercase;
}
.smk-creds-grid strong { color: var(--smk-navy); font-weight: 700; }
.smk-about-philosophy {
margin: var(--space-12) 0;
padding: var(--space-8) var(--space-6);
background: var(--smk-cream);
border-radius: var(--radius);
border-left: 4px solid var(--smk-gold);
}
.smk-about-philosophy blockquote {
font-size: clamp(18px, 2.4vw, 24px);
font-weight: 700;
color: var(--smk-navy);
margin: 0 0 var(--space-3);
font-family: var(--font-display);
}
.smk-about-philosophy p {
margin: 0;
font-size: 15px;
line-height: 1.8;
color: var(--smk-text);
}
/* v1.3.4: activity-cards → 텍스트 list 미니멀 (대기업 트렌드) */
.smk-activity-list {
list-style: none;
padding: 0;
margin: var(--space-4) 0 0;
}
.smk-activity-list li {
padding: var(--space-3) 0;
border-bottom: 1px solid var(--smk-line);
color: var(--smk-text);
font-size: 14.5px;
line-height: 1.6;
}
.smk-activity-list li:last-child { border-bottom: 0; }
.smk-info-table {
width: 100%;
border-collapse: collapse;
}
.smk-info-table th, .smk-info-table td {
text-align: left;
padding: 10px 12px;
border-bottom: 1px solid var(--smk-line);
font-size: 14px;
}
.smk-info-table th {
color: var(--smk-text-soft);
font-weight: 600;
width: 30%;
}
.smk-about-cta {
text-align: center;
margin: var(--space-16) 0 0;
padding: var(--space-8);
background: var(--smk-bg-alt);
border-radius: var(--radius);
}
.smk-about-cta p {
margin-bottom: var(--space-4);
font-size: 15px;
}
/* Contact */
.smk-contact-wrap { padding: var(--space-12) 0 var(--space-16); }
.smk-contact-channels {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-6);
margin: var(--space-8) 0 var(--space-12);
}
.smk-contact-card {
background: #fff;
border: 1px solid var(--smk-line);
border-radius: var(--radius);
padding: var(--space-6);
text-align: center;
transition: transform .15s var(--ease), box-shadow .15s var(--ease);
}
.smk-contact-card:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-card-hover);
}
.smk-contact-icon {
font-size: 32px;
display: block;
margin-bottom: var(--space-3);
}
.smk-contact-card h3 {
font-size: 16px;
margin: 0 0 12px;
}
.smk-contact-value {
font-family: var(--font-mono);
font-size: 18px;
margin: 0 0 8px;
}
.smk-contact-meta {
font-size: 12px;
color: var(--smk-text-soft);
margin: 0;
}
.smk-contact-office, .smk-contact-cta { margin-top: var(--space-12); }
.smk-contact-cta {
text-align: center;
padding: var(--space-8);
background: var(--smk-bg-alt);
border-radius: var(--radius);
}
/* ============================================================
Policy pages
============================================================ */
.smk-policy-wrap {
padding: var(--space-12) 0 var(--space-16);
max-width: 820px;
margin: 0 auto;
line-height: 1.8;
}
.smk-policy-wrap h1 { margin-bottom: var(--space-6); }
.smk-policy-wrap h2 {
font-size: 18px;
margin: var(--space-8) 0 var(--space-3);
color: var(--smk-navy);
border-bottom: 1px solid var(--smk-gold-soft);
padding-bottom: 6px;
}
.smk-policy-wrap p, .smk-policy-wrap ul { font-size: 15px; }
.smk-policy-wrap ul { padding-left: 20px; }
.smk-policy-note {
background: var(--smk-bg-alt);
padding: 12px 16px;
border-radius: var(--radius);
font-size: 13px;
color: var(--smk-text-soft);
}
/* ============================================================
Single article
============================================================ */
.smk-single-wrap { padding: var(--space-8) 0 var(--space-16); }
.smk-breadcrumb {
font-size: 13px;
color: var(--smk-text-soft);
margin-bottom: var(--space-6);
}
.smk-breadcrumb a { color: var(--smk-text-soft); }
.smk-bc-sep {
margin: 0 6px;
color: rgba(0,0,0,0.3);
}
.smk-article {
max-width: 820px;
margin: 0 auto;
}
.smk-article-head { margin-bottom: var(--space-8); }
.smk-article-head h1 {
font-size: clamp(24px, 3vw, 36px);
margin: 8px 0;
line-height: 1.3;
}
.smk-author-byline {
display: flex;
flex-wrap: wrap;
gap: 8px 14px;
font-size: 13px;
color: var(--smk-text-soft);
margin-top: var(--space-3);
padding: 10px 0;
border-top: 1px solid var(--smk-line);
border-bottom: 1px solid var(--smk-line);
}
.smk-byline-name {
font-weight: 700;
color: var(--smk-navy);
}
.smk-byline-title { color: var(--smk-gold); }
.smk-article-cover { margin: var(--space-6) 0; }
.smk-article-cover img {
width: 100%;
border-radius: var(--radius);
}
.smk-article-body {
font-size: 16px;
line-height: 1.85;
color: var(--smk-text);
}
.smk-article-body h2, .smk-article-body h3 { color: var(--smk-navy); }
.smk-article-body p { margin: 0 0 var(--space-4); }
.smk-article-body a {
color: var(--smk-navy);
text-decoration: underline;
text-underline-offset: 3px;
text-decoration-color: var(--smk-gold-line);
text-decoration-thickness: 1px;
}
.smk-article-body a:hover {
color: var(--smk-gold);
text-decoration-color: var(--smk-gold);
}
.smk-article-body img {
max-width: 100%;
height: auto;
border-radius: var(--radius);
margin: var(--space-4) 0;
}
.smk-article-body blockquote {
border-left: 3px solid var(--smk-gold);
padding: 8px 16px;
margin: var(--space-4) 0;
background: var(--smk-bg-alt);
font-style: italic;
color: var(--smk-text-soft);
}
.smk-article-body ul, .smk-article-body ol { padding-left: 24px; }
.smk-article-body .smk-speakable {
/* Voice search prep — 시각적 변화 없음 (검색엔진 마커만) */
}
.smk-author-bio {
margin: var(--space-12) 0 var(--space-8);
padding: var(--space-6);
background: var(--smk-cream);
border-radius: var(--radius);
border-left: 4px solid var(--smk-gold);
}
.smk-author-bio h4 {
margin: 0 0 8px;
color: var(--smk-navy);
font-size: 16px;
}
.smk-author-bio p {
margin: 0 0 8px;
font-size: 14px;
line-height: 1.7;
}
.smk-author-bio p:last-child {
margin: 0;
font-size: 13px;
color: var(--smk-text-soft);
}
/* ============================================================
Sticky Contact Bar (모바일)
============================================================ */
.smk-sticky-contact {
position: fixed;
bottom: 0; left: 0; right: 0;
display: flex;
background: var(--smk-navy);
z-index: 100;
box-shadow: var(--shadow-sticky);
backdrop-filter: blur(8px);
}
.smk-sticky-contact a {
flex: 1;
padding: 14px;
text-align: center;
font-weight: 700;
font-size: 14px;
color: #fff;
}
.smk-stk-kakao {
background: #fee500;
color: #3c1e1e;
}
/* ============================================================
v1.2 — 사이트 검색 모달
============================================================ */
/* v1.3.5: SVG 아이콘 (OS별 이모지 렌더링 차이 해결) */
/* v1.4.0: 시각적 텍스트 «검색» 추가 + 36×36 정사각형 → auto 가변 (빈 사각형 보임 이슈 정정) */
.smk-search-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
background: transparent;
border: 0;
padding: 7px 12px;
cursor: pointer;
color: var(--smk-text-soft);
transition: color .15s var(--ease), background .15s var(--ease);
border-radius: 6px;
font-family: inherit;
font-size: 13px;
font-weight: 600;
letter-spacing: -0.01em;
}
.smk-search-toggle .smk-search-label {
line-height: 1;
}
.smk-search-toggle:hover { color: var(--smk-navy); background: rgba(15, 23, 42, 0.04); }
.smk-search-modal {
position: fixed;
inset: 0;
background: rgba(0, 30, 60, 0.92);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
z-index: 200;
display: none;
align-items: flex-start;
justify-content: center;
padding: var(--space-16) var(--space-6) var(--space-6);
animation: smk-search-fadein 0.25s var(--ease-smooth);
}
.smk-search-modal.is-open { display: flex; }
@keyframes smk-search-fadein {
from { opacity: 0; backdrop-filter: blur(0); }
to { opacity: 1; backdrop-filter: blur(20px); }
}
.smk-search-close {
position: absolute;
top: 20px; right: 24px;
background: transparent;
border: 0;
color: rgba(255,255,255,0.7);
font-size: 32px;
cursor: pointer;
width: 44px; height: 44px;
border-radius: 50%;
transition: background .15s, color .15s;
}
.smk-search-close:hover { background: rgba(255,255,255,0.1); color: #fff; }
.smk-search-inner {
max-width: 720px;
width: 100%;
background: #fff;
border-radius: var(--radius-lg);
padding: var(--space-8);
box-shadow: 0 24px 60px rgba(0,0,0,0.3);
animation: smk-search-slidedown 0.3s var(--ease-expo);
}
@keyframes smk-search-slidedown {
from { transform: translateY(-20px); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
.smk-search-inner form {
display: flex;
gap: var(--space-3);
margin-bottom: var(--space-6);
}
.smk-search-inner input[type="search"] {
flex: 1;
padding: 16px 20px;
font-size: 17px;
border: 1.5px solid var(--smk-line);
border-radius: var(--radius);
font-family: inherit;
}
.smk-search-inner input[type="search"]:focus {
outline: 0;
border-color: var(--smk-navy);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--smk-navy) 12%, transparent);
}
.smk-search-hints {
padding-top: var(--space-3);
border-top: 1px solid var(--smk-line);
}
.smk-search-hints p {
font-size: 12px;
color: var(--smk-text-soft);
margin: 0 0 8px;
}
.smk-search-hints a {
display: inline-block;
padding: 5px 10px;
margin: 2px 4px 2px 0;
background: var(--smk-bg-alt);
border-radius: 999px;
font-size: 13px;
color: var(--smk-text);
}
.smk-search-hints a:hover {
background: var(--smk-gold-soft);
color: var(--smk-navy);
}
.smk-sr-only {
position: absolute;
width: 1px; height: 1px;
overflow: hidden;
clip: rect(0,0,0,0);
}
/* ============================================================
v1.2 — 뉴스레터 구독 위젯 (Hero·푸터 모두)
============================================================ */
.smk-newsletter {
background: linear-gradient(135deg, var(--smk-cream) 0%, color-mix(in srgb, var(--smk-cream) 50%, white) 100%);
padding: var(--space-8);
border-radius: var(--radius-lg);
border-left: 4px solid var(--smk-gold);
margin: var(--space-12) 0;
text-align: center;
}
.smk-newsletter h3 {
color: var(--smk-navy);
font-size: 20px;
margin: 0 0 8px;
}
.smk-newsletter p {
color: var(--smk-text);
font-size: 14px;
margin: 0 0 var(--space-4);
line-height: 1.6;
}
.smk-newsletter form {
display: flex;
gap: var(--space-3);
max-width: 480px;
margin: 0 auto;
flex-wrap: wrap;
}
.smk-newsletter input[type="email"] {
flex: 1;
min-width: 220px;
padding: 12px 16px;
border: 1.5px solid var(--smk-line);
border-radius: var(--radius);
font-size: 15px;
font-family: inherit;
background: #fff;
}
.smk-newsletter input[type="email"]:focus {
outline: 0;
border-color: var(--smk-navy);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--smk-navy) 12%, transparent);
}
.smk-newsletter-note {
font-size: 11px;
color: var(--smk-text-soft);
margin-top: 8px;
}
}
@layer utilities {
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
html { scroll-behavior: auto; }
}
/* v1.1: Responsive — 햄버거 활성, 핵심 모바일 UX */
@media (max-width: 900px) {
.smk-nav { display: none; }
.smk-hamburger { display: block; } /* v1.1: 햄버거 등장 */
.smk-header-row { gap: var(--space-3); }
.smk-tel { display: none; } /* 모바일 헤더에선 sticky bar로 대체 */
.smk-card-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }
.smk-cb-grid { grid-template-columns: 1fr; }
.smk-cat-tiles { grid-template-columns: repeat(2, 1fr); }
.smk-q-options { grid-template-columns: 1fr; }
.smk-result-cards { grid-template-columns: 1fr; }
.smk-contact-channels { grid-template-columns: 1fr; }
.smk-creds-grid li { flex-direction: column; gap: 4px; }
.smk-creds-label { width: auto; }
}
@media (max-width: 600px) {
.smk-card-grid { grid-template-columns: 1fr; }
.smk-footer-nav { gap: 4px 12px; }
.smk-footer-info p { font-size: 11.5px; }
}
/* Sticky bar — 데스크탑 hidden */
@media (min-width: 769px) {
.smk-sticky-contact { display: none; }
}
body { padding-bottom: 56px; }
@media (min-width: 769px) { body { padding-bottom: 0; } }
/* Print */
@media print {
.smk-header, .smk-footer, .smk-sticky-contact, .smk-conversion-bridge { display: none !important; }
body { padding-bottom: 0; }
}
}
/* ════════════════════════════════════════════════════════════════
v1.3.9 — 압도적 기술력 시각 업그레이드 (Premium Motion Layer)
════════════════════════════════════════════════════════════════ */
@layer premium {
/* ───── 1. Hero 배경: animated mesh gradient + 빌딩 마크 워터마크 ───── */
.smk-home-hero {
/* 부드러운 mesh gradient orbs가 천천히 부유 */
background:
radial-gradient(ellipse 60% 40% at var(--orb1-x, 30%) var(--orb1-y, 20%), color-mix(in srgb, var(--smk-gold) 14%, transparent), transparent 60%),
radial-gradient(ellipse 50% 30% at var(--orb2-x, 75%) var(--orb2-y, 70%), color-mix(in srgb, var(--smk-mint) 12%, transparent), transparent 60%),
radial-gradient(ellipse 40% 30% at 50% 50%, color-mix(in srgb, #4a6fa5 8%, transparent), transparent 60%),
linear-gradient(180deg, #00111e 0%, #001a30 50%, #002238 100%);
animation: smk-mesh-drift 24s ease-in-out infinite;
}
@property --orb1-x { syntax: ''; inherits: false; initial-value: 30%; }
@property --orb1-y { syntax: ''; inherits: false; initial-value: 20%; }
@property --orb2-x { syntax: ''; inherits: false; initial-value: 75%; }
@property --orb2-y { syntax: ''; inherits: false; initial-value: 70%; }
@keyframes smk-mesh-drift {
0% { --orb1-x: 30%; --orb1-y: 20%; --orb2-x: 75%; --orb2-y: 70%; }
33% { --orb1-x: 50%; --orb1-y: 35%; --orb2-x: 60%; --orb2-y: 55%; }
66% { --orb1-x: 25%; --orb1-y: 40%; --orb2-x: 80%; --orb2-y: 60%; }
100% { --orb1-x: 30%; --orb1-y: 20%; --orb2-x: 75%; --orb2-y: 70%; }
}
/* Hero 우측 배경에 큰 빌딩 워터마크 (본업 시그널) */
.smk-home-hero::after {
content: '';
display: block;
position: absolute;
right: -120px;
bottom: -80px;
width: 540px;
height: 540px;
background: url('assets/img/logo-mark.png') no-repeat center / contain;
opacity: 0.07;
z-index: 1;
pointer-events: none;
filter: drop-shadow(0 0 32px rgba(201,169,97,0.4));
animation: smk-mark-float 8s ease-in-out infinite;
}
@keyframes smk-mark-float {
0%, 100% { transform: translateY(0) rotate(-2deg); }
50% { transform: translateY(-12px) rotate(1deg); }
}
@media (max-width: 900px) {
.smk-home-hero::after { width: 320px; height: 320px; right: -80px; bottom: -60px; opacity: 0.05; }
}
/* ───── 2. Hero H1: 골드 라인 글로우 펄스 ───── */
.smk-home-hero .smk-hero-inner h1 {
background: linear-gradient(
120deg,
#ffffff 0%,
#ffffff 40%,
color-mix(in srgb, var(--smk-gold) 65%, #ffffff) 55%,
#ffffff 70%,
#ffffff 100%
);
background-size: 200% 100%;
-webkit-background-clip: text;
background-clip: text;
animation:
smk-h1-enter 1.0s var(--ease-expo) 0.15s both,
smk-h1-shimmer 6s ease-in-out 1.5s infinite;
}
@keyframes smk-h1-shimmer {
0%, 100% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
}
/* ───── 3. CTA 골드 버튼: 광택 sweep (한 번 + hover 시) ───── */
.smk-hero-cta .smk-btn-gold {
position: relative;
overflow: hidden;
isolation: isolate;
}
.smk-hero-cta .smk-btn-gold::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 50%;
height: 100%;
background: linear-gradient(
105deg,
transparent 0%,
rgba(255,255,255,0.5) 50%,
transparent 100%
);
z-index: 1;
pointer-events: none;
animation: smk-cta-sheen 4.5s ease-in-out 1.2s infinite;
}
@keyframes smk-cta-sheen {
0% { left: -100%; }
25% { left: 200%; }
100% { left: 200%; }
}
/* ───── 4. Hero trust grid: 부드러운 3D tilt on hover ───── */
.smk-hero-trust { perspective: 1000px; }
.smk-trust-item {
transform-style: preserve-3d;
transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), background 0.3s, box-shadow 0.3s;
cursor: default;
}
.smk-trust-item:hover {
transform: translateZ(20px) rotateX(-3deg) scale(1.04);
background: linear-gradient(135deg,
color-mix(in srgb, var(--smk-gold) 10%, transparent),
color-mix(in srgb, var(--smk-gold) 4%, transparent)
);
box-shadow: 0 12px 36px rgba(0,0,0,0.3);
}
/* ───── 5. Card spotlight on hover (Category tiles · Core decision) ───── */
.smk-cat-tile,
.smk-cb-card {
position: relative;
overflow: hidden;
isolation: isolate;
}
.smk-cat-tile::before,
.smk-cb-card::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(
circle 240px at var(--mx, 50%) var(--my, 50%),
color-mix(in srgb, var(--smk-gold) 18%, transparent),
transparent 60%
);
opacity: 0;
transition: opacity 0.3s var(--ease);
pointer-events: none;
z-index: 0;
}
.smk-cat-tile:hover::before,
.smk-cb-card:hover::before { opacity: 1; }
.smk-cat-tile > *,
.smk-cb-card > * { position: relative; z-index: 1; }
/* ───── 6. Scroll-reveal (IntersectionObserver가 .is-revealed 추가) ───── */
[data-reveal] {
opacity: 0;
transform: translateY(28px);
transition: opacity 0.9s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.9s cubic-bezier(0.2, 0.8, 0.2, 1);
}
[data-reveal].is-revealed {
opacity: 1;
transform: translateY(0);
}
[data-reveal][data-reveal-delay="1"] { transition-delay: 0.08s; }
[data-reveal][data-reveal-delay="2"] { transition-delay: 0.16s; }
[data-reveal][data-reveal-delay="3"] { transition-delay: 0.24s; }
/* ───── 7. Section head 정돈 (시각 임팩트 강화) ───── */
.smk-section-head h2 {
position: relative;
display: inline-block;
}
.smk-section-head h2::after {
content: '';
display: block;
width: 36px;
height: 3px;
background: linear-gradient(90deg, var(--smk-gold) 0%, transparent 100%);
margin: 12px auto 0;
border-radius: 2px;
}
/* ───── 8. Card hover micro-lift (Core Decision · Recent) ───── */
.smk-post-card {
transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.35s;
}
.smk-post-card:hover {
transform: translateY(-6px);
box-shadow: 0 20px 48px -12px rgba(0, 26, 48, 0.18);
}
/* ───── 9. Reduce motion 존중 ───── */
@media (prefers-reduced-motion: reduce) {
.smk-home-hero { animation: none; }
.smk-home-hero::after { animation: none; }
.smk-home-hero .smk-hero-inner h1 { animation: smk-h1-enter 1.0s var(--ease-expo) 0.15s both; }
.smk-hero-cta .smk-btn-gold::before { display: none; }
.smk-trust-item:hover { transform: none; }
[data-reveal] { opacity: 1; transform: none; }
}
}
/* ============================================================
* v1.5.0 — 상세글 UX 강화 (Sticky TOC · Reading time · Last Updated)
* Stripe Atlas + HubSpot + 김앤장 best practice 응집
* ============================================================ */
/* Byline 메타데이터 인라인 (게시·업데이트·읽기 시간) */
.smk-author-byline {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
font-size: 13.5px;
color: var(--smk-text-soft);
line-height: 1.6;
margin-top: 12px;
}
.smk-byline-name {
font-weight: 700;
color: var(--smk-navy);
font-size: 14.5px;
}
.smk-byline-title { color: var(--smk-text-soft); }
.smk-byline-sep { color: #cbd5e1; font-weight: 300; }
.smk-byline-label {
display: inline-block;
padding: 1px 6px;
background: rgba(15, 23, 42, 0.06);
color: var(--smk-navy);
border-radius: 4px;
font-size: 11px;
font-weight: 600;
letter-spacing: -0.01em;
margin-right: 4px;
vertical-align: 1px;
}
.smk-byline-updated .smk-byline-label {
background: rgba(201, 169, 97, 0.18);
color: #92724e;
}
.smk-byline-date,
.smk-byline-updated,
.smk-byline-reading { font-variant-numeric: tabular-nums; }
.smk-byline-reading {
display: inline-flex;
align-items: center;
color: #475569;
font-weight: 600;
}
@media (max-width: 640px) {
.smk-author-byline { font-size: 12.5px; gap: 6px; }
.smk-byline-sep { display: none; }
}
/* Sticky TOC — 데스크탑 우측 sticky aside */
.smk-single-layout { display: block; }
.smk-sticky-toc { display: none; }
@media (min-width: 1100px) {
.smk-single-layout {
display: grid;
grid-template-columns: minmax(0, 1fr) 240px;
gap: 48px;
align-items: flex-start;
}
.smk-sticky-toc {
display: block;
position: sticky;
top: 90px;
max-height: calc(100vh - 110px);
overflow-y: auto;
padding: 0;
}
.smk-toc-inner {
background: #fbfaf7;
border: 1px solid rgba(201, 169, 97, 0.2);
border-radius: 10px;
padding: 18px 16px;
}
.smk-toc-head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 8px;
margin-bottom: 12px;
padding-bottom: 10px;
border-bottom: 1px solid rgba(201, 169, 97, 0.18);
}
.smk-toc-eyebrow {
font-size: 11px;
font-weight: 700;
color: var(--smk-gold);
letter-spacing: 0.12em;
text-transform: uppercase;
}
.smk-toc-count {
font-size: 11.5px;
color: var(--smk-text-soft);
font-variant-numeric: tabular-nums;
}
.smk-toc-nav ol {
list-style: none;
margin: 0;
padding: 0;
counter-reset: smk-toc;
}
.smk-toc-nav li {
counter-increment: smk-toc;
margin: 0;
padding: 0;
}
.smk-toc-nav a {
display: block;
padding: 7px 10px 7px 28px;
font-size: 13.5px;
line-height: 1.5;
color: var(--smk-text-soft);
text-decoration: none;
border-radius: 5px;
position: relative;
transition: color .15s var(--ease), background .15s var(--ease);
}
.smk-toc-nav a::before {
content: counter(smk-toc);
position: absolute;
left: 8px;
top: 8px;
font-size: 11px;
font-weight: 700;
color: var(--smk-gold);
font-variant-numeric: tabular-nums;
min-width: 14px;
}
.smk-toc-nav a:hover {
color: var(--smk-navy);
background: rgba(201, 169, 97, 0.08);
}
.smk-toc-nav a.is-active {
color: var(--smk-navy);
background: rgba(201, 169, 97, 0.14);
font-weight: 600;
}
}
@media (min-width: 1380px) {
.smk-single-layout {
grid-template-columns: minmax(0, 1fr) 280px;
gap: 64px;
}
}
/* H2 anchor offset (sticky header 가림 회피) */
.smk-article-body h2[id^="smk-toc-h"] {
scroll-margin-top: 80px;
}
/* ============================================================
v1.6.0 — Related Posts 강화 + Comparison Table 일관 디자인
============================================================ */
/* Section header description */
.smk-section-desc {
margin: 8px 0 0;
font-size: 14.5px;
line-height: 1.65;
color: #64748b;
max-width: 720px;
}
/* Related grid: 모바일 1열 → 768px 2열 → 1100px 3열 → 1380px 5열 */
.smk-card-grid-related {
display: grid;
grid-template-columns: 1fr;
gap: 20px;
margin-top: 24px;
}
@media (min-width: 600px) {
.smk-card-grid-related {
grid-template-columns: repeat(2, 1fr);
gap: 22px;
}
}
@media (min-width: 1024px) {
.smk-card-grid-related {
grid-template-columns: repeat(3, 1fr);
}
}
@media (min-width: 1380px) {
.smk-card-grid-related {
grid-template-columns: repeat(5, 1fr);
gap: 18px;
}
}
/* Card meta enhancements (reading time chip) */
.smk-card-meta {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 5px;
font-size: 12.5px;
color: #64748b;
}
.smk-card-meta .smk-card-author {
color: #0F172A;
font-weight: 600;
}
.smk-card-meta .smk-card-sep {
color: #cbd5e1;
}
.smk-card-meta .smk-card-reading {
display: inline-flex;
align-items: center;
color: #c9a961;
font-weight: 600;
font-variant-numeric: tabular-nums;
}
/* Comparison table responsive (모바일 horizontal scroll) */
.smk-compare-table {
scrollbar-width: thin;
scrollbar-color: #c9a961 #f1f5f9;
}
.smk-compare-table::-webkit-scrollbar {
height: 8px;
}
.smk-compare-table::-webkit-scrollbar-track {
background: #f1f5f9;
border-radius: 4px;
}
.smk-compare-table::-webkit-scrollbar-thumb {
background: #c9a961;
border-radius: 4px;
}
/* ============================================================
v1.6.0 — Byline v2 (monogram avatar + 자격 chip)
============================================================ */
.smk-byline-v2 {
display: grid;
grid-template-columns: 56px 1fr;
gap: 16px;
align-items: center;
padding: 16px 18px;
margin: 18px 0 24px;
background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
border: 1px solid #e2e8f0;
border-radius: 12px;
border-left: 4px solid var(--smk-gold);
}
.smk-byline-avatar {
display: block;
width: 56px;
height: 56px;
flex-shrink: 0;
border-radius: 50%;
overflow: hidden;
box-shadow: 0 2px 8px rgba(15, 23, 42, 0.12);
transition: transform 0.2s var(--ease, ease);
}
.smk-byline-avatar:hover {
transform: scale(1.05);
}
.smk-byline-avatar svg {
display: block;
width: 100%;
height: 100%;
}
.smk-byline-content {
min-width: 0;
}
.smk-byline-line1 {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 6px;
font-size: 14.5px;
}
.smk-byline-line1 .smk-byline-name {
font-weight: 800;
font-size: 16px;
color: var(--smk-navy, #0F172A);
text-decoration: none;
letter-spacing: -0.3px;
}
.smk-byline-line1 .smk-byline-name:hover {
color: var(--smk-gold);
}
.smk-byline-line1 .smk-byline-title {
color: #475569;
font-weight: 500;
font-size: 13.5px;
}
.smk-byline-chip {
display: inline-flex;
align-items: center;
gap: 3px;
padding: 3px 9px;
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 12px;
font-size: 11.5px;
font-weight: 600;
color: #475569;
white-space: nowrap;
}
.smk-byline-line2 {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 5px;
font-size: 12.5px;
color: #64748b;
}
/* ============================================================
v1.6.0 — Author Bio v2 (avatar + credentials chips)
============================================================ */
.smk-author-bio-v2 {
display: grid;
grid-template-columns: 100px 1fr;
gap: 24px;
align-items: start;
padding: 28px 32px;
background: linear-gradient(135deg, #fdf6e3 0%, #f8f9fb 100%);
border: 1px solid #e2e8f0;
border-radius: 14px;
border-left: 4px solid var(--smk-gold);
margin: 48px 0 32px;
}
.smk-bio-avatar {
width: 100px;
height: 100px;
border-radius: 50%;
overflow: hidden;
box-shadow: 0 4px 16px rgba(15, 23, 42, 0.15);
}
.smk-bio-avatar svg {
display: block;
width: 100%;
height: 100%;
}
.smk-bio-content h4 {
font-size: 22px;
font-weight: 800;
letter-spacing: -0.5px;
margin: 0 0 12px;
color: var(--smk-navy);
}
.smk-bio-content h4 .smk-bio-role {
font-size: 14px;
font-weight: 500;
color: #64748b;
margin-left: 6px;
}
.smk-bio-credentials {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 16px;
}
.smk-bio-chip {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 5px 11px;
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 16px;
font-size: 12.5px;
font-weight: 600;
color: #334155;
white-space: nowrap;
}
.smk-bio-chip-primary {
background: var(--smk-navy);
color: #fff;
border-color: var(--smk-navy);
}
.smk-bio-content p {
font-size: 15px;
line-height: 1.75;
color: #334155;
margin: 10px 0;
}
.smk-bio-content a {
color: var(--smk-gold);
font-weight: 600;
text-decoration: none;
}
.smk-bio-content a:hover {
text-decoration: underline;
}
/* 모바일 (≤640px): byline + bio vertical */
@media (max-width: 640px) {
.smk-byline-v2 {
grid-template-columns: 48px 1fr;
padding: 14px 14px;
gap: 12px;
}
.smk-byline-avatar {
width: 48px;
height: 48px;
}
.smk-author-bio-v2 {
grid-template-columns: 1fr;
padding: 22px 20px;
gap: 18px;
text-align: left;
}
.smk-bio-avatar {
width: 72px;
height: 72px;
}
}
/* ============================================================
v1.6.1 — Article CTA bar (글 본문 직후 1:1 상담 전환)
============================================================ */
.smk-article-cta {
position: relative;
margin: 40px 0 24px;
padding: 32px 36px;
background: linear-gradient(135deg, #0F172A 0%, #1e293b 100%);
border-radius: 16px;
border: 1px solid rgba(201, 169, 97, 0.25);
overflow: hidden;
box-shadow: 0 8px 32px rgba(15, 23, 42, 0.18);
}
.smk-cta-pattern {
position: absolute;
inset: 0;
background-image:
radial-gradient(circle at 100% 0%, rgba(201, 169, 97, 0.18) 0%, transparent 50%),
repeating-linear-gradient(0deg, transparent 0, transparent 39px, rgba(201, 169, 97, 0.04) 40px),
repeating-linear-gradient(90deg, transparent 0, transparent 39px, rgba(201, 169, 97, 0.04) 40px);
pointer-events: none;
}
.smk-cta-content {
position: relative;
z-index: 1;
}
.smk-cta-eyebrow {
display: inline-block;
padding: 4px 14px;
background: rgba(201, 169, 97, 0.18);
border: 1px solid rgba(201, 169, 97, 0.4);
border-radius: 16px;
color: #c9a961;
font-size: 12.5px;
font-weight: 700;
letter-spacing: 0.3px;
margin-bottom: 14px;
}
.smk-cta-content h3 {
margin: 0 0 10px;
color: #fff;
font-size: 24px;
font-weight: 800;
letter-spacing: -0.5px;
line-height: 1.3;
}
.smk-cta-content > .smk-cta-content > p,
.smk-cta-content p {
margin: 0 0 22px;
color: #cbd5e1;
font-size: 15px;
line-height: 1.7;
max-width: 640px;
}
.smk-cta-actions {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin: 18px 0 22px;
}
.smk-cta-btn {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 14px 24px;
border-radius: 12px;
font-weight: 700;
font-size: 15.5px;
text-decoration: none;
transition: transform .15s var(--ease, ease), box-shadow .15s var(--ease, ease);
}
.smk-cta-btn-primary {
background: #c9a961;
color: #0F172A;
box-shadow: 0 4px 14px rgba(201, 169, 97, 0.35);
}
.smk-cta-btn-primary:hover {
transform: translateY(-2px);
background: #d9b76d;
box-shadow: 0 6px 20px rgba(201, 169, 97, 0.45);
color: #0F172A;
}
.smk-cta-btn-secondary {
background: #FEE500;
color: #3C1E1E;
box-shadow: 0 4px 14px rgba(254, 229, 0, 0.3);
}
.smk-cta-btn-secondary:hover {
transform: translateY(-2px);
background: #FFEA1A;
box-shadow: 0 6px 20px rgba(254, 229, 0, 0.4);
color: #3C1E1E;
}
.smk-cta-trust {
display: flex;
flex-wrap: wrap;
gap: 6px 18px;
margin: 0;
padding: 0;
list-style: none;
border-top: 1px solid rgba(201, 169, 97, 0.18);
padding-top: 16px;
}
.smk-cta-trust li {
color: #94a3b8;
font-size: 12.5px;
font-weight: 500;
}
@media (max-width: 640px) {
.smk-article-cta {
padding: 24px 20px;
margin: 32px 0 20px;
}
.smk-cta-content h3 {
font-size: 19px;
}
.smk-cta-actions {
flex-direction: column;
}
.smk-cta-btn {
width: 100%;
justify-content: center;
}
}
/* ============================================================
v1.6.3 — Mobile readability + 터치 친화 (40-60대 대표)
============================================================ */
/* 본문 base — 16-17px 사이 (한국어 1줄 38-42자 권장) */
.smk-article-body p {
font-size: 17px;
line-height: 1.85;
color: #1e293b;
}
.smk-article-body li {
font-size: 16px;
line-height: 1.8;
color: #1e293b;
}
/* 모바일: 본문 16.5px (시니어 가독성 + 줄 길이 적정) */
@media (max-width: 768px) {
.smk-article-body p,
.smk-article-body li {
font-size: 16.5px;
line-height: 1.78;
}
.smk-article-body h2 {
font-size: 22px !important;
line-height: 1.4 !important;
margin-top: 32px !important;
padding-bottom: 10px !important;
}
.smk-article-body h3 {
font-size: 18px;
line-height: 1.45;
margin-top: 26px;
}
/* TOC 본문에서 안 보이는데 모바일 H2 link도 잘 동작하도록 anchor margin 80px 유지 */
}
@media (max-width: 480px) {
.smk-article-body p,
.smk-article-body li {
font-size: 16px;
line-height: 1.75;
}
}
/* 터치 타겟: 모든 inline a, button 등 최소 44px hit area */
.smk-article-body a {
min-height: auto;
}
.smk-cta-btn,
.smk-byline-name,
.smk-byline-avatar,
.smk-bio-avatar {
min-height: 44px;
}
/* v1.6.3 — Auto internal links style */
.smk-article-body a.smk-internal-auto {
color: var(--smk-navy, #0F172A);
text-decoration: none;
background-image: linear-gradient(transparent 60%, rgba(201, 169, 97, 0.22) 60%);
padding: 0 2px;
font-weight: 600;
transition: background-image .15s var(--ease, ease);
}
.smk-article-body a.smk-internal-auto:hover {
background-image: linear-gradient(transparent 60%, rgba(201, 169, 97, 0.45) 60%);
color: var(--smk-gold, #c9a961);
}
/* ============================================================
v1.7.2 — Critical review fixes (5 MEDIUM + 1 LOW)
============================================================ */
/* MEDIUM-5: sticky-contact bar 모바일에서만 표시 (데스크탑 header가 이미 contact 노출) */
@media (min-width: 769px) {
.smk-sticky-contact,
.smk-stk-tel,
.smk-stk-kakao { display: none !important; }
}
/* LOW-4: Comparison table 모바일 좌우 스크롤 hint */
@media (max-width: 640px) {
.smk-compare-table {
position: relative;
}
.smk-compare-table::after {
content: "← 좌우로 스크롤하여 전체 보기 →";
display: block;
text-align: center;
color: #94a3b8;
font-size: 11.5px;
padding: 8px 0 0;
font-weight: 600;
}
}
/* MEDIUM-3: 소형 카테고리 fallback section */
.smk-cat-small-fallback {
margin: 32px 0;
padding: 28px 32px;
background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
border: 1px solid #e2e8f0;
border-radius: 14px;
border-left: 4px solid var(--smk-gold, #c9a961);
}
@media (max-width: 640px) {
.smk-cat-small-fallback { padding: 22px 20px; }
}
/* ============================================================
v1.7.1 — 본문 종료 후 element pile-up 시각적 정리
(Critical review에서 도출 — 6개 element 연속 누적 완화)
============================================================ */
/* Article CTA → Conversion bridge 사이 separator */
.smk-article-cta + .smk-conversion-bridge {
margin-top: 40px;
position: relative;
}
.smk-article-cta + .smk-conversion-bridge::before {
content: "";
display: block;
width: 56px;
height: 3px;
margin: 0 auto 36px;
background: linear-gradient(90deg, transparent, rgba(201, 169, 97, 0.5), transparent);
border-radius: 2px;
}
/* Conversion bridge → Author bio 사이 */
.smk-conversion-bridge + .smk-author-bio-v2 {
margin-top: 48px;
}
/* Related section 위 separator */
.smk-related-section {
position: relative;
padding-top: 36px;
margin-top: 16px;
border-top: 1px solid #f1f5f9;
}
.smk-related-section::before {
content: "";
position: absolute;
left: 50%;
top: -2px;
transform: translateX(-50%);
width: 56px;
height: 3px;
background: linear-gradient(90deg, transparent, rgba(15, 23, 42, 0.3), transparent);
border-radius: 2px;
}
/* ============================================================
v1.7.0 — Category Archive Hub Template
============================================================ */
.smk-category-wrap { padding-top: 24px; padding-bottom: 80px; }
.smk-cat-hero {
position: relative; margin: 24px 0 40px; padding: 56px 48px;
background: linear-gradient(135deg, #0F172A 0%, #1e293b 50%, #0F172A 100%);
border-radius: 20px; border: 1px solid rgba(201,169,97,0.25);
overflow: hidden; color: #fff;
}
.smk-cat-hero-pattern {
position: absolute; inset: 0;
background-image:
radial-gradient(circle at 100% 0%, rgba(201,169,97,0.16) 0%, transparent 55%),
repeating-linear-gradient(0deg, transparent 0, transparent 39px, rgba(201,169,97,0.04) 40px),
repeating-linear-gradient(90deg, transparent 0, transparent 39px, rgba(201,169,97,0.04) 40px);
}
.smk-cat-hero-content { position: relative; z-index: 1; }
.smk-cat-hero-eyebrow {
display: inline-block; padding: 5px 15px;
background: rgba(201,169,97,0.16); border: 1px solid rgba(201,169,97,0.4);
border-radius: 16px; color: #c9a961; font-size: 13px; font-weight: 700;
letter-spacing: 0.5px; margin-bottom: 18px;
}
.smk-cat-hero h1 {
margin: 0 0 16px; font-size: 40px; font-weight: 800;
letter-spacing: -0.8px; line-height: 1.25; color: #fff;
}
.smk-cat-hero-desc {
margin: 0 0 30px; font-size: 17px; line-height: 1.7; color: #cbd5e1; max-width: 720px;
}
.smk-cat-hero-stats {
display: flex; flex-wrap: wrap; gap: 36px; padding-top: 24px;
border-top: 1px solid rgba(201,169,97,0.18);
}
.smk-cat-stat { display: flex; flex-direction: column; gap: 4px; }
.smk-cat-stat-num {
font-size: 32px; font-weight: 800; color: #c9a961;
letter-spacing: -0.6px; line-height: 1.1;
}
.smk-cat-stat-label { font-size: 13px; color: #94a3b8; font-weight: 500; }
.smk-cat-featured { margin: 0 0 48px; }
.smk-cat-featured-title { margin: 0; font-size: 24px; font-weight: 700; letter-spacing: -0.3px; color: var(--smk-navy, #0F172A); }
.smk-cat-featured-card {
margin-top: 16px; background: #fff; border: 1px solid #e2e8f0;
border-radius: 16px; overflow: hidden;
box-shadow: 0 4px 20px rgba(15,23,42,0.08);
transition: transform .2s var(--ease, ease), box-shadow .2s var(--ease, ease);
}
.smk-cat-featured-card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(15,23,42,0.15); }
.smk-cat-featured-link { display: grid; grid-template-columns: 1fr; text-decoration: none; color: inherit; }
@media (min-width: 768px) {
.smk-cat-featured-link { grid-template-columns: 320px 1fr; align-items: stretch; }
}
.smk-cat-featured-thumb { overflow: hidden; background: #f1f5f9; }
.smk-cat-featured-thumb img { width: 100%; height: 100%; object-fit: cover; min-height: 200px; max-height: 280px; }
.smk-cat-featured-body { padding: 28px 32px; display: flex; flex-direction: column; justify-content: center; }
.smk-cat-featured-cat {
display: inline-block; padding: 4px 11px;
background: rgba(201,169,97,0.16); color: #92671c;
border-radius: 12px; font-size: 12.5px; font-weight: 700;
margin-bottom: 12px; align-self: flex-start;
}
.smk-cat-featured-body h3 {
margin: 0 0 12px; font-size: 22px; font-weight: 700;
color: var(--smk-navy); letter-spacing: -0.4px; line-height: 1.35;
}
.smk-cat-featured-body p { margin: 0 0 16px; font-size: 15px; line-height: 1.7; color: #475569; }
.smk-cat-featured-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; font-size: 12.5px; color: #64748b; }
.smk-cat-featured-cta { margin-left: auto; color: var(--smk-gold, #c9a961); font-weight: 700; font-size: 13.5px; }
.smk-pagination { margin: 48px 0 0; display: flex; justify-content: center; }
.smk-pagination ul { display: flex; gap: 6px; padding: 0; list-style: none; margin: 0; }
.smk-pagination .page-numbers {
display: inline-flex; align-items: center; justify-content: center;
min-width: 40px; height: 40px; padding: 0 14px;
background: #fff; border: 1px solid #e2e8f0; border-radius: 10px;
color: #475569; font-weight: 600; font-size: 14px; text-decoration: none;
transition: all .15s var(--ease, ease);
}
.smk-pagination .page-numbers:hover { border-color: var(--smk-gold, #c9a961); color: var(--smk-navy, #0F172A); }
.smk-pagination .page-numbers.current {
background: var(--smk-navy, #0F172A); color: #fff; border-color: var(--smk-navy, #0F172A);
}
.smk-cat-cta {
position: relative; margin: 56px 0 0; padding: 40px 44px;
background: linear-gradient(135deg, #0F172A 0%, #1e293b 100%);
border-radius: 18px; overflow: hidden;
box-shadow: 0 12px 40px rgba(15,23,42,0.18);
}
/* ============================================================
v1.7.0 — Search Results Template
============================================================ */
.smk-search-wrap { padding-top: 24px; padding-bottom: 80px; }
.smk-search-hero {
margin: 24px 0 36px; padding: 36px 40px;
background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
border: 1px solid #e2e8f0; border-radius: 16px;
border-left: 4px solid var(--smk-gold, #c9a961);
}
.smk-search-hero h1 {
margin: 12px 0 14px; font-size: 28px; font-weight: 800;
letter-spacing: -0.5px; color: var(--smk-navy, #0F172A); line-height: 1.35;
}
.smk-search-keyword {
color: var(--smk-gold, #c9a961);
background: linear-gradient(transparent 60%, rgba(201,169,97,0.25) 60%);
padding: 0 4px;
}
.smk-search-count { margin: 0 0 18px; font-size: 15.5px; color: #475569; }
.smk-search-form-inline {
display: flex; align-items: stretch;
background: #fff; border: 1.5px solid #e2e8f0; border-radius: 12px;
overflow: hidden; max-width: 480px;
}
.smk-search-form-inline:focus-within {
border-color: var(--smk-gold); box-shadow: 0 0 0 3px rgba(201,169,97,0.15);
}
.smk-search-form-inline .smk-search-input {
flex: 1; border: none; padding: 12px 16px; font-size: 15px;
outline: none; background: transparent;
}
.smk-search-submit-inline {
display: inline-flex; align-items: center; justify-content: center;
width: 48px; background: var(--smk-navy); color: #fff; border: none;
cursor: pointer; transition: background .15s var(--ease, ease);
}
.smk-search-submit-inline:hover { background: var(--smk-gold); }
.smk-search-empty-section { margin: 32px 0 0; }
.smk-search-empty-suggest {
padding: 28px 32px;
background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
border-left: 4px solid var(--smk-navy); border-radius: 12px;
}
.smk-search-empty-suggest h3 { margin: 0 0 14px; font-size: 18px; color: var(--smk-navy); font-weight: 700; }
.smk-search-suggest-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.smk-search-chip {
display: inline-flex; align-items: center; padding: 7px 14px;
background: #fff; border: 1px solid #cbd5e1; border-radius: 18px;
font-size: 13.5px; color: var(--smk-navy); font-weight: 600;
text-decoration: none; transition: all .15s var(--ease, ease);
}
.smk-search-chip:hover { background: var(--smk-navy); color: #fff; border-color: var(--smk-navy); transform: translateY(-1px); }
.smk-empty { text-align: center; padding: 48px 24px; color: #94a3b8; font-size: 16px; }
/* ============================================================
v1.7.0 — Pull Quote 자동 시각화 (본문 첫 strong)
============================================================ */
.smk-pull-quote-v2 {
display: inline; position: relative; padding: 0 4px 0 28px;
margin: 0 2px;
background: linear-gradient(120deg, rgba(201,169,97,0.08) 0%, rgba(15,23,42,0.02) 100%);
border-left: 3px solid var(--smk-gold, #c9a961);
font-size: 1.05em; line-height: 1.65; color: var(--smk-navy, #0F172A);
}
.smk-pull-quote-v2 .smk-pq-mark {
position: absolute; left: 4px; top: -6px; font-size: 28px;
font-weight: 800; color: var(--smk-gold, #c9a961);
font-family: Georgia, serif; line-height: 1; opacity: 0.7;
}
.smk-pull-quote-v2 strong { color: var(--smk-navy, #0F172A); font-weight: 700; }
@media (max-width: 768px) {
.smk-cat-hero { padding: 36px 24px; }
.smk-cat-hero h1 { font-size: 28px; }
.smk-cat-hero-stats { gap: 24px; }
.smk-cat-stat-num { font-size: 24px; }
.smk-cat-featured-body { padding: 22px 24px; }
.smk-cat-cta { padding: 28px 22px; }
.smk-search-hero { padding: 24px 22px; }
.smk-search-hero h1 { font-size: 22px; }
}
/* Print stylesheet (40-60대 출력 사용자 친화) */
@media print {
.smk-sticky-toc,
.smk-search-toggle,
.smk-search-panel,
.ast-builder-grid-row,
.smk-cta-bar,
footer { display: none !important; }
.smk-article-body { font-size: 12pt !important; line-height: 1.7 !important; }
.smk-compare-table { page-break-inside: avoid; }
}
/* ════════════════════════════════════════════════════════════════
v1.8.0 — 블로그 → 서비스 사이트 전환 (Bento Grid + Funnel)
════════════════════════════════════════════════════════════════ */
/* ─── How it works (3단계 funnel) ─────────────────────────────── */
.smk-how-steps {
list-style: none;
padding: 0;
margin: var(--space-8) 0 0;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-6);
counter-reset: step;
}
.smk-how-step {
position: relative;
padding: var(--space-8) var(--space-6);
background: var(--smk-bg-alt);
border-radius: var(--radius-lg);
border: 1px solid var(--smk-line);
transition: transform 0.3s var(--ease), border-color 0.3s, box-shadow 0.3s;
}
.smk-how-step:hover {
transform: translateY(-4px);
border-color: var(--smk-gold-line);
box-shadow: 0 12px 32px rgba(0, 16, 40, 0.08);
}
.smk-how-num {
display: inline-block;
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.2em;
color: var(--smk-gold);
font-weight: 700;
margin-bottom: var(--space-3);
}
.smk-how-step h3 {
font-size: 19px;
color: var(--smk-navy);
margin: 0 0 var(--space-3);
font-weight: 700;
letter-spacing: -0.01em;
}
.smk-how-step p {
color: var(--smk-text-soft);
line-height: 1.7;
margin: 0 0 var(--space-4);
font-size: 14.5px;
}
.smk-how-cta {
color: var(--smk-navy);
font-weight: 700;
text-decoration: none;
border-bottom: 2px solid var(--smk-gold);
padding-bottom: 1px;
transition: color 0.2s;
}
.smk-how-cta:hover { color: var(--smk-gold); }
/* ─── Bento Grid (도구·통계·사례·가이드 통합) ──────────────────── */
.smk-bento {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: minmax(180px, auto);
gap: var(--space-4);
margin: var(--space-8) 0 0;
}
.smk-bento-card {
position: relative;
padding: var(--space-6);
border-radius: var(--radius-lg);
background: var(--smk-bg);
border: 1px solid var(--smk-line);
text-decoration: none;
color: var(--smk-text);
display: flex;
flex-direction: column;
overflow: hidden;
isolation: isolate;
transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1),
border-color 0.3s,
box-shadow 0.35s;
}
.smk-bento-card:hover {
transform: translateY(-3px);
border-color: var(--smk-gold-line);
box-shadow: 0 16px 40px -8px rgba(0, 16, 40, 0.18);
}
.smk-bento-card[href]::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(
circle 280px at var(--mx, 50%) var(--my, 50%),
color-mix(in srgb, var(--smk-gold) 12%, transparent),
transparent 60%
);
opacity: 0;
transition: opacity 0.4s var(--ease);
pointer-events: none;
z-index: 0;
}
.smk-bento-card[href]:hover::before { opacity: 1; }
.smk-bento-card > * { position: relative; z-index: 1; }
/* 크기 클래스 */
.smk-bento-2x2 { grid-column: span 2; grid-row: span 2; }
.smk-bento-2x1 { grid-column: span 2; grid-row: span 1; }
.smk-bento-1x1 { grid-column: span 1; grid-row: span 1; }
/* 공통 요소 */
.smk-bento-eyebrow {
font-family: var(--font-mono);
font-size: 10.5px;
letter-spacing: 0.18em;
color: var(--smk-gold);
font-weight: 700;
text-transform: uppercase;
margin-bottom: var(--space-2);
}
.smk-bento-title {
font-size: 22px;
font-weight: 800;
color: var(--smk-navy);
letter-spacing: -0.015em;
line-height: 1.3;
margin: 0 0 var(--space-3);
}
.smk-bento-desc {
color: var(--smk-text-soft);
font-size: 14.5px;
line-height: 1.65;
margin: 0 0 var(--space-4);
flex-grow: 1;
}
.smk-bento-cta {
color: var(--smk-navy);
font-weight: 700;
font-size: 14px;
margin-top: auto;
letter-spacing: -0.005em;
transition: color 0.2s;
}
.smk-bento-card:hover .smk-bento-cta { color: var(--smk-gold); }
/* 자가진단 박스 (강조 — gold accent + 미리보기) */
.smk-bento-diagnose {
background: linear-gradient(135deg, var(--smk-navy) 0%, var(--smk-navy-deep) 100%);
color: rgba(255, 255, 255, 0.95);
border-color: transparent;
}
.smk-bento-diagnose .smk-bento-eyebrow { color: var(--smk-gold); }
.smk-bento-diagnose .smk-bento-title { color: #fff; font-size: 28px; }
.smk-bento-diagnose .smk-bento-desc { color: rgba(255, 255, 255, 0.75); font-size: 15px; }
.smk-bento-diagnose .smk-bento-cta {
color: var(--smk-gold);
background: rgba(212, 175, 55, 0.12);
border: 1px solid var(--smk-gold-line);
border-radius: var(--radius-sm);
padding: 12px 18px;
display: inline-block;
width: fit-content;
margin-top: var(--space-4);
}
.smk-bento-diagnose:hover { transform: translateY(-4px); box-shadow: 0 24px 48px -8px rgba(0, 16, 40, 0.4); }
.smk-bento-diagnose:hover .smk-bento-cta { background: var(--smk-gold); color: var(--smk-navy-deep); }
.smk-bento-preview {
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(212, 175, 55, 0.2);
border-radius: var(--radius-sm);
padding: var(--space-4);
margin: var(--space-3) 0 var(--space-2);
backdrop-filter: blur(8px);
}
.smk-bento-q-label {
font-size: 13px;
color: var(--smk-gold);
font-weight: 600;
margin-bottom: 10px;
letter-spacing: -0.005em;
}
.smk-bento-q-options {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.smk-bento-q-opt {
font-size: 12.5px;
padding: 6px 11px;
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: 100px;
color: rgba(255, 255, 255, 0.92);
}
/* 통계 카드 (counter) */
.smk-bento-stat {
background: linear-gradient(180deg, var(--smk-bg) 0%, var(--smk-bg-alt) 100%);
text-align: left;
justify-content: center;
}
.smk-bento-stat-num {
font-family: var(--font-mono);
font-size: clamp(20px, 2.2vw, 28px);
font-weight: 700;
color: var(--smk-navy);
letter-spacing: -0.02em;
margin: var(--space-2) 0;
font-variant-numeric: tabular-nums;
}
.smk-bento-stat-label {
font-size: 12.5px;
color: var(--smk-text-soft);
line-height: 1.5;
}
/* 매물 검색 (외부 송출) */
.smk-bento-listings {
background: linear-gradient(135deg, var(--smk-cream) 0%, #fdf9ec 100%);
border-color: var(--smk-gold-line);
}
.smk-bento-listings .smk-bento-eyebrow { color: var(--smk-gold-warm); }
/* 사례 카드 */
.smk-bento-case {
background: var(--smk-bg);
border-left: 4px solid var(--smk-gold);
}
/* 카테고리 미니 카드 */
.smk-bento-cat { padding: var(--space-5); justify-content: center; align-items: flex-start; }
.smk-bento-cat-icon {
font-size: 24px;
color: var(--smk-gold);
margin-bottom: var(--space-2);
line-height: 1;
}
.smk-bento-cat-title {
font-size: 15px;
font-weight: 700;
color: var(--smk-navy);
margin: 0 0 4px;
letter-spacing: -0.005em;
}
.smk-bento-cat-desc {
font-size: 12.5px;
color: var(--smk-text-soft);
margin: 0;
}
/* 전화 상담 카드 */
.smk-bento-contact {
background: linear-gradient(135deg, var(--smk-bg-alt) 0%, var(--smk-bg) 100%);
border-color: var(--smk-line);
}
.smk-bento-phone {
font-family: var(--font-mono);
font-size: clamp(22px, 2.6vw, 30px);
font-weight: 700;
color: var(--smk-navy);
letter-spacing: -0.01em;
margin: var(--space-2) 0 var(--space-3);
font-variant-numeric: tabular-nums;
}
/* 모바일 — 단일 컬럼 fallback */
@media (max-width: 900px) {
.smk-how-steps { grid-template-columns: 1fr; gap: var(--space-4); }
.smk-bento {
grid-template-columns: repeat(2, 1fr);
grid-auto-rows: auto;
gap: var(--space-3);
}
.smk-bento-2x2 { grid-column: span 2; grid-row: auto; }
.smk-bento-2x1 { grid-column: span 2; }
.smk-bento-diagnose .smk-bento-title { font-size: 22px; }
}
@media (max-width: 560px) {
.smk-bento { grid-template-columns: 1fr; }
.smk-bento-2x2,
.smk-bento-2x1,
.smk-bento-1x1 { grid-column: span 1; }
}
/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
.smk-how-step:hover,
.smk-bento-card:hover,
.smk-bento-diagnose:hover { transform: none; }
.smk-bento-card[href]::before { display: none; }
}
/* ════════════════════════════════════════════════════════════════
v1.9.0 — 고급 시각 효과 + 정보 다이어트
════════════════════════════════════════════════════════════════ */
/* Hero H1 word-by-word stagger reveal */
.smk-hero-h1-stagger { overflow: visible; }
.smk-hero-h1-stagger .smk-h1-word {
display: inline-block;
opacity: 0;
transform: translateY(20px) scale(0.96);
filter: blur(8px);
animation: smk-h1-word-rise 1.1s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
will-change: opacity, transform, filter;
}
@keyframes smk-h1-word-rise {
to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}
/* Scroll progress bar (gold thin) */
.smk-scroll-progress {
position: fixed; top: 0; left: 0;
height: 2px; width: 100%;
z-index: 9998; pointer-events: none;
background: transparent;
}
.smk-scroll-progress::before {
content: ''; display: block; height: 100%; width: 100%;
background: linear-gradient(90deg, var(--smk-gold) 0%, color-mix(in srgb, var(--smk-gold) 60%, transparent) 100%);
transform-origin: 0 50%;
transform: scaleX(var(--smk-scroll, 0));
transition: transform 0.06s linear;
box-shadow: 0 0 12px color-mix(in srgb, var(--smk-gold) 40%, transparent);
}
@supports (animation-timeline: scroll()) {
.smk-scroll-progress::before {
animation: smk-scroll-fill linear forwards;
animation-timeline: scroll(root);
transform: scaleX(0); transition: none;
}
@keyframes smk-scroll-fill { to { transform: scaleX(1); } }
}
/* Scroll-driven section reveal (Chrome 115+ animation-timeline: view()) */
@supports (animation-timeline: view()) {
section[data-reveal], header[data-reveal] {
animation: smk-section-rise linear both;
animation-timeline: view();
animation-range: entry 5% cover 30%;
}
@keyframes smk-section-rise {
from { opacity: 0; transform: translateY(40px); filter: blur(3px); }
to { opacity: 1; transform: translateY(0); filter: blur(0); }
}
}
/* Category hero — stats 제거 후 prestigious 톤 */
.smk-cat-hero { padding: var(--space-12) 0 var(--space-10); }
.smk-cat-hero h1 {
font-size: clamp(28px, 4.2vw, 44px);
letter-spacing: -0.02em; font-weight: 800;
margin: 0 0 var(--space-3); color: var(--smk-navy);
}
.smk-cat-hero-desc {
color: var(--smk-text-soft);
font-size: clamp(15px, 1.5vw, 17px);
line-height: 1.7; max-width: 720px; margin: 0;
}
/* byline chip 이모지 제거 후 미니멀 */
.smk-byline-chip {
display: inline-flex; align-items: center; gap: 4px;
padding: 3px 8px;
background: color-mix(in srgb, var(--smk-gold) 8%, transparent);
border: 1px solid var(--smk-gold-line);
border-radius: 100px;
font-size: 11.5px; color: var(--smk-navy);
font-weight: 600; letter-spacing: -0.005em;
}
@media (prefers-reduced-motion: reduce) {
.smk-hero-h1-stagger .smk-h1-word {
opacity: 1 !important; transform: none !important;
filter: none !important; animation: none !important;
}
.smk-scroll-progress { display: none; }
}
/* v1.9.1 — 한국어 typography fix + hero 여백 일관화 */
.smk-container h1, .smk-container h2, .smk-container h3, .smk-container p,
.smk-bento-title, .smk-bento-desc, .smk-hero-sub,
.smk-decide-head h1, .smk-decide-head p,
.smk-about-head h1, .smk-about-titles,
.smk-cat-hero h1, .smk-cat-hero-desc,
.smk-search-hero h1, .smk-section-head h2, .smk-section-head p,
.smk-archive-head h1, .smk-archive-desc {
word-break: keep-all;
overflow-wrap: break-word;
text-wrap: pretty;
hanging-punctuation: allow-end;
}
.smk-decide-head, .smk-about-head, .smk-cat-hero,
.smk-search-hero, .smk-archive-head {
padding-top: clamp(64px, 8vw, 120px);
padding-bottom: clamp(40px, 5vw, 72px);
text-align: center;
}
.smk-decide-head p, .smk-cat-hero-desc, .smk-about-titles, .smk-archive-desc {
max-width: 640px;
margin: 0 auto;
line-height: 1.75;
font-size: clamp(15px, 1.5vw, 17px);
color: var(--smk-text-soft);
}
.smk-decide-head h1, .smk-about-head h1, .smk-cat-hero h1,
.smk-search-hero h1, .smk-archive-head h1 {
font-size: clamp(28px, 4.5vw, 48px);
font-weight: 800;
letter-spacing: -0.025em;
line-height: 1.25;
margin: 0 0 var(--space-4);
color: var(--smk-navy);
}
@supports (animation-timeline: view()) {
.smk-bento .smk-bento-card,
.smk-card-grid .smk-post-card,
.smk-how-steps .smk-how-step {
animation: smk-card-rise linear both;
animation-timeline: view();
animation-range: entry 0% cover 25%;
}
@keyframes smk-card-rise {
from { opacity: 0; transform: translateY(28px) scale(0.97); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
}
@media (prefers-reduced-motion: reduce) {
.smk-bento .smk-bento-card,
.smk-card-grid .smk-post-card,
.smk-how-steps .smk-how-step {
transform: none !important;
animation: none !important;
}
}
/* ════════════════════════════════════════════════════════════════
v1.9.4 — 시각 디자인 폴리시 (Hero depth + How flow + Card hover)
자율 의사결정 프로세스 결과: A+G+B+D+F 결합
════════════════════════════════════════════════════════════════ */
/* ============================================================
1. Hero 시각 깊이 강화 — 빌딩 silhouette SVG 배경 (절제된 navy 톤)
============================================================ */
.smk-home-hero {
isolation: isolate;
}
/* 빌딩 silhouette — 우측 하단 */
.smk-home-hero .smk-hero-inner::after {
content: "";
position: absolute;
right: -40px;
bottom: 0;
width: 480px;
height: 280px;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right bottom;
background-size: contain;
pointer-events: none;
z-index: 0;
opacity: 0.85;
animation: smk-bldg-fade-in 1.6s cubic-bezier(0.2, 0.8, 0.2, 1) 0.3s both;
}
@keyframes smk-bldg-fade-in {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 0.85; transform: translateY(0); }
}
/* hero-inner 내 컨텐츠는 빌딩 위에 */
.smk-home-hero .smk-hero-inner > * {
position: relative;
z-index: 1;
}
/* Hero 부드러운 mesh gradient overlay 추가 (절제된 깊이) */
.smk-home-hero::before {
background-image:
radial-gradient(circle 480px at 12% 18%, color-mix(in srgb, var(--smk-gold) 5%, transparent), transparent 70%),
radial-gradient(circle 360px at 88% 78%, color-mix(in srgb, var(--smk-gold-soft, #d4af37) 6%, transparent), transparent 70%),
radial-gradient(circle 720px at 50% -10%, color-mix(in srgb, #ffffff 10%, transparent), transparent 60%);
animation: smk-hero-mesh-drift 28s ease-in-out infinite alternate;
}
@keyframes smk-hero-mesh-drift {
0% { transform: translate(0, 0) rotate(0deg); }
100% { transform: translate(-30px, 20px) rotate(2deg); }
}
@media (max-width: 768px) {
.smk-home-hero .smk-hero-inner::after {
width: 320px;
height: 200px;
right: -60px;
opacity: 0.5;
}
}
/* ============================================================
2. How-it-works 단계 연결선 (1 → 2 → 3 시각화) + 번호 typography
============================================================ */
.smk-how-steps {
position: relative;
}
/* 단계 사이 연결선 (데스크탑) */
@media (min-width: 901px) {
.smk-how-steps::before {
content: "";
position: absolute;
top: 64px;
left: calc(16.66% + 10px);
right: calc(16.66% + 10px);
height: 2px;
background-image:
linear-gradient(90deg,
transparent 0%,
color-mix(in srgb, var(--smk-gold) 35%, transparent) 18%,
color-mix(in srgb, var(--smk-gold) 35%, transparent) 82%,
transparent 100%
);
background-size: 12px 2px;
background-repeat: repeat-x;
z-index: 0;
pointer-events: none;
}
}
.smk-how-step {
z-index: 1;
}
/* 번호 — large gold + monospace + circle wrap */
.smk-how-num {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
border-radius: 50%;
background: linear-gradient(135deg, color-mix(in srgb, var(--smk-gold) 14%, transparent) 0%, color-mix(in srgb, var(--smk-gold) 4%, transparent) 100%);
border: 1.5px solid color-mix(in srgb, var(--smk-gold) 35%, transparent);
font-family: 'JetBrains Mono', monospace;
font-size: 16px !important;
font-weight: 700 !important;
color: var(--smk-gold) !important;
letter-spacing: 0 !important;
margin-bottom: 18px !important;
transition: all .3s cubic-bezier(.4, 0, .2, 1);
}
.smk-how-step:hover .smk-how-num {
background: var(--smk-gold);
color: var(--smk-navy) !important;
border-color: var(--smk-gold);
transform: scale(1.06) rotate(-3deg);
box-shadow: 0 6px 20px color-mix(in srgb, var(--smk-gold) 35%, transparent);
}
@media (max-width: 900px) {
.smk-how-num {
width: 42px;
height: 42px;
font-size: 14px !important;
}
}
/* ============================================================
3. Section 사이 transition gradient (gold thin line)
============================================================ */
.smk-how + .smk-section:not(.smk-home-hero),
.smk-section + .smk-section:not(.smk-home-hero) {
position: relative;
}
.smk-section:not(.smk-home-hero):not(.smk-how)::before {
content: "";
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 60px;
height: 2px;
background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--smk-gold) 60%, transparent), transparent);
border-radius: 1px;
pointer-events: none;
}
/* ============================================================
4. Card hover 효과 강화 — 사진 zoom + content lift + gold border glow
============================================================ */
/* Post card 사진 영역 */
.smk-post-card .smk-card-thumb,
.smk-cat-featured-card .smk-cat-featured-thumb {
overflow: hidden;
position: relative;
}
.smk-post-card .smk-card-thumb img,
.smk-cat-featured-card .smk-cat-featured-thumb img {
transition: transform .55s cubic-bezier(.2, .8, .2, 1), filter .35s;
will-change: transform;
}
.smk-post-card:hover .smk-card-thumb img,
.smk-cat-featured-card:hover .smk-cat-featured-thumb img {
transform: scale(1.05);
filter: saturate(1.1);
}
/* 이미지 위 subtle gold tint on hover */
.smk-post-card .smk-card-thumb::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(135deg, transparent 60%, color-mix(in srgb, var(--smk-gold) 25%, transparent) 100%);
opacity: 0;
transition: opacity .35s ease;
pointer-events: none;
}
.smk-post-card:hover .smk-card-thumb::after {
opacity: 1;
}
/* Card 자체 lift + gold border glow */
.smk-post-card {
transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s, border-color .35s;
}
.smk-post-card:hover {
transform: translateY(-6px);
box-shadow: 0 18px 40px -10px rgba(0, 16, 40, 0.18), 0 0 0 1px color-mix(in srgb, var(--smk-gold) 35%, transparent);
}
/* card title 더 강조 on hover */
.smk-post-card .smk-card-title {
transition: color .25s;
}
.smk-post-card:hover .smk-card-title {
color: var(--smk-gold);
}
/* ============================================================
5. Hero CTA buttons — metallic gold gradient + sweep animation on hover
============================================================ */
.smk-hero-cta .smk-btn-gold {
position: relative;
background: linear-gradient(135deg, var(--smk-gold) 0%, color-mix(in srgb, var(--smk-gold) 80%, #fff) 50%, var(--smk-gold) 100%);
background-size: 200% 100%;
background-position: 0% 50%;
transition: background-position .5s cubic-bezier(.2, .8, .2, 1), transform .25s, box-shadow .35s;
overflow: hidden;
}
.smk-hero-cta .smk-btn-gold::after {
content: "";
position: absolute;
top: 0;
left: -100%;
width: 50%;
height: 100%;
background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.4), transparent);
transition: left .6s cubic-bezier(.2, .8, .2, 1);
}
.smk-hero-cta .smk-btn-gold:hover {
background-position: 100% 50%;
transform: translateY(-2px);
box-shadow: 0 10px 30px color-mix(in srgb, var(--smk-gold) 40%, transparent);
}
.smk-hero-cta .smk-btn-gold:hover::after {
left: 150%;
}
/* ============================================================
6. Bento card hover — radial light follows cursor (이미 inline에 있음) + lift 강화
============================================================ */
.smk-bento .smk-bento-card {
transition: transform .4s cubic-bezier(.2, .8, .2, 1), border-color .35s, box-shadow .4s;
}
.smk-bento .smk-bento-stat:hover {
transform: translateY(-2px);
border-color: color-mix(in srgb, var(--smk-gold) 35%, transparent);
}
/* Stat 숫자 hover 시 살짝 색감 변화 */
.smk-bento-stat:hover .smk-bento-stat-num {
color: var(--smk-gold);
transition: color .3s;
}
/* Bento diagnose card sweep effect (gold ribbon) */
.smk-bento-diagnose {
position: relative;
overflow: hidden;
}
.smk-bento-diagnose::after {
content: "";
position: absolute;
top: -100%;
right: -50%;
width: 80%;
height: 200%;
background: linear-gradient(135deg, transparent 40%, rgba(212, 175, 55, 0.06) 50%, transparent 60%);
transition: top .8s cubic-bezier(.2, .8, .2, 1);
pointer-events: none;
}
.smk-bento-diagnose:hover::after {
top: 100%;
}
/* prefers-reduced-motion 존중 */
@media (prefers-reduced-motion: reduce) {
.smk-home-hero .smk-hero-inner::after,
.smk-home-hero::before { animation: none !important; }
.smk-how-step:hover .smk-how-num { transform: none; }
.smk-post-card:hover .smk-card-thumb img,
.smk-cat-featured-card:hover .smk-cat-featured-thumb img { transform: none; }
.smk-hero-cta .smk-btn-gold:hover::after { transition: none; left: -100%; }
.smk-bento-diagnose:hover::after { transition: none; top: -100%; }
}