/* =========================================================================
   전국콜 공용 테마 — 쇼핑몰/랭킹형 (컬러풀)
   index / region / gu / dong / dong-vehicle / matjip* / travel* / airport /
   regions/template 전체 공용. admin.php(관리자)은 별도 테마 유지, 미적용.
   ========================================================================= */

:root{
  --bg: #f5f6fb;
  --surface: #ffffff;
  --text: #191a2b;
  --muted: #6b6f8d;
  --border: #e7e8f3;
  --accent: #ff5b3a;      /* 코랄오렌지 - 랭킹/포인트 */
  --accent2: #7c3aed;     /* 바이올렛 */
  --accent3: #ffb020;     /* 골드 - 별점/뱃지 */
  --grad-hot: linear-gradient(90deg,#ff5b3a,#ff2d78);
  --grad-cool: linear-gradient(90deg,#7c3aed,#4361ff);
  --radius: 16px;
  --shadow: 0 8px 24px rgba(30,30,60,.08);
  --shadow-hover: 0 16px 34px rgba(30,30,60,.14);
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  font-family:-apple-system,"Pretendard","Noto Sans KR",sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height:1.7;
}
a{ color: inherit; }

.container{ max-width:1080px; margin:0 auto; padding:0 20px 80px; }

/* 전역 내비게이션(.jc-global-nav) 스타일은 전부 nav.css 한 파일에서만 관리함.
   여기 있던 구버전 알약형 nav 스타일은 nav.css와 겹쳐서 깨지는 원인이라 삭제. */

/* ── 히어로 (index) ───────────────────────────────────────────────── */
.hero{ text-align:center; padding:72px 20px 56px; background:var(--surface); border-bottom:1px solid var(--border); }
.badge{
  display:inline-block; padding:9px 22px; border-radius:999px;
  background:var(--grad-hot); color:#fff;
  font-size:15px; font-weight:800; letter-spacing:1px; margin-bottom:24px;
  box-shadow:0 6px 16px rgba(255,91,58,.35);
}
h1{
  font-size:clamp(32px,6vw,56px); font-weight:900;
  background:var(--grad-cool);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  margin-bottom:18px; line-height:1.25;
}
.hero p{ color:var(--muted); font-size:18px; max-width:680px; margin:0 auto; line-height:1.8; }

/* ── 목차 (index) ─────────────────────────────────────────────────── */
.toc{
  background:var(--surface); border:1px solid var(--border); border-radius:20px;
  padding:36px 32px; margin:36px 0 52px; box-shadow:var(--shadow);
}
.toc h2{ font-size:25px; font-weight:800; margin-bottom:24px; display:flex; align-items:center; gap:8px; }
.toc h2::before{ content:"🛒"; font-size:22px; }
.toc-group{ margin-bottom:22px; }
.toc-group:last-child{ margin-bottom:0; }
.toc-group h3{
  font-size:12px; color:var(--accent2); letter-spacing:1px; margin-bottom:12px;
  text-transform:uppercase; font-weight:800;
}

/* ── 공용: "-grid" 로 끝나는 모든 목록/링크 그리드 ───────────────────
   (toc-grid, dong-grid, gu-grid, sido-grid, city-grid, country-grid,
   continent-grid, sibling-grid, nearby-grid, related-grid, other-grid,
   district-list 등 전 페이지 공통 패턴) */
[class$="-grid"], .district-list{
  display:grid; grid-template-columns:repeat(4,1fr); gap:8px;
}
.sibling-grid, .nearby-grid, .related-grid, .district-list{
  display:flex; flex-wrap:wrap; gap:8px;
}
@media (max-width:700px){ [class$="-grid"]{ grid-template-columns:repeat(2,1fr); } }

[class$="-grid"] a, .district-list a{
  display:block; padding:10px 12px; border-radius:10px;
  background:var(--surface); color:var(--text); text-decoration:none;
  font-size:14px; border:1px solid var(--border); border-left:3px solid var(--accent2);
  transition:all .18s ease;
}
[class$="-grid"] a:hover, .district-list a:hover{
  border-left-color:var(--accent); background:#fff5f2; transform:translateX(3px);
}
/* 컬러풀 포인트: 4의 배수 주기로 좌측 보더 색 순환 */
[class$="-grid"] a:nth-child(4n+1){ border-left-color:var(--accent2); }
[class$="-grid"] a:nth-child(4n+2){ border-left-color:var(--accent); }
[class$="-grid"] a:nth-child(4n+3){ border-left-color:var(--accent3); }
[class$="-grid"] a:nth-child(4n+4){ border-left-color:#22c55e; }

.sibling-grid a, .nearby-grid a, .related-grid a, .district-list a{
  font-size:13px; padding:8px 14px; border-radius:999px; border-left:1px solid var(--border);
}
[class$="-grid"] .sub{ display:block; font-size:12px; color:var(--muted); margin-top:2px; }

/* "-section" 으로 끝나는 소제목 (dong-section, city-section, gu-section 등) */
[class*="-section"] h2, .districts h2, .nearby h2, .sibling h2, .related h2, .other-sido h2{
  font-size:17px; font-weight:800; margin:34px 0 14px;
  padding-left:12px; border-left:4px solid var(--accent);
}
.nearby, .sibling, .related, .other-sido, .districts{ margin-top:38px; }
.district-note{ font-size:13px; color:var(--muted); margin-bottom:4px; }

/* ── 본문 섹션 (info) ─────────────────────────────────────────────── */
section.info{ margin-bottom:48px; scroll-margin-top:20px; }
section.info h2{
  font-size:22px; font-weight:800; margin-bottom:12px;
  border-left:4px solid var(--accent); padding-left:14px;
}
section.info p, .content p{ color:#3d3f57; font-size:15px; max-width:760px; margin-bottom:16px; }
section.info p a, .content a{ color:var(--accent2); font-weight:600; }
section.info p a:hover, .content a:hover{ color:var(--accent); }

.back-to-top{ display:inline-block; margin-top:14px; font-size:13px; color:var(--accent2); text-decoration:none; }
.back-to-top:hover{ text-decoration:underline; }

/* ── 지역/랜딩 카드 (region-card 등) ──────────────────────────────── */
.region-grid, .city-grid, .country-grid, .continent-grid, .gu-grid, .sido-grid{
  grid-template-columns:repeat(2,1fr); gap:16px; margin-top:20px;
}
@media (max-width:700px){ .region-grid,.city-grid,.country-grid,.continent-grid,.gu-grid,.sido-grid{ grid-template-columns:1fr; } }
.region-card, .city-section .card, .country-section .card{
  background:var(--surface) !important; border:1px solid var(--border) !important;
  border-left:4px solid var(--accent2) !important;
  border-radius:var(--radius); padding:22px 20px !important; box-shadow:var(--shadow);
  transition:transform .2s ease, box-shadow .2s ease;
}
.region-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-hover); }
.region-card h3{ font-size:17px; font-weight:800; margin-bottom:6px; color:var(--text); }
.region-card p{ font-size:13px; color:var(--muted); }
.region-grid a:nth-child(4n+1) .region-card, .region-card:nth-child(4n+1){ border-left-color:var(--accent2); }
.region-grid a:nth-child(4n+2) .region-card, .region-card:nth-child(4n+2){ border-left-color:var(--accent); }
.region-grid a:nth-child(4n+3) .region-card, .region-card:nth-child(4n+3){ border-left-color:var(--accent3); }
.region-grid a:nth-child(4n+4) .region-card, .region-card:nth-child(4n+4){ border-left-color:#22c55e; }

/* ── 파트너 카드: 랭킹형 넘버 뱃지 ────────────────────────────────── */
.partner-grid{
  display:grid; grid-template-columns:repeat(2,1fr); gap:18px; margin-top:20px;
  counter-reset:jc-rank;
}
@media (max-width:620px){ .partner-grid{ grid-template-columns:1fr; } }
.partner-grid .card{
  display:block; text-decoration:none; color:inherit; position:relative; overflow:hidden;
  background:var(--surface); border:1px solid var(--border); border-radius:18px;
  padding:26px 24px 24px 60px; text-align:left;
  box-shadow:var(--shadow); transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  counter-increment:jc-rank;
}
.partner-grid .card::after{
  content:"NO." counter(jc-rank,decimal-leading-zero);
  position:absolute; left:0; top:0; bottom:0; width:44px;
  display:flex; align-items:center; justify-content:center;
  writing-mode:vertical-rl; text-orientation:mixed;
  background:var(--grad-hot); color:#fff; font-size:12px; font-weight:800; letter-spacing:1px;
}
.partner-grid .card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-hover); border-color:var(--accent); }
.partner-grid .card .name{ font-size:19px; font-weight:800; margin-bottom:6px; }
.partner-grid .card .desc{ font-size:13px; color:var(--muted); }
.partner-grid .card .arrow{ position:absolute; top:22px; right:20px; font-size:17px; opacity:.4; color:var(--accent2); }

/* 파트너 카드 공용 .card 가 partner-grid 밖(구버전 마크업)에서 쓰일 때의 기본값 */
.card{
  background:var(--surface); border:1px solid var(--border); border-radius:16px;
  color:inherit; text-decoration:none;
}
.card:hover{ border-color:var(--accent); }
.card .name{ font-weight:800; }
.card .desc{ color:var(--muted); }

/* ── 카페홍보 박스: 파트너 카드와 완전히 다른 임팩트있는 단독 디자인 ────── */
.cafe-promo{ margin-top:22px; position:relative; border-radius:20px; padding:2px; background:var(--grad-cool); }
.cafe-promo-badge{
  position:absolute; top:-13px; left:22px; z-index:2;
  background:var(--grad-hot); color:#fff; font-size:12px; font-weight:800;
  padding:5px 14px; border-radius:999px; box-shadow:var(--shadow); letter-spacing:.3px;
}
.cafe-promo-body{
  display:block; text-decoration:none; color:inherit;
  background:var(--surface); border-radius:18px; padding:30px 26px 24px; text-align:left;
  transition:transform .22s ease, box-shadow .22s ease;
}
.cafe-promo-body:hover{ transform:translateY(-4px); box-shadow:var(--shadow-hover); }
.cafe-promo-name{
  font-size:21px; font-weight:900; margin-bottom:8px;
  background:var(--grad-cool); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.cafe-promo-desc{ font-size:13.5px; color:var(--muted); line-height:1.6; }
.cafe-promo-tags{ margin-top:14px; display:flex; flex-wrap:wrap; gap:8px; min-height:26px; }
.cafe-promo-tag{
  font-size:12px; font-weight:700; color:#b8790a;
  background:rgba(255,176,32,.14); border:1px solid rgba(255,176,32,.4);
  padding:4px 10px; border-radius:999px;
}
.cafe-promo-cta{
  display:inline-block; margin-top:16px; font-size:13px; font-weight:800; color:#fff;
  background:var(--grad-hot); padding:9px 18px; border-radius:999px;
}
@media (max-width:620px){ .cafe-promo-name{ font-size:19px; } }

/* ── 브레드크럼 / 광고 / 푸터 ─────────────────────────────────────── */
.crumb{ font-size:13px; color:var(--muted); margin:20px 0; }
.crumb a{ color:var(--accent2); text-decoration:none; font-weight:600; }
.crumb a:hover{ text-decoration:underline; }

.ad-slot{ max-width:1080px; margin:36px auto; padding:0 20px; text-align:center; }
.ad-slot .label{ display:block; font-size:11px; color:var(--muted); margin-bottom:6px; letter-spacing:1px; }

/* ── 배너 자리 공용 (jc_banner_box) ────────────────────────────────
   실제 배너 이미지가 없어서 자리별 정확한 사이즈(jc_banner_sizes)에 맞춘
   목업 박스로만 표시. 실제 이미지가 생기면 img 태그로 교체 예정이라
   여기 사이즈는 그대로 두고 배경/글자만 쓰는 임시 스타일. */
.jc-banner-box{
  display:flex; align-items:center; justify-content:center;
  margin:0 auto; border-radius:12px; box-sizing:border-box;
  background:linear-gradient(135deg, rgba(124,58,237,.14), rgba(236,72,153,.14));
  border:1px dashed rgba(148,163,184,.6);
  color:var(--muted); font-size:13px; font-weight:700; letter-spacing:.2px;
  text-decoration:none;
}
.jc-banner-box:hover{ border-color:var(--accent2); color:var(--accent2); }
.jc-banner-default{ margin:36px auto; }

/* ── 좌/우 고정 레일 광고 (jc_ad_rail, jc_global_nav 안에서 자동 삽입) ─────────
   .container 가 1080px로 가운데 정렬되니, 뷰포트가 그보다 충분히 넓을 때만
   양옆 여백에 세로형 광고를 고정 배치. 여백이 없는 화면(노트북/태블릿/모바일)에서는
   컨텐츠를 가리거나 겹칠 수 있어서 아예 렌더링을 꺼버림(display:none).
   사이즈는 내부 .jc-banner-box(160×600, jc_banner_sizes)가 직접 정하므로
   여기서는 위치만 고정. */
.jc-ad-rail{
  display:none;
  position:fixed; top:50%; transform:translateY(-50%);
  z-index:20; text-align:center;
}
.jc-ad-rail .label{ display:block; font-size:11px; color:var(--muted); margin-bottom:6px; letter-spacing:1px; }
.jc-ad-rail.left{ left:16px; }
.jc-ad-rail.right{ right:16px; }
@media (min-width:1480px){
  .jc-ad-rail{ display:block; }
}

footer{ text-align:center; padding:30px 20px 50px; font-size:12px; color:var(--muted); }

/* ── 사이트맵 푸터 (전 페이지 공통, jc_footer() 단일 함수로만 생성) ──────
   클래스명은 절대 "-grid"로 끝내지 않는다 — 위쪽 [class$="-grid"] 규칙(흰
   카드 배경)이 덮어써서 어두운 푸터 위 글씨가 안 보이는 사고가 났었음.
   내부 스크롤 금지 — 링크가 많으면 줄바꿈으로 자연스럽게 늘어나게 한다. */
.site-footer{
  background:#12131f; color:#c7c9e0;
  margin-top:20px; padding:44px 20px 0; text-align:left;
}
.footer-inner{
  max-width:1080px; margin:0 auto;
  display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
  gap:32px 28px;
  padding-bottom:32px; border-bottom:1px solid rgba(255,255,255,.12);
}
@media (max-width:600px){
  .footer-inner{ grid-template-columns:1fr; gap:28px; }
}
.footer-col h4{
  font-size:12px; font-weight:800; letter-spacing:.5px; color:#ffffff;
  margin:0 0 14px; text-transform:uppercase;
}
.footer-links, .footer-chip-list{ display:flex; flex-wrap:wrap; gap:8px; }
.footer-links a, .footer-chip-list a{
  display:inline-block; color:#c7c9e0 !important; text-decoration:none;
  font-size:12.5px; line-height:1.4;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08);
  border-radius:999px; padding:6px 13px; white-space:nowrap;
  transition:background .15s ease, color .15s ease;
}
.footer-links a:hover, .footer-chip-list a:hover{
  background:var(--accent); border-color:var(--accent); color:#fff !important;
}
.footer-bottom{
  max-width:1080px; margin:0 auto; padding:20px 0 30px;
  font-size:12px; color:#7d7f9e; text-align:center;
}

/* ── 전체 서비스 카테고리 (대표그룹 10개 x 아이템 전체) ───────────────
   클래스명은 절대 "-grid"로 끝내지 않는다 (위쪽 [class$="-grid"] 흰 카드 배경 규칙과 충돌 방지).
   items.php에 아이템을 몇 개를 추가하든 chip이 자연스럽게 줄바꿈되므로 여기 손댈 필요 없음. */
.footer-categories{
  max-width:1080px; margin:0 auto; padding:32px 0;
  border-bottom:1px solid rgba(255,255,255,.12);
}
.footer-categories-title{
  font-size:12px; font-weight:800; letter-spacing:.5px; color:#fff;
  margin:0 0 20px; text-transform:uppercase;
}
.footer-cat-cols{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(210px, 1fr));
  gap:26px 24px;
}
.footer-cat-block h5{
  font-size:12px; font-weight:800; letter-spacing:.4px; color:#facc15;
  text-transform:uppercase; margin:0 0 10px;
}

