@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} /* * 이미지 비율 보호. * 레이아웃 시프트를 막으려고 에 width·height 속성을 붙이는데, CSS 로 폭만 * 바꾸면(w-100) 높이 속성이 그대로 남아 그림이 눌린다(783×274 사진이 419×274 로 * 렌더되던 케이스 카드가 그랬다). 폭을 100% 로 늘리는 이미지는 높이를 브라우저에 * 맡겨 원본 비율을 지키게 한다. 의도적으로 잘라 쓰는 곳(.object-fit-cover)은 예외. */ img.w-100:not(.object-fit-cover){height:auto} /* 버튼 — 상담 채널 버튼은 로케일별 브랜드색(--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} /* 공식 SNS 아이콘 — 인포바 좌측. 텍스트 없이 아이콘만 두되 클릭 영역은 넉넉히 */ .topbar-sns{gap:2px} .topbar-sns a{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px; color:#f4dfd3;border-radius:50%;line-height:1;transition:color .15s ease,background-color .15s ease} .topbar-sns a:hover{color:#fff;background:rgba(255,255,255,.12)} .topbar-sns i{font-size:16px} /* 언어 스위처 — 어두운 인포바 위에 얹히므로 링크 색을 맞춘다 */ .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-brand img{width:auto;height:50px} .navbar .nav-link{color:var(--ink);font-weight:500} .navbar .nav-link:hover,.navbar .nav-link:focus{color:var(--red)} .navbar .dropdown-menu{border:1px solid var(--bd);border-radius:12px;box-shadow:0 18px 40px rgba(90,80,55,.14);padding:6px} .navbar .dropdown-item{border-radius:8px;font-size:14.5px;padding:9px 14px;color:var(--ink)} .navbar .dropdown-item:hover{background:var(--warm);color:var(--red)} @media(min-width:992px){ .navbar .dropdown:hover>.dropdown-menu{display:block;margin-top:0} } /* 모바일 오프캔버스에서는 드롭다운 대신 들여쓴 목록으로 항상 펼쳐 둔다 */ .nav-sub{margin:0 0 4px;padding-left:14px;border-left:2px solid var(--bd)} .nav-sub a{display:block;padding:7px 0;color:#6f665c;font-size:14.5px} .nav-sub a:hover{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} /* ── 신뢰 지표 숫자 밴드 ───────────────────────────────────── */ .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-list li{display:flex;align-items:baseline;gap:12px;padding:11px 0;border-bottom:1px solid var(--bd)} .doctor-list li:first-child{border-top:1px solid var(--bd)} .doctor-list b{min-width:96px;font-weight:900;font-size:15px} .doctor-list span{color:var(--gold-d,#96895f);font-size:13.5px;font-weight:700;letter-spacing:.02em} /* ── 히어로 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} /* 총액 계산 예시 금액 */ .example-total{font-weight:900;font-size:clamp(26px,3vw,34px);color:var(--red);line-height:1.2;margin-bottom:6px} .cost-card li i{color:var(--red);font-size:13px} /* ── 탈모 치료 — 이유 블록 ───────────────────────────────── 사진과 글을 좌우로 번갈아 놓고, 사진에는 금색 프레임을 살짝 어긋나게 겹쳐 깊이를 준다. */ .reason-list{display:flex;flex-direction:column;gap:clamp(44px,6vw,84px)} /* * 원본 비율이 1.84 / 1.44 / 2.30 으로 제각각이라 그대로 쓰면 행마다 높이가 달라 * 단이 어긋나 보인다. 세 그림 모두 같은 16:10 틀에 맞춰 리듬을 맞춘다. */ .reason-figure{position:relative;z-index:1;border-radius:18px;overflow:hidden; box-shadow:0 24px 54px rgba(90,60,40,.16)} .reason-figure img{display:block;width:100%;height:100%;aspect-ratio:16/10;object-fit:cover} /* 도해는 라벨이 그림 안에 있어 잘라내면 글자가 사라진다 → 여백을 두고 전체를 보여준다. 배경은 그림 자체의 바탕색(#f8f8f8)과 맞춰야 여백 경계에 네모난 이음매가 생기지 않는다 */ .reason-figure--diagram{background:#f8f8f8;border:1px solid var(--bd);box-shadow:0 14px 34px rgba(90,60,40,.09)} .reason-figure--diagram img{object-fit:contain;padding:20px} /* * HTML 도해 (usuge #reasons 02) — 이미지 도해는 라벨이 일본어로 인쇄돼 있어 * 한국어·중국어에서 읽히지 않았다. 텍스트로 다시 그려 카탈로그가 번역을 맡는다. * 사진 프레임과 같은 16:10 비율을 유지해 행 리듬이 흐트러지지 않게 한다. */ .reason-figure--html{background:#fff;border:1px solid var(--bd);box-shadow:0 14px 34px rgba(90,60,40,.09)} .ud{position:relative;aspect-ratio:16/10} .ud-center{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%); width:42%;aspect-ratio:1/1;border-radius:50%;background:var(--warm); display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px} .ud-center i{font-size:clamp(34px,4.5vw,52px);color:var(--ink);line-height:1} .ud-center span{font-size:clamp(12px,1.3vw,14px);font-weight:900;color:var(--red);letter-spacing:.04em} .ud-item{position:absolute;display:flex;flex-direction:column;align-items:center;gap:7px;text-align:center} .ud-item i{width:clamp(44px,5.5vw,58px);aspect-ratio:1/1;border-radius:50%;background:#fff; border:1px solid var(--bd);display:grid;place-items:center; font-size:clamp(18px,2.2vw,24px);color:var(--ink);box-shadow:0 8px 20px rgba(90,60,40,.1)} .ud-item span{font-size:clamp(11.5px,1.2vw,13.5px);font-weight:800;color:var(--ink);white-space:nowrap} .ud-tl{left:8%;top:9%} .ud-tr{right:8%;top:9%} .ud-bl{left:8%;bottom:9%} .ud-br{right:8%;bottom:9%} /* 사진 뒤에 살짝 어긋나게 겹치는 금색 프레임. 컬럼 밖으로 18px 삐져나오는 장식이라, 컬럼이 곧 화면 폭이 되는 모바일에서는 그만큼 가로 스크롤이 생긴다 → 여백이 있는 lg 이상에서만 그린다 */ @media (min-width:992px){ .reason-row .col-lg-5{position:relative} .reason-row .col-lg-5::before{content:"";position:absolute;inset: -1px 23px -1px 23px; border:1px solid var(--gold);border-radius:18px;opacity:.5} /* .reason-row.flex-lg-row-reverse .col-lg-5::before{inset:18px 18px -18px -18px} */ } .reason-text{max-width:560px} .reason-badge{display:block;margin-bottom:14px} .reason-title{font-weight:900;font-size:clamp(20px,2.2vw,26px);line-height:1.4;letter-spacing:-.01em;margin-bottom:12px} .reason-desc{color:#6f665c;font-size:15.5px;line-height:1.85;margin-bottom:24px} /* 세부 항목 — 아이콘+라벨을 가로 칩으로 */ .reason-chips{display:flex;flex-wrap:wrap;gap:10px} .reason-chips li{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--bd); border-radius:99px;padding:8px 16px 8px 8px} .reason-chips img{width:38px;height:38px;object-fit:contain} .reason-chips span{font-size:13.5px;font-weight:700;color:var(--ink)} .reason-check{display:inline-flex;align-items:center;background:#fff;border:1px solid var(--gold); color:var(--red);border-radius:99px;padding:10px 20px;font-size:14px;font-weight:800} /* ── 원장 프로필 (about.php #doctors) — 좌 인물 사진 · 우 약력 ──────── */ .doctor-profile{background:#fff;border:1px solid var(--bd);border-radius:18px;overflow:hidden; display:grid;grid-template-columns:220px 1fr} .dp-photo{background:var(--warm)} .dp-photo img{width:100%;height:100%;object-fit:cover;object-position:top;display:block} .dp-body{padding:26px 26px 22px} .dp-name{display:block;font-weight:900;font-size:22px;margin:4px 0 14px;letter-spacing:-.01em} .dp-name small{font-weight:700;font-size:14px;color:#7a6c5c;margin-left:4px} .cred-list{list-style:none;margin:0;padding:0} .cred-list li{position:relative;padding:5px 0 5px 16px;font-size:13.5px;color:#6f665c;line-height:1.65} .cred-list li::before{content:"";position:absolute;left:0;top:13px;width:6px;height:6px; border-radius:50%;background:var(--gold)} @media (max-width:575.98px){ .doctor-profile{grid-template-columns:1fr} .dp-photo img{aspect-ratio:5/4;object-position:center 15%} } /* 번호 배지 — 센터 원칙 교차 행(about #keeps) */ .num-badge{display:inline-grid;place-items:center;width:46px;height:46px;margin-bottom:14px; border-radius:50%;background:var(--gold);color:#fff;font-weight:900;font-size:17px;letter-spacing:.02em} /* ── 부위 바로가기 (cases.php) ─────────────────────────────── */ .area-nav-wrap{background:#fff;border-bottom:1px solid var(--bd)} .area-nav{display:flex;flex-wrap:wrap;justify-content:center;gap:10px} .area-nav a{display:inline-block;padding:9px 22px;border:1px solid var(--bd);border-radius:99px; background:#fff;color:var(--ink);font-weight:700;font-size:14px;transition:.2s} .area-nav a:hover{border-color:var(--red);color:var(--red)} /* 현재 보고 있는 부위·술식 */ .area-nav a.on{background:var(--red);border-color:var(--red);color:#fff} /* 허브 카드 — /cases 부위 4종, /procedure 술식 2종에서 상세로 넘기는 카드 */ .area-hub{background:#fff;border:1px solid var(--bd);border-radius:16px;overflow:hidden; color:var(--ink);transition:.25s;display:flex;flex-direction:column} .area-hub:hover{border-color:var(--gold);box-shadow:0 12px 30px rgba(60,40,20,.09);transform:translateY(-3px)} .area-hub img{display:block} .area-hub .vol-badge{display:inline-flex} .hub-card{color:var(--ink);transition:.25s} .hub-card:hover{border-color:var(--gold);box-shadow:0 12px 30px rgba(60,40,20,.09);transform:translateY(-3px)} .hub-more{color:var(--red);font-weight:800;font-size:14px} .hub-more i{transition:.2s} .area-hub:hover .hub-more i,.hub-card:hover .hub-more i{transform:translateX(4px)} /* 번호 붙은 효과 목록 — 여성 헤어라인의 교정 효과 01~04 항목 */ .effect-row{display:flex;align-items:center;gap:14px;background:#fff;border:1px solid var(--bd); border-radius:14px;padding:16px 20px;margin-bottom:12px} .effect-row:last-child{margin-bottom:0} .effect-row b{font-size:15px;line-height:1.7;color:#54493d;font-weight:700} /* 눈썹 증례 — 전/후가 따로 찍혀 있어 두 장을 한 묶음으로 보여준다 */ .brow-case{position:relative;background:#fff;border:1px solid var(--bd);border-radius:16px;padding:16px} .brow-no{position:absolute;top:-11px;left:16px;background:var(--red);color:#fff;border-radius:99px; padding:3px 14px;font-size:12px;font-weight:800;letter-spacing:.04em} /* 이식 모수 배지 */ .vol-badge{display:inline-flex;align-items:center;background:#fff;border:1px solid var(--gold); color:var(--red);border-radius:99px;padding:8px 18px;font-size:13.5px;font-weight:800} /* 증례 스트립 — 한 장에 전→후가 붙은 가로 사진 */ .case-strip{border-radius:14px;overflow:hidden;border:1px solid var(--bd);background:#fff} .case-strip img{display:block} /* 체크리스트 그리드 — 부위별 디자인 원칙(cases)·FUT 포인트(procedure) */ .check-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 14px} .check-grid--single{grid-template-columns:1fr} .check-item{display:flex;gap:10px;background:#fff;border:1px solid var(--bd);border-radius:12px; padding:13px 16px;font-size:14px;line-height:1.7;color:#54493d} .check-item i{color:var(--red);flex-shrink:0;font-size:16px;margin-top:1px} @media (max-width:767.98px){.check-grid{grid-template-columns:1fr}} /* ── SMP 전/후 패널 (smp.php #compare) ─────────────────────── */ .smp-panel{background:#fff;border:1px solid var(--bd);border-radius:16px;overflow:hidden} .smp-panel figure{position:relative} .smp-panel figure img{display:block} .smp-panel figcaption{position:absolute;left:14px;top:14px;background:rgba(37,32,28,.82);color:#fff; border-radius:99px;padding:4px 14px;font-size:12.5px;font-weight:800} .smp-panel--after figcaption{background:var(--red)} .smp-panel-body{padding:22px 24px} .smp-panel-body b{display:block;font-weight:900;font-size:16px;margin-bottom:12px;letter-spacing:-.01em} .smp-panel-body ul{list-style:none;margin:0;padding:0} .smp-panel-body li{display:flex;gap:10px;padding:6px 0;font-size:14px;color:#6f665c;line-height:1.7} .smp-panel-body li i{flex-shrink:0;margin-top:1px;color:#a89c8e} .smp-panel--after .smp-panel-body li i{color:var(--red)} /* 기준 사이트가 항목마다 쓰는 작은 삽화 아이콘(smp02_01~06) */ .smp-panel-body li img{flex-shrink:0;width:34px;height:34px;margin-top:-4px} /* SMP 특징 칩 — 기준 사이트의 아이콘 4항목 */ .feature-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:10px} .feature-chip{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--gold); color:var(--red);border-radius:99px;padding:9px 20px;font-size:14px;font-weight:800} /* 치료 수단 카드 (usuge.php #treatments) — 아이콘을 위에 세운 세로 카드 */ .tx-card{background:#fff;border:1px solid var(--bd);border-radius:16px;padding:26px 22px; transition:box-shadow .25s ease,transform .25s ease} .tx-card:hover{box-shadow:0 18px 40px rgba(90,60,40,.12);transform:translateY(-3px)} .tx-card i{display:grid;place-items:center;width:52px;height:52px;margin-bottom:16px; border-radius:14px;background:var(--warm);color:var(--red);font-size:22px} .tx-card b{display:block;font-weight:900;font-size:17px;margin-bottom:8px;letter-spacing:-.01em} .tx-card span{display:block;color:#6f665c;font-size:14px;line-height:1.75} /* 전후 사진 카드 */ .ba-card{position:relative;border-radius:16px;overflow:hidden;border:1px solid var(--bd);background:#fff} .ba-card img{display:block} /* 도해용 변형 — 그림 위쪽에 라벨이 인쇄돼 있어 캡션을 아래 바로 내린다. 기본 규칙(.ba-card figcaption)과 특이도가 같으면 뒤에 선언된 기본이 이기므로 클래스를 겹쳐 올린다 */ .ba-card.ba-card--label-bottom figcaption{position:static;display:block;background:#fff;color:var(--ink); border-top:1px solid var(--bd);border-radius:0;padding:10px 14px;font-size:13px;font-weight:700;text-align:center} /* FUT 도해 — 그림 배경이 회록색이라 카드 배경을 맞춰 크림 섹션 위에서 뜨지 않게 한다 */ .fut-figure{background:#8f8d82;border-color:#8f8d82} /* 라벨이 둘 이상인 도해(FUT 03 — 좌·우 라벨) */ .ba-card--label-bottom figcaption span+span{margin-top:5px;padding-top:5px;border-top:1px dashed var(--bd)} .ba-card figcaption{position:absolute;left:14px;top:14px;background:rgba(37,32,28,.82);color:#fff; border-radius:99px;padding:6px 16px;font-size:12.5px;font-weight:800;letter-spacing:.04em} /* 인트로 리드 문장 */ .intro-lead{font-size:clamp(17px,2vw,21px);line-height:1.9;font-weight:500;color:var(--ink)} /* ── 서브페이지 ────────────────────────────────────────────── */ .page-head{background:linear-gradient(120deg,#301410,var(--red-d));color:#fff} .page-head .breadcrumb{--bs-breadcrumb-divider-color:rgba(255,255,255,.45);--bs-breadcrumb-item-active-color:rgba(255,255,255,.75)} .page-head .breadcrumb a{color:rgba(255,255,255,.75)} .page-head .breadcrumb a:hover{color:#fff} .page-title{font-weight:900;font-size:clamp(26px,3.6vw,44px);line-height:1.3;letter-spacing:-.02em} /* 원장 카드 */ .doctor-card{background:#fff;border:1px solid var(--bd);border-radius:16px;overflow:hidden} .doctor-card img{aspect-ratio:16/9;object-fit:cover;object-position:center 22%} .doctor-role{font-size:12px;font-weight:900;letter-spacing:.1em;color:var(--gold)} /* 진료 원칙 카드 */ .rule-card{background:#fff;border:1px solid var(--bd);border-radius:16px;overflow:hidden;display:flex;flex-direction:column} .rule-card .pic{aspect-ratio:16/9;background:var(--warm)} /* 센터 사진 */ .clinic-shot{position:relative;border-radius:12px;overflow:hidden} .clinic-shot img{aspect-ratio:4/3;object-fit:cover;display:block} .clinic-shot figcaption{position:absolute;left:0;right:0;bottom:0;padding:22px 12px 10px;color:#fff;font-size:12.5px; background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.6))} /* 오시는 길 */ .access-item{background:#fff;border:1px solid var(--bd);border-radius:12px;padding:16px} /* ── 인천공항 경로 카드 (about/access.php) ────────────────── */ .route-card{background:#fff;border:1px solid var(--bd);border-radius:16px;padding:26px 24px; display:flex;flex-direction:column;transition:box-shadow .25s ease,transform .25s ease} .route-card:hover{box-shadow:0 18px 40px rgba(90,60,40,.12);transform:translateY(-3px)} .route-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:16px} .route-head i{display:grid;place-items:center;width:52px;height:52px;border-radius:14px; background:var(--warm);color:var(--red);font-size:24px} .route-badge{background:var(--warm);color:#7a6c5c;border-radius:99px;padding:5px 12px; font-size:12px;font-weight:800;white-space:nowrap} .route-title{display:block;font-weight:900;font-size:18px;letter-spacing:-.01em;margin-bottom:6px} .route-time{color:var(--red);font-weight:800;font-size:14px;margin-bottom:12px} .route-desc{color:#6f665c;font-size:14.5px;line-height:1.8;margin-bottom:16px;flex:1 1 auto} .route-note{border-top:1px dashed var(--bd);padding-top:12px;font-size:13px;font-weight:700;color:var(--ink)} /* 지도 아래 상세 주소 — 라벨/값 2열, 모바일은 세로로 쌓는다 */ .addr-box{max-width:760px;margin-inline:auto;background:#fff;border:1px solid var(--bd); border-radius:16px;padding:26px 28px} .addr-box dl{display:grid;grid-template-columns:auto 1fr;gap:12px 22px;margin:0} .addr-box dt{font-weight:800;font-size:14px;color:#7a6c5c;white-space:nowrap} .addr-box dd{margin:0;font-size:15px;line-height:1.6} .addr-box dd a{color:var(--ink);font-weight:700} .addr-box dd a:hover{color:var(--red)} /* * 한국어 주소 원문 — 택시 기사에게 그대로 보여주는 용도라 번역하지 않는다. * 일본어·중국어 화면에서도 한글이 그대로 나와야 제 역할을 한다. */ .addr-ko{margin:20px 0 0;padding-top:18px;border-top:1px dashed var(--bd); font-size:17px;font-weight:800;letter-spacing:-.01em;text-align:center} .addr-ko span{display:block;margin-bottom:6px;font-size:12.5px;font-weight:700; letter-spacing:.04em;color:var(--gold)} @media (max-width:575.98px){ .addr-box{padding:22px 20px} .addr-box dl{grid-template-columns:1fr;gap:4px 0} .addr-box dd{margin-bottom:10px} } /* 지도 — 16:9 로 고정하고 모바일에서는 조금 더 세로로 */ .map-box{position:relative;border:1px solid var(--bd);border-radius:16px;overflow:hidden; aspect-ratio:16/9;background:var(--warm)} .map-box iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block} @media (max-width:767.98px){.map-box{aspect-ratio:4/3}} /* ── 센터 둘러보기 가로 스크롤 갤러리 (about/clinic.php) ────── 기준: 한국 사이트의 slick 슬라이더. 라이브러리 없이 scroll-snap 으로 같은 경험을 낸다. */ .tour-wrap{position:relative} .tour-strip{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory; scroll-behavior:smooth;padding:4px 4px 14px;scrollbar-width:thin;scrollbar-color:var(--bd) transparent} .tour-strip::-webkit-scrollbar{height:6px} .tour-strip::-webkit-scrollbar-thumb{background:var(--bd);border-radius:99px} .tour-strip figure{flex:0 0 clamp(240px,32vw,360px);scroll-snap-align:center; border-radius:14px;overflow:hidden;box-shadow:0 10px 26px rgba(90,60,40,.10)} .tour-strip img{display:block;width:100%;height:auto} .tour-btn{position:absolute;top:50%;transform:translateY(-50%);z-index:2; width:44px;height:44px;border-radius:50%;border:1px solid var(--bd);background:#fff; color:var(--ink);font-size:18px;display:none;align-items:center;justify-content:center; box-shadow:0 8px 22px rgba(90,60,40,.16);transition:.2s} .tour-btn:hover{color:var(--red);border-color:var(--red)} .tour-prev{left:-14px} .tour-next{right:-14px} /* 터치 기기는 손가락으로 넘기는 게 자연스러워 버튼은 포인터 환경(lg+)에서만 */ @media (min-width:992px){.tour-btn{display:flex}} /* ── 수술 후 경과 타임라인 (procedure.php) ────────────────── */ .timeline{border-left:2px solid var(--bd);padding-left:26px} .timeline-row{position:relative;padding-bottom:24px} .timeline-row:last-child{padding-bottom:0} .timeline-row::before{content:"";position:absolute;left:-33px;top:5px;width:10px;height:10px;border-radius:50%; background:var(--red);box-shadow:0 0 0 4px #fff} .timeline-when{font-weight:900;color:var(--red);font-size:14.5px;margin-bottom:4px} /* ── 프라이버시 ────────────────────────────────────────────── */ .ic-sm{width:42px;height:42px;border-radius:11px;background:var(--warm);color:var(--red);font-size:19px; display:flex;align-items:center;justify-content:center} /* ── 수술 6단계 ────────────────────────────────────────────── */ .step-card{border:1px solid var(--bd);border-radius:14px;overflow:hidden;background:#fff;transition:.25s} .step-card:hover{box-shadow:0 16px 38px rgba(176,48,48,.12);transform:translateY(-3px)} .step-card .pic{aspect-ratio:387/300;background:var(--warm)} .step-no{font-size:11.5px;font-weight:900;letter-spacing:.14em;color:var(--gold)} /* ── FAQ ───────────────────────────────────────────────────── */ .faq-acc .accordion-item{border:1px solid var(--bd);border-radius:12px!important;margin-bottom:10px;overflow:hidden} .faq-acc .accordion-button{font-weight:700;background:#fff;box-shadow:none} .faq-acc .accordion-button:not(.collapsed){color:var(--red);background:#fff} .faq-acc .accordion-button:focus{box-shadow:none;border-color:var(--bd)} /* ── 가격 비교표 ───────────────────────────────────────────── */ .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} .price-panel{background:#fff;border:1px solid var(--bd);border-radius:16px;overflow:hidden} .price-panel-head{display:flex;align-items:baseline;gap:10px;padding:18px 20px;background:var(--red);color:#fff} .price-panel-head b{font-size:20px;font-weight:900;letter-spacing:.02em} .price-panel-head span{font-size:14px;font-weight:700;opacity:.9} .price-panel-head em{margin-left:auto;font-style:normal;font-size:12.5px;opacity:.8} .price-panel table{margin:0} .price-panel thead th{background:var(--warm);color:#7a6c5c;font-size:12.5px;font-weight:800;letter-spacing:.02em; border-bottom:1px solid var(--bd);padding:10px 16px;white-space:nowrap} .price-panel tbody td{padding:14px 16px;border-bottom:1px solid #f2ece4;white-space:nowrap} /* 부위명만 줄바꿈 허용 — 금액·헤더가 쪼개지면 표가 읽히지 않는다 */ .price-panel tbody td:first-child{white-space:normal;width:42%} .price-panel .row-note{display:block;margin:2px 0 0} .price-panel tbody tr:last-child td{border-bottom:0} .price-monitor{font-weight:900;color:var(--red);font-size:16px} /* 환산액 — 실제 청구는 원화라 원화를 앞에 세우고 자국 통화는 아래 줄에 작게 */ .price-sub{display:block;margin-top:2px;font-style:normal;font-weight:600;font-size:12.5px;color:#9b9086} /* 단위 환산 안내 — 상담은 "모", 계산은 "그라프트" 라 한 번 짚어준다 */ .graft-note{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:center;gap:6px 14px; text-align:center;background:#fff;border:1px solid var(--gold);border-radius:14px;padding:16px 22px} .graft-note b{color:var(--red);font-weight:900;font-size:16px} .graft-note span{color:#6f665c;font-size:14px} /* 총액 예시 표 — 이식량 × 방식별 모니터가·통상가 */ .example-table{background:#fff;border:1px solid var(--bd);border-radius:16px;overflow:hidden} .example-table thead th{background:var(--warm);color:#7a6c5c;font-size:12.5px;font-weight:800; padding:12px 16px;border-bottom:1px solid var(--bd);white-space:nowrap} .example-table thead .method-th{color:var(--ink);font-size:14px;font-weight:900;border-left:1px solid var(--bd)} .example-table thead .method-th span{font-weight:700;font-size:12px;color:#7a6c5c} .example-table thead tr:last-child th:nth-child(3){border-left:1px solid var(--bd)} .example-table tbody td{padding:16px;border-bottom:1px solid #f2ece4;white-space:nowrap;font-size:15px} .example-table tbody td:nth-child(4){border-left:1px solid var(--bd)} .example-table tbody tr:last-child td{border-bottom:0} /* 이식량 열 — 좁은 화면에서 표가 가로로 스크롤되므로 왼쪽에 고정해 기준을 잃지 않게 한다. 줄바꿈을 허용하면 "1,000 / 株 / 約 / 2,000 / 本" 처럼 글자 단위로 쪼개진다 → nowrap */ .example-table .vol-th, .example-table .vol{position:sticky;left:0;z-index:1;white-space:nowrap} .example-table .vol-th{background:var(--warm);vertical-align:bottom} .example-table .vol{background:#fff;box-shadow:1px 0 0 var(--bd)} .example-table .vol b{display:block;font-weight:900;font-size:16px} .example-table .vol em{font-style:normal;font-size:12.5px;color:#9b9086} .price-panel .row-fixed td{background:#fdf9f3} .row-note{display:inline-block;margin-left:6px;font-style:normal;font-size:11.5px;color:#9b9086} .tag-fixed{display:inline-block;margin-left:7px;padding:1px 7px;border-radius:99px;background:var(--warm); color:var(--gold-d,#96895f);font-style:normal;font-size:11px;font-weight:800;letter-spacing:.04em;vertical-align:middle} /* 금액 약속 배너 */ /* ── 요금 원장 — 총액에 "포함되는 것" 과 "붙지 않는 것" 을 좌우로 대조 (price.php) ── 따로 쌓아두면 같은 질문(무엇이 총액에 들어가나)에 두 번 답하게 된다. 헤더 색은 위쪽 단가표(.price-panel-head) 와 맞춰 페이지 안에서 같은 언어를 쓴다. */ .ledger{background:#fff;border:1px solid var(--bd);border-radius:16px;overflow:hidden} .ledger-head{display:flex;align-items:center;gap:10px;padding:16px 22px;font-weight:900;font-size:16px} .ledger-head i{font-size:20px;flex-shrink:0} .ledger-head em{margin-left:auto;font-style:normal;font-size:12px;font-weight:800; padding:2px 10px;border-radius:99px} .ledger--in .ledger-head{background:var(--red);color:#fff} .ledger--in .ledger-head i{color:var(--gold)} .ledger--in .ledger-head em{background:rgba(255,255,255,.18)} .ledger--out .ledger-head{background:var(--warm);color:#7a6c5c;border-bottom:1px solid var(--bd)} .ledger-list{list-style:none;margin:0;padding:10px} .ledger-list li{display:flex;align-items:center;gap:12px;padding:10px 12px} .ledger-list li i{width:34px;height:34px;flex:0 0 34px;display:grid;place-items:center; border-radius:50%;background:var(--warm);color:var(--red);font-size:15px} .ledger-list span{font-weight:700;font-size:15px;line-height:1.45} /* 포함 항목은 6개라 넓은 화면에서 2열로 접어 좌우 카드 높이를 맞춘다 */ .ledger--in .ledger-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))} .ledger--out .ledger-list li i{background:#f4f0ea;color:#a89c8e;font-size:12px} .ledger--out .ledger-list span{font-weight:600;color:#6f665c} @media (max-width:575.98px){.ledger--in .ledger-list{grid-template-columns:1fr}} .promise{display:flex;align-items:center;gap:16px;max-width:680px;margin-inline:auto; background:var(--ink);color:#f3ece4;border-radius:16px;padding:22px 26px} .promise i{font-size:30px;color:var(--gold);flex-shrink:0} .promise b{display:block;font-size:16.5px;font-weight:900;color:#fff;margin-bottom:3px} .promise span{font-size:13.5px;opacity:.82} /* ── 방식 비교표 (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} /* 전후 사진은 783×274 의 가로로 긴 한 장이라, 원본 비율 그대로 넓게 보여준다 */ .case-card img{display:block} /* ── 상담 채널 패널 (위챗/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} .bottombar{transition:none} } /* ── 모바일 하단 고정 메뉴 ───────────────────────────────────── 본문이 길어 중간에서 이탈하면 상담 CTA 가 화면 밖에 있다. 상담 버튼을 항상 화면에 두는 것이 목적. lg 이상은 상단 sticky 네비로 충분해 노출하지 않는다(d-lg-none). z-index 는 sticky 네비(1020)보다 위, 오프캔버스 백드롭(1040)보다 아래로 둔다. */ .bottombar{position:fixed;left:0;right:0;bottom:0;z-index:1035;display:flex;align-items:stretch; background:#fff;border-top:1px solid var(--bd);box-shadow:0 -2px 12px rgba(0,0,0,.08); padding-bottom:env(safe-area-inset-bottom);transition:transform .25s ease} /* 오프캔버스 메뉴가 열려 있는 동안 화면 밖으로 내린다. 오프캔버스는 sticky-top 네비(z-index:1020) 안에 있어 자체 z-index(1045)가 그 스태킹 컨텍스트 안에서만 유효하다 — 바깥에 있는 이 바(1035)가 메뉴를 덮어버린다. z-index 로 겨루는 대신 열려 있는 동안 아예 비켜준다(common.js 가 토글). */ .bottombar.is-down{transform:translateY(110%)} .bottombar .bb-item{flex:1 1 0;display:flex;flex-direction:column;align-items:center;justify-content:center; gap:3px;min-height:58px;padding:8px 4px;border:0;background:none;color:#6b6b6b; font-size:11px;font-weight:700;line-height:1.2;text-align:center;text-decoration:none} .bottombar .bb-item i{font-size:19px;line-height:1} .bottombar .bb-item.on{color:var(--red)} /* 상담 칸은 브랜드색(LINE 초록 / 위챗 초록)으로 채우고 폭을 1.5배 준다 */ .bottombar .bb-cta{flex:1.5 1 0;background:var(--channel);color:var(--channel-text,#fff)} .bottombar .bb-cta i{font-size:20px} .bottombar .bb-cta:active{filter:brightness(.94)} /* 고정 바가 푸터·본문 마지막 줄을 가리지 않도록 그만큼 아래 여백을 준다. 59px = 칸 높이 58 + border-top 1. 바 높이보다 크면 바 위로 body 배경(흰색)이 삐져나오므로 정확히 맞춰야 한다. */ @media (max-width:991.98px){ body{padding-bottom:calc(59px + env(safe-area-inset-bottom))} } /* ── 복사 안내 토스트 ──────────────────────────────────────── */ .dh-toast-wrap{position:fixed;left:50%;transform:translateX(-50%);z-index:1080; bottom:calc(74px + env(safe-area-inset-bottom));width:min(92vw,420px)} .dh-toast-wrap .toast{width:100%;background:#2a1512;color:#fff} .dh-toast-wrap .toast-body{font-size:14px;line-height:1.5} /* execCommand 폴백용 임시 textarea — 화면 밖으로 뺀다 */ .copy-proxy{position:fixed;left:-9999px;top:0;opacity:0}