/* =======================================================
   강남 하퍼 통합 스타일시트 (모바일 전용 · max-width 540)
   - 모든 페이지가 이 파일 하나만 사용합니다. (중복 CSS 금지)
   - 플랫 디자인 / 솔리드 컬러 / 그라데이션·호버·클릭 효과 없음
   - 폰트 크기는 아래 5단계 스케일만 사용 (통일감 유지)
   ======================================================= */

:root{
  --bg:#0E0E11;
  --surface:#16161A;
  --surface-2:#1E1E24;
  --line:#2A2A31;
  --text:#F3F3F5;
  --text-2:#D9D9DE;
  --muted:#9C9CA6;
  --accent:#C9A24B;
  --accent-2:#E0BD63;
  --accent-soft:rgba(201,162,75,.12);
  --green:#22C55E;
  --green-soft:rgba(34,197,94,.15);
  --radius:14px;
  --maxw:540px;

  /* 폰트 크기 스케일 (이 5개만 사용) */
  --fs-h1:28px;   /* 페이지 제목 · 큰 숫자 */
  --fs-h2:20px;   /* 섹션 제목 · 강조 라인 */
  --fs-h3:17px;   /* 소제목 · 버튼 · 카드 헤더 */
  --fs-body:15px; /* 본문 */
  --fs-sm:15px;   /* 보조 텍스트 · 라벨 (최소 15px) */
}

*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}

body{
  background:#070708;
  color:var(--text);
  font-family:"Pretendard","Pretendard Variable",-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Noto Sans KR","Malgun Gothic",sans-serif;
  font-size:var(--fs-body);
  line-height:1.65;
  letter-spacing:-.01em;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}

/* ===== 레이아웃 ===== */
.container{
  max-width:var(--maxw);
  margin:0 auto;
  min-height:100vh;
  background:var(--bg);
  padding-bottom:98px;
  position:relative;
}

/* ===== 헤더 ===== */
.site-header{
  position:sticky;top:0;z-index:20;
  display:flex;align-items:center;justify-content:space-between;
  padding:15px 18px;
  background:var(--bg);
  border-bottom:1px solid var(--line);
}
.brand{display:flex;align-items:baseline;gap:8px;}
.brand-name{font-size:var(--fs-h3);font-weight:800;color:var(--accent);letter-spacing:.02em;}
.brand-sub{font-size:var(--fs-sm);font-weight:600;color:var(--muted);}
.nav{display:flex;gap:16px;}
.nav a{font-size:var(--fs-sm);font-weight:600;color:var(--muted);}
.nav a:focus-visible{color:var(--text);outline:2px solid var(--accent);outline-offset:3px;border-radius:4px;}

/* ===== 메인 / 섹션 ===== */
main{padding:0 18px;}
.sec{padding:26px 0;border-bottom:1px solid var(--line);}
.sec:last-child{border-bottom:none;}

/* ===== 타이포 (5단계 스케일) ===== */
h1{font-size:var(--fs-h1);font-weight:900;line-height:1.25;letter-spacing:-.01em;margin-bottom:12px;}
h2{
  font-size:var(--fs-h2);font-weight:800;line-height:1.3;margin-bottom:14px;
  padding-left:12px;border-left:3px solid var(--accent);
}
h3{font-size:var(--fs-h3);font-weight:700;color:var(--accent-2);margin:18px 0 10px;}
.ch{font-size:var(--fs-body);font-weight:700;color:var(--text);margin:14px 0 6px;}
p{font-size:var(--fs-body);color:var(--text-2);margin-bottom:10px;}
p:last-child{margin-bottom:0;}

.muted{font-size:var(--fs-sm);color:var(--muted);}
.note{font-size:var(--fs-sm);font-weight:600;color:var(--accent-2);margin-top:12px;}

/* ===== 픽업·발렛 서비스 강조 ===== */
.svc-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:18px;}
.svc-item{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:22px 14px;}
.svc-ico{display:flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:50%;background:var(--accent-soft);}
.svc-ico svg{flex:0 0 auto;width:26px;height:26px;color:var(--accent-2);}
.svc-item b{font-size:var(--fs-body);font-weight:700;color:var(--text);line-height:1.3;}
.svc-item span{font-size:var(--fs-sm);color:var(--muted);line-height:1.35;}

/* 제목 아래 골드 액센트 라인 */
.accent-rule{width:46px;height:3px;background:var(--accent);border-radius:2px;margin:0 0 16px;}

/* ===== 히어로 (센터 정렬) ===== */
.hero{text-align:center;padding:30px 0 28px;border-bottom:1px solid var(--line);}
.hero .accent-rule{margin-left:auto;margin-right:auto;}

/* ===== 이미지 (추가 가능 · 비어 있으면 자동 숨김) ===== */
.media{margin:0 0 18px;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--surface);}
.media img{display:block;width:100%;height:auto;}
.media.cover img{aspect-ratio:16/9;object-fit:cover;}
.media.tall img{aspect-ratio:4/3;object-fit:cover;}
.sec .media{margin-top:4px;}