/* ── FAQ ──────────────────────────────────────────────────────────── */
.faq{ margin:30px 0; }
.faq-item{
  background:var(--surface); border:1px solid var(--border); border-left:4px solid var(--accent3);
  border-radius:12px; padding:16px 18px; margin-bottom:10px; box-shadow:var(--shadow);
}
.faq-item h3, .faq-q{ font-size:14px; color:var(--text); margin-bottom:8px; font-weight:700; }
.faq-item h3::before, .faq-q::before{ content:"Q. "; color:var(--accent); }
.faq-item p, .faq-a{ font-size:13px; color:var(--muted); margin:0; }
.faq-a::before{ content:"A. "; color:var(--accent2); font-weight:700; }

/* -- 상세 페이지 공용 컨테이너(gu, dong, travel, matjip, airport 등) -- */
.container .crumb + h1{ margin-top:4px; }
.cafe-top-banner{ display:block; max-width:1080px; margin:0 auto; }

/* ── 페이지 헤드 (index / item / item-sido / item-gu / item-dong 전부 공용) ──────
   메인·아이템 허브가 쓰던 전폭(.hero) 블록 대신, 지역 페이지와 똑같이
   .container 안쪽에 [브레드크럼 → 뱃지 → h1 → 설명] 순서로 들어가는 제목 블록.
   .hero 스타일은 다른 사이트 이식분 호환 위해 그대로 남겨둠. */
