/* 폰트는 각 HTML 의 preconnect + 로 로드 (CSS @import = 렌더 블로킹 회피) */
/* ===== Reset & Base ===== */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; }
img { max-width: 100%; display: block; }
/* ⚠️ hidden 속성은 브라우저 기본 스타일(display:none)로만 동작한다 —
요소에 display 를 지정한 클래스가 있으면 그쪽이 이겨서 **숨겨 놓은 것이 그대로 보인다**
(렌탈 화면의 오류 배너·상세 본문에서 실제로 겪었다). 여기서 한 번에 못 박는다. */
[hidden] { display: none !important; }
/* ============================================================
FFUNCH RIDE 디자인 시스템 v3 (UI/UX Pro Max — 공식 GREEN 로고 기반)
브랜드색: FFUNCH Mint #00FFA6 (검정 위 네온) — 정본: design-system/ffunch-ride/MASTER.md
원칙: 네온은 다크 위에서만(가시성) · 라이트 본문 텍스트는 접근성 딥에메랄드
============================================================ */
:root {
/* 브랜드 (네온 민트 — 다크 크롬/버튼필/하이라이트/active) */
--brand: #00FFA6; /* 공식 로고색 (RGB 0 255 166) */
--brand-ink: #08130E; /* 네온 위 텍스트(검정) + 다크 크롬 배경 */
--brand-dim: #00D98D; /* 네온 hover(약간 진하게) */
/* 라이트 배경용 접근성 그린 (white 위 AA — 텍스트/링크/보더) */
--primary: #047857; /* 딥 에메랄드 (white 위 5:1) */
--primary-dark: #065F46; /* hover/강조 */
--primary-deep: #064E3B; /* 제목 강조 */
--accent: #EA580C; /* 보조 CTA/긴급 (절제 사용) */
--accent-dark: #C2410C;
--on-primary: #ffffff;
/* 표면 */
--ink: #08130E; /* 다크 크롬 (헤더/히어로/푸터) */
--ink-soft: #0F1F17;
--ink-line: #1C3328;
--bg: #F4FFFB; /* 페이지 배경 (whisper mint) */
--bg-soft: #EAFBF3; /* muted 블록 */
--surface: #ffffff;
--border: #CFEEE0; /* mint-tinted border */
--divider: rgba(6,95,70,0.10);
--text: #0F1A15;
--text-muted: #5b6b63;
--text-meta: #5b6b63; /* 흰 배경 4.9:1 (구 #84938b 은 3.1:1 미달) */
/* 입력 안내문 — **입력한 값(--text)보다 확실히 연해야** 한다(아래 ::placeholder 참고) */
--placeholder: #9ca3af;
/* 상태 (브랜드가 녹색이므로 success는 아이콘/텍스트 병행 필수) */
--success: #15803d;
--warning: #b45309;
--danger: #DC2626;
--info: #0284c7;
/* 간격 스케일 (4/8 리듬) */
--space-xs: 4px; --space-sm: 8px; --space-md: 16px;
--space-lg: 24px; --space-xl: 32px; --space-2xl: 48px; --space-3xl: 64px;
/* 형태 */
--radius: 16px;
--radius-sm: 12px;
--radius-xs: 8px;
--shadow-sm: 0 1px 2px rgba(6,78,59,0.06);
--shadow-md: 0 4px 12px rgba(6,78,59,0.10);
--shadow-lg: 0 12px 28px rgba(6,78,59,0.14);
--shadow-xl: 0 24px 48px rgba(6,78,59,0.18);
--shadow-brand: 0 8px 24px rgba(0,255,166,0.40);
--glow: 0 0 16px rgba(0,255,166,0.55);
/* 모션 (200–300ms, spring) */
--ease: cubic-bezier(0.4, 0, 0.2, 1);
--spring: cubic-bezier(0.34, 1.3, 0.64, 1);
--tap: 44px;
/* 좌우 여백(gutter) 단일 토큰 — 전 페이지·전 폭에서 동일 (#42)
모바일은 16px 로 좁혀 2열 카드 폭을 최대화한다 */
--gutter: 16px;
}
@media (min-width: 768px) { :root { --gutter: 20px; } }
@media (min-width: 1200px) { :root { --gutter: 24px; } }
::selection { background: var(--brand); color: var(--brand-ink); }
body {
font-family: 'Noto Sans KR', 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
color: var(--text);
background: var(--bg);
line-height: 1.6;
-webkit-font-smoothing: antialiased;
letter-spacing: -0.005em;
text-rendering: optimizeLegibility;
}
/* 제목은 Bold 위계 (700/900) */
h1, h2, h3, .section-title, .hero__title { font-weight: 700; letter-spacing: -0.02em; }
.container { max-width: 1200px; margin: 0 auto; padding-inline: var(--gutter); }
/* 풀블리드가 필요한 블록만 명시적으로 여백 해제 */
.bleed { margin-inline: calc(var(--gutter) * -1); }
.muted { color: var(--text-muted); font-size: 14px; }
.text-accent { color: var(--primary); }
/* ===== Buttons (Apple-style) ===== */
.btn {
display: inline-flex; align-items: center; justify-content: center;
gap: 6px;
padding: 12px 22px;
border-radius: 980px; /* Apple-style pill */
font-weight: 500;
font-size: 14px;
letter-spacing: -0.01em;
font-weight: 700;
transition: transform .22s var(--spring), background .2s var(--ease), color .2s var(--ease), box-shadow .2s var(--ease);
cursor: pointer;
border: none;
font-family: inherit;
-webkit-tap-highlight-color: transparent;
touch-action: manipulation;
}
/* 네온 민트 + 검정 글자 = 최대 가시성(~15:1), 로고 페어링 그대로 */
.btn--primary { background: var(--brand); color: var(--brand-ink); font-weight: 800; }
/* 레이아웃 시프트 없는 hover (translate/shadow/glow만 — 앤티패턴 회피) */
.btn--primary:hover { background: var(--brand-dim); transform: translateY(-1px); box-shadow: var(--shadow-brand); }
.btn--primary:active { transform: translateY(0) scale(.98); box-shadow: none; }
.btn--accent { background: var(--accent); color: #fff; }
.btn--accent:hover { background: var(--accent-dark); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn--ghost { background: transparent; color: var(--primary-dark); border: 1.5px solid var(--border); }
.btn--ghost:hover { background: var(--bg-soft); border-color: var(--primary); color: var(--primary-deep); }
.btn--dark { background: var(--ink); color: var(--brand); }
.btn--dark:hover { background: var(--ink-soft); transform: translateY(-1px); box-shadow: var(--glow); }
.btn--block { width: 100%; padding: 14px; font-size: 15px; }
.btn[disabled] { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }
/* ===== Header — 다크 크롬 (네온 그린 가시성 극대화) ===== */
.header {
position: sticky; top: 0; z-index: 1000;
/* #66 첫 진입 흰 줄 수정 — 알파 0.86은 스크롤 0에서 backdrop(body 밝은 배경)과 합성되어
헤더·반투명 보더가 밝게 떠 보인다(스크롤 후 다크 히어로 위에서만 정상). 0.97로 상시 다크 보장 */
background: rgba(8, 19, 14, 0.97);
backdrop-filter: saturate(180%) blur(20px);
-webkit-backdrop-filter: saturate(180%) blur(20px);
border-bottom: 1px solid rgba(0,255,166,0.18);
}
.header__inner {
display: flex; align-items: center; justify-content: space-between;
height: 56px;
}
.logo { display: inline-flex; align-items: center; gap: 8px; font-weight: 900; font-size: 19px; letter-spacing: -0.02em; }
.logo__icon { font-size: 22px; }
.logo__text { color: #fff; }
.nav { display: flex; gap: 28px; }
.nav__link {
font-size: 13px; font-weight: 500;
color: rgba(255,255,255,0.78);
padding: 8px 0;
border-bottom: 1.5px solid transparent; /* always present to prevent text shift */
transition: color .15s var(--ease);
letter-spacing: -0.01em;
}
.nav__link:hover { color: #fff; }
.nav__link.active { color: var(--brand); border-color: var(--brand); font-weight: 700; }
.header__actions .btn--ghost { color: rgba(255,255,255,0.9); border-color: rgba(255,255,255,0.25); }
.header__actions .btn--ghost:hover { background: rgba(0,255,166,0.12); border-color: var(--brand); color: var(--brand); }
.header__actions { display: flex; gap: 6px; align-items: center; }
.header__actions .btn { padding: 6px 14px; font-size: 12px; }
/* ===== 헤더: 장바구니 버튼 + 배지 (전 페이지 공용) ===== */
.cart-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 10px; background: transparent; border: none; color: #fff; cursor: pointer; transition: background .15s, color .15s; }
.cart-btn:hover { background: rgba(255,255,255,.12); color: var(--brand); }
.cart-badge { position: absolute; top: 1px; right: -1px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--brand); color: var(--brand-ink); font-size: 11px; font-weight: 800; line-height: 18px; text-align: center; box-shadow: 0 0 0 2px var(--ink); }
.cart-badge[hidden] { display: none; }
/* ===== 헤더: 모토 상담 버튼 (모바일 전용 — FAB 대체) =====
우하단 FAB은 카드 그리드 CTA와 상시 겹쳐 클릭을 가로채므로(감사 P0-1),
모바일에서는 FAB을 숨기고 헤더 진입점으로 대체한다. 데스크톱은 FAB 유지. */
.chat-btn { display: none; position: relative; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 10px; background: transparent; border: none; color: #fff; cursor: pointer; transition: background .15s, color .15s; }
.chat-btn:hover { background: rgba(255,255,255,.12); color: var(--brand); }
/* ===== 헤더: 모바일 햄버거 (≤960px 노출) ===== */
.nav-toggle { display: none; width: 40px; height: 40px; align-items: center; justify-content: center; background: transparent; border: none; color: #fff; cursor: pointer; border-radius: 10px; }
.nav-toggle:hover { background: rgba(255,255,255,.12); }
/* ===== 모바일 전체 메뉴 드로어 (7개 메뉴 + 액션) ===== */
.mobile-nav { position: fixed; inset: 0; z-index: 1100; visibility: hidden; overflow: hidden; }
.mobile-nav.open { visibility: visible; }
.mobile-nav__backdrop { position: absolute; inset: 0; background: rgba(8,19,14,.55); opacity: 0; transition: opacity .25s; }
.mobile-nav.open .mobile-nav__backdrop { opacity: 1; }
.mobile-nav__panel { position: absolute; top: 0; right: 0; height: 100%; width: min(78vw, 320px); background: var(--ink); color: #fff; padding: 18px; display: flex; flex-direction: column; gap: 2px; transform: translateX(100%); transition: transform .28s cubic-bezier(.4,0,.2,1); overflow-y: auto; box-shadow: -8px 0 30px rgba(0,0,0,.3); }
.mobile-nav.open .mobile-nav__panel { transform: translateX(0); }
.mobile-nav__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.mobile-nav__head strong { font-size: 16px; }
.mobile-nav__close { background: rgba(255,255,255,.1); border: none; color: #fff; width: 34px; height: 34px; border-radius: 50%; font-size: 16px; cursor: pointer; }
.mobile-nav__link { display: block; padding: 14px 12px; border-radius: 10px; color: rgba(255,255,255,.92); font-size: 16px; font-weight: 600; }
.mobile-nav__link:hover, .mobile-nav__link.active { background: rgba(0,255,166,.14); color: var(--brand); }
.mobile-nav__divider { height: 1px; background: rgba(255,255,255,.12); margin: 10px 0; }
.mobile-nav__link--primary { background: var(--brand); color: var(--brand-ink); text-align: center; margin-top: 4px; font-weight: 800; }
.mobile-nav__link--primary:hover { background: var(--brand-dim); color: var(--brand-ink); }
/* ===== 장바구니 슬라이드 드로어 ===== */
.cart-drawer { position: fixed; inset: 0; z-index: 1200; visibility: hidden; overflow: hidden; }
.cart-drawer.open { visibility: visible; }
.cart-drawer__backdrop { position: absolute; inset: 0; background: rgba(8,19,14,.5); opacity: 0; transition: opacity .25s; }
.cart-drawer.open .cart-drawer__backdrop { opacity: 1; }
.cart-drawer__panel { position: absolute; top: 0; right: 0; height: 100%; width: min(92vw, 400px); background: #fff; transform: translateX(100%); transition: transform .28s cubic-bezier(.4,0,.2,1); box-shadow: -8px 0 30px rgba(0,0,0,.25); }
.cart-drawer.open .cart-drawer__panel { transform: translateX(0); }
.cart-drawer__panel > div { display: flex; flex-direction: column; height: 100%; }
.cart-drawer__head { display: flex; align-items: center; justify-content: space-between; padding: 18px; border-bottom: 1px solid var(--border); }
.cart-drawer__head strong { font-size: 17px; }
.cart-drawer__close { background: var(--bg-soft); border: none; width: 34px; height: 34px; border-radius: 50%; font-size: 16px; cursor: pointer; color: var(--text); }
.cart-ship { margin: 14px 18px 0; padding: 10px 14px; background: var(--bg-soft); border-radius: 10px; font-size: 12.5px; color: var(--text); }
.cart-ship--done { background: #DCFCE7; color: var(--success); font-weight: 700; }
.cart-ship__bar { height: 6px; background: #fff; border-radius: 999px; margin-top: 8px; overflow: hidden; }
.cart-ship__bar span { display: block; height: 100%; background: var(--brand); border-radius: 999px; transition: width .3s; }
.cart-items { flex: 1; overflow-y: auto; padding: 8px 18px; }
.cart-item { display: grid; grid-template-columns: 56px 1fr auto; gap: 10px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--border); position: relative; }
.cart-item__img { width: 56px; height: 56px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 28px; }
.cart-item__name { font-size: 13.5px; font-weight: 700; line-height: 1.3; padding-right: 18px; }
.cart-item__opt { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.cart-item__price { font-size: 14px; font-weight: 800; color: var(--primary); margin-top: 4px; }
.cart-item__qty { display: inline-flex; align-items: center; gap: 8px; }
.cart-item__qty button { width: 26px; height: 26px; border: 1px solid var(--border); background: #fff; border-radius: 7px; font-size: 15px; cursor: pointer; line-height: 1; }
.cart-item__qty span { min-width: 18px; text-align: center; font-weight: 700; font-size: 13px; }
.cart-item__del { position: absolute; top: 10px; right: 0; background: none; border: none; cursor: pointer; font-size: 14px; opacity: .55; }
.cart-item__del:hover { opacity: 1; }
.cart-drawer__foot { padding: 16px 18px calc(16px + env(safe-area-inset-bottom)); border-top: 1px solid var(--border); background: #fff; }
.cart-total { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px; }
.cart-total strong { font-size: 22px; color: var(--primary); }
.cart-clear { width: 100%; margin-top: 8px; background: none; border: none; color: var(--text-muted); font-size: 12px; cursor: pointer; text-decoration: underline; }
.cart-pay { padding: 14px 8px; border: 1px solid var(--border); border-radius: 12px; background: #fff; font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit; transition: all .15s; }
.cart-pay:hover { border-color: var(--primary); background: var(--bg-soft); }
.cart-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 40px 20px; text-align: center; color: var(--text-muted); }
/* 반응형: ≤960px 햄버거 노출, 데스크톱 전용 헤더 액션 숨김 */
@media (max-width: 960px) {
.nav-toggle { display: inline-flex; }
.header-only { display: none; }
}
/* ===== 세그먼트 컨트롤 (담긴 트랙 + 네온 active) — 공용 디자인 =====
신차 허브 서브내비(신차구매/구독/악세사리 3페이지) + 단기렌탈 검색 모드 토글(기종/지점) 공통 사용 */
.shop-hub { background: var(--surface); border-bottom: 1px solid var(--border); box-shadow: var(--shadow-sm); }
.shop-hub .container { display: flex; justify-content: center; }
.shop-hub__tabs {
display: inline-flex; gap: 5px; padding: 6px; margin: 16px 0;
background: var(--bg-soft); border: 1px solid var(--border); border-radius: 16px;
box-shadow: inset 0 1px 3px rgba(6,78,59,.07);
max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.shop-hub__tabs::-webkit-scrollbar { display: none; }
.shop-hub__tab {
flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
padding: 12px 24px; min-height: 46px; border-radius: 12px; background: transparent; color: #374151;
font-weight: 700; font-size: 15px; white-space: nowrap; border: none;
transition: background .18s ease, color .18s ease, box-shadow .18s ease; cursor: pointer;
}
.shop-hub__tab svg { flex-shrink: 0; }
.shop-hub__tab:hover { background: rgba(255,255,255,.75); color: var(--primary-deep); }
.shop-hub__tab.active, .shop-hub__tab.active:hover { background: var(--brand); color: var(--brand-ink); box-shadow: 0 2px 8px rgba(0,255,166,.4); }
.shop-hub__tab:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }
@media (max-width: 760px) {
.shop-hub .container { justify-content: flex-start; }
.shop-hub__tabs { margin: 12px 0; gap: 4px; }
.shop-hub__tab { font-size: 13px; padding: 11px 14px; }
}
@media (prefers-reduced-motion: reduce) { .shop-hub__tab { transition: none; } }
/* ===== Hero — 다크 + 네온 글로우 (브랜드 임팩트) ===== */
.hero {
background: linear-gradient(160deg, #08130E 0%, #0B1A13 55%, #08130E 100%);
padding: 88px 0 96px;
position: relative;
overflow: hidden;
}
/* 모바일: 첫 화면에 예약 위젯 상단부까지 들어오도록 히어로 여백 축소 */
@media (max-width: 760px) { .hero { padding: 40px 0 48px; } }
.hero::before {
content: ''; position: absolute;
top: -220px; right: -160px;
width: 620px; height: 620px;
background: radial-gradient(circle, rgba(0,255,166,0.16), transparent 68%);
border-radius: 50%;
pointer-events: none;
}
/* ⚠️ 히어로는 다크(#08130E)이므로 배지 글자는 네온 --brand 가 정본이다(합성 실측 11.0:1).
#87 감사에서 이 배지를 「1.3:1」로 잡아 --primary(#047857)로 바꿨다가 3.27:1 로 오히려 악화됐다 —
측정 스크립트가 ① 배경의 12% 알파와 ② .hero 의 gradient(backgroundColor 에 안 잡힌다)를
둘 다 무시하고 흰 배경으로 가정한 위양성이었다. 대비 정본 측정은 design17 G2(그라데이션 스톱 최악값). */
.hero .badge { background: rgba(0,255,166,0.12); border: 1px solid rgba(0,255,166,0.30); color: var(--brand); font-weight: 700; }
.hero__title { color: #fff; }
.hero .text-accent { color: var(--brand); }
.hero__sub { color: rgba(255,255,255,0.66); }
.hero .stat strong { color: var(--brand); }
.hero .stat span { color: rgba(255,255,255,0.55); }
.hero__inner {
display: grid;
grid-template-columns: 1fr 440px;
gap: 80px;
align-items: center;
position: relative;
}
.badge {
display: inline-block;
background: var(--surface);
padding: 6px 14px;
border-radius: 980px;
font-size: 12px; font-weight: 500;
color: var(--text-muted);
border: 1px solid var(--border);
}
.hero__title {
font-size: 64px; line-height: 1.06;
font-weight: 800;
letter-spacing: -0.045em;
margin: 20px 0 18px;
color: #fff; /* 다크 히어로 위 — 비강조 글자도 흰색 (가시성) */
}
.hero__title .text-accent { color: var(--brand); } /* 강조구는 네온 */
.text-accent { color: var(--primary); }
.hero__sub {
font-size: 20px; color: rgba(255,255,255,0.72);
margin: 0 0 40px;
font-weight: 400;
letter-spacing: -0.01em;
line-height: 1.5;
}
.hero__stats { display: flex; gap: 48px; }
.stat strong {
display: block; font-size: 32px; font-weight: 800;
color: var(--brand);
letter-spacing: -0.025em;
margin-bottom: 2px;
}
.stat span { font-size: 13px; color: rgba(255,255,255,0.6); font-weight: 400; }
/* ===== Reserve Card (Apple-style) ===== */
.reserve-card {
background: var(--surface);
border-radius: 22px;
box-shadow: var(--shadow-lg);
overflow: hidden;
border: 1px solid rgba(0,0,0,0.04);
}
.steps {
display: flex;
background: var(--bg-soft);
border-bottom: 1px solid var(--divider);
}
.step {
flex: 1;
display: flex; flex-direction: column; align-items: center;
padding: 14px 0;
gap: 4px;
position: relative;
}
.step:not(:last-child)::after {
content: ''; position: absolute;
right: -1px; top: 20%; bottom: 20%;
border-right: 1px solid var(--border);
}
.step__num {
width: 26px; height: 26px;
background: #e5e7eb; color: #4b5563;
border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center;
font-size: 13px; font-weight: 700;
}
.step__label { font-size: 12px; color: var(--text-muted); font-weight: 500; }
.step.active .step__num { background: var(--primary); color: #fff; }
.step.active .step__label { color: var(--primary); font-weight: 700; }
.reserve-card__body { padding: 24px; }
.field { display: block; margin-bottom: 14px; }
.field__label {
display: block;
font-size: 13px; font-weight: 600;
color: #4b5563;
margin-bottom: 6px;
}
.field select, .field input {
width: 100%;
padding: 12px 14px;
border: 1px solid var(--border);
border-radius: 10px;
font-size: 14px;
font-family: inherit;
background: #fff;
transition: border-color .2s;
}
.field select {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2300c896'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 10px center;
background-size: 22px;
padding-right: 38px;
cursor: pointer;
}
.field select::-ms-expand { display: none; }
/* 스크롤 시 sticky 헤더에 가리지 않도록 */
section[id] { scroll-margin-top: 80px; }
.field select:focus, .field input:focus {
outline: none;
border-color: var(--primary);
box-shadow: 0 0 0 3px rgba(0,255,166,0.15);
}
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
/* ===== Sections (Apple-style) ===== */
/* 기본 섹션 패딩은 절제(24px) — 내부 페이지 콘텐츠 섹션 과다 여백 방지.
홈 마케팅 섹션만 큰 리듬 유지 (.bikes/.why/.used/.map-section). page-hero 등 클래스 섹션은 자체 패딩. */
section { padding: 24px 0; }
.bikes, .why, .used, .map-section { padding: 100px 0; }
.section-head { text-align: center; margin-bottom: 56px; }
.section-title { font-size: 44px; font-weight: 600; margin: 0 0 12px; letter-spacing: -0.025em; color: var(--text); }
.section-sub { font-size: 19px; color: var(--text-muted); margin: 0; font-weight: 400; letter-spacing: -0.01em; }
/* ===== Map ===== */
.map-section { background: var(--bg-soft); }
/* Leaflet 지도를 자체 stacking context(z-index:0)로 가둠 → 내부 컨트롤(z 1000)이
sticky 헤더 위로 올라오는 버그 방지 */
.leaflet-container { z-index: 0; }
.map-wrap {
display: grid;
grid-template-columns: 1fr 320px;
gap: 20px;
background: #fff;
border-radius: var(--radius);
padding: 20px;
box-shadow: var(--shadow-sm);
}
#map {
height: 500px;
border-radius: 12px;
background: #e5e7eb;
}
.map-side__head {
display: flex; align-items: baseline; justify-content: space-between;
margin-bottom: 14px;
}
.map-side__head h3 { margin: 0; font-size: 18px; }
.branch-list { list-style: none; padding: 0; margin: 0; max-height: 450px; overflow-y: auto; }
.branch-item { list-style: none; }
/* transform translateY 제거 — overflow:auto 리스트 상단에서 윗 테두리 잘림 방지 */
.branch-item h4 { margin: 0 0 4px; font-size: 15px; }
.branch-item p { margin: 0; font-size: 13px; color: var(--text-muted); }
.branch-item .stock { display: inline-block; margin-top: 6px; font-size: 12px; font-weight: 600; }
/* ===== Bikes ===== */
.bike-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
}
.bike-card {
background: var(--surface);
border: 1px solid var(--divider);
border-radius: var(--radius);
overflow: hidden;
transition: transform .3s var(--ease), box-shadow .3s var(--ease);
cursor: pointer;
}
.bike-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: rgba(0,0,0,0.12); }
.bike-card__img {
height: 180px;
display: flex; align-items: center; justify-content: center;
position: relative;
}
.bike-emoji { font-size: 80px; }
.bike-card__tag {
position: absolute; top: 12px; left: 12px;
background: var(--accent); color: #fff;
padding: 4px 10px; border-radius: 999px;
font-size: 11px; font-weight: 700;
}
.tag--electric { background: #3b82f6; }
.bike-card__body { padding: 16px; }
.bike-card__body h3 { margin: 0 0 4px; font-size: 16px; }
.bike-card__spec { margin: 0 0 12px; font-size: 13px; color: var(--text-muted); }
.bike-card__bottom {
display: flex; align-items: center; justify-content: space-between;
}
.price strong { font-size: 18px; color: #1a1a1a; }
.stock { font-size: 12px; font-weight: 600; }
.dot-green { color: #15803d; }
.dot-yellow { color: #a16207; }
.dot-red { color: #dc2626; }
/* ===== Why ===== */
.why { background: var(--bg-soft); }
.why-grid {
display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
}
.why-item {
background: #fff;
padding: 28px 20px;
border-radius: var(--radius);
text-align: center;
box-shadow: var(--shadow-sm);
}
.why-icon { font-size: 40px; margin-bottom: 12px; }
.why-item h3 { margin: 0 0 8px; font-size: 17px; }
.why-item p { margin: 0; font-size: 14px; color: var(--text-muted); }
/* ===== Used ===== */
.used-row {
display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; /* 인기 대여 바이크(.bike-grid)와 동일 수량·규격 */
}
/* 중고 카드 = 인기 대여 카드(.bike-card)와 동일 구조 —
카드 자체 패딩을 없애 이미지를 풀블리드로 키우고, 본문만 패딩을 준다.
(구: card padding 20px + 이미지 140px 인셋 → 이미지가 작고 사방에 여백이 생겨 답답했다) */
.used-card {
background: var(--surface, #fff);
border: 1px solid var(--divider, var(--border));
border-radius: var(--radius);
overflow: hidden;
text-align: start; /* .bike-card 계산값과 동일 · 구 center 를 상속으로 되돌리지 않게 명시 */
display: flex; flex-direction: column;
transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.used-card__img {
display: flex; align-items: center; justify-content: center;
font-size: 60px; position: relative;
border-radius: 0; /* 풀블리드 — 카드 상단에 붙는다 */
margin-bottom: 0;
}
.used-card__body { padding: 16px; display: flex; flex-direction: column; gap: 2px; }
.used-card h4 { margin: 0 0 4px; font-size: 16px; }
.used-card .muted { margin: 0 0 10px; font-size: 13px; color: var(--text-muted); }
.used-card strong { display: block; margin-top: auto; font-size: 18px; color: var(--primary); }
/* ===== Footer (Apple-style) ===== */
.footer {
background: var(--ink);
color: rgba(255,255,255,0.6);
padding: 56px 0 24px;
margin-top: 0;
border-top: 3px solid var(--brand);
}
.footer a { color: rgba(255,255,255,0.6); }
.footer a:hover { color: var(--brand); }
.footer .logo__text { color: #fff; }
.footer h4, .footer strong { color: #fff; }
.footer__inner {
display: grid; grid-template-columns: 1fr 2fr; gap: 60px;
}
.footer .logo__text { color: #fff; }
.footer__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.footer__cols h5 { margin: 0 0 14px; color: #fff; font-size: 12px; font-weight: 700; letter-spacing: -0.01em; }
.footer__cols a {
display: block; padding: 5px 0;
font-size: 12px; color: rgba(255,255,255,0.6);
transition: color .15s var(--ease);
}
.footer__cols a:hover { color: var(--brand); }
.footer__bottom {
margin-top: 44px; padding-top: 18px;
border-top: 1px solid rgba(255,255,255,0.12);
font-size: 12px; color: rgba(255,255,255,0.55);
}
/* #61 사업자 정보 표기(쿠팡식) — 다크 푸터 위 12px, 법적 고지는 13px(#41 규칙) */
.footer__biz { line-height: 1.9; color: rgba(255,255,255,.62); }
.footer__biz strong { color: rgba(255,255,255,.85); }
.footer__biz a { color: rgba(255,255,255,.72); text-decoration: none; }
.footer__biz a:hover { color: var(--brand); }
.footer__links { display: inline-block; margin-top: 4px; }
.footer__legal { margin: 12px 0 0; font-size: 13px; line-height: 1.75; color: rgba(255,255,255,.55); max-width: 860px; }
/* ===== 예약 확인 모달 ===== */
.booking-bd {
position: fixed; inset: 0;
background: rgba(15, 23, 42, 0.6);
display: flex; justify-content: center;
z-index: 9000;
animation: fadeIn 0.2s;
/* 내용이 화면보다 길면 배경 레이어가 스크롤 — PC/모바일 상하 잘림 방지 */
overflow-y: auto;
-webkit-overflow-scrolling: touch;
padding: 24px 16px;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.booking-card {
background: #fff;
border-radius: 16px;
padding: 28px;
max-width: 480px;
width: 90%;
position: relative;
box-shadow: 0 24px 60px rgba(0,0,0,0.3);
/* flex 컨테이너 안에서: 공간이 남으면 중앙 정렬, 넘치면 위부터 스크롤 */
margin: auto;
height: fit-content;
}
@media (max-width: 540px) {
.booking-bd { padding: 12px 10px; }
.booking-card { width: 100%; padding: 20px 16px; }
}
.booking-close {
position: absolute; top: 14px; right: 14px;
background: none; border: none;
font-size: 22px; cursor: pointer;
color: #4b5563;
}
.booking-step {
display: flex; gap: 14px;
padding: 12px 14px;
background: var(--bg-soft);
border-radius: 10px;
margin-bottom: 8px;
}
.booking-step.done { background: #DCFCE7; }
.booking-step__num {
width: 36px; height: 36px;
background: #e5e7eb; color: #4b5563;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-weight: 700; flex-shrink: 0;
}
.booking-step.done .booking-step__num {
background: var(--primary); color: #fff;
}
.booking-step strong { display: block; font-size: 14px; }
.booking-step p { margin: 4px 0 0; font-size: 12px; color: var(--text-muted); }
.booking-actions {
display: flex; gap: 8px;
margin-top: 18px;
}
.booking-actions .btn { flex: 1; text-align: center; }
/* ===== Responsive ===== */
@media (max-width: 960px) {
.hero__inner { grid-template-columns: 1fr; gap: 30px; }
.hero__title { font-size: 36px; }
.map-wrap { grid-template-columns: 1fr; }
/* 지점 리스트 내부 스크롤 해제 — 전체 나열, 페이지 스크롤로 바로 선택 (데스크톱은 지도 높이에 맞춘 450px 유지) */
.branch-list { max-height: none; overflow-y: visible; }
.bike-grid { grid-template-columns: repeat(2, 1fr); }
.why-grid { grid-template-columns: repeat(2, 1fr); }
.used-row { grid-template-columns: repeat(2, 1fr); } /* 모바일 2열 — 인기 바이크와 동일 */
.footer__inner { grid-template-columns: 1fr; gap: 30px; }
.nav { display: none; }
}
@media (max-width: 540px) {
.hero__stats { gap: 16px; }
.stat strong { font-size: 22px; }
.why-grid { grid-template-columns: 1fr; }
.footer__cols { grid-template-columns: 1fr; }
}
/* ===== 유지된 UX 개선 (Phase 23 — 색상 팔레트는 기존 유지) ===== */
.btn { min-height: 44px; } /* 모바일 엄지존 터치 영역 */
.btn[disabled] { opacity: .45; cursor: not-allowed; }
/* 키보드 사용자 포커스 접근성 */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
outline: 3px solid rgba(0,255,166, 0.55); outline-offset: 2px; border-radius: 4px;
}
/* 스켈레톤 로딩 */
.skeleton {
background: linear-gradient(90deg, #f4f4f5 25%, #e4e4e7 50%, #f4f4f5 75%);
background-size: 200% 100%;
animation: shimmer 1.4s infinite;
border-radius: 8px;
}
@keyframes shimmer { to { background-position: -200% 0; } }
/* 모션 민감 사용자 배려 */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}
/* ===== 모바일 하단 네비게이션 (엄지존 — ≤960px 네비 소실 보완) ===== */
.bottom-nav { display: none; }
@media (max-width: 960px) {
body { padding-bottom: 68px; } /* 하단 탭바 공간 */
.bottom-nav {
position: fixed; bottom: 0; left: 0; right: 0; z-index: 120;
display: grid; grid-template-columns: repeat(5, 1fr);
background: rgba(255, 255, 255, 0.96);
backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
border-top: 1px solid var(--divider);
padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
}
.bottom-nav a {
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 2px; padding: 6px 2px; min-height: 44px;
color: var(--text-muted); font-size: 10px; font-weight: 600;
border-radius: 10px; transition: color .15s var(--ease);
}
.bottom-nav a .bn-ico { font-size: 20px; line-height: 1; }
.bottom-nav a.active { color: var(--primary); font-weight: 700; }
body .moto-fab { bottom: 86px; } /* 챗봇 FAB이 탭바와 겹치지 않게 */
.footer { padding-bottom: 80px; }
}
@media (max-width: 540px) {
.btn--block { padding: 15px; font-size: 16px; } /* 모바일 주요 CTA 확대 */
}
/* ============================================================
FFUNCH RIDE 디자인 시스템 v2 (UI/UX Pro Max 적용)
============================================================ */
/* 클릭 가능 요소 cursor-pointer (체크리스트) */
a, button, [onclick], [role="button"], .shop-card, .gear-card, .branch-row,
.mp-tab, label.sf-check, summary { cursor: pointer; }
/* 로고 워드마크 (공식 GREEN — 검정 칩 위 네온 FF, 로고 가이드 페어링) */
.logo { display: inline-flex; align-items: center; gap: 8px; font-weight: 900; font-size: 19px; letter-spacing: -0.02em; }
.logo__icon {
width: 30px; height: 30px; border-radius: 9px;
background: var(--brand-ink); color: var(--brand);
border: 1.5px solid var(--brand);
display: inline-flex; align-items: center; justify-content: center;
font-size: 13px; font-weight: 900; font-style: italic; letter-spacing: -1px;
}
.logo__text { color: #fff; font-weight: 900; font-style: italic; }
.logo__text small { color: var(--brand); font-weight: 700; font-style: normal; font-size: 11px; letter-spacing: .2em; margin-left: 5px; }
/* 라이트 배경(로그인 카드 등)에 로고가 놓일 때 */
.on-light .logo__text, .login-card .logo__text { color: var(--primary-deep); }
/* 카드 hover (레이아웃 시프트 없는 lift) */
.shop-card, .gear-card, .used-card {
transition: transform .2s var(--spring), box-shadow .2s var(--ease);
}
.shop-card:hover, .gear-card:hover, .used-card:hover {
transform: translateY(-3px); box-shadow: var(--shadow-lg);
}
/* 가격·숫자 tabular (레이아웃 안정) */
.price, .total-row strong, .summary-line strong, [data-price] { font-variant-numeric: tabular-nums; }
/* 섹션 리듬 (vibrant block — 큰 간격) */
.section-title { font-size: clamp(28px, 4vw, 44px); }
/* 포커스 링 — 브랜드 (접근성) */
:focus-visible { outline: 3px solid rgba(4,120,87,.65); outline-offset: 2px; border-radius: 6px; }
/* ============================================================
FFUNCH 공식 로고 (이미지 — 원본 불변, assets/ffunch-*.png)
============================================================ */
/* #62 모바일 쏠림 수정 — flex-end 는 터치 타깃(min-height 44px) 안에서 로고를 바닥에 붙인다.
세로 중앙 정렬 + RIDE 만 4px 하향((23-15)/2)으로 워드마크 밑선 정렬을 유지한다 (전 디바이스 동일) */
.logo { display: inline-flex; align-items: center; gap: 6px; line-height: 0; }
.logo .logo__ride { position: relative; top: 4px; }
.logo__word { height: 23px; width: auto; display: block; }
/* RIDE — FFUNCH 브러시 톤에 맞춤: 헤비 + 전방 기울기(이탤릭) + 타이트 트래킹 */
.logo__ride {
color: #fff; font-weight: 900; font-size: 15px;
letter-spacing: .02em; line-height: 1;
transform: skewX(-10deg); transform-origin: bottom left;
position: relative; bottom: 2px;
}
/* 관리자 사이드바 로고 */
.sidebar__logo .logo__word { height: 22px; }
/* 하단 탭 — 애플 미니멀 라인 아이콘 (currentColor 상속: active=primary, 평소 muted) */
.bottom-nav .bn-ico { display: inline-flex; align-items: center; justify-content: center; }
.bottom-nav .bn-svg { width: 24px; height: 24px; display: block; }
.bottom-nav a.active .bn-svg { stroke-width: 2; }
/* ===== Apple 정제 레이어 (Phase 26 — 이모지→SVG 아이콘·타이포 위계·헤어라인·절제된 모션) ===== */
.ff-ic { vertical-align: -0.18em; flex-shrink: 0; }
h1, h2, .section-title { letter-spacing: -0.022em; }
h3, h4 { letter-spacing: -0.014em; }
.card, .bike-card, .mp-card { transition: transform .22s ease, box-shadow .22s ease; }
button, a { transition: background .18s ease, color .18s ease, border-color .18s ease, opacity .18s ease, transform .18s ease; }
:focus-visible { outline: 2px solid var(--primary, #047857); outline-offset: 2px; border-radius: 4px; }
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
/* ===== 히어로 발전 (기존 톤 유지 — 라이브 재고 칩·신뢰 칩·글로우·카운트업) ===== */
.badge--live { display: inline-flex; align-items: center; gap: 8px; }
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--brand); animation: livePulse 2.2s ease-out infinite; }
@keyframes livePulse { 0% { box-shadow: 0 0 0 0 rgba(0,255,166,.45); } 70% { box-shadow: 0 0 0 9px rgba(0,255,166,0); } 100% { box-shadow: 0 0 0 0 rgba(0,255,166,0); } }
.hero-trust { display: flex; gap: 8px; flex-wrap: wrap; margin: 18px 0 2px; }
.hero-trust span { border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.05); color: rgba(255,255,255,.82); font-size: 12.5px; font-weight: 500; padding: 7px 12px; border-radius: 999px; }
.hero-trust b { color: var(--brand); font-weight: 700; }
#searchBtn { flex-direction: column; gap: 2px; }
#searchBtn small { font-weight: 500; font-size: 11.5px; opacity: .82; }
@media (prefers-reduced-motion: reduce) { .live-dot { animation: none; } }
/* ============================================================
미디어 표준 규격 — 전 상품군(신차·렌탈·중고·액세서리·구독) 공통
썸네일 카드와 상세 최상단 메인 이미지를 4:3 비율 하나로 통일한다.
(사이즈 관리 일원화 — 여러 규격 운용 금지. 신규 카드/상세는 이 규격 사용)
============================================================ */
.shop-card__img, .gear-card .img, .used-listing__img,
.bike-card__img, .used-card__img, .mall-card .img,
.detail-img, .pdp-main-img, .ud-img {
aspect-ratio: 4 / 3;
height: auto !important;
width: 100%;
overflow: hidden;
}
.shop-card__img img, .gear-card .img img, .used-listing__img img,
.bike-card__img img, .used-card__img img, .mall-card .img img,
.detail-img img, .pdp-main-img img, .ud-img img {
width: 100%; height: 100%; object-fit: cover;
}
/* ============================================================
파트너 평판 모달 (#53 리디자인 — nav.js openPartnerScore)
패턴: 소수점 평점+건수 병기 · 별 채움 그래프 · 축별 가로 막대(Baymard 분포 요약 관례)
============================================================ */
.ps-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 12px; padding-right: 36px; }
.ps-head h3 { margin: 0; font-size: 17px; }
.ps-head .ps-tier { font-size: 11.5px; font-weight: 800; }
.ps-head .ps-verified {
display: inline-flex; align-items: center; gap: 3px;
font-size: 11px; font-weight: 700; color: #047857;
background: #ECFDF5; border: 1px solid #A7F3D0; border-radius: 999px; padding: 2px 8px;
}
.ps-hero {
display: flex; gap: 16px; align-items: center;
background: linear-gradient(135deg, #ECFDF5, #F0FDFA);
border: 1px solid #A7F3D0; border-radius: 14px; padding: 16px; margin-bottom: 14px;
}
.ps-hero__score { text-align: center; flex-shrink: 0; min-width: 96px; }
.ps-hero__num { font-size: 34px; font-weight: 800; color: #08130E; line-height: 1.1; letter-spacing: -1px; }
.ps-hero__num small { font-size: 15px; color: #64748B; font-weight: 700; letter-spacing: 0; }
.ps-stars { position: relative; display: inline-block; font-size: 15px; line-height: 1; letter-spacing: 1px; color: #E2E8F0; }
.ps-stars > span { position: absolute; inset: 0; overflow: hidden; color: #B45309; white-space: nowrap; }
.ps-hero__label { font-size: 11px; font-weight: 700; color: #047857; margin-top: 4px; }
.ps-hero__meta { flex: 1; min-width: 0; font-size: 12.5px; color: #374151; line-height: 1.75; }
.ps-hero__meta .ps-count { display: inline-flex; align-items: center; gap: 3px; background: #fff; border: 1px solid var(--border); border-radius: 999px; padding: 1px 9px; font-size: 11.5px; font-weight: 700; color: #08130E; margin: 0 2px 3px 0; }
.ps-axes__head { font-size: 11.5px; font-weight: 800; color: #334155; margin: 2px 0 8px; }
.ps-axes__head small { font-weight: 500; color: #64748B; }
.ps-hero__meta .ps-count--vol { background: transparent; border-style: dashed; color: #475569; }
.ps-axes { display: flex; flex-direction: column; gap: 7px; margin-bottom: 14px; }
.ps-axis { display: grid; grid-template-columns: 108px 1fr 52px; gap: 10px; align-items: center; font-size: 12px; }
.ps-axis__label { color: #374151; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ps-axis__label small { color: #64748B; font-weight: 400; }
/* span 기반이므로 display:block 필수 — 인라인은 width/height 를 무시해 게이지가 비어 보인다 (#54 실측) */
.ps-axis__track { display: block; height: 8px; border-radius: 999px; background: #EEF2F6; overflow: hidden; }
.ps-axis__fill { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #047857, #10B981); transition: width .4s ease; }
.ps-axis__val { font-weight: 800; color: #08130E; text-align: right; font-variant-numeric: tabular-nums; }
.ps-axis.is-empty .ps-axis__val { color: #94A3B8; font-weight: 600; font-size: 10.5px; white-space: nowrap; }
.ps-ops { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 14px; }
.ps-ops__tile { background: var(--bg-soft); border-radius: 10px; padding: 10px 8px; text-align: center; }
.ps-ops__tile b { display: block; font-size: 16px; color: #08130E; font-variant-numeric: tabular-nums; }
.ps-ops__tile span { font-size: 10.5px; color: #4B5563; font-weight: 600; }
.ps-review { border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; margin-bottom: 8px; font-size: 13px; }
.ps-review__top { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.ps-review__kind { color: #fff; font-size: 10.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px; }
.ps-review__axis { font-size: 11px; color: #4b5563; margin-top: 3px; }
.ps-review__reply { background: var(--bg-soft); border-radius: 8px; padding: 7px 10px; margin-top: 6px; font-size: 12px; }
.ps-empty { text-align: center; color: #4b5563; font-size: 13px; padding: 18px 0; margin: 0; background: var(--bg-soft); border-radius: 12px; }
.ps-empty b { display: block; color: #08130E; margin-bottom: 3px; }
.ps-foot { font-size: 11px; color: #475569; margin: 12px 0 0; line-height: 1.65; }
.ps-foot summary { cursor: pointer; font-weight: 700; color: #334155; list-style: none; }
.ps-foot summary::before { content: 'ⓘ '; }
@media (max-width: 480px) {
.ps-hero { gap: 12px; padding: 13px; }
.ps-hero__num { font-size: 28px; }
.ps-axis { grid-template-columns: 92px 1fr 42px; gap: 7px; }
.ps-ops__tile b { font-size: 14px; }
}
/* ============================================================
보험가입 진행 프로세스 바 (#51 — nav.js renderInsuranceProgress)
4스텝 원형 노드: 완료=브랜드 채움 · 현재=테두리 강조 · 대기=흰색 · 생략=회색
============================================================ */
.ins-bar {
display: flex; align-items: flex-start; justify-content: center; gap: 4px;
padding: 16px 6px 8px; margin-top: 6px;
border: 1px solid var(--border); border-radius: 12px; background: #FAFDFB;
}
.ins-step { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 66px; flex: 1 1 0; }
.ins-step__dot {
width: 40px; height: 40px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-size: 14px; font-weight: 800;
background: #fff; color: #64748B; border: 2px solid var(--border);
}
.ins-step__label { font-size: 11.5px; font-weight: 700; color: #4B5563; text-align: center; line-height: 1.3; }
.ins-step.is-done .ins-step__dot { background: #047857; border-color: #047857; color: #fff; }
.ins-step.is-done .ins-step__label { color: #047857; }
.ins-step.is-current .ins-step__dot { background: #ECFDF5; border-color: #047857; color: #047857; box-shadow: 0 0 0 4px rgba(4,120,87,.12); }
.ins-step.is-current .ins-step__label { color: #047857; }
.ins-step.is-skipped .ins-step__dot { background: var(--bg-soft); border-color: var(--border); color: #9CA3AF; }
.ins-step.is-skipped .ins-step__label { color: #9CA3AF; text-decoration: line-through; text-decoration-thickness: 1px; }
.ins-arrow { flex: 0 0 14px; height: 2px; background: var(--border); margin-top: 19px; border-radius: 2px; }
.ins-arrow.is-on { background: #047857; }
.ins-status {
margin-top: 12px; text-align: center;
font-size: 13px; font-weight: 800; color: #047857;
}
.ins-msgs { margin-top: 8px; background: var(--bg-soft); border-radius: 10px; padding: 12px 14px; }
.ins-msgs p { margin: 0 0 6px; font-size: 12.5px; line-height: 1.65; color: #334155; }
.ins-msgs p:last-child { margin-bottom: 0; }
/* 증권번호·보험유효기간 — 기명등재 결과로 받은 값 (2026-08).
⚠️ 아래 「보험 적용기간」(픽업~반납)과 다른 축이라 별도 블록으로 세운다. */
.ins-policy {
margin: 10px 0 0; padding: 12px 14px;
display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; align-items: baseline;
border: 1px solid #A7F3D0; border-radius: 10px; background: #F0FDF4;
}
.ins-policy dt { margin: 0; font-size: 11.5px; font-weight: 700; color: #047857; white-space: nowrap; }
.ins-policy dd { margin: 0; font-size: 12.5px; color: #334155; min-width: 0; }
/* 증권번호는 받아 적는 값이라 자릿수가 헷갈리지 않게 등폭으로 */
.ins-policy__no { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-weight: 700; letter-spacing: .02em; }
.ins-policy__chip {
display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px;
font-size: 11px; font-weight: 700; white-space: nowrap;
}
/* 대비: 흰 글자 기준 AA (500번대 금지 — #41·#86 계약) */
.ins-policy__chip.is-valid { background: #15803D; color: #fff; }
.ins-policy__chip.is-soon { background: #A16207; color: #fff; }
.ins-policy__chip.is-expired { background: #B91C1C; color: #fff; }
@media (max-width: 480px) {
.ins-step { min-width: 0; }
.ins-step__dot { width: 34px; height: 34px; font-size: 13px; }
.ins-step__label { font-size: 11px; }
.ins-arrow { margin-top: 16px; flex-basis: 8px; }
/* 좁은 화면에서 라벨/값이 한 줄에 안 들어가 값이 압착된다 — 세로로 쌓는다 */
.ins-policy { grid-template-columns: 1fr; gap: 2px; }
.ins-policy dt { margin-top: 6px; }
.ins-policy dt:first-child { margin-top: 0; }
}
/* ============================================================
한글 줄바꿈 표준 (#50) — 어절 단위로만 끊는다
기본값(word-break:normal)은 CJK 를 글자 단위로 끊어 「통합 파트너 평/점」
처럼 단어 중간에서 갈라진다. keep-all 이 한국어 웹 타이포그래피 정본이고,
URL·이메일처럼 공백 없는 긴 토큰은 overflow-wrap 이 받아준다(둘은 항상 짝).
============================================================ */
body {
word-break: keep-all;
overflow-wrap: break-word;
}
/* 공백 없는 식별자는 예외 — keep-all 만 있으면 컨테이너를 뚫는다 */
input, textarea, code, pre, .mono,
[type="email"], [type="url"], .break-any {
word-break: break-word;
overflow-wrap: anywhere;
}
/* ============================================================
입력 안내문(placeholder) — **입력한 값보다 연하게** (2026-09 · 사용자 실측)
브라우저 기본값(#757575 안팎)은 본문과 농도가 비슷해 **이미 채워 넣은 칸처럼 보인다.**
⚠️ `opacity: 1` 이 함께 있어야 한다 — Firefox 는 placeholder 에 기본 투명도를 얹어
색만 바꾸면 우리가 정한 값보다 더 흐려진다.
⚠️ 이 색은 대비 4.5:1 을 지키지 않는다. 지켜야 할 문구가 아니기 때문이다 —
**모든 입력에는 라벨이 따로 붙는다**(아래 `.bk-field`). placeholder 에만 의존하는
입력을 새로 만들면 그때는 라벨을 붙이는 것이 답이지 이 색을 진하게 되돌리는 것이 아니다.
============================================================ */
::placeholder { color: var(--placeholder); opacity: 1; }
/* ============================================================
날짜·시간 입력 표준 (#50) — iOS 네이티브 컨트롤 오버플로 차단
iOS Safari 의 date/datetime-local 은 로케일 표기("2026. 7. 30. 오전 10:00")
기준 고유 폭을 갖고 width:100% 로도 줄지 않아 카드 밖으로 튀어나온다.
appearance:none + min-width:0 + border-box 3종이 함께 있어야 줄어든다.
============================================================ */
input[type="date"],
input[type="datetime-local"],
input[type="time"],
input[type="month"],
input[type="week"] {
-webkit-appearance: none;
appearance: none;
width: 100%;
max-width: 100%;
min-width: 0;
box-sizing: border-box;
font-family: inherit;
text-align: start;
}
/* 터치 타깃 44px 는 모바일에서만 — 데스크톱까지 강제하면 옆 select(42px)와 높이가 어긋난다 */
@media (max-width: 960px) {
input[type="date"],
input[type="datetime-local"],
input[type="time"],
input[type="month"],
input[type="week"] { min-height: 44px; }
}
/* 그리드·플렉스 칸의 min-content 가 뷰포트를 밀어내지 않게 — :has() 미지원 기기 포함 무조건 적용 */
.field, .form-field { min-width: 0; }
/* ============================================================
모바일 인체공학 표준 (감사 #41 — docs/DESIGN_AUDIT_MOBILE.md)
① 입력 16px(iOS 자동확대 차단) ② 터치 타깃 44px ③ 최소 글자 크기
④ safe-area 정합 ⑤ 동적 뷰포트(dvh) ⑥ 스크롤 어포던스
============================================================ */
/* ── ① 폼 컨트롤 16px: iOS Safari는 16px 미만 입력에 포커스 시 페이지를 강제 확대하고
블러 후에도 배율을 복원하지 않는다. 높이는 패딩으로 유지해 시각 밀도를 지킨다. */
@media (max-width: 960px) {
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]),
select, textarea {
font-size: 16px !important;
line-height: 1.35;
}
/* 폰트가 커진 만큼 세로 패딩을 줄여 기존 높이 유지 */
.field input, .field select, .filter input[type="text"], .filter select { padding-block: 9px; }
}
/* ── ② 터치 타깃 44×44 (Apple HIG / Material 48dp)
페이지별