/* =============================================================================
   AiBnH 시험·시연 사이트 화면 (v0.1.68, v0.1.69 운영 홈페이지 모양) — 디자이너 수정 영역
   가상 골프장 "데모빌 컨트리클럽". 색·글꼴은 맨 위 변수(--ts-...)만 바꾸면 전체에 반영됩니다.
   구형 브라우저(IE11·안드로이드 4.4 기본 브라우저)도 보이도록 변수 없이도 읽히는 기본값을 먼저 적었습니다.
   반응형: 900px 이하 카드 2열·메뉴 접기, 600px 이하 1열·표 가로 밀기, 입력칸 16px(아이폰 확대 방지)
   ============================================================================= */
:root {
  --ts-brand: #0f6e5b;      /* 데모빌 주색 (초록) */
  --ts-brand-dark: #0a4f41;
  --ts-accent: #e8a33d;     /* 강조 (오픈 전·이벤트) */
  --ts-danger: #c23b3b;
  --ts-bg: #f5f7f6;
  --ts-card: #ffffff;
  --ts-text: #1d2724;
  --ts-muted: #5d6b67;
  --ts-line: #d9e1de;
  --ts-radius: 10px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: #f5f7f6; background: var(--ts-bg); color: #1d2724; color: var(--ts-text);
  font-family: "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", sans-serif;
  font-size: 16px; line-height: 1.6;
}
a { color: #0f6e5b; color: var(--ts-brand); }
img { max-width: 100%; height: auto; border: 0; }
code { background: #eef2f0; padding: 1px 5px; border-radius: 4px; }

.ts-wrap { max-width: 1160px; margin: 0 auto; padding: 0 20px; }

/* 맨 위 작은 줄 (문의 전화·로그인) */
.ts-topbar { background: #0a4f41; color: #cfe6de; font-size: 13px; }
.ts-topbar-in { display: flex; justify-content: space-between; align-items: center; min-height: 34px; flex-wrap: wrap; }
.ts-topbar a, .ts-topbar .ts-link { color: #fff; text-decoration: none; margin-left: 14px; font-size: 13px; }
.ts-demo-tag { background: #e8a33d; color: #2b1d05 !important; border-radius: 20px; padding: 1px 10px; }
.ts-inline { display: inline; margin: 0; }
.ts-link { background: none; border: 0; cursor: pointer; font: inherit; padding: 0; }

/* 머리 */
.ts-header { background: #fff; border-bottom: 1px solid #d9e1de; position: relative; }
.ts-header-in { display: flex; align-items: center; justify-content: space-between; min-height: 72px; flex-wrap: wrap; }
.ts-logo { display: flex; align-items: center; text-decoration: none; color: #0a4f41; font-size: 20px; }
.ts-logo img { margin-right: 10px; }
.ts-logo span { line-height: 1.15; }
.ts-logo b { font-weight: 800; }
.ts-logo small { display: block; font-size: 10px; letter-spacing: .14em; color: #5d6b67; }
.ts-logo-sm { font-size: 16px; }
.ts-nav { display: flex; align-items: center; flex-wrap: wrap; }
.ts-nav a { margin-left: 26px; text-decoration: none; color: #1d2724; font-size: 16px; font-weight: 600; padding: 24px 0 22px; border-bottom: 3px solid transparent; }
.ts-nav a:hover, .ts-nav a.ts-on { color: #0f6e5b; border-bottom-color: #0f6e5b; }
.ts-menu-btn { display: none; background: none; border: 0; padding: 10px; cursor: pointer; }
.ts-menu-btn span { display: block; width: 24px; height: 3px; background: #0a4f41; margin: 4px 0; border-radius: 2px; }
.ts-menu-btn em { position: absolute; left: -9999px; }

.ts-main { padding-top: 24px; padding-bottom: 56px; min-height: 60vh; }
.ts-page-home .ts-main { padding-top: 0; }

/* 바닥 */
.ts-footer { background: #1f2a27; color: #a9b8b3; font-size: 13px; padding: 28px 0 22px; }
.ts-footer .ts-logo { color: #fff; }
.ts-footer-top { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.ts-footer-links a { color: #dfe8e4; text-decoration: none; margin-left: 16px; }
.ts-footer p { margin: 6px 0; }
.ts-copy { color: #7d8c87; }
.ts-demo-note { color: #7d8c87; font-size: 11px; margin-top: 14px !important; }

/* 글자 */
.ts-h1 { font-size: 28px; margin: 8px 0 12px; line-height: 1.35; }
.ts-h2 { font-size: 20px; margin: 28px 0 12px; }
.ts-sec { margin-top: 40px; }
.ts-sub, .ts-help, .ts-crumb { color: #5d6b67; }
.ts-help { font-size: 14px; }
.ts-crumb { font-size: 13px; margin: 0 0 6px; }
.ts-crumb a { color: #5d6b67; text-decoration: none; }
.ts-more { float: right; font-size: 14px; font-weight: 400; text-decoration: none; }

/* 단추 */
.ts-btn { display: inline-block; background: #0f6e5b; background: var(--ts-brand); color: #fff; border: 0; border-radius: 8px; padding: 10px 18px;
  font-size: 16px; font-weight: 700; text-decoration: none; cursor: pointer; text-align: center; }
.ts-btn:hover { background: #0a4f41; background: var(--ts-brand-dark); }
.ts-btn[disabled] { background: #9aa6a2; cursor: not-allowed; }
.ts-btn-sm { padding: 5px 12px; font-size: 14px; }
.ts-btn-lg { display: block; width: 100%; padding: 14px; font-size: 18px; margin-top: 16px; }
.ts-btn-line { background: #fff; color: #0f6e5b; border: 1px solid #0f6e5b; }
.ts-btn-line:hover { background: #eef6f3; }
.ts-btn-danger { background: #c23b3b; }
.ts-btn-danger:hover { background: #962b2b; }
.ts-btn-hero { background: #e8a33d; color: #2b1d05; padding: 13px 26px; font-size: 17px; }
.ts-btn-hero:hover { background: #d48f27; }
.ts-btn-ghost { background: transparent; border: 2px solid #fff; padding: 11px 22px; margin-left: 8px; }
.ts-btn-ghost:hover { background: rgba(255,255,255,.15); }
.ts-btns .ts-btn { margin: 4px 4px 0 0; }

/* 안내 줄 */
.ts-flash { background: #e6f4ef; border: 1px solid #9fd2c1; padding: 10px 14px; border-radius: 8px; margin: 16px auto; }
.ts-error { background: #fdecec; border: 1px solid #efb1b1; color: #8a1f1f; padding: 10px 14px; border-radius: 8px; margin: 12px 0; }
.ts-openbar { background: #fff4e0; border-bottom: 1px solid #e8a33d; padding: 10px 0; font-size: 16px; }
.ts-countdown { font-weight: 800; color: #9a5b00; margin-left: 6px; }
.ts-badge { display: inline-block; padding: 2px 10px; border-radius: 20px; font-size: 14px; font-weight: 700; }
.ts-ok { background: #e6f4ef; color: #0a4f41; }
.ts-wait { background: #fff4e0; color: #9a5b00; }
.ts-tag { display: inline-block; background: #c23b3b; color: #fff; font-size: 12px; border-radius: 4px; padding: 0 6px; margin-right: 6px; }

/* 첫 화면 배너 */
.ts-hero { background: #3f8a6f url(img/hero.svg) center bottom / cover no-repeat; color: #fff; }
.ts-hero { background-image: linear-gradient(90deg, rgba(10,79,65,.62), rgba(10,79,65,.15) 55%, rgba(10,79,65,0) 75%), url(img/hero.svg); }
.ts-hero-in { padding-top: 70px; padding-bottom: 110px; text-shadow: 0 1px 8px rgba(0,0,0,.25); }
.ts-hero-kicker { display: inline-block; background: rgba(10,79,65,.75); border-radius: 20px; padding: 3px 14px; font-size: 14px; margin: 0 0 14px; text-shadow: none; }
.ts-hero h1 { margin: 0 0 14px; font-size: 42px; line-height: 1.25; }
.ts-hero-text { margin: 0 0 22px; max-width: 560px; font-size: 18px; }

/* 빠른 예약 */
.ts-quick { display: flex; align-items: center; flex-wrap: wrap; background: #fff; border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,.08);
  padding: 16px 20px; margin-top: -40px; position: relative; }
.ts-quick-state { margin-right: 20px; }
.ts-quick-label { font-weight: 800; margin-right: 8px; }
.ts-quick-dates { flex: 1; display: flex; flex-wrap: wrap; }
.ts-qdate { border: 1px solid #d9e1de; border-radius: 8px; padding: 6px 12px; margin: 4px 8px 4px 0; text-decoration: none; color: #1d2724; font-size: 14px; }
.ts-qdate:hover { border-color: #0f6e5b; color: #0f6e5b; }

/* 두 칸 */
.ts-grid2 { display: flex; flex-wrap: wrap; margin: 20px -10px 0; }
.ts-grid2 > * { width: 48%; margin: 0 1% 16px; }
.ts-panel { background: #fff; border: 1px solid #d9e1de; border-radius: 12px; padding: 4px 20px 18px; }
.ts-open-when { font-size: 18px; margin: 4px 0; }
.ts-open-live { background: #fff4e0; border-radius: 8px; padding: 8px 12px; }
.ts-nlist { list-style: none; margin: 0; padding: 0; }
.ts-nlist li { display: flex; justify-content: space-between; border-bottom: 1px solid #eef2f0; padding: 9px 0; }
.ts-nlist a { color: #1d2724; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-right: 10px; }
.ts-ndate { color: #8a9893; font-size: 13px; white-space: nowrap; }

/* 카드 */
.ts-cards { display: flex; flex-wrap: wrap; margin: 0 -8px; }
.ts-card { display: flex; flex-direction: column; width: 23%; margin: 8px 1%; background: #fff; border: 1px solid #d9e1de;
  border-radius: 12px; overflow: hidden; text-decoration: none; color: #1d2724; }
.ts-card:hover { box-shadow: 0 6px 18px rgba(0,0,0,.1); }
.ts-card-img { display: block; width: 100%; }
.ts-card-body { display: flex; flex-direction: column; padding: 14px 16px 16px; flex: 1; }
.ts-card-kind { font-size: 13px; color: #0f6e5b; font-weight: 700; }
.ts-card-name { font-size: 18px; margin: 2px 0; }
.ts-card-place { font-size: 13px; color: #5d6b67; }
.ts-card-foot { display: flex; justify-content: space-between; margin-top: auto; padding-top: 12px; font-size: 14px; }
.ts-price { font-weight: 800; }
.ts-left { color: #0f6e5b; }

/* 이벤트 */
.ts-events { display: flex; flex-wrap: wrap; margin: 0 -8px; }
.ts-event { width: 31.3%; margin: 8px 1%; border-radius: 12px; padding: 22px; color: #fff; text-decoration: none; min-height: 150px; display: flex; flex-direction: column; }
.ts-event strong { font-size: 19px; margin: 6px 0; line-height: 1.35; }
.ts-event-tag { font-size: 12px; letter-spacing: .12em; opacity: .85; }
.ts-event-0 { background: #c96b4b; background: linear-gradient(135deg, #e48c6a, #7b5ea7); }
.ts-event-1 { background: #0f6e5b; background: linear-gradient(135deg, #13866f, #0a4f41); }
.ts-event-2 { background: #3d7f95; background: linear-gradient(135deg, #5aa3bf, #2f5f7a); }

/* 이용 안내 바로가기 */
.ts-info-strip { display: flex; flex-wrap: wrap; margin: 36px -8px 0; }
.ts-info-strip a { width: 23%; margin: 8px 1%; background: #fff; border: 1px solid #d9e1de; border-radius: 12px; padding: 16px; text-decoration: none; color: #1d2724; }
.ts-info-strip strong { display: block; font-size: 17px; }
.ts-info-strip span { font-size: 13px; color: #5d6b67; }

/* 표 */
.ts-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; background: #fff; border: 1px solid #d9e1de; border-radius: 10px; }
.ts-table { width: 100%; border-collapse: collapse; min-width: 640px; }
.ts-table th, .ts-table td { padding: 10px 12px; border-bottom: 1px solid #eef2f0; text-align: left; white-space: nowrap; }
.ts-table th { background: #f0f4f2; font-size: 14px; }
.ts-num { text-align: right !important; }
.ts-canceled td { color: #9aa6a2; }
.ts-mini { border-collapse: collapse; margin: 10px 0; }
.ts-mini th { text-align: left; color: #5d6b67; font-weight: 400; padding: 6px 16px 6px 0; white-space: nowrap; vertical-align: top; }
.ts-mini td { padding: 6px 0; }
.ts-mini-wide { width: 100%; }
.ts-mini-wide tr { border-bottom: 1px solid #eef2f0; }

/* 상품 상세 */
.ts-detail { display: flex; flex-wrap: wrap; background: #fff; border: 1px solid #d9e1de; border-radius: 12px; overflow: hidden; }
.ts-detail-img { width: 45%; display: block; }
.ts-detail-info { width: 55%; padding: 18px 24px; }

/* 날짜·시각 */
.ts-dates { display: flex; flex-wrap: wrap; }
.ts-date { border: 1px solid #d9e1de; background: #fff; border-radius: 8px; padding: 8px 12px; margin: 0 8px 8px 0; text-decoration: none; color: #1d2724; font-size: 15px; }
.ts-date.ts-on { background: #0f6e5b; color: #fff; border-color: #0f6e5b; }
.ts-slots { display: flex; flex-wrap: wrap; margin: 0 -6px; }
.ts-slot, .ts-form .ts-slot { display: flex; font-weight: 400; flex-direction: column; width: 18%; margin: 6px 1%; background: #fff; border: 2px solid #d9e1de; border-radius: 10px; padding: 12px 36px 12px 12px; cursor: pointer; position: relative; }
.ts-slot input { position: absolute; top: 12px; right: 12px; }
.ts-slot-time { font-size: 20px; font-weight: 800; }
.ts-slot-left { font-size: 14px; color: #0f6e5b; }
.ts-slot.ts-full { opacity: .5; cursor: not-allowed; }
.ts-slot.ts-full .ts-slot-left { color: #c23b3b; }

/* 예약 단계 */
.ts-steps { display: flex; list-style: none; padding: 0; margin: 0 0 16px; counter-reset: st; }
.ts-steps li { flex: 1; text-align: center; padding: 8px 4px; border-bottom: 3px solid #d9e1de; color: #8a9893; font-size: 14px; counter-increment: st; }
.ts-steps li:before { content: counter(st) ". "; }
.ts-steps li.ts-on { border-bottom-color: #0f6e5b; color: #0f6e5b; font-weight: 800; }
.ts-total { font-size: 18px; margin: 14px 0 4px; }
.ts-total strong { color: #0f6e5b; font-size: 22px; }
.ts-done { text-align: center; }
.ts-done .ts-mini { text-align: left; }
.ts-done-mark { width: 64px; height: 64px; line-height: 64px; margin: 6px auto 0; border-radius: 50%; background: #e6f4ef; color: #0f6e5b; font-size: 34px; font-weight: 800; }

/* 마이페이지 */
.ts-resv { list-style: none; padding: 0; margin: 0; }
.ts-resv li { border: 1px solid #eef2f0; border-radius: 10px; padding: 12px 14px; margin-bottom: 10px; }
.ts-resv form { margin-top: 6px; display: block; }

/* 공지·FAQ */
.ts-tabs { display: flex; border-bottom: 2px solid #d9e1de; margin-bottom: 8px; }
.ts-tabs a { padding: 10px 18px; text-decoration: none; color: #5d6b67; margin-bottom: -2px; border-bottom: 2px solid transparent; }
.ts-tabs a.ts-on { color: #0f6e5b; border-bottom-color: #0f6e5b; font-weight: 800; }
.ts-board { list-style: none; padding: 0; margin: 0; background: #fff; border: 1px solid #d9e1de; border-radius: 10px; }
.ts-board li { display: flex; align-items: center; padding: 14px 16px; border-bottom: 1px solid #eef2f0; }
.ts-board li:last-child { border-bottom: 0; }
.ts-board a { flex: 1; color: #1d2724; text-decoration: none; margin: 0 12px; }
.ts-pinned { background: #fbfaf4; }
.ts-cat { display: inline-block; font-size: 12px; border-radius: 4px; padding: 1px 8px; white-space: nowrap; }
.ts-cat-no { background: #e6f4ef; color: #0a4f41; }
.ts-cat-ev { background: #fbe8df; color: #9a4325; }
.ts-article { background: #fff; border: 1px solid #d9e1de; border-radius: 12px; padding: 20px 26px; margin-bottom: 16px; }
.ts-article header { border-bottom: 1px solid #eef2f0; margin-bottom: 12px; }
.ts-faq details { background: #fff; border: 1px solid #d9e1de; border-radius: 10px; margin-bottom: 8px; padding: 0 16px; }
.ts-faq summary { cursor: pointer; padding: 14px 0; font-weight: 700; }
.ts-faq p { margin: 0 0 14px; color: #3a4744; }
.ts-map { border-radius: 12px; border: 1px solid #d9e1de; display: block; }

/* 폼 */
.ts-box { max-width: 440px; margin: 0 auto; background: #fff; border: 1px solid #d9e1de; border-radius: 12px; padding: 24px; }
.ts-box-wide { max-width: 620px; }
.ts-form label { display: block; margin: 12px 0 4px; font-weight: 600; }
.ts-form label small { font-weight: 400; color: #5d6b67; }
.ts-form input[type=text], .ts-form input:not([type]), .ts-form input[type=password], .ts-form input[type=number], .ts-form select {
  width: 100%; font-size: 16px; padding: 10px 12px; border: 1px solid #c4cfcb; border-radius: 8px; background: #fff; }
.ts-row { display: flex; align-items: center; flex-wrap: wrap; }
.ts-row label { margin: 0 10px 0 0; }
.ts-row select, .ts-row input[type=number] { width: auto; min-width: 120px; margin-right: 10px; }
.ts-check { font-weight: 400 !important; }
.ts-empty { background: #fff; border: 1px dashed #c4cfcb; border-radius: 10px; padding: 24px; text-align: center; }

/* 시연 운영 */
.ts-stats { display: flex; flex-wrap: wrap; margin: 0 -6px; }
.ts-stat { width: 23%; margin: 6px 1%; background: #fff; border: 1px solid #d9e1de; border-radius: 10px; padding: 14px; }
.ts-stat span { display: block; color: #5d6b67; font-size: 14px; }
.ts-stat strong { font-size: 28px; }
.ts-list { padding-left: 20px; }

/* 반응형 */
@media (max-width: 900px) {
  .ts-menu-btn { display: block; }
  .ts-nav { display: none; width: 100%; padding-bottom: 8px; }
  .ts-nav.ts-open { display: block; }
  .ts-nav a { display: block; margin: 0; padding: 12px 4px; border-bottom: 1px solid #eef2f0; }
  .ts-card { width: 48%; }
  .ts-info-strip a { width: 48%; }
  .ts-event { width: 48%; }
  .ts-slot, .ts-form .ts-slot { width: 31.3%; }
  .ts-hero h1 { font-size: 34px; }
}
@media (max-width: 600px) {
  .ts-wrap { padding: 0 14px; }
  .ts-topbar-in > span:first-child { display: none; }
  .ts-topbar-in { justify-content: flex-end; }
  .ts-hero-in { padding-top: 40px; padding-bottom: 80px; }
  .ts-hero h1 { font-size: 26px; }
  .ts-hero-text { font-size: 16px; }
  .ts-btn-ghost { margin: 8px 0 0; }
  .ts-h1 { font-size: 23px; }
  .ts-grid2 > *, .ts-card, .ts-event, .ts-detail-img, .ts-detail-info { width: 100%; }
  .ts-grid2 > * { margin-left: 1%; margin-right: 1%; }
  .ts-info-strip a { width: 48%; }
  .ts-slot, .ts-form .ts-slot { width: 48%; }
  .ts-stat { width: 48%; }
  .ts-box { padding: 18px; }
  .ts-quick-state { width: 100%; margin-bottom: 6px; }
  .ts-footer-links a { margin: 0 14px 0 0; }
  .ts-board li { flex-wrap: wrap; }
  .ts-board .ts-ndate { width: 100%; padding-left: 4px; }
}