/* ===== 히어로 배너 (자동 슬라이드 + 스와이프 + 점) ===== */
.banner{margin:0;}
.banner-viewport{
  position:relative;
  overflow:hidden;border:1px solid var(--line);border-radius:var(--radius);
  background:var(--surface);touch-action:pan-y;
  user-select:none;-webkit-user-select:none;
}
.banner-track{display:flex;width:100%;}
.banner-slide{flex:0 0 100%;margin:0;aspect-ratio:16/9;background:var(--surface);}
.banner-slide img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none;}
.banner-dots{
  position:absolute;left:50%;bottom:10px;transform:translateX(-50%);z-index:2;
  display:flex;align-items:center;gap:2px;
  padding:4px 8px;border-radius:999px;background:rgba(0,0,0,.35);
}
.banner-dots button{
  width:24px;height:24px;padding:0;border:none;cursor:pointer;background:transparent;
  display:flex;align-items:center;justify-content:center;
}
.banner-dots button::before{
  content:"";display:block;width:7px;height:7px;border-radius:999px;
  background:rgba(255,255,255,.6);transition:width .15s ease;
}
.banner-dots button.active::before{background:var(--accent-2);width:18px;}

/* ===== 카드 (공통 재사용) ===== */
.card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:18px;
  margin-bottom:14px;
}
.card:last-child{margin-bottom:0;}
.ch:first-child{margin-top:0;}

/* ===== 버튼 (정적 · 효과 없음) ===== */
.btn-line{
  display:block;text-align:center;
  background:var(--accent);color:#11110A;
  font-size:var(--fs-h3);font-weight:800;
  padding:15px 16px;border-radius:12px;margin-top:14px;
}
.btn-line:focus-visible{outline:2px solid var(--accent-2);outline-offset:3px;}

/* ===== 전화문의 텍스트 (번호 탭하면 연결) ===== */
.tel-line{text-align:center;margin-top:18px;}
.tel-line span{display:block;font-size:var(--fs-sm);font-weight:700;color:var(--muted);letter-spacing:.02em;margin-bottom:5px;}
.tel-line a{display:inline-block;font-size:var(--fs-h1);font-weight:900;color:var(--accent-2);letter-spacing:.01em;}
.tel-line a:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px;}

/* ===== 0부 할인 이벤트 카드 ===== */
.event-card{
  text-align:center;
  background:var(--green-soft);
  border-radius:var(--radius);
  padding:20px 16px;
  margin-bottom:14px;
}
.event-badge{
  display:inline-block;margin-bottom:12px;
  font-size:var(--fs-sm);font-weight:800;letter-spacing:.04em;
  color:#08240F;background:var(--green);
  border-radius:999px;padding:5px 13px;
}
.event-amount{font-size:var(--fs-h2);font-weight:900;color:var(--text);margin:0 0 12px;line-height:1.3;}
.event-times{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;}
.event-slot{
  font-size:var(--fs-sm);font-weight:700;color:var(--text);
  background:var(--bg);border:1px solid var(--line);
  border-radius:10px;padding:8px 13px;
}

/* ===== 영업시간 카드 ===== */
.hours-card{text-align:center;}
.hours-big{font-size:var(--fs-h1);font-weight:900;color:var(--accent-2);margin:0 0 14px;letter-spacing:-.01em;}
.hours-days{display:flex;justify-content:center;gap:6px;flex-wrap:wrap;}
.hours-days span{
  width:34px;height:34px;display:flex;align-items:center;justify-content:center;
  font-size:var(--fs-sm);font-weight:700;color:var(--text-2);
  background:var(--bg);border:1px solid var(--line);border-radius:8px;
}

