@charset "utf-8"; /** * demo-harigraft 공통 스타일 (메인 = 구 demo-10 기준) * * Bootstrap 5.3 을 골격으로 쓰고, 부트스트랩이 제공하지 않는 브랜드 영역만 여기서 보강한다. * 색/폰트/여백 토큰은 :root 에 모아두고 각 섹션 스타일이 참조한다. */ /* ── 디자인 토큰 ───────────────────────────────────────────── */ :root{ --red:#b03030; /* 브랜드 메인 (딥레드) */ --red-d:#8c2222; /* 브랜드 딥 — 상단바·히어로 그라데이션 */ --gold:#c9973c; /* 강조 (키커·뱃지) */ --ink:#25201c; /* 본문 텍스트 */ --warm:#faf6f0; /* 섹션 교차 배경 */ --bd:#eadfd2; /* 경계선 */ --channel:#09b83e; /* 상담 채널 브랜드색 — 레이아웃이 로케일별로 덮어쓴다(위챗/LINE) */ /* 본문 폰트는 fonts.css 가 으로 분기해 지정한다 */ } body{color:var(--ink)} a{text-decoration:none} .object-fit-cover{object-fit:cover} .bg-warm{background:var(--warm)!important} .text-red{color:var(--red)!important} /* 섹션 공통 타이포 */ .h2c{font-weight:900;font-size:clamp(24px,3.2vw,38px);letter-spacing:-.01em} .kicker{color:var(--gold);font-weight:900;letter-spacing:.16em;font-size:12.5px} /* 앵커 이동 시 sticky 헤더에 제목이 가리지 않도록 */ section[id]{scroll-margin-top:96px} /* 버튼 — 상담 채널 버튼은 로케일별 브랜드색(--channel)을 따른다 */ .btn-channel{background:var(--channel);color:var(--channel-text,#fff);font-weight:900} .btn-channel:hover{background:var(--channel);color:var(--channel-text,#fff);filter:brightness(.92)} .btn-red{background:var(--red);color:#fff;font-weight:700} .btn-red:hover{background:var(--red-d);color:#fff} /* ── 상단 인포바 ───────────────────────────────────────────── */ .topbar{background:var(--red-d);color:#f4dfd3;font-size:13.5px} .topbar b{color:#fff} /* 언어 스위처 — 어두운 인포바 위에 얹히므로 링크 색을 맞춘다 */ .lang-switch>.dropdown-toggle{color:#f4dfd3;font-weight:700;cursor:pointer;gap:7px} .lang-switch>.dropdown-toggle:hover{color:#fff} /* z-index: 드롭다운 기본값(1000)은 아래쪽 sticky 네비(1020)에 가린다. 인포바 자체를 올리면 네비 안의 오프캔버스(1045)까지 함께 덮이므로, 메뉴만 올린다. */ .lang-switch .dropdown-menu{min-width:9.5rem;font-size:13.5px;z-index:1030} .lang-switch .dropdown-item{gap:8px} /* 국기 SVG — 4:3 비율, 어두운 배경에서도 경계가 보이도록 얇은 테두리 */ .flag{width:20px;height:15px;object-fit:cover;border-radius:2px;box-shadow:0 0 0 1px rgba(0,0,0,.15)} /* 모바일 오프캔버스 안의 언어 선택 (인포바가 숨겨지는 구간용) */ .offcanvas-lang a{color:var(--ink);font-weight:500} .offcanvas-lang a:hover{color:var(--red)} .offcanvas-lang a.active{color:var(--red);font-weight:800} /* ── 네비게이션 ────────────────────────────────────────────── */ .navbar{background:#fff!important;border-bottom:1px solid var(--bd)} .navbar .nav-link{color:var(--ink);font-weight:500} .navbar .nav-link:hover,.navbar .nav-link:focus{color:var(--red)} /* ── 히어로 ────────────────────────────────────────────────── */ .hero{background:linear-gradient(120deg,#301410,var(--red-d));color:#fff;position:relative;overflow:hidden} .hero .bgimg{position:absolute;inset:0;opacity:.14} .hero h1{font-weight:900;font-size:clamp(28px,4.2vw,52px);line-height:1.32} .hero .metro{border:1px dashed rgba(255,255,255,.4)} /* ── 히어로 2 : 포지셔닝 선언(지속·승계·집중) ──────────────── */ /* 위 히어로가 짙은 레드라서 여기는 크림 배경으로 받아 대비를 만든다 */ .legacy{background:var(--warm);border-bottom:1px solid var(--bd)} .legacy-title{font-weight:900;font-size:clamp(26px,3.6vw,44px);line-height:1.28;letter-spacing:-.02em} /* 세 기둥 — 왼쪽 금색 축 하나로 묶어 '한 줄기로 이어진 시간'을 시각화 */ .legacy-pillars{border-left:2px solid var(--gold);padding-left:22px;display:flex;flex-direction:column;gap:18px} .legacy-pillars li{position:relative} .legacy-pillars li::before{content:"";position:absolute;left:-29px;top:7px;width:12px;height:12px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 4px var(--warm)} .legacy-pillars b{display:block;font-size:14px;font-weight:900;color:var(--red);letter-spacing:.06em;margin-bottom:3px} .legacy-pillars span{color:#6f665c;font-size:15.5px} .legacy-figure{position:relative;border-radius:16px;overflow:hidden;box-shadow:0 26px 60px rgba(90,60,40,.18)} /* 수술 장면이라 크롭하면 인물 머리가 잘린다 → 원본 비율 그대로 */ .legacy-figure img{display:block;width:100%;height:auto} .legacy-figure figcaption{position:absolute;left:0;right:0;bottom:0;padding:26px 20px 14px;color:#fff;font-size:13.5px; background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.55))} /* ── 신뢰 지표 숫자 밴드 ───────────────────────────────────── */ .stat-band{background:#fff;border-bottom:1px solid var(--bd)} .stat-band .num{font-weight:900;font-size:clamp(30px,4vw,46px);color:var(--red);line-height:1.1} .stat-band .unit{font-size:.5em;font-weight:900;margin-left:2px} .stat-band .lbl{font-weight:700;font-size:14.5px} .stat-band .note{font-size:11.5px;color:#9b9086;line-height:1.5} /* ── 3대 가치 카드 ─────────────────────────────────────────── */ .val-card{border:1px solid var(--bd);transition:.25s;background:#fff} .val-card:hover{box-shadow:0 16px 38px rgba(176,48,48,.13);transform:translateY(-3px)} .val-card .ic{width:56px;height:56px;border-radius:14px;background:var(--warm);color:var(--red);font-size:26px} /* ── 원장 소개 ─────────────────────────────────────────────── */ /* 두 원장이 좌우로 서 있는 사진 → 크롭하면 인물이 잘리므로 원본 비율(16:9) 유지 */ .doctor-band{display:block;width:100%;max-width:1040px;margin-inline:auto;height:auto;border-radius:16px} .doctor-point{border-left:3px solid var(--gold);padding-left:16px} /* ── 히어로 3 : 비용 투명성 ────────────────────────────────── */ /* 히어로1(레드)·히어로2(크림)와 겹치지 않도록 잉크 톤 밴드 */ .cost{background:var(--ink);color:#f3ece4} .cost-title{font-weight:900;font-size:clamp(24px,3.2vw,40px);line-height:1.3;letter-spacing:-.02em;color:#fff} .cost-item{border:1px solid rgba(255,255,255,.18);border-radius:10px;padding:11px 14px;font-size:14.5px;font-weight:500;height:100%} .cost-item i{color:var(--gold)} .cost-card{background:#fff;color:var(--ink);border-radius:18px;padding:32px;box-shadow:0 30px 60px rgba(0,0,0,.3)} .cost-card-head{font-weight:900;font-size:19px;margin-bottom:18px;padding-bottom:14px;border-bottom:1px solid var(--bd)} .cost-card li{display:flex;align-items:center;padding:9px 0;font-weight:500} .cost-card li i{color:var(--red);font-size:13px} /* ── 가격 비교표 ───────────────────────────────────────────── */ .price-table th{background:var(--red);color:#fff;font-weight:700} .price-table .ours{background:#fdf6e8;font-weight:900;color:#8f6a1c} .price-table td,.price-table th{padding:14px 16px;vertical-align:middle} /* ── 방식 비교표 (FUT/FUE) ─────────────────────────────────── */ .method-table th{background:var(--warm);font-weight:900} .method-table td,.method-table th{padding:13px 16px;vertical-align:middle} /* ── 2박 3일 일정 카드 ─────────────────────────────────────── */ .day-card{border:1px solid var(--bd)} .day-card .day{background:var(--red);color:#fff;font-weight:900;letter-spacing:.08em} .day-card .pic{aspect-ratio:16/9} /* ── 케이스 카드 ───────────────────────────────────────────── */ .case-card{border:1px solid var(--bd);border-radius:12px;overflow:hidden} .case-card .lbl{font-size:12.5px;font-weight:700;color:#7a6c5c} /* ── 상담 채널 패널 (위챗/LINE) ────────────────────────────── */ .channel-panel{background:var(--channel);color:var(--channel-text,#fff)} .qr-box{width:150px;height:150px;background:#fff;border-radius:14px;display:flex;align-items:center;justify-content:center;padding:8px} .qr-box i{font-size:96px;color:#111} .qr-box img{width:100%;height:100%;object-fit:contain;display:block} /* ── 푸터 ──────────────────────────────────────────────────── */ footer.site{background:#2a1512;color:#d8c2b6} footer.site a{color:#f4e6dc} footer.site a:hover{color:#fff} footer.site .flogo{height:38px;filter:brightness(0) invert(1);opacity:.92} /* ── 스크롤 등장 ───────────────────────────────────────────── */ .reveal{opacity:0;transform:translateY(22px);transition:.7s} .reveal.in{opacity:1;transform:none} @media (prefers-reduced-motion:reduce){ .reveal{opacity:1;transform:none;transition:none} }