/* JP Override — Soft Sakura palette + Combo A fonts (Shippori Mincho B1 + Zen Kaku Gothic New) */ /* Font loading is handled in HTML directly with display=optional to prevent FOUT */ :root { --bg: #FFFFFF; --bg-card: #FFFFFF; --bg-elevated: #FDF4F4; --accent: #C77B7E; --accent-light: #E8B5B8; --text: #1A1A1A; --text-muted: #5C5C5C; --text-dim: #999; --border: rgba(200,120,126,0.18); --white: #1A1A1A; --heading: 'Zen Kaku Gothic New', 'Yu Gothic', 'Hiragino Kaku Gothic ProN', sans-serif; --body: 'Zen Kaku Gothic New', 'Yu Gothic', 'Hiragino Kaku Gothic ProN', sans-serif; --serif: 'Shippori Mincho B1', 'Yu Mincho', 'Hiragino Mincho ProN', serif; } /* === BODY (본문) — Zen Kaku Gothic New === */ body, p, .why-text, .doctor-bio, .review-slide-text, .faq-a p, .trust-label, .video-card-sub, .review-name, .review-proc, .nav-drawer-info-row, .footer-addr, .footer-links, .nav-drawer-info-addr, .hero-desc { font-family: var(--body) !important; font-feature-settings: "palt" 1; letter-spacing: 0.02em; /* 禁則処理: 助詞 시작 방지 */ line-break: strict; overflow-wrap: anywhere; } /* 모던 브라우저: 자연 어절 단위 분리 (Chrome 119+, Safari 17.4+) */ @supports (word-break: auto-phrase) { p, .sec-desc, .why-text, .doctor-bio, .review-slide-text, .faq-a p, .hero-desc { word-break: auto-phrase; } } /* === HEADINGS (견출) — Shippori Mincho B1 === */ h1, h2, h3, .sec-title, .doctor-name, .hero-text h1, .cat-hero-text h1, .why-title, .video-card-title, .review-cta-score, .footer-col-title, .faq-q, .splash-name { font-family: var(--serif) !important; font-weight: 500; letter-spacing: 0.04em; } /* === SUBHEADINGS (소견출) — Shippori Mincho B1 (조금 더 가벼운 weight) === */ .hero-sub, .doctor-title, .sec-desc, .splash-tagline, .doctor-num { font-family: var(--serif) !important; font-weight: 400; letter-spacing: 0.04em; } /* === LABELS / NAV (라벨·내비) — Zen Kaku Gothic New === */ .sec-label, .nav-links, .nav-drawer-links, .hero-label, .demo-label, .proc-section-label, .nav-drawer-info-title, .btn-primary, .cta-actions a, .doctor-link, .review-cta-btn { font-family: var(--heading) !important; letter-spacing: 0.12em; } /* === HERO h1 강조 === */ .hero-text h1 { font-weight: 500 !important; } /* === NUMBERS (숫자) — Outfit (EN 사이트와 동일, style.css에 자체 호스팅됨) === */ .trust-num, .review-cta-score, .google-badge-score { font-family: 'Outfit', sans-serif !important; font-weight: 600; letter-spacing: 0.01em; } .trust-num { font-size: 2.6rem; line-height: 1; } /* doctor-num: JP 한자가 EN 0.65rem 사이즈에선 안 보임 → 키움 */ .doctor-num { font-family: var(--heading) !important; font-size: 1.25rem !important; font-weight: 600 !important; letter-spacing: 0.1em !important; text-transform: none !important; color: var(--accent) !important; margin-bottom: 20px !important; } .doctor-num .num-id { font-family: 'Outfit', sans-serif; font-weight: 600; color: var(--text-muted); margin-left: 6px; } /* doctor-title: 美容整形外科専門医 · 医学博士 — JP 한자도 키움 */ .doctor-title { font-family: var(--heading) !important; font-size: 0.95rem !important; font-weight: 400 !important; letter-spacing: 0.06em !important; color: var(--text-muted) !important; margin-bottom: 22px !important; } /* === Splash (스플래시) — EN 애니메이션 유지하면서 JP 폰트/컬러 적용 === */ .splash { background: #FDF4F4; } .splash-name { font-family: var(--serif) !important; color: #1A1A1A; font-size: 1.5rem; font-weight: 500; letter-spacing: 0.18em; /* EN 애니메이션 명시 보존: 페이드인 + 위로 떠오름 */ animation: splashFadeIn 1s ease-out; } .splash-tagline { color: var(--accent); font-family: var(--serif) !important; letter-spacing: 0.15em; /* EN 애니메이션 명시 보존: 0.5초 지연 후 페이드인 */ opacity: 0; animation: splashTagline 1s 0.5s ease-out forwards; } /* === Nav accent === */ .nav-logo-text { color: var(--text); } .nav a:hover, .nav-drawer a:hover { color: var(--accent); } /* === Hero overlay tint === */ /* .cat-hero-overlay 오버라이드 제거 — category.css 기본값(다크 그라디언트, EN 동일) 사용 */ /* === Section labels === */ .sec-label { color: var(--accent); } .proc-section-label { color: var(--accent); } /* === FAQ === */ .faq-item summary { color: var(--text); } .faq-item[open] summary { color: var(--accent); } /* === Related Procedures === */ .related-link:hover { border-color: var(--accent); color: var(--accent); } /* === Cards/elevated bg === */ .why-section { background: var(--bg-elevated); } .answer-capsule { background: var(--bg-elevated); border-color: var(--border); } /* === Detail grid items === */ .detail-item { border-color: var(--border); } .detail-item h3 { color: var(--accent); } /* === Footer (EN과 동일: 흰 배경 + 어두운 텍스트) === */ /* .footer 배경 오버라이드 제거 — style.css 기본값 사용 */ .footer-map-btns { margin-top: 14px !important; /* 주소와 지도 버튼 간격 확보 */ } /* === FAB === */ .fab-btn { background: var(--accent); } .fab-btn:hover { background: #b06a6d; } /* === Scroll progress === */ .scroll-progress { background: var(--accent); } /* === CTA box === */ .cta-box { background: var(--bg-elevated); border-color: var(--border); } /* === HARD-CODED EN PALETTE OVERRIDES (style.css → Soft Sakura) === */ /* Doctor cards */ .doctor-info { background: #FDF4F4 !important; } .doctor-card, .doctor-card:last-child, .doctor-photo-col, .doctor-card:nth-child(even) .doctor-photo-col { border-color: rgba(200,120,126,0.15) !important; } /* Nav drawer hover */ .nav-drawer-links a:hover { background: #FDF4F4 !important; color: var(--accent) !important; } .nav-drawer-toggle:hover { background: #FDF4F4 !important; } .nav-drawer-sub a:hover { color: var(--accent) !important; } .nav-drawer-cta { background: var(--accent) !important; color: #fff !important; } .nav-drawer-cta:hover { background: #b06a6d !important; } /* Hero gradient bg in style.css (if any) */ section[style*="#f8f8f6"], div[style*="#f8f8f6"] { background: var(--bg-elevated) !important; } /* Section dividers using EN gold */ .sec-label { color: var(--accent) !important; } .proc-section-label { color: var(--accent) !important; } /* Doctor link arrow + hover */ .doctor-link { color: var(--accent) !important; } .doctor-link:hover { color: #b06a6d !important; } /* Why cards icon color */ .why-icon { color: var(--accent) !important; } /* Trust numbers (이미 Cormorant) - color */ .trust-num { color: var(--accent) !important; } /* Accent highlights (used in EN as gold underline) */ span[style*="#c9a96e"] { color: var(--accent) !important; } span[style*="rgba(201,169,110"] { background: linear-gradient(transparent 55%, rgba(232,181,184,0.45) 55%) !important; } /* Gallery / B&A label colors */ .gallery-body-title, .gallery-body-sub { color: inherit; } /* Faq accent */ .faq-q { color: var(--text); } .faq-q[aria-expanded="true"] { color: var(--accent) !important; } .faq-icon { color: var(--accent); } /* Reviews CTA score color */ .review-cta-score { color: var(--accent) !important; } .google-badge-score { color: var(--accent) !important; } /* === Reviews Section (style.css 크림 → Soft Sakura) === */ .reviews-section { background: #FDF4F4 !important; } .google-badge { border-color: rgba(200,120,126,0.25) !important; } .review-slide-inner { border: 1px solid rgba(200,120,126,0.25) !important; background: #FFFFFF !important; } .review-slide-inner::before { background: linear-gradient(90deg, var(--accent) 0%, rgba(232,181,184,0.15) 100%) !important; } .review-quote-mark { color: var(--accent) !important; opacity: 0.45; } .review-dots .swiper-pagination-bullet { background: rgba(200,120,126,0.3) !important; } .review-dots .swiper-pagination-bullet-active { background: var(--accent) !important; } .review-avatar { background: linear-gradient(135deg, var(--accent-light) 0%, var(--accent) 100%) !important; } .review-slide-author { border-top-color: rgba(200,120,126,0.15) !important; } /* 별점은 그대로 골드(가독성/관습) */ .review-slide-stars, .google-badge-stars { color: #fbbc04 !important; } /* Review CTA inner box */ .review-cta-inner { background: linear-gradient(135deg, #FFFFFF 0%, #FDF4F4 100%) !important; } .review-cta-btn { background: var(--accent) !important; color: #fff !important; } .review-cta-btn:hover { background: #b06a6d !important; } /* Review nav buttons */ .review-prev, .review-next { border-color: rgba(200,120,126,0.25) !important; color: var(--accent) !important; } .review-prev:hover, .review-next:hover { background: var(--accent) !important; color: #fff !important; }