@charset "utf-8";
/* JC빛소망안과 인블로그 — 리디자인 v2 (공식사이트 jceye.co.kr 디자인 정합)
   2026-07-31 · 승인 목업: 000.클로드디자인/목업_전체글_카드목록_JC_v1_20260730.html
                          000.클로드디자인/목업_메인홈_JC_v1_20260730.html
   범위: 전 페이지 크롬(헤더/드로어/푸터/모바일 CTA) + 목록 그리드. 글 본문 스타일은 jceye-post.css 유지 */

@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css");

:root{
  --jcx-brand:#FF6D00; --jcx-sub:#F36F21;
  --jcx-ink:#1F1F1E; --jcx-nav:#22272A; --jcx-muted:#8A8F94; --jcx-faint:#A8ADB2;
  --jcx-bg:#FCFCFC; --jcx-alt:#F8FBFC; --jcx-line:#E5E5E5; --jcx-footer:#0A1A34;
  --jcx-ff:"Pretendard Variable",Pretendard,-apple-system,system-ui,"Segoe UI","Malgun Gothic",sans-serif;
  --jcx-hd:96px;
}

/* ── 기본 ─────────────────────────────────────────── */
html{ -webkit-text-size-adjust:100%; }
body{
  font-family:var(--jcx-ff) !important;
  background:var(--jcx-bg) !important;
  color:var(--jcx-ink) !important;
  margin:0 !important;
}
body *{ box-sizing:border-box; }

/* GeneratePress 기본 크롬 숨김 — 우리 크롬만 노출 */
.site-header,#masthead,.main-navigation,#site-navigation,#mobile-menu-control-wrapper,
.site-footer,.site-info,.inside-site-info,.footer-bar,.generate-back-to-top,
#right-sidebar,.widget-area,.sidebar{ display:none !important; }
.site,#page,.site-content,#content,#primary,.content-area,
.inside-article,.entry-content,.grid-container,.grid-parent,article.page,
.site-main,#main,.container{
  max-width:100% !important; width:100% !important;
  margin-left:0 !important; margin-right:0 !important;
  padding-left:0 !important; padding-right:0 !important;
  float:none !important; background:transparent !important; border:0 !important; box-shadow:none !important;
}
/* ↑ GeneratePress의 .grid-container/.inside-article 좌우 패딩이 남으면 본문만 몇 px 밀려
   대표 이미지·섹션 컨테이너의 좌우선이 어긋난다.
   실측 범인 = main.site-main 의 margin-right:20px → 폭 1425→1405 → 중앙정렬이 10px 밀림 (2026-07-31) */
/* 고정 헤더만큼 본문을 내린다.
   ⚠ html body 를 붙여 특이도를 올린 이유 — 홈(page 71)·예약(book) 본문 안에 박힌 인라인 <style> 의
   풀블리드 리셋 `#page,.site,...{margin:0!important;padding:0!important}` 이 head 의 이 규칙보다
   문서상 뒤에 와서, 같은 !important·같은 특이도면 뒤가 이겨 padding-top 이 0으로 지워졌다.
   → 홈 마스트헤드(눈 건강 이야기/발행 편수)가 96px 헤더 아래에 깔려 잘림. 특이도로 눌러 고정. (2026-07-31) */
html body #page, html body .site{ padding-top:var(--jcx-hd) !important; }

/* 헤더 바로 아래 빈 여백 제거 — 홈·고정페이지 한정(글 상세 본문 여백은 유지)
   실측 범인: main.site-main margin-top:20px + .inside-article padding-top:40px = 60px (2026-07-31) */
body.home .site-main, body.page .site-main{ margin-top:0 !important; }
body.home .inside-article, body.page .inside-article{ padding-top:0 !important; }
body.home article.page, body.page article.page{ margin-top:0 !important; }