.page-head{ padding:10px 0 2px; }
.page-head .badge{ margin-bottom:14px; }
.page-head h1{ margin-bottom:12px; }
.page-head .page-lead{ color:var(--muted); font-size:16px; line-height:1.8; max-width:760px; }

/* 배너 박스: container(안쪽 1040px)를 넘지 않게 + 실제 이미지 꽉 채우기 */
.jc-banner-box{ max-width:100%; }
.jc-banner-box img{ width:100%; height:100%; object-fit:cover; display:block; border-radius:12px; }

/* 아이템 채팅 패널 (2026-09, 포팅 이식) */
/* 아이템 채팅 패널 (2026-09) */
.jc-chat .jc-chat-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.jc-chat .jc-chat-head h2 { margin: 0; }
.jc-chat .jc-chat-toggle { border: 1px solid #ccc; background: #fff; border-radius: 6px; padding: 4px 10px; cursor: pointer; font-size: .85em; }
.jc-chat .jc-chat-desc { margin: 8px 0; font-size: .92em; color: #555; }
.jc-chat .jc-chat-list { height: 320px; overflow-y: auto; border: 1px solid #ddd; border-radius: 10px; background: #fafafa; padding: 10px; }
.jc-chat .jc-chat-empty { color: #888; text-align: center; padding: 24px 0; font-size: .92em; }
.jc-chat .jc-msg { margin: 0 0 6px; line-height: 1.5; word-break: break-word; font-size: .95em; }
.jc-chat .jc-msg .n { font-weight: 700; margin-right: 6px; color: #444; }
.jc-chat .jc-msg.me .n { color: #1a73e8; }
.jc-chat .jc-msg .tm { margin-left: 6px; font-size: .75em; color: #999; }
.jc-chat .jc-msg .act { margin-left: 6px; border: 0; background: none; color: #b33; font-size: .75em; cursor: pointer; padding: 0; }
.jc-chat .jc-msg.sys { color: #666; background: #eef3ff; border-radius: 8px; padding: 8px 10px; font-size: .88em; }
.jc-chat .jc-chat-form { display: flex; gap: 6px; margin-top: 8px; }
.jc-chat .jc-chat-form input[name=m] { flex: 1; min-width: 0; padding: 10px 12px; border: 1px solid #ccc; border-radius: 8px; font-size: 1em; }
.jc-chat .jc-chat-form button { padding: 10px 16px; border: 0; border-radius: 8px; background: #1a73e8; color: #fff; cursor: pointer; font-size: 1em; }
.jc-chat .jc-chat-form button:disabled { opacity: .6; cursor: default; }
.jc-chat .jc-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.jc-chat .jc-chat-note { min-height: 1.2em; margin-top: 4px; font-size: .85em; color: #b33; }
.jc-chat .jc-chat-open { display: inline-block; margin-top: 6px; font-size: .9em; }
.jc-chat-link { margin: 10px 0; }

/* 채팅 관리자/공지/HTML (2026-09) */
.jc-chat [hidden] { display: none !important; }
.jc-chat .jc-chat-tools { display: flex; gap: 6px; }
.jc-chat .jc-admin-btn { border: 1px solid #ccc; background: #fff; border-radius: 6px; padding: 4px 10px; cursor: pointer; font-size: .85em; color: #555; }
.jc-chat .jc-chat-pin { display: block; margin: 8px 0; padding: 8px 12px; border-radius: 8px; background: #fff7d6; border: 1px solid #f0d878; font-size: .92em; }
.jc-chat .jc-chat-pin-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.jc-chat .jc-chat-pin-label { font-weight: 700; }
.jc-chat .jc-chat-pin-actions { display: flex; gap: 10px; flex: none; }
.jc-chat .jc-chat-pin button { border: 0; background: none; color: #b33; font-size: .8em; cursor: pointer; flex: none; padding: 0; }
.jc-chat .jc-chat-pin-more { color: #1a73e8 !important; }
.jc-chat .jc-chat-pin .t { white-space: pre-line; overflow-wrap: break-word; word-break: break-word; min-width: 0; }
.jc-chat .jc-chat-pin .t.is-clamped { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.jc-chat .jc-chat-pin .jc-pin-more { align-self: center; flex: 0 0 auto; margin-top: 2px; padding: 3px 14px; border: 1px solid rgba(138,109,0,.4); border-radius: 999px; background: #fff; color: #8a6d00; font-size: .75em; line-height: 1.4; cursor: pointer; font-family: inherit; white-space: nowrap; }
.jc-chat .jc-chat-pin .jc-pin-more:hover { background: #fffbe8; }
.jc-chat .jc-admin-login { display: flex; gap: 6px; margin: 8px 0; }
.jc-chat .jc-admin-login input { flex: 1; min-width: 0; padding: 8px 10px; border: 1px solid #ccc; border-radius: 8px; }
.jc-chat .jc-admin-login button { padding: 8px 14px; border: 0; border-radius: 8px; background: #444; color: #fff; cursor: pointer; }
.jc-chat .jc-msg.adm { background: #fff1f0; border-radius: 8px; padding: 6px 10px; }
.jc-chat .jc-msg .n { }
.jc-chat .jc-msg.adm .n { color: #c0392b; }
.jc-chat .jc-msg.notice { background: #fff7d6; }
.jc-chat .jc-msg.rich .t { display: block; margin-top: 4px; }
.jc-chat .jc-msg.rich img { max-width: 100%; height: auto; }
.jc-chat .jc-msg.rich table { border-collapse: collapse; margin: 6px 0; font-size: .92em; }
.jc-chat .jc-msg.rich th, .jc-chat .jc-msg.rich td { border: 1px solid #ddd; padding: 4px 8px; }
.jc-chat .jc-msg.rich ol, .jc-chat .jc-msg.rich ul { margin: 6px 0 6px 1.2em; padding: 0; }
.jc-chat .jc-chat-form { flex-wrap: wrap; }
.jc-chat .jc-chat-form select { padding: 8px; border: 1px solid #ccc; border-radius: 8px; }
.jc-chat .jc-chat-form textarea { flex: 1 1 100%; min-width: 0; padding: 10px 12px; border: 1px solid #ccc; border-radius: 8px; font-size: 1em; font-family: inherit; }
.jc-chat .jc-admin-bar { margin-top: 8px; font-size: .85em; color: #555; }
.jc-chat .jc-admin-bar button { border: 1px solid #ccc; background: #fff; border-radius: 6px; padding: 2px 8px; cursor: pointer; margin: 0 6px; }
.jc-chat .jc-admin-hint { display: block; margin-top: 4px; color: #888; }

/* 관리자 쪽지 (2026-09) */
.jc-chat .jc-note-btn { border: 0; background: linear-gradient(135deg,#ff4d6d,#e11d48); border-radius: 999px; padding: 6px 14px; cursor: pointer; font-size: .9em; font-weight: 800; color: #fff; box-shadow: 0 2px 8px rgba(225,29,72,.45); animation: jc-note-pulse 2s ease-in-out infinite; }
@keyframes jc-note-pulse { 0%,100% { box-shadow: 0 2px 8px rgba(225,29,72,.45); transform: scale(1); } 50% { box-shadow: 0 0 0 6px rgba(225,29,72,.15), 0 2px 12px rgba(225,29,72,.6); transform: scale(1.05); } }
.jc-chat .jc-note-btn:hover { filter: brightness(1.08); animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .jc-chat .jc-note-btn { animation: none; } }
.jc-chat .jc-note, .jc-chat .jc-inbox { margin: 8px 0; padding: 10px 12px; border: 1px solid #cfe0ff; border-radius: 10px; background: #f5f9ff; }
.jc-chat .jc-note-desc { margin: 0 0 8px; font-size: .9em; color: #444; }
.jc-chat .jc-note textarea, .jc-chat .jc-note input[name=nf] { display: block; width: 100%; box-sizing: border-box; padding: 9px 11px; margin-bottom: 6px; border: 1px solid #ccc; border-radius: 8px; font-size: 1em; font-family: inherit; }
.jc-chat .jc-note-row { display: flex; align-items: center; gap: 10px; }
.jc-chat .jc-note-send { padding: 8px 14px; border: 0; border-radius: 8px; background: #1a73e8; color: #fff; cursor: pointer; }
.jc-chat .jc-note-msg { font-size: .88em; color: #555; }
.jc-chat .jc-note-privacy { margin: 6px 0 0; font-size: .78em; color: #888; }
.jc-chat .jc-inbox-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.jc-chat .jc-inbox-head button { border: 1px solid #ccc; background: #fff; border-radius: 6px; padding: 2px 8px; cursor: pointer; font-size: .8em; }
.jc-chat .jc-inbox-list { max-height: 320px; overflow-y: auto; }
.jc-chat .jc-inbox-item { padding: 8px 10px; margin-bottom: 6px; background: #fff; border: 1px solid #e3e3e3; border-radius: 8px; }
.jc-chat .jc-inbox-item.unread { border-color: #1a73e8; background: #f0f6ff; }
.jc-chat .jc-inbox-item .hd { font-size: .78em; color: #777; }
.jc-chat .jc-inbox-item .bd { margin: 4px 0; white-space: pre-wrap; word-break: break-word; }
.jc-chat .jc-inbox-item .ac button { border: 0; background: none; color: #b33; cursor: pointer; font-size: .8em; margin-right: 8px; padding: 0; }
.jc-chat .jc-unread { display: inline-block; min-width: 1.4em; padding: 0 5px; border-radius: 10px; background: #999; color: #fff; text-align: center; font-size: .85em; }
.jc-chat .jc-unread.on { background: #e53935; }

/* 채팅 말풍선 스킨 (2026-09) — 메신저 스타일 */
.jc-chat .jc-chat-list { background: #eef2f7; border: 1px solid #dfe5ee; padding: 12px 10px; }
.jc-chat .jc-msg { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 2px 6px; margin: 0 0 10px; padding: 0; background: none; border-radius: 0; }
.jc-chat .jc-msg .n { flex: 0 0 100%; order: -1; margin: 0 0 1px 6px; font-size: .76em; font-weight: 600; color: #667; }
.jc-chat .jc-msg .t { order: 1; max-width: 78%; padding: 8px 12px; background: #fff; border: 1px solid #e3e8ef; border-radius: 4px 16px 16px 16px; line-height: 1.5; box-shadow: 0 1px 1px rgba(0,0,0,.04); }
.jc-chat .jc-msg .tm { order: 2; margin: 0; font-size: .7em; color: #99a; }
.jc-chat .jc-msg .act { order: 3; margin: 0; font-size: .7em; }
.jc-chat .jc-msg.me { justify-content: flex-end; }
.jc-chat .jc-msg.me .n { display: none; }
.jc-chat .jc-msg.me .t { order: 2; background: #1a73e8; border-color: #1a73e8; color: #fff; border-radius: 16px 4px 16px 16px; }
.jc-chat .jc-msg.me .tm { order: 1; }
.jc-chat .jc-msg.me .act { order: 0; }
.jc-chat .jc-msg.adm .n { color: #c0392b; }
.jc-chat .jc-msg.adm .t { background: #fff1f0; border-color: #f3c9c4; }
.jc-chat .jc-msg.adm.me .t { color: #222; background: #fff1f0; border-color: #f3c9c4; }
.jc-chat .jc-msg.notice .t { background: #fff7d6; border-color: #f0d878; }
.jc-chat .jc-msg.rich .t { max-width: 100%; width: 100%; box-sizing: border-box; margin-top: 0; }
.jc-chat .jc-msg.rich.me .t { color: #222; background: #fff1f0; border-color: #f3c9c4; }
.jc-chat .jc-msg.sys { justify-content: center; }
.jc-chat .jc-msg.sys .t { max-width: 92%; background: rgba(26,115,232,.08); border: 0; box-shadow: none; color: #557; font-size: .82em; text-align: center; border-radius: 12px; }
.jc-chat .jc-chat-form { margin-top: 10px; }
.jc-chat .jc-chat-form input[name=m] { border-radius: 22px; padding: 11px 16px; }
.jc-chat .jc-chat-form button[type=submit] { border-radius: 22px; padding: 0 20px; }

/* 말풍선 스킨 보정: 이전 행 배경/패딩 규칙 무력화 */
.jc-chat .jc-msg.adm, .jc-chat .jc-msg.notice, .jc-chat .jc-msg.sys, .jc-chat .jc-msg.rich { background: none; padding: 0; border-radius: 0; }
.jc-chat .jc-msg.sys .t { background: rgba(26,115,232,.08); }
.jc-chat .jc-msg.notice .t { background: #fff7d6; }
.jc-chat .jc-msg.adm .t { background: #fff1f0; }
.jc-chat .jc-msg.rich .t { background: #fff; }
.jc-chat .jc-msg.rich.adm .t { background: #fff8f7; }

/* 채팅 헤더 모바일 보정 */
.jc-chat .jc-chat-head { flex-wrap: wrap; }
.jc-chat .jc-chat-head h2 { flex: 1 1 200px; min-width: 0; font-size: 1.1em; }
.jc-chat .jc-chat-tools { flex: none; }
.jc-chat .jc-chat-tools button { white-space: nowrap; }
@media (max-width: 480px) { .jc-chat .jc-chat-head h2 { flex-basis: 100%; } .jc-chat .jc-chat-list { height: 300px; } }

/* 접속 인원 표시 + 반응형 보정 (2026-09) */
.jc-chat .jc-online { flex: none; align-self: center; font-size: .82em; font-weight: 700; color: #1a7f37; background: #e9f7ee; border: 1px solid #bfe6cc; border-radius: 999px; padding: 3px 10px; white-space: nowrap; }
.jc-chat .jc-chat-head { align-items: center; }

@media (max-width: 900px) {
  .jc-chat .jc-chat-list { height: 300px; }
}
@media (max-width: 480px) {
  .jc-chat .jc-chat-head { gap: 6px 8px; }
  .jc-chat .jc-chat-head h2 { font-size: 1.05em; }
  .jc-chat .jc-chat-tools { flex-basis: 100%; justify-content: flex-end; order: 3; }
  .jc-chat .jc-online { order: 2; margin-left: auto; }
  .jc-chat .jc-chat-list { height: 280px; }
  .jc-chat .jc-msg .t { max-width: 86%; }
  .jc-chat .jc-chat-form input[name=m] { font-size: 16px; }   /* iOS 자동 확대 방지 */
  .jc-chat .jc-admin-hint { display: none; }                  /* 좁은 화면에서는 긴 안내문 숨김 */
  .jc-note-row { flex-wrap: wrap; }
}
@media (min-width: 1481px) {
  .jc-chat { margin-left: 8px; margin-right: 8px; }           /* 좌우 레일 광고와의 최소 간격 확보 */
}

.jc-chat .jc-log { margin: 8px 0; padding: 10px 12px; border: 1px solid #e3e3e3; border-radius: 10px; background: #fafafa; }
.jc-chat .jc-log-hint { font-size: .8em; color: #999; }
.jc-chat .jc-log-list { max-height: 320px; overflow-y: auto; }

/* 접속자 목록(우측 칸, 2026-09) */
.jc-chat .jc-chat-main { display: flex; gap: 10px; align-items: stretch; }
.jc-chat .jc-chat-main .jc-chat-list { flex: 1 1 auto; min-width: 0; }
.jc-chat .jc-members { flex: 0 0 150px; width: 150px; border: 1px solid #dfe5ee; border-radius: 10px; background: #fff; padding: 8px; height: 320px; overflow-y: auto; box-sizing: border-box; }
.jc-chat .jc-members-head { font-size: .78em; font-weight: 700; color: #667; margin-bottom: 6px; padding-bottom: 6px; border-bottom: 1px solid #eee; }
.jc-chat .jc-member { font-size: .85em; padding: 4px 2px; color: #333; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jc-chat .jc-member.adm { color: #c0392b; font-weight: 700; }
.jc-chat .jc-online { cursor: pointer; }

/* 좁은 화면: 우측 칸 대신 채팅 목록 "위"에 접속자 목록을 항상 표시(PC처럼 상시 노출) */
@media (max-width: 700px) {
  .jc-chat .jc-chat-main { flex-direction: column; }
  .jc-chat .jc-members { display: block; position: static; width: 100%; height: 130px; box-shadow: none; order: -1; }
}
@media (min-width: 701px) {
  .jc-chat .jc-members { display: block; }   /* 데스크톱에서는 항상 오른쪽 칸으로 상시 노출 */
}

/* 매니저/부매니저/스텝 역할 UI (2026-09) */
.jc-chat .jc-role-label { font-weight: 700; }
.jc-chat .jc-broadcast, .jc-chat .jc-welcome { margin: 8px 0; padding: 10px 12px; border: 1px solid #ffd9b3; border-radius: 10px; background: #fff8f0; }
.jc-chat .jc-broadcast textarea, .jc-chat .jc-welcome textarea { display: block; width: 100%; box-sizing: border-box; padding: 9px 11px; margin-bottom: 6px; border: 1px solid #ccc; border-radius: 8px; font-size: 1em; font-family: inherit; }
.jc-chat .jc-broadcast-send, .jc-chat .jc-welcome-send { padding: 8px 14px; border: 0; border-radius: 8px; background: #e07b1a; color: #fff; cursor: pointer; }
.jc-chat .jc-broadcast-msg, .jc-chat .jc-welcome-msg { font-size: .88em; color: #555; }
.jc-chat .jc-msg .n { }
.jc-chat .jc-member.adm { font-weight: 700; }
.jc-chat .jc-msg.sys .t { white-space: pre-wrap; text-align: left; max-width: 100%; }

/* 접속자 목록 - 본인 강조 (2026-09) */
.jc-chat .jc-member.me { background: #eef4ff; border-radius: 6px; font-weight: 700; color: #1a73e8; }
.jc-chat .jc-member.me.adm { color: #c0392b; }

/* 닉네임 변경 (2026-09) */
.jc-chat .jc-mynick { font-size: .82em; color: #667; margin: 6px 0 4px; }
.jc-chat .jc-mynick-btn { border: 1px solid #ccc; background: #fff; border-radius: 6px; padding: 2px 8px; font-size: .95em; cursor: pointer; margin-left: 4px; }
.jc-chat .jc-nickbox { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 4px 0 8px; }
.jc-chat .jc-nickbox input { flex: 1 1 160px; min-width: 0; padding: 8px 10px; border: 1px solid #ccc; border-radius: 8px; }
.jc-chat .jc-nickbox button { padding: 8px 12px; border: 0; border-radius: 8px; background: #1a73e8; color: #fff; cursor: pointer; }
.jc-chat .jc-nick-reset { background: #888 !important; }
.jc-chat .jc-nick-msg { font-size: .85em; color: #555; flex-basis: 100%; }
/* ── 채팅 좌우 광고 구간 + 광고문의(관리자에게 쪽지/메일) ── */
.jc-chat-flank { display: flex; gap: 14px; align-items: flex-start; margin-top: 32px; }
.jc-chat-flank-main { flex: 1 1 auto; min-width: 0; max-width: 640px; margin: 0 auto; order: 2; }
.jc-chat-ad { flex: 0 0 160px; width: 160px; position: sticky; top: 80px; box-sizing: border-box; }
.jc-chat-ad-l { order: 1; }
.jc-chat-ad-r { order: 3; }
@media (max-width: 980px) {
  .jc-chat-flank { flex-direction: column; }
  .jc-chat-ad { width: 100%; flex: none; position: static; top: auto; }
}
.jc-ad-inquiry { border: 1px dashed rgba(0,0,0,.15); border-radius: 8px; padding: 14px 10px; text-align: center; background: rgba(0,0,0,.02); box-sizing: border-box; }
.jc-ad-inquiry-label { font-weight: 700; font-size: .85em; color: #555; margin-bottom: 4px; }
.jc-ad-inquiry-desc { font-size: .78em; color: #8a95a8; margin-bottom: 8px; }
.jc-ad-inquiry-form { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; text-align: left; }
.jc-ad-inquiry-form textarea { width: 100%; box-sizing: border-box; padding: 6px; border: 1px solid #ccc; border-radius: 6px; font-size: .85em; resize: vertical; }
.jc-ad-inquiry-form input[type=text] { width: 100%; box-sizing: border-box; padding: 6px; border: 1px solid #ccc; border-radius: 6px; font-size: .85em; }
.jc-ad-inquiry-form input.jc-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.jc-ad-inquiry-send { padding: 6px 10px; border: 0; border-radius: 6px; background: #1a73e8; color: #fff; font-size: .85em; cursor: pointer; }
.jc-ad-inquiry-msg { font-size: .75em; color: #b33; min-height: 1.2em; }

/* ── 채팅 좌우 CPA 광고: PC = 좌2·우2 세로(160px 레일 그대로) / 모바일 = 채팅 아래 2개(2열) ── */
.jc-chat-ad-cpa { display: flex; flex-direction: column; gap: 12px; }
.jc-cpa-card { display: block; background: #fff; border: 1px solid #eef0f2; border-radius: 10px; overflow: hidden; text-decoration: none; color: #000; box-sizing: border-box; min-width: 0; }
.jc-cpa-thumb { display: block; position: relative; width: 100%; aspect-ratio: 1 / 1; background: #f1f5f9; overflow: hidden; }
.jc-cpa-thumb img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.jc-cpa-ad { position: absolute; top: 4px; left: 4px; font-style: normal; font-size: 10px; line-height: 1; padding: 2px 5px; border-radius: 3px; background: rgba(15,23,42,.6); color: #fff; }
.jc-cpa-body { display: block; padding: 8px 9px 9px; }
.jc-cpa-name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 13px; font-weight: 800; line-height: 1.3; margin: 0 0 3px; min-height: 2.6em; word-break: keep-all; }
.jc-cpa-desc { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 11.5px; line-height: 1.4; color: #64748b; word-break: keep-all; min-height: 2.8em; }
.jc-cpa-sale { display: block; font-style: normal; font-size: 13px; font-weight: 900; color: #e11d48; margin-top: 4px; }
@media (max-width: 980px) {
  .jc-chat-flank.has-cpa { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; align-items: stretch; }
  .jc-chat-flank.has-cpa .jc-chat-flank-main > .jc-chat { margin-bottom: 0; }
  .jc-chat-flank.has-cpa { margin-bottom: 32px; }
  .jc-chat-flank.has-cpa .jc-chat-flank-main { grid-column: 1 / -1; order: 1; max-width: none; width: 100%; margin: 0 0 6px; }
  .jc-chat-flank.has-cpa .jc-chat-ad:not(.jc-chat-ad-cpa) { grid-column: 1 / -1; }
  .jc-chat-flank.has-cpa .jc-chat-ad-l:not(.jc-chat-ad-cpa) { order: 2; }
  .jc-chat-flank.has-cpa .jc-chat-ad-r:not(.jc-chat-ad-cpa) { order: 3; }
  .jc-chat-flank.has-cpa .jc-chat-ad-cpa { display: contents; }
  .jc-chat-flank.has-cpa .jc-chat-ad-l .jc-cpa-card { order: 2; }
  .jc-chat-flank.has-cpa .jc-chat-ad-r .jc-cpa-card { order: 3; }
  .jc-cpa-card { border-radius: 8px; }
  .jc-cpa-ad { top: 3px; left: 3px; font-size: 9px; padding: 2px 4px; }
  .jc-cpa-body { padding: 5px 4px 6px; }
  .jc-cpa-name { font-size: 13px; line-height: 1.3; margin: 0; min-height: 0; -webkit-line-clamp: 2; }
  .jc-cpa-desc { display: none; }
  .jc-cpa-sale { font-size: 13px; margin-top: 2px; }
}

/* ── 채팅방 카페 커뮤니티 초대 배너(공지인사, 라우팅에 맞는 지역/대표카페 노출) ── */
.jc-chat-cafe-invite { margin: 10px 0; padding: 12px 14px; border-radius: 10px; background: #f3f7ff; border: 1px solid #d7e6ff; }
.jc-cafe-invite-title { font-weight: 700; font-size: .95em; margin-bottom: 4px; }
.jc-cafe-invite-desc { font-size: .85em; color: #555; margin: 0 0 8px; }
.jc-cafe-invite-links { display: flex; flex-wrap: wrap; gap: 8px; }
.jc-cafe-chip { display: inline-block; padding: 6px 12px; border-radius: 999px; font-size: .85em; text-decoration: none; background: #fff; border: 1px solid #b9d3ff; color: #1a73e8; }
.jc-cafe-chip-region { background: #1a73e8; color: #fff; border-color: #1a73e8; }
.jc-cafe-invite-note { font-size: .78em; color: #8a95a8; margin: 6px 0 0; }

/* 환영 인사(시스템 메시지) 접기/펼치기 — max-height 방식(줄바꿈/폭 상관없이 안정적으로 동작) */
.jc-chat .jc-welcome-more { display: block; margin: 4px auto 0; font-size: 12px; color: #1a73e8; background: none; border: none; cursor: pointer; padding: 0; text-align: center; }

/* 아이템 채팅 패널 (2026-09, 포팅 이식) */
/* 아이템 채팅 패널 (2026-09) */
.jc-chat .jc-chat-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.jc-chat .jc-chat-head h2 { margin: 0; }
.jc-chat .jc-chat-toggle { border: 1px solid #ccc; background: #fff; border-radius: 6px; padding: 4px 10px; cursor: pointer; font-size: .85em; }
.jc-chat .jc-chat-desc { margin: 8px 0; font-size: .92em; color: #555; }
.jc-chat .jc-chat-list { height: 320px; overflow-y: auto; border: 1px solid #ddd; border-radius: 10px; background: #fafafa; padding: 10px; }
.jc-chat .jc-chat-empty { color: #888; text-align: center; padding: 24px 0; font-size: .92em; }
.jc-chat .jc-msg { margin: 0 0 6px; line-height: 1.5; word-break: break-word; font-size: .95em; }
.jc-chat .jc-msg .n { font-weight: 700; margin-right: 6px; color: #444; }
.jc-chat .jc-msg.me .n { color: #1a73e8; }
.jc-chat .jc-msg .tm { margin-left: 6px; font-size: .75em; color: #999; }
.jc-chat .jc-msg .act { margin-left: 6px; border: 0; background: none; color: #b33; font-size: .75em; cursor: pointer; padding: 0; }
.jc-chat .jc-msg.sys { color: #666; background: #eef3ff; border-radius: 8px; padding: 8px 10px; font-size: .88em; }
.jc-chat .jc-chat-form { display: flex; gap: 6px; margin-top: 8px; }
.jc-chat .jc-chat-form input[name=m] { flex: 1; min-width: 0; padding: 10px 12px; border: 1px solid #ccc; border-radius: 8px; font-size: 1em; }
.jc-chat .jc-chat-form button { padding: 10px 16px; border: 0; border-radius: 8px; background: #1a73e8; color: #fff; cursor: pointer; font-size: 1em; }
.jc-chat .jc-chat-form button:disabled { opacity: .6; cursor: default; }
.jc-chat .jc-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.jc-chat .jc-chat-note { min-height: 1.2em; margin-top: 4px; font-size: .85em; color: #b33; }
.jc-chat .jc-chat-open { display: inline-block; margin-top: 6px; font-size: .9em; }
.jc-chat-link { margin: 10px 0; }

/* 채팅 관리자/공지/HTML (2026-09) */
.jc-chat [hidden] { display: none !important; }
.jc-chat .jc-chat-tools { display: flex; gap: 6px; }
.jc-chat .jc-admin-btn { border: 1px solid #ccc; background: #fff; border-radius: 6px; padding: 4px 10px; cursor: pointer; font-size: .85em; color: #555; }
.jc-chat .jc-chat-pin { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 8px 0; padding: 8px 12px; border-radius: 8px; background: #fff7d6; border: 1px solid #f0d878; font-size: .92em; white-space: pre-line; }
.jc-chat .jc-chat-pin button { border: 0; background: none; color: #b33; font-size: .8em; cursor: pointer; flex: none; }
.jc-chat .jc-admin-login { display: flex; gap: 6px; margin: 8px 0; }
.jc-chat .jc-admin-login input { flex: 1; min-width: 0; padding: 8px 10px; border: 1px solid #ccc; border-radius: 8px; }
.jc-chat .jc-admin-login button { padding: 8px 14px; border: 0; border-radius: 8px; background: #444; color: #fff; cursor: pointer; }
.jc-chat .jc-msg.adm { background: #fff1f0; border-radius: 8px; padding: 6px 10px; }
.jc-chat .jc-msg .n { }
.jc-chat .jc-msg.adm .n { color: #c0392b; }
.jc-chat .jc-msg.notice { background: #fff7d6; }
.jc-chat .jc-msg.rich .t { display: block; margin-top: 4px; }
.jc-chat .jc-msg.rich img { max-width: 100%; height: auto; }
.jc-chat .jc-msg.rich table { border-collapse: collapse; margin: 6px 0; font-size: .92em; }
.jc-chat .jc-msg.rich th, .jc-chat .jc-msg.rich td { border: 1px solid #ddd; padding: 4px 8px; }
.jc-chat .jc-msg.rich ol, .jc-chat .jc-msg.rich ul { margin: 6px 0 6px 1.2em; padding: 0; }
.jc-chat .jc-chat-form { flex-wrap: wrap; }
.jc-chat .jc-chat-form select { padding: 8px; border: 1px solid #ccc; border-radius: 8px; }
.jc-chat .jc-chat-form textarea { flex: 1 1 100%; min-width: 0; padding: 10px 12px; border: 1px solid #ccc; border-radius: 8px; font-size: 1em; font-family: inherit; }
.jc-chat .jc-admin-bar { margin-top: 8px; font-size: .85em; color: #555; }
.jc-chat .jc-admin-bar button { border: 1px solid #ccc; background: #fff; border-radius: 6px; padding: 2px 8px; cursor: pointer; margin: 0 6px; }
.jc-chat .jc-admin-hint { display: block; margin-top: 4px; color: #888; }

/* 관리자 쪽지 (2026-09) */
.jc-chat .jc-note-btn { border: 0; background: linear-gradient(135deg,#ff4d6d,#e11d48); border-radius: 999px; padding: 6px 14px; cursor: pointer; font-size: .9em; font-weight: 800; color: #fff; box-shadow: 0 2px 8px rgba(225,29,72,.45); animation: jc-note-pulse 2s ease-in-out infinite; }
.jc-chat .jc-note, .jc-chat .jc-inbox { margin: 8px 0; padding: 10px 12px; border: 1px solid #cfe0ff; border-radius: 10px; background: #f5f9ff; }
.jc-chat .jc-note-desc { margin: 0 0 8px; font-size: .9em; color: #444; }
.jc-chat .jc-note textarea, .jc-chat .jc-note input[name=nf] { display: block; width: 100%; box-sizing: border-box; padding: 9px 11px; margin-bottom: 6px; border: 1px solid #ccc; border-radius: 8px; font-size: 1em; font-family: inherit; }
.jc-chat .jc-note-row { display: flex; align-items: center; gap: 10px; }
.jc-chat .jc-note-send { padding: 8px 14px; border: 0; border-radius: 8px; background: #1a73e8; color: #fff; cursor: pointer; }
.jc-chat .jc-note-msg { font-size: .88em; color: #555; }
.jc-chat .jc-note-privacy { margin: 6px 0 0; font-size: .78em; color: #888; }
.jc-chat .jc-inbox-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.jc-chat .jc-inbox-head button { border: 1px solid #ccc; background: #fff; border-radius: 6px; padding: 2px 8px; cursor: pointer; font-size: .8em; }
.jc-chat .jc-inbox-list { max-height: 320px; overflow-y: auto; }
.jc-chat .jc-inbox-item { padding: 8px 10px; margin-bottom: 6px; background: #fff; border: 1px solid #e3e3e3; border-radius: 8px; }
.jc-chat .jc-inbox-item.unread { border-color: #1a73e8; background: #f0f6ff; }
.jc-chat .jc-inbox-item .hd { font-size: .78em; color: #777; }
.jc-chat .jc-inbox-item .bd { margin: 4px 0; white-space: pre-wrap; word-break: break-word; }
.jc-chat .jc-inbox-item .ac button { border: 0; background: none; color: #b33; cursor: pointer; font-size: .8em; margin-right: 8px; padding: 0; }
.jc-chat .jc-unread { display: inline-block; min-width: 1.4em; padding: 0 5px; border-radius: 10px; background: #999; color: #fff; text-align: center; font-size: .85em; }
.jc-chat .jc-unread.on { background: #e53935; }

/* 채팅 말풍선 스킨 (2026-09) — 메신저 스타일 */
.jc-chat .jc-chat-list { background: #eef2f7; border: 1px solid #dfe5ee; padding: 12px 10px; }
.jc-chat .jc-msg { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 2px 6px; margin: 0 0 10px; padding: 0; background: none; border-radius: 0; }
.jc-chat .jc-msg .n { flex: 0 0 100%; order: -1; margin: 0 0 1px 6px; font-size: .76em; font-weight: 600; color: #667; }
.jc-chat .jc-msg .t { order: 1; max-width: 78%; padding: 8px 12px; background: #fff; border: 1px solid #e3e8ef; border-radius: 4px 16px 16px 16px; line-height: 1.5; box-shadow: 0 1px 1px rgba(0,0,0,.04); }
.jc-chat .jc-msg .tm { order: 2; margin: 0; font-size: .7em; color: #99a; }
.jc-chat .jc-msg .act { order: 3; margin: 0; font-size: .7em; }
.jc-chat .jc-msg.me { justify-content: flex-end; }
.jc-chat .jc-msg.me .n { display: none; }
.jc-chat .jc-msg.me .t { order: 2; background: #1a73e8; border-color: #1a73e8; color: #fff; border-radius: 16px 4px 16px 16px; }
.jc-chat .jc-msg.me .tm { order: 1; }
.jc-chat .jc-msg.me .act { order: 0; }
.jc-chat .jc-msg.adm .n { color: #c0392b; }
.jc-chat .jc-msg.adm .t { background: #fff1f0; border-color: #f3c9c4; }
.jc-chat .jc-msg.adm.me .t { color: #222; background: #fff1f0; border-color: #f3c9c4; }
.jc-chat .jc-msg.notice .t { background: #fff7d6; border-color: #f0d878; }
.jc-chat .jc-msg.rich .t { max-width: 100%; width: 100%; box-sizing: border-box; margin-top: 0; }
.jc-chat .jc-msg.rich.me .t { color: #222; background: #fff1f0; border-color: #f3c9c4; }
.jc-chat .jc-msg.sys { justify-content: center; }
.jc-chat .jc-msg.sys .t { max-width: 92%; background: rgba(26,115,232,.08); border: 0; box-shadow: none; color: #557; font-size: .82em; text-align: center; border-radius: 12px; }
.jc-chat .jc-chat-form { margin-top: 10px; }
.jc-chat .jc-chat-form input[name=m] { border-radius: 22px; padding: 11px 16px; }
.jc-chat .jc-chat-form button[type=submit] { border-radius: 22px; padding: 0 20px; }

/* 말풍선 스킨 보정: 이전 행 배경/패딩 규칙 무력화 */
.jc-chat .jc-msg.adm, .jc-chat .jc-msg.notice, .jc-chat .jc-msg.sys, .jc-chat .jc-msg.rich { background: none; padding: 0; border-radius: 0; }
.jc-chat .jc-msg.sys .t { background: rgba(26,115,232,.08); }
.jc-chat .jc-msg.notice .t { background: #fff7d6; }
.jc-chat .jc-msg.adm .t { background: #fff1f0; }
.jc-chat .jc-msg.rich .t { background: #fff; }
.jc-chat .jc-msg.rich.adm .t { background: #fff8f7; }

/* 채팅 헤더 모바일 보정 */
.jc-chat .jc-chat-head { flex-wrap: wrap; }
.jc-chat .jc-chat-head h2 { flex: 1 1 200px; min-width: 0; font-size: 1.1em; }
.jc-chat .jc-chat-tools { flex: none; }
.jc-chat .jc-chat-tools button { white-space: nowrap; }
@media (max-width: 480px) { .jc-chat .jc-chat-head h2 { flex-basis: 100%; } .jc-chat .jc-chat-list { height: 300px; } }

/* 접속 인원 표시 + 반응형 보정 (2026-09) */
.jc-chat .jc-online { flex: none; align-self: center; font-size: .82em; font-weight: 700; color: #1a7f37; background: #e9f7ee; border: 1px solid #bfe6cc; border-radius: 999px; padding: 3px 10px; white-space: nowrap; }
.jc-chat .jc-chat-head { align-items: center; }

@media (max-width: 900px) {
  .jc-chat .jc-chat-list { height: 300px; }
}
@media (max-width: 480px) {
  .jc-chat .jc-chat-head { gap: 6px 8px; }
  .jc-chat .jc-chat-head h2 { font-size: 1.05em; }
  .jc-chat .jc-chat-tools { flex-basis: 100%; justify-content: flex-end; order: 3; }
  .jc-chat .jc-online { order: 2; margin-left: auto; }
  .jc-chat .jc-chat-list { height: 280px; }
  .jc-chat .jc-msg .t { max-width: 86%; }
  .jc-chat .jc-chat-form input[name=m] { font-size: 16px; }   /* iOS 자동 확대 방지 */
  .jc-chat .jc-admin-hint { display: none; }                  /* 좁은 화면에서는 긴 안내문 숨김 */
  .jc-note-row { flex-wrap: wrap; }
}
@media (min-width: 1481px) {
  .jc-chat { margin-left: 8px; margin-right: 8px; }           /* 좌우 레일 광고와의 최소 간격 확보 */
}

.jc-chat .jc-log { margin: 8px 0; padding: 10px 12px; border: 1px solid #e3e3e3; border-radius: 10px; background: #fafafa; }
.jc-chat .jc-log-hint { font-size: .8em; color: #999; }
.jc-chat .jc-log-list { max-height: 320px; overflow-y: auto; }

/* 접속자 목록(우측 칸, 2026-09) */
.jc-chat .jc-chat-main { display: flex; gap: 10px; align-items: stretch; }
.jc-chat .jc-chat-main .jc-chat-list { flex: 1 1 auto; min-width: 0; }
.jc-chat .jc-members { flex: 0 0 150px; width: 150px; border: 1px solid #dfe5ee; border-radius: 10px; background: #fff; padding: 8px; height: 320px; overflow-y: auto; box-sizing: border-box; }
.jc-chat .jc-members-head { font-size: .78em; font-weight: 700; color: #667; margin-bottom: 6px; padding-bottom: 6px; border-bottom: 1px solid #eee; }
.jc-chat .jc-member { font-size: .85em; padding: 4px 2px; color: #333; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jc-chat .jc-member.adm { color: #c0392b; font-weight: 700; }
.jc-chat .jc-online { cursor: pointer; }

/* 좁은 화면: 우측 칸 대신 채팅 목록 "위"에 접속자 목록을 항상 표시(PC처럼 상시 노출) */
@media (max-width: 700px) {
  .jc-chat .jc-chat-main { flex-direction: column; }
  .jc-chat .jc-members { display: block; position: static; width: 100%; height: 130px; box-shadow: none; order: -1; }
}
@media (min-width: 701px) {
  .jc-chat .jc-members { display: block; }   /* 데스크톱에서는 항상 오른쪽 칸으로 상시 노출 */
}

/* 매니저/부매니저/스텝 역할 UI (2026-09) */
.jc-chat .jc-role-label { font-weight: 700; }
.jc-chat .jc-broadcast, .jc-chat .jc-welcome { margin: 8px 0; padding: 10px 12px; border: 1px solid #ffd9b3; border-radius: 10px; background: #fff8f0; }
.jc-chat .jc-broadcast textarea, .jc-chat .jc-welcome textarea { display: block; width: 100%; box-sizing: border-box; padding: 9px 11px; margin-bottom: 6px; border: 1px solid #ccc; border-radius: 8px; font-size: 1em; font-family: inherit; }
.jc-chat .jc-broadcast-send, .jc-chat .jc-welcome-send { padding: 8px 14px; border: 0; border-radius: 8px; background: #e07b1a; color: #fff; cursor: pointer; }
.jc-chat .jc-broadcast-msg, .jc-chat .jc-welcome-msg { font-size: .88em; color: #555; }
.jc-chat .jc-msg .n { }
.jc-chat .jc-member.adm { font-weight: 700; }
.jc-chat .jc-msg.sys .t { white-space: pre-wrap; text-align: left; max-width: 100%; }

/* 접속자 목록 - 본인 강조 (2026-09) */
.jc-chat .jc-member.me { background: #eef4ff; border-radius: 6px; font-weight: 700; color: #1a73e8; }
.jc-chat .jc-member.me.adm { color: #c0392b; }

/* 닉네임 변경 (2026-09) */
.jc-chat .jc-mynick { font-size: .82em; color: #667; margin: 6px 0 4px; }
.jc-chat .jc-mynick-btn { border: 1px solid #ccc; background: #fff; border-radius: 6px; padding: 2px 8px; font-size: .95em; cursor: pointer; margin-left: 4px; }
.jc-chat .jc-nickbox { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 4px 0 8px; }
.jc-chat .jc-nickbox input { flex: 1 1 160px; min-width: 0; padding: 8px 10px; border: 1px solid #ccc; border-radius: 8px; }
.jc-chat .jc-nickbox button { padding: 8px 12px; border: 0; border-radius: 8px; background: #1a73e8; color: #fff; cursor: pointer; }
.jc-chat .jc-nick-reset { background: #888 !important; }
.jc-chat .jc-nick-msg { font-size: .85em; color: #555; flex-basis: 100%; }
/* 채팅 좌우 광고문의 배너 + 소통카페 안내 (2026-09 추가) */
.jc-chat .jc-chat-shell { display: flex; align-items: stretch; gap: 10px; width: 100%; box-sizing: border-box; }
.jc-chat .jc-chat-shell .jc-chat-core { flex: 1 1 auto; min-width: 0; }
.jc-chat .jc-chat-adbox { flex: 0 0 100px; max-width: 100px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; border: 1px dashed #ccc; border-radius: 10px; background: #fafafa; padding: 8px 4px; text-align: center; box-sizing: border-box; overflow: hidden; }
.jc-chat .jc-chat-adbox .jc-ad-label { font-size: .68em; letter-spacing: .08em; color: #aaa; }
.jc-chat .jc-chat-adbox .jc-ad-inquiry { display: flex; flex-direction: column; align-items: center; gap: 2px; width: 100%; border: 1px solid #1a73e8; background: #fff; color: #1a73e8; border-radius: 8px; padding: 8px 4px; font-size: .8em; line-height: 1.3; cursor: pointer; box-sizing: border-box; word-break: keep-all; }
.jc-chat .jc-chat-adbox .jc-ad-inquiry:hover { background: #1a73e8; color: #fff; }
.jc-chat .jc-chat-adbox .jc-ad-icon { font-size: 1.15em; }
/* 모바일에서도 광고문의는 사라지지 않고 아이콘 중심의 슬림 배너로 계속 노출됨(완전 숨김 금지) */
@media (max-width: 860px) {
  .jc-chat .jc-chat-adbox { flex-basis: 60px; max-width: 60px; padding: 6px 2px; }
  .jc-chat .jc-chat-adbox .jc-ad-text { font-size: .85em; }
}
@media (max-width: 480px) {
  .jc-chat .jc-chat-adbox { flex-basis: 40px; max-width: 40px; gap: 4px; }
  .jc-chat .jc-chat-adbox .jc-ad-label { display: none; }
  .jc-chat .jc-chat-adbox .jc-ad-text { display: none; }
  .jc-chat .jc-chat-adbox .jc-ad-icon { font-size: 1.3em; }
}
.jc-chat .jc-cafe-invite { margin: 8px 0; padding: 9px 12px; border: 1px solid #d8ecd9; border-radius: 10px; background: #f3fbf4; font-size: .87em; line-height: 1.6; overflow-wrap: break-word; }
.jc-chat .jc-cafe-invite a { color: #1a7a2e; font-weight: 700; text-decoration: none; }
.jc-chat .jc-cafe-invite a:hover { text-decoration: underline; }
.jc-chat .jc-cafe-invite-more { color: #667; font-size: .95em; }
/* 접었을 때(3줄 요약) 텍스트가 어색하게 뚝 끊기지 않도록 말줄임표 처리 + 줄바꿈 보정 */
.jc-chat .jc-msg.sys .t { overflow-wrap: break-word; word-break: keep-all; }
.jc-chat .jc-msg.sys .t[style*="webkit-box"] { text-overflow: ellipsis; }
@media (max-width: 480px) {
  .jc-chat .jc-msg .t { max-width: 88%; }
  .jc-chat .jc-msg.sys .t { max-width: 96%; }
}

/* 쿠팡 파트너스 위젯(ads-slot) 위아래 여백 — item/지역(시도·시군구·동읍면리) 페이지 공통 (2026-09-28) */
.ads-slot{ width:100%; margin:36px 0 40px; }
.ads-slot-toc{ margin-top:36px; margin-bottom:40px; }
@media (max-width:700px){
  .ads-slot{ margin:28px 0 32px; }
  .ads-slot-toc{ margin-top:28px; margin-bottom:32px; }
}
/* page-head center */
.page-head{ padding:10px 0 2px; text-align:center; }
.page-head h1{ font-size:clamp(20px,3.4vw,28px); line-height:1.35; margin-bottom:8px; }
.page-head .page-lead{ color:var(--muted); font-size:14px; line-height:1.65; max-width:760px; margin:0 auto 6px; }
.page-head .crumb{ text-align:center; }