/* ===== 가격표 (1부·2부 가로 2열 비교) ===== */
.price-cols{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.price-col{
  background:var(--surface);border:1px solid var(--line);
  border-radius:16px;overflow:hidden;
}
.pc-head{
  text-align:center;background:var(--accent-soft);
  border-bottom:1px solid var(--line);padding:14px 10px;
}
.pc-part{display:block;font-size:var(--fs-h3);font-weight:900;color:var(--accent-2);letter-spacing:.02em;}
.pc-time{display:block;font-size:var(--fs-sm);color:var(--muted);margin-top:4px;}

.pc-tier{padding:16px 12px;border-bottom:1px solid var(--line);text-align:center;}
.pc-tier:last-child{border-bottom:none;}
.pc-people{
  display:inline-block;font-size:var(--fs-sm);font-weight:700;color:var(--accent-2);
  background:var(--accent-soft);border-radius:999px;padding:4px 13px;margin-bottom:11px;
}
.pc-total{font-size:var(--fs-sm);font-weight:700;color:var(--muted);line-height:1.1;margin-bottom:3px;}
.pc-total b{font-size:var(--fs-h1);font-weight:900;color:var(--text);letter-spacing:-.02em;margin:0 3px;}
.pc-each{font-size:var(--fs-sm);font-weight:700;color:var(--accent-2);margin-bottom:12px;}
.pc-detail{list-style:none;margin:0;padding:10px 12px;background:var(--bg);border:1px solid var(--line);border-radius:10px;}
.pc-detail li{display:flex;justify-content:space-between;align-items:center;font-size:var(--fs-sm);color:var(--muted);padding:3px 0;}
.pc-detail li span:last-child{color:var(--text-2);font-weight:600;}

/* ===== FAQ (열고 닫기 · 네이티브 details) ===== */
.faq-item{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:0 18px;
  margin-bottom:10px;
}
.faq-item:last-child{margin-bottom:0;}
.faq-item summary{
  list-style:none;cursor:pointer;
  font-size:var(--fs-h3);font-weight:700;color:var(--text);
  padding:16px 28px 16px 0;
  position:relative;
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{
  content:"+";
  position:absolute;right:0;top:50%;transform:translateY(-50%);
  color:var(--accent);font-size:var(--fs-h2);font-weight:700;line-height:1;
}
.faq-item[open] summary::after{content:"\2212";}
.faq-item summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px;}
.faq-item p{font-size:var(--fs-body);color:var(--muted);padding:0 0 16px;margin:0;}

/* ===== 후기 (추후 재사용) ===== */
.review-top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px;}
.review-name{font-size:var(--fs-sm);font-weight:700;color:var(--text);}
.review-date{font-size:var(--fs-sm);color:var(--muted);}
.review-body{font-size:var(--fs-body);color:var(--text-2);margin:0;}
.pager{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:20px;}
.pager a{
  background:var(--surface-2);border:1px solid var(--line);color:var(--text);
  font-size:var(--fs-sm);font-weight:700;padding:10px 18px;border-radius:10px;
}
.pager a:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.pager .now{font-size:var(--fs-sm);font-weight:600;color:var(--muted);}

/* ===== 블로그 목록 ===== */
.blog-card{padding:14px;display:flex;gap:13px;align-items:flex-start;}
.blog-thumb{flex:0 0 100px;width:100px;aspect-ratio:1/1;border-radius:10px;overflow:hidden;background:var(--bg);}
.blog-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.blog-body{flex:1;min-width:0;}
.blog-date{display:block;font-size:var(--fs-sm);font-weight:600;letter-spacing:.02em;color:var(--accent-2);margin-bottom:4px;}
.blog-card h2{border-left:none;font-size:var(--fs-h3);color:var(--text);margin:0 0 6px;padding:0;}
.blog-card p{font-size:var(--fs-sm);color:var(--muted);margin:0;padding:0;}

/* ===== 블로그 글(상세) ===== */
.crumbs{font-size:var(--fs-sm);color:var(--muted);margin-bottom:16px;}
.crumbs a{color:var(--accent-2);}
.crumbs span{margin:0 7px;color:var(--line);}
.post-date{display:block;font-size:var(--fs-sm);font-weight:600;letter-spacing:.02em;color:var(--accent-2);margin-bottom:18px;}
.cmp{width:100%;border-collapse:collapse;margin:6px 0 4px;font-size:var(--fs-sm);}
.cmp th,.cmp td{border:1px solid var(--line);padding:10px 11px;text-align:left;vertical-align:top;}
.cmp thead th{text-align:center;color:#11110A;background:var(--accent);font-weight:800;}
.cmp tbody th{background:var(--bg);color:var(--text);font-weight:700;white-space:nowrap;}
.cmp td{color:var(--text-2);}

/* ===== 푸터 ===== */
.site-footer{padding:26px 18px 30px;border-top:1px solid var(--line);text-align:center;}
.site-footer p{font-size:var(--fs-sm);color:var(--muted);margin-bottom:4px;}
.foot-title{font-size:var(--fs-body);font-weight:800;color:var(--accent);margin-bottom:8px;}
.foot-copy{margin-top:12px;font-size:var(--fs-sm);color:#6A6A72;}
.foot-legal{margin:16px auto 4px;padding-top:14px;border-top:1px solid var(--line);max-width:430px;font-size:var(--fs-sm);color:#6A6A72;line-height:1.6;}

/* ===== 하단 고정 전화예약 버튼 ===== */
.call-fixed{
  position:fixed;left:50%;bottom:0;transform:translateX(-50%);
  width:100%;max-width:var(--maxw);z-index:50;
  display:flex;align-items:center;justify-content:center;gap:10px;
  background:var(--accent);color:#11110A;
  font-size:var(--fs-h3);font-weight:800;
  padding:17px 16px;
  padding-bottom:calc(17px + env(safe-area-inset-bottom));
  border-top:1px solid var(--accent-2);
  box-shadow:0 -6px 18px rgba(0,0,0,.45);
}
.call-fixed .ico{display:block;flex:0 0 auto;}
.call-fixed:focus-visible{outline:2px solid var(--accent-2);outline-offset:-4px;}