/* ── 헤더 ─────────────────────────────────────────── */
.jcx-hd{
  position:fixed; inset-inline:0; top:0; z-index:9000;
  height:var(--jcx-hd);
  background:rgba(255,255,255,.95);
  -webkit-backdrop-filter:blur(24px); backdrop-filter:blur(24px);
  border-bottom:1px solid var(--jcx-line);
}
.jcx-hdin{ position:relative; height:100%; display:flex; align-items:center; gap:10px; padding:0 40px; }
.jcx-logo{ flex:0 0 auto; display:flex; align-items:center; }
.jcx-logo img{ height:68px; width:auto; display:block; }   /* 데스크톱 2배 (2026-07-31 jh) */
/* GNB — 헤더 전체 폭 기준 정중앙 (2026-07-31 jh) */
.jcx-gnb{
  position:absolute; left:50%; transform:translateX(-50%);
  display:flex; align-items:center; gap:2px; height:100%;
}
.jcx-gnb a{
  padding:0 13px; height:var(--jcx-hd); display:flex; align-items:center;
  font-size:clamp(17px,1.68vw,24px);      /* 기존 16px의 1.5배 = 24px 상한 */
  font-weight:600; letter-spacing:-.045em;
  color:var(--jcx-nav); white-space:nowrap; text-decoration:none; transition:color .2s;
}
.jcx-hutil{ display:flex; align-items:center; margin-left:auto; }
.jcx-gnb a:hover{ color:var(--jcx-brand); }
.jcx-hutil .jcx-tel{
  /* GNB 밖으로 나오면서 .jcx-gnb a 의 flex 정렬을 상속받지 못해 텍스트가 위로 붙었다 → 여기서 명시 */
  display:inline-flex; align-items:center; justify-content:center;
  margin-left:0; padding:0 20px; height:42px; border-radius:999px; box-sizing:border-box;
  background:var(--jcx-brand); color:#fff; text-decoration:none;
  font-family:inherit; font-size:15px; font-weight:700; line-height:1;
  letter-spacing:-.02em; font-variant-numeric:tabular-nums; white-space:nowrap; gap:7px;
  transition:background .18s;
}
.jcx-hutil .jcx-tel svg{ flex:0 0 auto; display:block; }
.jcx-hutil .jcx-tel:hover{ background:var(--jcx-sub); color:#fff; }
/* 헤더 우측 유틸 — 원본의 언어/로그인/회원가입 자리를 카톡·네이버로 대체 (2026-07-31 jh) */
.jcx-hutil .jcx-util,.jcx-util{
  flex:0 0 auto; width:42px; height:42px !important; padding:0; margin-left:8px; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  text-decoration:none; transition:transform .18s, box-shadow .18s, filter .18s;
}
.jcx-util:hover{ transform:translateY(-1px); box-shadow:0 6px 14px -6px rgba(30,40,50,.4); }
.jcx-util-k{ background:#FEE500; color:#3A2C22; }
.jcx-util-n{ background:#03C75A; color:#fff; }

.jcx-ico{
  flex:0 0 auto; width:42px; height:42px; display:none;
  align-items:center; justify-content:center; color:var(--jcx-nav);
  cursor:pointer; border-radius:10px; text-decoration:none;
}
.jcx-ico:hover{ background:#F3F5F6; }

/* 드로어 (JS 없음 — checkbox 토글) */
.jcx-menucb{ position:absolute; opacity:0; pointer-events:none; }
.jcx-scrim{
  position:fixed; inset:0; z-index:9100; background:rgba(15,25,35,.45);
  opacity:0; pointer-events:none; transition:opacity .25s;
}
.jcx-drawer{
  position:fixed; top:0; right:0; bottom:0; z-index:9200; width:min(320px,86vw);
  background:#fff; transform:translateX(102%); transition:transform .28s ease;
  display:flex; flex-direction:column; padding:18px 20px 26px;
  box-shadow:-10px 0 30px rgba(20,30,40,.16);
}
.jcx-menucb:checked ~ .jcx-scrim{ opacity:1; pointer-events:auto; }
.jcx-menucb:checked ~ .jcx-drawer{ transform:translateX(0); }
.jcx-dtop{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.jcx-dtop span{ font-size:15px; font-weight:800; letter-spacing:-.03em; }
.jcx-dtop .jcx-ico{ display:flex; }
.jcx-dnav{ display:flex; flex-direction:column; }
.jcx-dnav a{
  padding:15px 4px; border-bottom:1px solid #F1F3F4;
  font-size:16px; font-weight:600; letter-spacing:-.035em; color:var(--jcx-nav); text-decoration:none;
}
.jcx-dnav a:hover{ color:var(--jcx-brand); }
.jcx-dcta{ margin-top:auto; display:flex; flex-direction:column; gap:8px; }
.jcx-dtel{
  height:52px; border-radius:12px; background:var(--jcx-brand); color:#fff;
  display:flex; align-items:center; justify-content:center; gap:8px;
  font-size:17px; font-weight:800; letter-spacing:-.02em; text-decoration:none;
}
.jcx-drow{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.jcx-drow a{ height:46px; border-radius:12px; display:flex; align-items:center; justify-content:center;
  font-size:13.5px; font-weight:700; letter-spacing:-.03em; text-decoration:none; }
.jcx-dk{ background:#FEE500; color:#3A2C22; }
.jcx-dn{ background:#03C75A; color:#fff; }

/* ── 목록 그리드 (전체 글 · 카테고리) ─────────────── */
.jcx-grid{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  column-gap:14px; row-gap:30px;
}
.jcx-card{ display:block; min-width:0; cursor:pointer; text-decoration:none;
  transition:transform .2s ease, opacity .2s ease; }
.jcx-card:hover{ transform:translateY(-2px); }
.jcx-card:hover .jcx-t{ color:var(--jcx-sub); }
.jcx-thumb{ width:100%; aspect-ratio:1/1; border-radius:18px; overflow:hidden;
  background:linear-gradient(140deg,#FFF4EC,#EEF5FC); position:relative; }
.jcx-thumb img{ width:100%; height:100%; object-fit:cover; object-position:center; display:block; }
.jcx-m1{ margin-top:10px; display:flex; align-items:center; gap:5px; min-width:0; }
.jcx-t{ display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;
  font-weight:600; font-size:15.5px; letter-spacing:-.035em; line-height:1.35;
  min-width:0; color:var(--jcx-ink); transition:color .15s; }
.jcx-cmt{ flex:0 0 auto; color:#E4392F; font-weight:700; font-size:13px; }
.jcx-new{ flex:0 0 auto; width:15px; height:15px; border-radius:4px; background:#E4392F;
  color:#fff; font-size:9px; font-weight:800; display:inline-flex; align-items:center; justify-content:center; }
.jcx-mrow{ display:block; }
.jcx-chip{ display:inline-block; margin-top:7px; padding:2.5px 9px; border-radius:999px;
  background:#FFF4EC; color:var(--jcx-sub); font-size:12px; font-weight:700; letter-spacing:-.02em;
  max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.jcx-m2{ margin-top:6px; font-size:12.5px; color:var(--jcx-faint);
  letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.jcx-cbox{ display:none; }

/* 페이지네이션 — 줄바꿈 금지 */
.jcx-pager{ margin-top:56px; display:flex; justify-content:center; align-items:center;
  gap:4px; flex-wrap:nowrap; }
.jcx-pager a,.jcx-pager button,.jcx-pager span{
  min-width:34px; height:34px; padding:0 9px; border:0; background:none; border-radius:8px;
  font-family:inherit; font-size:14px; font-weight:600; color:#5B6167; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  font-variant-numeric:tabular-nums; text-decoration:none; transition:background .15s,color .15s;
}
.jcx-pager a:hover{ background:#F3F5F6; }
.jcx-pager .on,.jcx-pager [aria-current="page"]{ background:var(--jcx-brand); color:#fff; font-weight:800; }
.jcx-pager .off,.jcx-pager [disabled]{ color:#CFD4D8; cursor:default; }

/* ── 푸터 ─────────────────────────────────────────── */
.jcx-ft{ background:var(--jcx-footer); color:#fff; padding:clamp(46px,4.6vw,74px) 0 30px; }
.jcx-ftin{ width:min(1200px,88vw); margin:0 auto; }
.jcx-ftgrid{ display:grid; grid-template-columns:1.6fr 1fr 1.1fr .9fr; gap:34px; }
.jcx-ft h5{ margin:0 0 14px; font-size:15px; font-weight:900; letter-spacing:.075em; color:#fff; }
.jcx-ftlogo img{ height:34px; width:auto; display:block; margin-bottom:14px; filter:brightness(0) invert(1); }
.jcx-ftbrand p{ margin:0; font-size:13.5px; line-height:1.75; opacity:.78;
  letter-spacing:-.02em; word-break:keep-all; color:#fff; }
.jcx-social{ margin-top:18px; display:flex; gap:10px; }
.jcx-social a{ width:40px; height:40px; border-radius:50%; border:1.5px solid rgba(255,255,255,.3);
  display:flex; align-items:center; justify-content:center; color:#fff;
  transition:border-color .2s,background .2s; }
.jcx-social a:hover{ border-color:var(--jcx-brand); background:rgba(255,109,0,.14); }
.jcx-ftcol a{ display:block; font-size:13.5px; line-height:2.15; opacity:.82;
  letter-spacing:-.02em; color:#fff; text-decoration:none; }
.jcx-ftcol a:hover{ opacity:1; color:#FFB878; }
.jcx-fthours dl{ margin:0; display:grid; grid-template-columns:auto 1fr; gap:6px 12px;
  font-size:13.5px; opacity:.86; }
.jcx-fthours dt{ font-weight:700; }
.jcx-fthours dd{ margin:0; font-variant-numeric:tabular-nums; }
.jcx-fthours em{ font-style:normal; font-size:11.5px; opacity:.7; margin-left:5px; }
.jcx-off{ margin:10px 0 0; font-size:12.5px; opacity:.6; }
.jcx-ftnote{ margin-top:34px; padding-top:24px; border-top:1px solid rgba(255,255,255,.14); }
.jcx-ftnote span{ display:block; font-size:13px; line-height:1.8; letter-spacing:-.02em;
  opacity:.72; word-break:keep-all; }
.jcx-ftnote a{ color:inherit; text-decoration:none; }
.jcx-ftnote .nm{ font-size:14.5px; font-weight:800; opacity:.92; margin-bottom:8px; }
.jcx-ftnote .warn{ margin-top:12px; font-size:12.5px; opacity:.5; }
.jcx-ftnote .cr{ margin-top:12px; font-size:12px; opacity:.42; letter-spacing:.02em; }

/* ── 모바일 하단 CTA 바 ───────────────────────────── */
/* 2026-07-31 jh: "모바일 하단부위에 퀵메뉴는 항상 따라다니게" — sticky는 페이지 끝에서만
   붙어 보였다. fixed로 바꾸고 본문 하단에 바 높이만큼 여백을 준다(아래 768px 블록). */
.jcx-mbar{
  display:none; position:fixed; left:0; right:0; bottom:0;
  z-index:8000; width:100%; height:84px;
  background:#fff; border-top:1px solid var(--jcx-line);
  box-shadow:0 -4px 16px rgba(0,0,0,.08);
  padding-bottom:env(safe-area-inset-bottom);
}
.jcx-mbar a{ flex:1; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:4px; padding:10px 0; text-decoration:none; }
.jcx-mbar a:active{ background:#FAFBFB; }
.jcx-mbar .t{ width:48px; height:48px; border-radius:14px; display:flex;
  align-items:center; justify-content:center; transition:transform .2s; }
.jcx-mbar a:active .t{ transform:scale(.95); }
.jcx-mbar .l{ font-size:11px; font-weight:600; letter-spacing:-.03em; color:#3A4248; line-height:1; }

/* ── 반응형 ───────────────────────────────────────── */
/* 모바일 헤더 = 공식사이트 모바일 헤더와 동일 규격 (2026-07-31 jh)
   공식 실측: 바 h-20(80px) · 좌우 px-5(20px) · 마크 26px + 워드마크 28px, 로고 왼쪽 / 햄버거 오른쪽.
   ⚠ 로고 크기 계산 — jceye_logo.png 은 252x90 캔버스인데 잉크는 y23~71(49px)뿐이다(빈 여백 45%).
      그래서 height:28px 로 두면 실제로 보이는 로고는 49/90×28 = 15px 밖에 안 돼 공식사이트의 절반이었다.
      잉크를 28px 로 맞추려면 28×90/49 = 51px. → 마크 ≈28px·워드마크 ≈26px·전체 폭 ≈136px
      (공식: 마크 26 + 간격 6 + 텍스트 99 = 131px) 로 같은 크기가 된다.
   배경은 공식(히어로 위 투명+흰 로고)과 달리 흰 바 유지 — 인블로그는 헤더 뒤가 흰 본문이라 흰 로고는 안 보인다. */
@media(max-width:1024px){
  :root{ --jcx-hd:80px; }
  .jcx-hdin{ padding:0 20px; }
  .jcx-logo img{ height:51px; }
  .jcx-gnb{ display:none; }
  .jcx-hutil{ display:none; }
  .jcx-util{ display:none; }
  /* 공식 모바일은 로고 + 햄버거 2개뿐 — 돋보기는 뺀다(드로어에 '증상 검색'이 있다) */
  .jcx-hdin > .jcx-ico:not(.jcx-burger){ display:none; }
  .jcx-burger{ display:flex; margin-left:auto; }
}
/* 3열은 쓰지 않는다 — 20을 3으로 나누면 마지막 줄에 빈칸이 남는다 */
@media(max-width:879px){
  .jcx-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:16px; }
}
/* 모바일: 카드 → 가로 리스트 행 */
@media(max-width:768px){
  .jcx-grid{ display:block; border-top:1px solid #EFEFEF; }
  .jcx-card{ display:flex; flex-direction:row; align-items:flex-start; gap:10px;
    padding:14px 0; border-bottom:1px solid #EFEFEF; min-height:92px; }
  .jcx-card:hover{ transform:none; }
  .jcx-card:active{ background:#FAFBFB; }
  .jcx-card .jcx-body{ order:1; flex:1 1 auto; min-width:0; padding-top:1px; }
  .jcx-card .jcx-thumb{ order:2; flex:0 0 64px; width:64px; height:64px;
    aspect-ratio:auto; border-radius:9px; }
  .jcx-card .jcx-cbox{ order:3; flex:0 0 52px; width:52px; height:64px; border-radius:9px;
    background:#F4F5F6; display:flex; flex-direction:column;
    align-items:center; justify-content:center; gap:2px; }
  .jcx-cbox b{ font-size:16px; font-weight:700; color:#3A4248; font-variant-numeric:tabular-nums; line-height:1; }
  .jcx-cbox span{ font-size:10.5px; color:#8A8F94; font-weight:600; letter-spacing:-.02em; }
  .jcx-m1{ margin-top:0; align-items:flex-start; }
  .jcx-t{ white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
    font-size:15px; line-height:1.38; }
  .jcx-t::before{ content:""; display:inline-block; width:5px; height:5px; border-radius:50%;
    background:var(--jcx-brand); margin:0 5px 3px 0; vertical-align:middle; }
  .jcx-cmt{ display:none; }
  .jcx-new{ width:14px; height:14px; font-size:8.5px; margin-top:2px; }
  .jcx-mrow{ display:flex; align-items:center; gap:6px; margin-top:6px; min-width:0; }
  .jcx-chip{ margin-top:0; font-size:11px; padding:1px 7px; flex:0 0 auto; }
  .jcx-m2{ margin-top:0; color:#8A8F94; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .jcx-pager{ margin-top:34px; gap:2px; }
  .jcx-pager a,.jcx-pager span{ min-width:30px; height:32px; padding:0 6px; font-size:13.5px; }
  .jcx-ftgrid{ grid-template-columns:1fr 1fr; gap:28px; }
  .jcx-mbar{ display:flex; }
  /* 하단 CTA 바가 fixed라 흐름에서 빠진다 — 바 높이(84px)+홈바 안전영역만큼 본문을 띄운다.
     이걸 빼면 푸터 마지막 줄이 바에 가려진다. */
  body{ padding-bottom:calc(84px + env(safe-area-inset-bottom)) !important; }
  .jcx-ft{ padding-bottom:20px; }
}
@media(max-width:400px){
  .jcx-card .jcx-thumb{ flex:0 0 58px; width:58px; height:58px; }
  .jcx-card .jcx-cbox{ flex:0 0 46px; width:46px; height:58px; }
  .jcx-t{ font-size:14.5px; }
  .jcx-ftgrid{ grid-template-columns:1fr; }
}
@media(prefers-reduced-motion:reduce){
  .jcx-card,.jcx-drawer,.jcx-scrim,.jcx-mbar .t{ transition:none !important; }
}

/* ── 본문에 하드코딩된 옛 크롬 숨김 (헤더 중복 제거) ────────────
   홈(page 71)·전체글(page 1325) 본문에 이전 디자인의 헤더/히어로/푸터가 박혀 있다.
   본문 HTML은 건드리지 않고 화면에서만 감춘다 — 근본 제거는 생성기(build_editorial/build_board) 수정 시 */
.entry-content .jce-home > header,
.entry-content .jce-home > .bar,
.entry-content .jce-home .jcm-deskhead,
.entry-content .jce-home footer.site,
.entry-content .app > .hd,
.entry-content .app > .foot,
.entry-content .jcm > .hd,
.entry-content .jcm > .foot,
.entry-content .eb-top,
.entry-content .eb-hero,
.entry-content .eb-foot,
.entry-header,.entry-title,.page-header{ display:none !important; }

/* ── 홈/목록 본문 상단 여백 정리 ── */
.entry-content > .jce-home,
.entry-content > .app,
.entry-content > .eboard{ padding-top:0 !important; margin-top:0 !important; }

/* ── 오시는 길 (mu-plugin이 홈·예약 페이지에 출력) ─────────────── */
.jcx-loc{ background:var(--jcx-alt); padding:clamp(56px,5.4vw,96px) 0; }
.jcx-locin{ width:min(1200px,88vw); margin:0 auto; }
.jcx-lochead{ text-align:center; margin-bottom:clamp(28px,3vw,48px); }
.jcx-lochead .en{ font-size:clamp(11px,.95vw,14px); font-weight:800; letter-spacing:.24em;
  color:var(--jcx-brand); margin-bottom:12px; }
.jcx-lochead h2{ margin:0 0 12px; font-size:clamp(26px,2.9vw,44px); font-weight:900;
  letter-spacing:-.045em; line-height:1.2; color:var(--jcx-ink); }
.jcx-lochead p{ margin:0; font-size:clamp(14px,1.25vw,18px); color:var(--jcx-muted);
  font-weight:600; letter-spacing:-.03em; word-break:keep-all; }
.jcx-locgrid{ display:grid; grid-template-columns:1.35fr 1fr; gap:26px; align-items:stretch; }
.jcx-map{ display:flex; flex-direction:column; height:100%; background:#fff;
  border:1.5px solid #CFCFCF; border-radius:8px; overflow:hidden;
  box-shadow:0 10px 10px rgba(52,54,61,.25),0 0 5px rgba(44,51,57,.15); }
/* 실제 지도 — 구글맵 embed(키 불필요·iframe 허용). 주소 기반이라 리뷰·평점이 노출되지 않는다.
   카카오맵 퍼가기(roughmap) 코드를 받으면 이 iframe만 교체하면 된다. */
.jcx-mapframe{ position:relative; flex:1; min-height:320px; }
.jcx-map iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; display:block; filter:saturate(1.05); }
.jcx-mappin{ position:absolute; left:50%; top:50%; transform:translate(-50%,calc(-50% - 26px));
  pointer-events:none; z-index:2;
  display:flex; align-items:center; gap:8px; background:var(--jcx-brand); color:#fff;
  font-weight:800; font-size:15px; letter-spacing:-.03em; padding:10px 18px; border-radius:999px;
  box-shadow:0 6px 16px rgba(255,109,0,.45); white-space:nowrap; }
.jcx-mappin::after{ content:""; position:absolute; left:50%; bottom:-6px; transform:translateX(-50%);
  border-left:6px solid transparent; border-right:6px solid transparent;
  border-top:7px solid var(--jcx-brand); }
.jcx-mapbar{ display:flex; align-items:center; justify-content:space-between; padding:10px 14px;
  border-top:1px solid #E7E9EA; font-size:13px; font-weight:700; color:#5B6167; }
.jcx-mapbar .k{ color:var(--jcx-muted); font-weight:600; }
.jcx-mapbar .links{ display:flex; gap:12px; }
.jcx-mapbar a{ color:#5B6167; text-decoration:none; }
.jcx-mapbar a:hover{ color:var(--jcx-sub); }
.jcx-ctacol{ display:flex; flex-direction:column; gap:12px; height:100%; }
.jcx-cta{ display:flex; align-items:center; justify-content:space-between; gap:14px;
  background:#fff; border-radius:18px; padding:18px 22px; text-decoration:none;
  box-shadow:0 10px 24px -8px rgba(52,54,61,.22),0 2px 6px rgba(52,54,61,.08);
  transition:transform .3s; }
.jcx-cta:hover{ transform:translateY(-2px); }
.jcx-ctaic{ flex:0 0 54px; width:54px; height:54px; border-radius:15px;
  display:flex; align-items:center; justify-content:center; }
.jcx-ctatx{ flex:1; min-width:0; }
.jcx-ctatx b{ display:block; font-size:16px; font-weight:800; color:#484F49; letter-spacing:-.03em; }
.jcx-ctatx span{ display:block; margin-top:4px; font-size:13px; font-weight:700;
  color:#8A8A8A; letter-spacing:-.02em; }
.jcx-ctabtn{ flex:0 0 auto; width:70px; height:70px; border-radius:50%; background:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:13px; font-weight:800; letter-spacing:-.03em; transition:transform .3s; }
.jcx-cta:hover .jcx-ctabtn{ transform:scale(1.05); }
.jcx-hours{ flex:1; display:flex; flex-direction:column; justify-content:center;
  background:#fff; border-radius:18px; padding:22px; border:1px solid var(--jcx-line); }
.jcx-hours h4{ margin:0 0 12px; font-size:13px; font-weight:900; letter-spacing:.12em; color:var(--jcx-sub); }
.jcx-hours dl{ margin:0; display:grid; grid-template-columns:auto 1fr; gap:7px 14px; font-size:14px; }
.jcx-hours dt{ color:#5B6167; font-weight:700; letter-spacing:-.02em; }
.jcx-hours dd{ margin:0; font-weight:600; font-variant-numeric:tabular-nums; letter-spacing:-.02em; }
.jcx-hours dd em{ font-style:normal; font-size:12px; color:var(--jcx-sub); font-weight:700; margin-left:6px; }
.jcx-hoff{ margin:10px 0 0; font-size:12.5px; color:var(--jcx-muted); font-weight:600; }
@media(max-width:1024px){ .jcx-locgrid{ grid-template-columns:1fr; } }
@media(max-width:768px){
  .jcx-mapframe{ min-height:250px; }
  .jcx-ctabtn{ width:60px; height:60px; font-size:12px; }
}

/* ══ 홈(메인) 섹션 ═══════════════════════════════════════════ */
.jcx-home{ margin:0; }
.jcx-secin,.jcx-heroin{ width:min(1200px,88vw); margin:0 auto; }
.jcx-sec{ padding:clamp(64px,6.4vw,116px) 0; }
.jcx-alt{ background:var(--jcx-alt); }

/* 히어로 */
.jcx-hero{ position:relative; background:var(--jcx-hero,#1D3A4A); color:#fff; overflow:hidden;
  padding:clamp(64px,6.5vw,110px) 20px clamp(60px,5.6vw,96px); text-align:center; }
.jcx-hero::after{ content:""; position:absolute; inset:0;
  background:radial-gradient(120% 90% at 50% 0%,rgba(255,109,0,.20),transparent 62%); }
.jcx-heroin{ position:relative; z-index:1; }
.jcx-eyebrow{ font-size:clamp(12px,1.05vw,15px); font-weight:800; letter-spacing:.22em;
  color:#FFB878; margin-bottom:18px; }
.jcx-hero h1{ margin:0 0 clamp(14px,1.3vw,22px); font-size:clamp(30px,4.2vw,62px); font-weight:800;
  letter-spacing:-.035em; line-height:1.16; word-break:keep-all; color:#fff; }
.jcx-hero p{ margin:0 auto; max-width:640px; font-size:clamp(15px,1.6vw,23px); font-weight:600;
  letter-spacing:-.04em; line-height:1.5; opacity:.93; word-break:keep-all; color:#fff; }
.jcx-hsearch{ margin:clamp(26px,3vw,42px) auto 0; max-width:560px; display:flex; gap:8px;
  background:#fff; border-radius:999px; padding:7px 7px 7px 22px; box-shadow:0 14px 34px rgba(0,0,0,.22); }
.jcx-hsearch input{ flex:1; min-width:0; border:0; outline:0; font-family:inherit; font-size:16px;
  color:var(--jcx-ink); letter-spacing:-.02em; background:transparent; }
.jcx-hsearch button{ flex:0 0 auto; height:46px; padding:0 24px; border:0; border-radius:999px;
  background:var(--jcx-brand); color:#fff; font-family:inherit; font-size:15px; font-weight:700;
  letter-spacing:-.02em; cursor:pointer; transition:background .15s; }
.jcx-hsearch button:hover{ background:var(--jcx-sub); }
.jcx-hstat{ margin-top:22px; display:flex; gap:26px; justify-content:center; flex-wrap:wrap;
  font-size:13.5px; font-weight:600; opacity:.82; color:#fff; }
.jcx-hstat b{ color:#FFB878; }

/* 섹션 헤드 */
.jcx-shead{ text-align:center; margin-bottom:clamp(32px,3.4vw,58px); }
.jcx-shead .en{ font-size:clamp(11px,.95vw,14px); font-weight:800; letter-spacing:.24em;
  color:var(--jcx-brand); margin-bottom:12px; }
.jcx-shead h2{ margin:0 0 12px; font-size:clamp(26px,2.9vw,44px); font-weight:900;
  letter-spacing:-.045em; line-height:1.2; color:var(--jcx-ink); }
.jcx-shead p{ margin:0; font-size:clamp(14px,1.25vw,18px); color:var(--jcx-muted);
  font-weight:600; letter-spacing:-.03em; word-break:keep-all; }

/* 진료 분야 카드 */
/* 카드 6장 — 열 수는 6의 약수만(6·3·2). 5열이면 마지막 줄에 빈칸이 남는다 (2026-07-31 jh) */
.jcx-cats{ display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:12px; }
.jcx-catcard{ position:relative; display:block; border-radius:20px; overflow:hidden; aspect-ratio:3/4;
  text-decoration:none; box-shadow:0 8px 20px -12px rgba(30,40,50,.35);
  transition:transform .25s ease, box-shadow .25s ease; }
.jcx-catcard:hover{ transform:translateY(-4px); box-shadow:0 18px 34px -16px rgba(30,40,50,.45); }
.jcx-catcard img{ width:100%; height:100%; object-fit:cover; object-position:center; display:block; }
.jcx-catph{ position:absolute; inset:0; background:linear-gradient(140deg,#FFF4EC,#EEF5FC); }
.jcx-catov{ position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(12,26,38,.12) 30%,rgba(12,26,38,.82) 100%); }
.jcx-catn{ position:absolute; top:14px; right:14px; padding:4px 10px; border-radius:999px;
  background:rgba(255,255,255,.92); color:var(--jcx-sub); font-size:11.5px; font-weight:800; letter-spacing:-.02em; }
.jcx-cattx{ position:absolute; left:0; right:0; bottom:0; padding:18px 15px; color:#fff; }
.jcx-cattx span{ font-size:11.5px; }
/* 전체 글 카드 — 사진 대신 브랜드 그라데이션 + 아이콘 */
.jcx-catall .jcx-catph{ background:linear-gradient(155deg,#FF8A2B 0%,#F36F21 45%,#1D3A4A 100%); }
.jcx-catall .jcx-catov{ background:linear-gradient(180deg,rgba(12,26,38,.05) 40%,rgba(12,26,38,.55) 100%); }
.jcx-catico{ position:absolute; left:0; right:0; top:44%; transform:translateY(-50%);
  display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,.9); }
.jcx-cattx b{ display:block; margin-bottom:5px; font-size:clamp(14px,1.12vw,19px); font-weight:800;
  letter-spacing:-.035em; word-break:keep-all; }
.jcx-cattx span{ display:block; font-size:12.5px; font-weight:600; opacity:.86;
  letter-spacing:-.02em; word-break:keep-all; }

/* 최신 글 더보기 버튼 */
.jcx-more{ margin-top:clamp(34px,3.4vw,54px); text-align:center; }
.jcx-more a{ display:inline-flex; align-items:center; gap:9px; height:52px; padding:0 32px;
  border-radius:999px; border:1.5px solid var(--jcx-brand); color:var(--jcx-brand);
  font-weight:700; font-size:16px; letter-spacing:-.03em; text-decoration:none;
  transition:background .18s,color .18s; }
.jcx-more a:hover{ background:var(--jcx-brand); color:#fff; }

/* 분야별 3열 */
.jcx-cols3{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.jcx-cbx{ background:#fff; border:1px solid var(--jcx-line); border-radius:18px; padding:24px 22px; }
.jcx-cbx h3{ margin:0 0 4px; font-size:18px; font-weight:800; letter-spacing:-.035em; color:var(--jcx-ink); }
.jcx-cbxsub{ font-size:12.5px; color:var(--jcx-muted); font-weight:600; margin-bottom:14px; }
.jcx-cbx ul{ margin:0 0 14px; padding:0; display:flex; flex-direction:column; gap:11px; list-style:none; }
.jcx-cbx li{ list-style:none; }
.jcx-cbx li a{ display:flex; gap:8px; align-items:flex-start; font-size:14.5px; font-weight:500;
  letter-spacing:-.03em; line-height:1.42; color:#3A4248; text-decoration:none; transition:color .15s; }
.jcx-cbx li a:hover{ color:var(--jcx-sub); }
.jcx-cbx li b{ flex:0 0 auto; color:var(--jcx-brand); font-weight:800; }
.jcx-cbxmore{ display:inline-block; font-size:13px; font-weight:700; color:var(--jcx-sub);
  letter-spacing:-.02em; text-decoration:none; }
.jcx-cbxmore:hover{ color:var(--jcx-brand); }

/* 홈 썸네일 플레이스홀더 */
.jcx-ph{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  color:var(--jcx-brand); font-weight:800; font-size:13px; letter-spacing:-.02em; }

@media(max-width:1024px){
  .jcx-secin,.jcx-heroin{ width:min(1200px,94vw); }
  .jcx-cats{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
  .jcx-cols3{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:768px){
  .jcx-secin{ width:100%; padding:0 20px; }
  .jcx-hero{ padding:44px 20px 40px; }
  .jcx-cats{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .jcx-catcard{ aspect-ratio:1/1; }
  .jcx-cols3{ grid-template-columns:1fr; }
  .jcx-hsearch{ padding:6px 6px 6px 18px; }
  .jcx-hsearch button{ padding:0 18px; height:42px; }
  .jcx-hstat{ gap:16px; font-size:12.5px; }
  /* 홈 최신글도 모바일에서는 리스트 행 */
  .jcx-home .jcx-grid{ display:block; border-top:1px solid #EFEFEF; }
}

/* ── 대표 이미지(featured image) — 홈·고정페이지에서는 표시하지 않음 (2026-07-31 jh "이미지부분 삭제해")
   히어로가 그 역할을 하므로 중복이다. DOM/메타는 남겨 og:image(공유 썸네일)는 보존한다.
   글 상세(single)의 대표 이미지는 영향 없음. */
body.page .featured-image,
body.home .featured-image,
body.page .page-header-image,
body.home .page-header-image{ display:none !important; }


/* ── 플로팅 퀵메뉴 (우측 고정 채널 바로가기) 2026-07-31 ─────────────
   전화·예약은 넣지 않는다 — 헤더 전화 버튼·하단 CTA 바와 3중 중복이 되기 때문.
   로고는 JC 자사 사이트 실물 아이콘을 우리 미디어에 업로드해 서빙(외부 핫링크 아님). */
.jcx-quick{
  position:fixed; right:0; top:50%; transform:translateY(-50%); z-index:8500;
  display:flex; flex-direction:column; width:78px;
  background:rgba(255,255,255,.82);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.7); border-right:0;
  border-radius:14px 0 0 14px;
  box-shadow:0 10px 30px -12px rgba(20,30,45,.28);
  overflow:hidden;
}
.jcx-q{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:6px; padding:13px 6px 11px; text-decoration:none;
  border-bottom:1px solid rgba(20,30,45,.08); transition:background .18s;
}
.jcx-q:last-child{ border-bottom:0; }
.jcx-q:hover{ background:rgba(255,255,255,.95); }
.jcx-qic{ width:40px; height:40px; display:flex; align-items:center; justify-content:center; }
.jcx-qic img{ width:100%; height:100%; object-fit:contain; display:block; }
.jcx-ql{
  font-size:11.5px; font-weight:700; letter-spacing:-.04em; line-height:1;
  color:#3A4248; white-space:nowrap;
}
.jcx-q:hover .jcx-ql{ color:var(--jcx-brand); }
.jcx-q:focus-visible{ outline:2px solid var(--jcx-brand); outline-offset:-2px; }
@media(prefers-reduced-motion:reduce){ .jcx-q{ transition:none; } }

/* 본문 침범 방지 — 실측 기준(1440/1280/1024 라이브 측정).
   컨테이너는 min(1200px,88vw)이고 1024px 이하에서 94vw로 더 넓어진다.
   1200~1399px: 라벨을 빼고 폭을 줄인다(여백 확보) / 1199px 이하: 숨긴다.
   1024px에서 아이콘만으로도 본문과 33px 겹치는 것을 실측해 기준을 올렸다. */
@media(max-width:1399px){
  .jcx-quick{ width:56px; }
  .jcx-ql{ display:none; }
  .jcx-q{ padding:12px 8px; }
  .jcx-qic{ width:34px; height:34px; }
}
@media(max-width:1279px){
  .jcx-quick{ width:46px; border-radius:12px 0 0 12px; }
  .jcx-q{ padding:10px 6px; }
  .jcx-qic{ width:30px; height:30px; }
}
/* 1024px 이하는 컨테이너가 94vw로 넓어져 좌우 여백이 30px밖에 남지 않는다 —
   어떤 폭으로 줄여도 우측 카드를 가리므로 숨긴다. */
@media(max-width:1024px){ .jcx-quick{ display:none; } }