/* ============================================================
   pages.css — 화면별 스타일 (홈 / 실시간부킹 / 티타임 / 예약 / 마이 / 게시판 / 투어)
   ============================================================ */

/* ============ 홈: 히어로 ============ */
.hero{
  position:relative;overflow:hidden;
  background:var(--grad-deep);
  color:#fff;padding:62px 0 120px;
}
/* 히어로 하단의 페어웨이 능선 일러스트 (SVG) */
.hero-scene{position:absolute;left:0;right:0;bottom:0;width:100%;height:300px;pointer-events:none;}
/* ------------------------------------------------------------
   우상단 골프공 오브젝트.

   원래 태양이었으나 서비스 정체성이 더 드러나도록 골프공으로 바꿨다.
   딤플(표면 홈)은 radial-gradient 를 타일처럼 반복해 만든다 —
   이미지 파일 없이 구현하려는 목적.
   회전·부유는 animation.css 가 담당한다.
   ------------------------------------------------------------ */
.hero-orb{
  position:absolute;right:8%;top:44px;width:138px;height:138px;border-radius:50%;
  /* 좌상단에서 빛이 들어오는 구(球) 음영 */
  background:
    radial-gradient(circle at 32% 28%, rgba(255,255,255,.95), rgba(255,255,255,0) 42%),
    radial-gradient(circle at 68% 74%, rgba(11,61,36,.30), rgba(11,61,36,0) 55%),
    radial-gradient(circle at 50% 50%, #ffffff 0%, #eef3ef 62%, #cfdcd4 100%);
  box-shadow:0 18px 46px rgba(4,32,20,.32), inset -8px -12px 26px rgba(11,61,36,.14);
  pointer-events:none;
}
/* 딤플 — 점 패턴을 겹쳐 골프공 표면을 만든다 */
.hero-orb::before{
  content:"";position:absolute;inset:0;border-radius:50%;overflow:hidden;
  background-image:
    radial-gradient(circle, rgba(11,61,36,.16) 1.6px, transparent 1.8px),
    radial-gradient(circle, rgba(11,61,36,.13) 1.4px, transparent 1.6px);
  background-size:15px 15px, 15px 15px;
  background-position:0 0, 7.5px 7.5px;   /* 엇갈리게 배치해 벌집 모양처럼 */
  /* 가장자리로 갈수록 딤플이 흐려져 구면처럼 보이게 한다 */
  -webkit-mask-image:radial-gradient(circle at 50% 50%, #000 58%, transparent 84%);
          mask-image:radial-gradient(circle at 50% 50%, #000 58%, transparent 84%);
}
/* 공 아래 그림자 — 떠 있는 느낌 */
.hero-orb::after{
  content:"";position:absolute;left:50%;bottom:-26px;transform:translateX(-50%);
  width:96px;height:16px;border-radius:50%;
  background:radial-gradient(ellipse, rgba(4,32,20,.34), transparent 70%);
}
/* ------------------------------------------------------------
   골프공 옆 홀컵·깃대.
   히어로 우측, 공보다 살짝 왼쪽 아래에 두어 공이 그린으로
   향하는 구도를 만든다. 본문 텍스트와 겹치지 않는 영역이다.
   ------------------------------------------------------------ */
.hero-hole{
  position:absolute;right:21%;top:58px;width:150px;height:190px;
  pointer-events:none;z-index:1;
  filter:drop-shadow(0 10px 22px rgba(4,32,20,.28));
}

.hero .inner{position:relative;z-index:2;}
.hero h1{color:#fff;font-size:38px;letter-spacing:-1.6px;line-height:1.28;}
.hero h1 em{color:#ffe27a;}
.hero .lead{margin-top:12px;font-size:15px;color:rgba(255,255,255,.78);}
.hero-tag{
  display:inline-flex;align-items:center;gap:7px;margin-bottom:14px;
  padding:6px 14px;border-radius:20px;font-size:12px;font-weight:700;letter-spacing:.3px;
  background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.2);color:#c9f5dd;
}
.hero-tag i{width:6px;height:6px;border-radius:50%;background:#7fe0a8;box-shadow:0 0 0 4px rgba(127,224,168,.22);}

/* 빠른 검색 바 */
.quick-search{
  position:relative;z-index:3;
  margin-top:26px;background:#fff;border-radius:var(--radius-xl);box-shadow:var(--shadow-lg);
  padding:18px;display:grid;grid-template-columns:1.05fr 1fr 1fr .85fr auto;gap:12px;align-items:end;
}
/* 그리드 칸이 내용(특히 iOS date)의 최소폭 때문에 안 줄어드는 것을 막는다 */
.quick-search>*{min-width:0;}
.qs-field label{display:block;font-size:11.5px;font-weight:800;color:var(--gray-500);margin-bottom:6px;letter-spacing:.3px;}

/* 히어로 통계 */
.hero-stats{display:flex;gap:14px;margin-top:26px;flex-wrap:wrap;}
.hero-stats div{
  flex:1;min-width:150px;
  background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.14);
  border-radius:var(--radius-lg);padding:14px 18px;
  color:rgba(255,255,255,.72);font-size:12.5px;font-weight:600;
}
.hero-stats b{display:block;font-size:27px;font-weight:800;color:#fff;letter-spacing:-1px;margin-bottom:2px;}

/* ============ 홈: 바로가기 타일 ============ */
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:-58px;position:relative;z-index:4;}
.tile{
  background:#fff;border:1px solid var(--gray-200);border-radius:var(--radius-lg);padding:20px 22px;
  box-shadow:var(--shadow-sm);transition:box-shadow .24s var(--ease),transform .24s var(--ease);
}
.tile:hover{box-shadow:var(--shadow-md);transform:translateY(-4px);}
.tile .ico{
  width:46px;height:46px;border-radius:14px;display:flex;align-items:center;justify-content:center;
  background:var(--green-050);color:var(--green-700);margin-bottom:12px;
  transition:background .24s var(--ease),color .24s;
}
.tile:hover .ico{background:var(--grad-brand);color:#fff;}
.tile .ico svg{width:24px;height:24px;}
.tile h4{font-size:15.5px;letter-spacing:-.3px;}
.tile p{margin-top:4px;font-size:12.5px;color:var(--gray-500);}

/* ============================================================
   실시간부킹 매트릭스 (홈 + /booking 공용)
   ------------------------------------------------------------
   222golf 실측값을 그대로 따른다.
     · 헤더 th 49px / 본문 td 56px / 보더 #e7e7e7
     · 토요일 파랑(#096bd6) · 일요일·공휴일 빨강(#dd0101) · 주말 열 배경 #f6f6f6
     · 잔여 수량은 17px 파랑(#5a7cd6) 숫자, 잔여 없으면 빈칸
   ============================================================ */
.bk-group{margin-bottom:28px;}
.bk-group-head{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  padding:0 0 7px;
}
.bk-group-head .ttl{display:flex;align-items:center;gap:8px;}
.bk-group-head .region{font-size:15px;font-weight:700;color:var(--gray-900);letter-spacing:-.6px;}
/* 222 는 이 자리를 빨간 작은 글씨로 쓴다 */
.bk-group-head .kind{font-size:12px;font-weight:600;color:var(--red-600);}
.bk-group-head .kind.phone b{color:var(--red-600);}
.bk-group-head .tools{margin-left:auto;font-size:12px;color:var(--gray-400);}
.bk-next{
  display:inline-flex;align-items:center;height:24px;padding:0 11px;
  background:var(--navy-700);color:#fff;font-size:12px;font-weight:700;
}
.bk-next:hover{background:#000;}

/* 매트릭스 표 */
.bk-table{width:100%;font-size:12px;table-layout:fixed;min-width:1100px;}
.bk-table th,.bk-table td{border:1px solid var(--gray-200);text-align:center;padding:0 2px;}
.bk-table thead th{
  height:49px;background:var(--white);
  font-weight:700;color:var(--gray-900);font-size:12px;line-height:1.35;
}
.bk-table thead th.sat{color:var(--blue-600);background:var(--gray-050);}
.bk-table thead th.sun{color:var(--red-600);background:var(--gray-050);}
.bk-table th.col-club{width:190px;}
.bk-table th.col-cal{width:46px;}
.bk-table td{height:56px;color:var(--gray-800);}
.bk-table td.club{
  text-align:left;padding-left:11px;font-weight:600;color:var(--gray-900);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.bk-table td.weekend{background:var(--gray-050);}
/* 좌측 골프장명 고정 — 가로 스크롤 시에도 어느 골프장인지 보이게 */
.bk-table th.col-club,.bk-table td.club{position:sticky;left:0;background:#fff;z-index:2;}
.bk-table thead th.col-club{z-index:3;}
.bk-table tbody tr:hover td{background:#fbfcfd;}
.bk-table tbody tr:hover td.club{background:#fbfcfd;}

/* 잔여 수량 셀 — 숫자만. 배지·알약 없이 222 와 동일 */
.bk-table td a{display:block;width:100%;height:100%;line-height:54px;}
.cnt{font-size:17px;font-weight:400;color:var(--blue-500);letter-spacing:-.5px;}
.cnt.low{color:var(--orange-600);}          /* 잔여 5팀 이하 */
.bk-table td a:hover .cnt{color:var(--navy-900);text-decoration:underline;}
/* 잔여 없는 칸은 비워 둔다(222 와 동일) */
.soldout{display:none;}
.bk-cal-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:24px;height:24px;color:var(--gray-400);
}
.bk-cal-btn:hover{color:var(--navy-900);}
.bk-cal-btn svg{width:15px;height:15px;}
.bk-empty{color:var(--gray-300);}

/* 매트릭스 범례 */
.bk-legend{
  display:flex;gap:16px;flex-wrap:wrap;font-size:12px;color:var(--gray-600);
  border:1px solid var(--gray-200);background:var(--gray-025);
  padding:9px 14px;margin-bottom:14px;
}
.bk-legend span{display:inline-flex;align-items:center;gap:6px;}
.bk-legend .cnt{font-size:13px;}

/* 기간 이동 바 */
.bk-nav{
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  margin-bottom:14px;
}
.bk-nav .range{font-size:13px;font-weight:700;color:var(--gray-800);}
.bk-nav .range b{color:var(--navy-900);}

/* ============ 티타임 목록 ============ */
.tt-head{
  position:relative;overflow:hidden;
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  background:var(--grad-deep);color:#fff;border-radius:var(--radius-xl);
  padding:30px 32px;margin-bottom:20px;box-shadow:var(--shadow-md);
  /* 배경 풍경이 한 장의 그림으로 읽히도록 최소 높이를 확보 */
  min-height:158px;align-content:center;
}
.tt-head::after{
  content:"";position:absolute;right:-50px;top:-70px;width:220px;height:220px;border-radius:50%;
  background:radial-gradient(circle at 40% 40%, rgba(255,255,255,.13), transparent 66%);
}
.tt-head>*{position:relative;z-index:1;}
.tt-head h3{color:#fff;font-size:23px;letter-spacing:-.7px;}
.tt-head .meta{margin-top:7px;font-size:13px;color:rgba(255,255,255,.7);}
.tt-head .meta b{color:#ffe27a;}

.tt-datebar{display:flex;gap:7px;overflow-x:auto;padding:2px 2px 8px;margin-bottom:18px;}
.tt-datebar a{
  flex:0 0 auto;width:66px;padding:9px 0;text-align:center;
  border:1px solid var(--gray-200);border-radius:var(--radius);
  font-size:12px;color:var(--gray-600);background:#fff;line-height:1.4;font-weight:600;
  transition:border-color .16s,transform .16s var(--ease),box-shadow .16s;
}
.tt-datebar a:hover{border-color:var(--green-600);transform:translateY(-2px);}
.tt-datebar a b{display:block;font-size:16px;font-weight:800;color:var(--gray-900);}
.tt-datebar a.sat b{color:var(--blue-600);}
.tt-datebar a.sun b{color:var(--red-600);}
.tt-datebar a.on{background:var(--grad-brand);border-color:transparent;color:#fff;box-shadow:var(--shadow-green);}
.tt-datebar a.on b{color:#fff;}
.tt-datebar a.off{opacity:.42;cursor:not-allowed;}
.tt-datebar a.off:hover{transform:none;border-color:var(--gray-200);}

/* 시간대 필터 */
.tt-filter{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:16px;}

/* 티타임 카드 리스트 */
.tt-list{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
.tt-card{
  position:relative;overflow:hidden;
  border:1px solid var(--gray-200);border-radius:var(--radius-lg);padding:16px 18px 16px 22px;background:#fff;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  transition:border-color .2s,box-shadow .2s var(--ease),transform .2s var(--ease);
}
/* 좌측 시간대 컬러 스트라이프 */
.tt-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--slot-morning);}
.tt-card.slot-dawn::before{background:var(--slot-dawn);}
.tt-card.slot-morning::before{background:var(--slot-morning);}
.tt-card.slot-afternoon::before{background:var(--slot-afternoon);}
.tt-card.slot-sunset::before{background:var(--slot-sunset);}
.tt-card:hover{border-color:var(--green-600);box-shadow:var(--shadow);transform:translateY(-3px);}
.tt-card .time{font-size:24px;font-weight:800;letter-spacing:-1px;color:var(--gray-900);line-height:1.1;}
.tt-card .slot-tag{
  display:inline-flex;align-items:center;height:19px;padding:0 8px;border-radius:20px;
  font-size:10.5px;font-weight:800;margin-left:7px;vertical-align:4px;
  background:var(--gray-100);color:var(--gray-600);
}
.tt-card.slot-dawn .slot-tag{background:#efedfb;color:var(--slot-dawn);}
.tt-card.slot-morning .slot-tag{background:var(--green-100);color:var(--green-800);}
.tt-card.slot-afternoon .slot-tag{background:#fff2e0;color:var(--slot-afternoon);}
.tt-card.slot-sunset .slot-tag{background:#fdecf0;color:var(--slot-sunset);}
.tt-card .info{margin-top:5px;font-size:12px;color:var(--gray-500);}
/* 부가정보 줄에 들어가는 인라인 아이콘 */
.tt-card .info svg{vertical-align:-2px;margin-right:3px;opacity:.6;}
.tt-card .right{text-align:right;flex-shrink:0;}
.tt-card .fee{font-size:19px;font-weight:800;color:var(--green-700);letter-spacing:-.7px;}
.tt-card .fee small{font-size:11px;font-weight:700;color:var(--gray-500);margin-left:1px;}
.tt-card .origin{font-size:11px;color:var(--gray-400);text-decoration:line-through;}

/* ============ 예약서 ============ */
.reserve-wrap{display:grid;grid-template-columns:1fr 350px;gap:28px;align-items:start;}
.reserve-side{border:1px solid var(--gray-200);border-radius:var(--radius-lg);overflow:hidden;position:sticky;top:96px;box-shadow:var(--shadow-sm);}
.reserve-side h4{background:var(--grad-deep);color:#fff;padding:16px 20px;font-size:15px;letter-spacing:-.3px;}
.reserve-side .body{padding:18px 20px;}
.sum-row{display:flex;justify-content:space-between;padding:7px 0;font-size:13px;color:var(--gray-600);}
.sum-row b{color:var(--gray-900);font-weight:700;}
.sum-total{display:flex;justify-content:space-between;align-items:baseline;margin-top:12px;padding-top:14px;border-top:1px dashed var(--gray-300);}
.sum-total span{font-size:14px;font-weight:700;color:var(--gray-700);}
.sum-total b{font-size:25px;font-weight:800;color:var(--green-700);letter-spacing:-1.2px;}

/* 예약 완료 */
.done-box{
  position:relative;overflow:hidden;text-align:center;padding:58px 20px;
  border:1px solid var(--green-100);border-radius:var(--radius-xl);
  background:linear-gradient(150deg,#f3faf6,#e9f5ee);
}
.done-box::after{
  content:"";position:absolute;right:-60px;bottom:-80px;width:220px;height:220px;border-radius:50%;
  background:radial-gradient(circle at 40% 40%, rgba(28,148,85,.14), transparent 66%);
}
.done-box>*{position:relative;z-index:1;}
.done-box .ico{
  width:72px;height:72px;margin:0 auto 18px;border-radius:50%;
  background:var(--grad-brand);color:#fff;font-size:33px;
  display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-green);
}
.done-box h3{font-size:25px;letter-spacing:-.8px;}
.done-box p{margin-top:9px;color:var(--gray-600);}
.done-box .rno{
  display:inline-block;margin-top:18px;padding:11px 24px;background:#fff;
  border:1px solid var(--green-100);border-radius:var(--radius);
  font-size:15px;font-weight:800;letter-spacing:.5px;box-shadow:var(--shadow-sm);
}

/* ============ 마이페이지 ============ */
.my-wrap{display:grid;grid-template-columns:218px 1fr;gap:32px;align-items:start;}
.my-nav{border:1px solid var(--gray-200);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-sm);}
.my-nav .prof{position:relative;overflow:hidden;padding:20px;background:var(--grad-deep);color:#fff;}
.my-nav .prof::after{
  content:"";position:absolute;right:-40px;top:-50px;width:140px;height:140px;border-radius:50%;
  background:radial-gradient(circle at 40% 40%, rgba(255,255,255,.14), transparent 66%);
}
.my-nav .prof>*{position:relative;z-index:1;}
.my-nav .prof b{display:block;font-size:17px;letter-spacing:-.3px;}
.my-nav .prof span{font-size:12px;color:rgba(255,255,255,.62);}
.my-nav .prof .mile{margin-top:10px;font-size:12.5px;color:rgba(255,255,255,.72);}
.my-nav .prof .mile b{display:inline;font-size:15px;color:#ffe27a;}
.my-nav a{display:block;padding:13px 20px;font-size:13.5px;font-weight:600;border-top:1px solid var(--gray-200);color:var(--gray-700);transition:background .15s,color .15s,padding-left .15s;}
.my-nav a:first-of-type{border-top:0;}
.my-nav a:hover{background:var(--gray-050);padding-left:24px;}
.my-nav a.on{background:var(--green-050);color:var(--green-800);font-weight:800;box-shadow:inset 3px 0 0 var(--green-700);}

/* 예약 내역 카드 */
.rsv-card{
  border:1px solid var(--gray-200);border-radius:var(--radius-lg);padding:18px 20px;margin-bottom:12px;
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;background:#fff;
  transition:box-shadow .2s var(--ease),border-color .2s;
}
.rsv-card:hover{box-shadow:var(--shadow);border-color:var(--green-100);}
.rsv-card .l h4{font-size:17px;letter-spacing:-.4px;display:flex;align-items:center;gap:7px;flex-wrap:wrap;}
.rsv-card .l .meta{margin-top:7px;font-size:13px;color:var(--gray-600);}
.rsv-card .l .rno{margin-top:6px;font-size:12px;color:var(--gray-400);}
.rsv-card .r{text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:9px;}
.rsv-card .r .fee{font-size:19px;font-weight:800;color:var(--gray-900);letter-spacing:-.6px;}

/* 마일리지 요약 */
.mile-sum{
  position:relative;overflow:hidden;
  display:flex;align-items:center;justify-content:space-between;
  background:var(--grad-deep);color:#fff;border-radius:var(--radius-xl);
  padding:26px 30px;margin-bottom:22px;box-shadow:var(--shadow-md);
}
.mile-sum::after{
  content:"";position:absolute;right:-40px;top:-60px;width:200px;height:200px;border-radius:50%;
  background:radial-gradient(circle at 40% 40%, rgba(255,255,255,.13), transparent 66%);
}
.mile-sum>*{position:relative;z-index:1;}
.mile-sum span{font-size:13px;color:rgba(255,255,255,.72);}
.mile-sum b{display:block;font-size:34px;font-weight:800;letter-spacing:-1.4px;margin-top:2px;}

/* ============ 부킹게시판 ============ */
.bd-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:18px;}
.bd-summary .box{
  border:1px solid var(--gray-200);border-radius:var(--radius-lg);padding:16px 18px;background:#fff;
  transition:box-shadow .2s var(--ease),transform .2s var(--ease);
}
.bd-summary .box:hover{box-shadow:var(--shadow-sm);transform:translateY(-2px);}
.bd-summary .box span{font-size:12px;color:var(--gray-500);font-weight:600;}
.bd-summary .box b{display:block;font-size:24px;font-weight:800;color:var(--gray-900);margin-top:3px;letter-spacing:-.8px;}
.tbl td.state-open{color:var(--green-700);font-weight:800;}
.tbl td.state-done{color:var(--gray-400);}

/* ============ 투어 상세 ============ */
.tour-hero{
  position:relative;overflow:hidden;
  border-radius:var(--radius-xl);padding:44px 38px;color:#fff;margin-bottom:26px;
  box-shadow:var(--shadow-md);
}

.tour-hero>*{position:relative;z-index:2;}
.tour-hero .cat{font-size:12.5px;font-weight:800;color:rgba(255,255,255,.78);letter-spacing:.5px;}
.tour-hero h2{color:#fff;font-size:32px;margin-top:8px;letter-spacing:-1.2px;}
.tour-hero p{margin-top:10px;color:rgba(255,255,255,.8);}
.tour-hero .price{margin-top:22px;font-size:14px;color:rgba(255,255,255,.8);}
.tour-hero .price b{font-size:34px;font-weight:800;color:#ffe27a;letter-spacing:-1.4px;}
.tour-grid{display:grid;grid-template-columns:1fr 336px;gap:28px;align-items:start;}

/* 일정표 */
.itin li{position:relative;padding:0 0 20px 26px;border-left:2px solid var(--gray-200);}
.itin li:last-child{border-left-color:transparent;padding-bottom:0;}
.itin li::before{
  content:"";position:absolute;left:-7px;top:3px;width:12px;height:12px;border-radius:50%;
  background:var(--grad-brand);border:2px solid #fff;box-shadow:0 0 0 3px var(--green-100);
}
.itin li b{display:block;font-size:14.5px;color:var(--gray-900);}
.itin li p{font-size:13px;color:var(--gray-600);margin-top:4px;line-height:1.7;}

/* ============ 리뷰 ============ */
.review-item{
  border:1px solid var(--gray-200);border-radius:var(--radius-lg);padding:20px 22px;margin-bottom:12px;background:#fff;
  transition:box-shadow .2s var(--ease);
}
.review-item:hover{box-shadow:var(--shadow-sm);}
.review-item .top{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.review-item .stars{color:#f5a524;letter-spacing:1px;font-size:15px;}
.review-item h4{font-size:15.5px;margin-top:9px;letter-spacing:-.3px;}
.review-item p{margin-top:6px;font-size:13.5px;color:var(--gray-600);line-height:1.8;}

/* ============ Q&A 아코디언 ============ */
.qa-item{border:1px solid var(--gray-200);border-radius:var(--radius-lg);margin-bottom:9px;overflow:hidden;background:#fff;transition:border-color .18s;}
.qa-item.open{border-color:var(--green-600);}
.qa-q{display:flex;gap:12px;align-items:flex-start;padding:17px 20px;cursor:pointer;font-size:14px;font-weight:700;color:var(--gray-800);}
.qa-q .mark{
  flex-shrink:0;width:24px;height:24px;border-radius:8px;
  background:var(--green-100);color:var(--green-800);font-weight:800;font-size:12px;
  display:flex;align-items:center;justify-content:center;
}
.qa-q:hover{background:var(--gray-050);}
.qa-a{display:none;gap:12px;padding:18px 20px 20px;background:var(--gray-050);border-top:1px solid var(--gray-200);font-size:13.5px;color:var(--gray-700);line-height:1.85;}
.qa-item.open .qa-a{display:flex;animation:riseIn .22s var(--ease) both;}
.qa-a .mark{
  flex-shrink:0;width:24px;height:24px;border-radius:8px;
  background:var(--red-050);color:var(--red-600);font-weight:800;font-size:12px;
  display:flex;align-items:center;justify-content:center;
}

/* ============ 로그인 / 회원가입 ============ */
.auth-box{
  max-width:440px;margin:0 auto;background:#fff;
  border:1px solid var(--gray-200);border-radius:var(--radius-xl);padding:38px 36px;box-shadow:var(--shadow);
}
.auth-box h3{font-size:22px;text-align:center;letter-spacing:-.6px;}
.auth-box .desc{text-align:center;font-size:13px;color:var(--gray-600);margin:9px 0 24px;}
.auth-box .field{margin-bottom:11px;}
.auth-links{display:flex;justify-content:center;gap:16px;margin-top:18px;font-size:13px;color:var(--gray-600);}
.auth-links a:hover{color:var(--green-700);}
.demo-hint{
  margin-top:20px;padding:14px 16px;background:var(--blue-050);border:1px solid #cfe1fb;
  border-left:4px solid var(--blue-600);border-radius:var(--radius);
  font-size:12.5px;color:#0d4ea6;line-height:1.75;
}

/* ============ 관리자 ============ */
.adm-stat{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:24px;}
.adm-stat .box{
  position:relative;overflow:hidden;
  border:1px solid var(--gray-200);border-radius:var(--radius-lg);padding:17px 19px;background:#fff;
  transition:box-shadow .2s var(--ease),transform .2s var(--ease);
}
.adm-stat .box::after{
  content:"";position:absolute;right:-24px;top:-24px;width:74px;height:74px;border-radius:50%;
  background:var(--green-050);
}
.adm-stat .box:hover{box-shadow:var(--shadow);transform:translateY(-3px);}
.adm-stat .box span{position:relative;z-index:1;font-size:12px;color:var(--gray-500);font-weight:600;}
.adm-stat .box b{position:relative;z-index:1;display:block;font-size:27px;font-weight:800;color:var(--gray-900);margin-top:3px;letter-spacing:-1px;}

/* ============ 반응형 ============ */
@media (max-width:1000px){
  .tiles{grid-template-columns:repeat(2,1fr);margin-top:-40px;}
  .quick-search{grid-template-columns:1fr 1fr;}
  .tt-list{grid-template-columns:repeat(2,1fr);}
  .reserve-wrap,.tour-grid,.my-wrap{grid-template-columns:1fr;}
  .reserve-side{position:static;}
  .adm-stat,.bd-summary{grid-template-columns:repeat(2,1fr);}
  .hero h1{font-size:30px;}
  .hero-orb{width:96px;height:96px;right:4%;}
  /* 공간이 좁아지면 홀컵은 숨기고 공만 남긴다 */
  .hero-hole{display:none;}
}
@media (max-width:640px){
  .tt-list{grid-template-columns:1fr;}
  .tiles{grid-template-columns:1fr;}
  .hero{padding:44px 0 100px;}
  .hero h1{font-size:25px;}
  .quick-search{grid-template-columns:1fr;}
  .tour-hero{padding:30px 22px;}
  .tour-hero h2{font-size:24px;}
}


/* ============================================================
   배너 풍경 SVG 는 흐름에서 빼내 배경으로 깔아야 한다.
   (.tt-head>* / .tour-hero>* 의 position:relative 보다 뒤에 와야 적용됨)
   ============================================================ */
.tt-head .art,.tour-hero .art{position:absolute;inset:0;width:100%;height:100%;z-index:0;}

/* ============================================================
   골프장 상세페이지  /clubs/{id}
   ------------------------------------------------------------
   좌측 사진 갤러리 / 우측 정보표의 2단 구성.
   사진이 없는 골프장이 많은 초기 운영을 감안해, 사진 자리에는
   art.js 풍경이 대신 들어가도 레이아웃이 흔들리지 않게
   높이를 고정(aspect-ratio)했다.
   ============================================================ */
.club-top{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:28px;margin-bottom:26px;
}
/*
  grid/flex 자식은 min-width 기본값이 auto 라서 내용물이 칸보다 크면 칸을 밀어낸다.
  슬라이드 띠(.cg-track)는 사진 수만큼 넓으므로 명시적으로 0 을 줘야 화면을 넘지 않는다.
*/
.club-gallery,.club-info{min-width:0;}

/* ------------------------------------------------------------
   사진 갤러리 : 슬라이더 + 하단 썸네일 스트립

   .cg-main  보이는 창 (overflow hidden)
   .cg-track 사진을 가로로 늘어놓은 띠. translateX 로 밀어 넘긴다.
   .cg-slide 사진 한 장. 폭이 항상 창의 100% 라 인덱스×100% 로 계산된다.

   높이는 aspect-ratio 로 고정한다. 사진 비율이 제각각이어도
   레이아웃이 흔들리지 않아야 우측 정보표와 높이가 맞는다.
   ------------------------------------------------------------ */
.cg-main{
  position:relative;width:100%;aspect-ratio:4/3;overflow:hidden;
  border-radius:var(--radius-lg);background:var(--gray-100);
  border:1px solid var(--gray-200);
}
.cg-track{
  display:flex;height:100%;
  transition:transform .42s cubic-bezier(.25,.8,.35,1);
  will-change:transform;
}
.cg-slide{
  position:relative;flex:0 0 100%;height:100%;
}
.cg-slide img{
  width:100%;height:100%;object-fit:cover;display:block;
  -webkit-user-drag:none;user-select:none;   /* 드래그로 이미지가 끌려나오지 않게 */
}
/* 사진 설명 — 아래쪽에 그라디언트를 깔아 흰 글씨가 어떤 사진에서도 읽히게 한다 */
.cg-caption{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:26px 14px 11px;font-size:13px;color:#fff;line-height:1.5;
  background:linear-gradient(to top, rgba(4,32,20,.72), transparent);
}

/* ---------- 좌우 넘김 버튼 ---------- */
.cg-nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:38px;height:38px;border-radius:50%;border:0;
  display:flex;align-items:center;justify-content:center;
  font-size:24px;line-height:1;padding-bottom:3px;
  background:rgba(255,255,255,.86);color:var(--gray-800);cursor:pointer;
  box-shadow:0 3px 12px rgba(4,32,20,.22);
  opacity:0;transition:opacity .2s var(--ease),background .15s,transform .15s;
}
.cg-nav.prev{left:10px;}
.cg-nav.next{right:10px;}
/* 평소에는 숨기고 사진 위에 올렸을 때만 보인다. 터치 기기에서는 항상 보인다. */
.cg-main:hover .cg-nav,
.cg-nav:focus-visible{opacity:1;}
.cg-nav:hover{background:#fff;transform:translateY(-50%) scale(1.08);}
@media (hover:none){
  .cg-nav{opacity:.92;}
}

/* 우하단 "1 / 5" */
.cg-count{
  position:absolute;right:10px;bottom:10px;z-index:3;
  padding:3px 10px;border-radius:12px;font-size:12px;font-weight:700;
  background:rgba(6,35,26,.62);color:#fff;backdrop-filter:blur(4px);
}

/* 하단 가운데 점 표시 (6장 이하일 때만 렌더링된다) */
.cg-dots{
  position:absolute;left:50%;transform:translateX(-50%);bottom:12px;z-index:3;
  display:flex;gap:6px;
}
.cg-dots span{
  width:7px;height:7px;border-radius:50%;
  background:rgba(255,255,255,.5);transition:background .2s,width .2s;
}
.cg-dots span.on{background:#fff;width:18px;border-radius:4px;}

/* 사진이 없을 때 안내 문구 — art.js 풍경 위에 얹힌다 */
.cg-noimg{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;
  font-size:13px;font-weight:700;color:rgba(255,255,255,.9);
  text-shadow:0 2px 8px rgba(4,32,20,.5);
}

/* ------------------------------------------------------------
   썸네일 스트립
   가로 스크롤 영역 + 양옆 넘김 버튼.
   장수가 늘어도 줄바꿈 없이 한 줄을 유지해야 본문 높이가 안 흔들린다.
   ------------------------------------------------------------ */
.cg-strip{display:flex;align-items:center;gap:6px;margin-top:8px;}
.cg-strip-view{
  flex:1;display:flex;gap:8px;overflow-x:auto;scroll-behavior:smooth;
  scrollbar-width:none;                     /* Firefox */
  -ms-overflow-style:none;
}
.cg-strip-view::-webkit-scrollbar{display:none;}   /* 스크롤바는 감추고 버튼으로 넘긴다 */

.cg-thumb{
  position:relative;flex:0 0 88px;aspect-ratio:4/3;overflow:hidden;padding:0;
  border-radius:var(--radius-sm);border:2px solid transparent;
  background:var(--gray-100);cursor:pointer;
  transition:border-color .15s,transform .15s;
}
.cg-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.cg-thumb:hover{transform:translateY(-2px);}
.cg-thumb.on{border-color:var(--green-600);}
/* 선택되지 않은 썸네일은 살짝 어둡게 — 지금 보고 있는 장을 구분하기 쉽게 */
.cg-thumb:not(.on) img{filter:brightness(.8);}

.cg-strip-nav{
  flex:0 0 26px;height:60px;border:1px solid var(--gray-200);border-radius:var(--radius-sm);
  background:var(--white);color:var(--gray-600);cursor:pointer;
  font-size:19px;line-height:1;padding:0 0 3px;
  transition:background .15s,color .15s,opacity .15s;
}
.cg-strip-nav:hover{background:var(--green-050);color:var(--green-700);}
/* 더 넘길 곳이 없으면 흐리게 하고 클릭도 막는다 */
.cg-strip-nav.off{opacity:.3;pointer-events:none;}

/* ---------- 정보표 ---------- */
.club-name{font-size:26px;letter-spacing:-.8px;margin-bottom:14px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.club-spec{width:100%;border-top:2px solid var(--green-700);border-collapse:collapse;}
.club-spec th,.club-spec td{
  padding:10px 12px;font-size:13px;text-align:left;vertical-align:top;
  border-bottom:1px solid var(--gray-200);line-height:1.6;
}
.club-spec th{width:88px;color:var(--gray-600);font-weight:700;background:var(--gray-050);}
/* 코스 태그 */
.club-spec .tag{
  display:inline-block;margin:0 4px 4px 0;padding:2px 9px;border-radius:11px;
  background:var(--green-050);color:var(--green-700);font-size:12px;font-weight:700;
}

/* ---------- 요금 요약 ---------- */
.club-fee{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:16px;}
.club-fee>div{
  padding:12px 14px;border-radius:var(--radius-md);
  background:var(--gray-050);border:1px solid var(--gray-200);
}
.club-fee span{display:block;font-size:12px;color:var(--gray-500);margin-bottom:3px;}
.club-fee b{display:block;font-size:17px;color:var(--gray-900);letter-spacing:-.4px;}
.club-fee em{font-size:11px;color:var(--gray-400);font-style:normal;}

/* ---------- 추천글 ---------- */
.club-recommend{
  display:flex;gap:10px;align-items:flex-start;
  padding:15px 18px;margin-bottom:8px;border-radius:var(--radius-lg);
  background:linear-gradient(100deg,var(--green-050),#fff);
  border:1px solid var(--green-100,#d8ece1);
}
.club-recommend p{font-size:14px;line-height:1.75;color:var(--gray-700);margin:0;}

/* ============================================================
   라운드일자 선택 달력
   ------------------------------------------------------------
   4주(28칸) 고정 그리드. 월요일 시작이라 요일 헤더와 항상 맞는다.
   칸 하나에 [날짜 / 잔여 팀수 / 최저가] 세 줄이 들어간다.
   ============================================================ */
.cal-wrap{
  border:1px solid var(--gray-200);border-radius:var(--radius-lg);
  padding:14px;background:var(--white);
}
.cal-dow{
  display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-bottom:6px;
}
.cal-dow span{
  text-align:center;font-size:12px;font-weight:700;color:var(--gray-500);padding:4px 0;
}
.cal-dow .sat{color:#2f6fd0;}
.cal-dow .sun{color:#d0483f;}

.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;}
.cal-cell{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  min-height:72px;padding:8px 4px;border-radius:var(--radius-md);
  border:1px solid var(--gray-200);background:var(--white);
  transition:transform .15s var(--ease),border-color .15s,box-shadow .15s;
}
.cal-cell b{font-size:15px;font-weight:800;color:var(--gray-800);line-height:1;}
.cal-cell .cnt{font-size:11px;font-weight:700;}
.cal-cell .fee{font-size:11px;color:var(--gray-500);letter-spacing:-.3px;}

/* 지난 날짜 — 흐리게, 클릭 불가 */
.cal-cell.past{background:var(--gray-050);border-style:dashed;opacity:.45;}
.cal-cell.past b{color:var(--gray-400);}

/* 잔여 없음 */
.cal-cell.closed{background:var(--gray-050);}
.cal-cell.closed b{color:var(--gray-400);}
.cal-cell.closed .cnt{color:var(--gray-400);font-weight:500;}

/* 예약 가능 */
.cal-cell.open{cursor:pointer;}
.cal-cell.open .cnt{
  padding:1px 7px;border-radius:9px;
  background:var(--green-050);color:var(--green-700);
}
/* 5팀 이하는 주황으로 — animation.css 의 .cnt.low 맥박과 짝을 이룬다 */
.cal-cell.open .cnt.low{background:#fff2e0;color:#e07b00;}
.cal-cell.open:hover{
  transform:translateY(-2px);border-color:var(--green-600);
  box-shadow:0 6px 16px rgba(16,110,66,.12);
}
/* 선택된 날짜 */
.cal-cell.on{
  border-color:var(--green-700);background:var(--green-050);
  box-shadow:0 0 0 2px rgba(28,148,85,.18);
}
/* 주말 날짜 숫자 색 */
.cal-cell.sat b{color:#2f6fd0;}
.cal-cell.sun b{color:#d0483f;}

.cal-help{margin-top:12px;font-size:12px;color:var(--gray-500);}

/* ---------- 반응형 ---------- */
@media (max-width:900px){
  .club-top{grid-template-columns:minmax(0,1fr);gap:20px;}
  .cal-cell{min-height:64px;}
}
@media (max-width:560px){
  .club-name{font-size:21px;}
  .club-fee{grid-template-columns:1fr;}
  .cg-thumb{flex-basis:72px;}
  /* 좁은 화면에서는 최저가를 숨겨 날짜와 팀 수만 남긴다 */
  .cal-cell{min-height:56px;padding:6px 2px;}
  .cal-cell .fee{display:none;}
  .cal-cell .cnt{font-size:10px;padding:1px 5px;}
}

/* ============================================================
   상세페이지 헤드 (골프장 · 투어 상품 공용)  .pd-*

   222golf 상세 구성을 따른다.
     제목
     ┌─────────────┬──────────────────┐
     │ 큰 사진      │ 공유/찜 · 가격    │
     │ + 리본       │ 스펙 목록         │
     └─────────────┴──────────────────┘
     [ 썸네일 스트립 — 두 칸을 가로지르는 전체 폭 ]

   썸네일을 좌측 칸 안이 아니라 전체 폭에 두려고 grid 2열 위에
   3번째 행을 만들고 span 2 를 준다.
   ============================================================ */
.pd-title{
  font-size:23px;letter-spacing:-.8px;line-height:1.45;
  margin:4px 0 16px;display:flex;align-items:baseline;gap:7px;flex-wrap:wrap;
}
.pd-title .cat{font-size:19px;color:var(--gray-500);font-weight:700;}
.pd-title .tag{font-size:14px;color:var(--green-700);font-weight:700;}

.pd-top{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  gap:12px 30px;margin-bottom:28px;
}
/* 썸네일 스트립을 두 칸에 걸친다 */
.pd-top>.cg-strip{grid-column:1 / -1;margin-top:4px;}
.pd-stage,.pd-info{min-width:0;}

/* ---------- 좌상단 대각선 리본 ---------- */
.pd-ribbon{
  position:absolute;left:-42px;top:16px;z-index:4;
  width:150px;padding:5px 0;text-align:center;
  transform:rotate(-45deg);
  background:linear-gradient(135deg,#e4483c,#c22f24);
  color:#fff;font-size:12px;font-weight:800;letter-spacing:.5px;
  box-shadow:0 2px 8px rgba(4,32,20,.3);
  pointer-events:none;
}

/* 생성 장면 위에 붙는 '샘플 이미지' 표시 — 실사진과 헷갈리지 않게 한다 */
.pd-sample{
  position:absolute;left:10px;bottom:10px;z-index:3;
  padding:3px 9px;border-radius:11px;font-size:11px;font-weight:700;
  background:rgba(6,35,26,.5);color:rgba(255,255,255,.85);backdrop-filter:blur(3px);
}
.cg-slide.art-slide,.cg-thumb.art-thumb{position:relative;background:var(--gray-100);}

/* ---------- 사진 준비중 자리표시 (골프장 전용) ----------
   골프장은 코스 사진을 보고 고르는 상품이라, 그려 낸 풍경을 깔면 실제 코스로
   오인될 수 있다. 그래서 그림 대신 브랜드 그린 바탕에 골프장명을 세우고
   '사진 준비중' 배지를 단다. 빈 회색 칸으로 두면 화면이 깨져 보이고,
   공통 대표 사진 한 장을 돌려 쓰면 여러 골프장이 같은 사진이 되어 더 나쁘다. */
.cg-ph{
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(145deg,var(--green-700) 0%,var(--green-900) 100%);
}
/* 배지는 '오른쪽' 위에 둔다. 왼쪽 위는 '실시간' 대각선 리본(.pd-ribbon) 자리이고
   리본이 z-index 가 더 높아, 왼쪽에 두면 배지가 리본 밑으로 가려진다. */
.cg-ph-badge{
  position:absolute;right:12px;top:12px;z-index:3;
  display:inline-flex;align-items:center;gap:5px;
  padding:5px 11px;border-radius:999px;
  font-size:11.5px;font-weight:700;letter-spacing:-.3px;
  background:rgba(255,255,255,.92);color:var(--green-800);
  box-shadow:0 1px 3px rgba(0,0,0,.14);
}
/* 배지 앞 점 — 아이콘 파일을 하나 더 받지 않으려고 CSS 로 찍는다 */
.cg-ph-badge::before{
  content:"";width:5px;height:5px;border-radius:50%;background:currentColor;
}
.cg-ph-body{text-align:center;padding:0 18px;}
.cg-ph-name{
  color:#fff;font-size:clamp(17px,2.4vw,23px);font-weight:800;letter-spacing:-1px;
  line-height:1.3;word-break:keep-all;
}
.cg-ph-meta{color:rgba(255,255,255,.62);font-size:12.5px;margin-top:7px;letter-spacing:.2px;}

/* ---------- 우측 정보 ---------- */
.pd-info{display:flex;flex-direction:column;}

/* 공유 / 찜하기 줄 */
.pd-share{position:relative;display:flex;align-items:center;gap:6px;margin-bottom:12px;}
.pd-sns{
  width:29px;height:29px;border-radius:7px;border:0;cursor:pointer;
  color:#fff;font-size:14px;font-weight:800;line-height:1;
  display:flex;align-items:center;justify-content:center;
  transition:transform .15s,filter .15s;
}
.pd-sns:hover{transform:translateY(-2px);filter:brightness(1.08);}
.pd-sns.x { background:#111;}
.pd-sns.fb{ background:#1877f2;}
.pd-sns.lk{ background:var(--gray-500);font-size:13px;}
/* 복사 결과 알림 */
.pd-tip{
  margin-left:6px;padding:2px 8px;border-radius:10px;font-size:11px;font-weight:700;
  background:var(--gray-900);color:#fff;
}
/* 찜하기는 우측 끝으로 */
.pd-wish{
  margin-left:auto;display:inline-flex;align-items:center;gap:6px;
  padding:7px 15px;border-radius:8px;cursor:pointer;
  border:1px solid var(--gray-300);background:var(--white);
  font-size:13px;font-weight:700;color:var(--gray-600);
  transition:background .15s,color .15s,border-color .15s;
}
.pd-wish .ic{font-size:14px;color:var(--gray-400);transition:color .15s,transform .15s;}
.pd-wish:hover{border-color:#e4483c;color:#c22f24;}
.pd-wish:hover .ic{color:#e4483c;}
/* 찜한 상태 */
.pd-wish.on{background:#fdeeed;border-color:#e4483c;color:#c22f24;}
.pd-wish.on .ic{color:#e4483c;transform:scale(1.15);}

.pd-sub{font-size:15px;font-weight:700;color:var(--gray-800);line-height:1.6;margin-bottom:10px;}

/* ---------- 가격 ---------- */
.pd-price{
  display:flex;align-items:baseline;gap:5px;flex-wrap:wrap;
  padding-bottom:16px;margin-bottom:16px;border-bottom:1px solid var(--gray-200);
}
.pd-price b{font-size:32px;font-weight:800;color:#e07b00;letter-spacing:-1.2px;line-height:1.1;}
.pd-price span{font-size:24px;color:#e07b00;font-weight:700;}
.pd-price em{font-size:12px;color:var(--gray-500);font-style:normal;margin-left:6px;}

/* ---------- 스펙 목록 ----------
   표(table) 대신 정의형 목록을 쓴다. 항목 수가 화면마다 달라도
   행 높이가 들쭉날쭉해지지 않고, 좁은 화면에서 접기도 쉽다. */
.pd-spec{display:grid;grid-template-columns:78px 1fr;gap:8px 12px;font-size:13px;line-height:1.65;}
.pd-spec dt{
  color:var(--gray-500);font-weight:700;position:relative;padding-left:9px;
}
.pd-spec dt::before{content:"·";position:absolute;left:0;color:var(--gray-400);}
.pd-spec dd{color:var(--gray-800);margin:0;word-break:break-all;}
.pd-spec .pill{
  display:inline-block;margin:0 4px 4px 0;padding:2px 9px;border-radius:11px;
  background:var(--green-050);color:var(--green-700);font-size:12px;font-weight:700;
}

/* 붉은 안내 문구 — 222golf 의 ※ 줄과 같은 역할 */
.pd-note{
  margin-top:14px;padding-top:12px;border-top:1px solid var(--gray-200);
  font-size:12px;color:#c22f24;line-height:1.6;
}

/* ---------- 반응형 ---------- */
@media (max-width:900px){
  .pd-top{grid-template-columns:minmax(0,1fr);gap:16px;}
  .pd-title{font-size:20px;}
  .pd-title .cat{font-size:16px;}
  .pd-price b{font-size:27px;}
}
@media (max-width:560px){
  .pd-spec{grid-template-columns:68px 1fr;font-size:12.5px;}
  .pd-ribbon{left:-46px;width:150px;font-size:11px;}
}

/* ============================================================
   아이디 찾기 / 비밀번호 재설정
   ------------------------------------------------------------
   로그인 박스(.auth-box)를 재사용하되, 탭과 결과 표시가 들어가
   조금 넓은 폭이 필요하다.
   ============================================================ */
.auth-box.wide{max-width:460px;}

/* 작은 탭 — 관리자 탭(.tabs)과 같은 모양이되 폭에 맞춰 반씩 나눠 갖는다 */
.tabs.sm{margin-bottom:0;}
.tabs.sm a{flex:1;text-align:center;font-size:14px;padding:10px 0;}

/* 찾기 결과 / 발송 완료 */
.find-result{
  text-align:center;padding:24px 4px 4px;
}
.find-result p{font-size:13px;color:var(--gray-600);line-height:1.7;}
.find-result b{
  display:block;margin:8px 0 10px;
  font-size:26px;font-weight:800;color:var(--green-700);letter-spacing:-.6px;
}
/* 문장형 결과(발송 완료)는 숫자보다 작게 */
.find-result b.sm{font-size:17px;letter-spacing:-.3px;}
.find-result .sub{font-size:12px;color:var(--gray-500);}

/* ============================================================
   오류 화면 (templates/error/*)
   ------------------------------------------------------------
   상태코드를 크게 보여 준다. 사용자가 고객센터에 알려 줄 때
   이 숫자 하나면 어디서 막혔는지 바로 알 수 있다.
   ============================================================ */
.err-wrap{
  text-align:center;padding:80px 20px 100px;max-width:520px;margin:0 auto;
}
.err-code{
  font-size:82px;font-weight:800;line-height:1;letter-spacing:-3px;
  /* 숫자 자체는 장식이므로 옅게 — 아래 문구가 먼저 읽혀야 한다 */
  background:var(--grad-brand);-webkit-background-clip:text;background-clip:text;
  color:transparent;opacity:.75;margin-bottom:14px;
}
.err-wrap h2{font-size:22px;letter-spacing:-.6px;margin-bottom:10px;}
.err-wrap p{font-size:14px;color:var(--gray-600);line-height:1.8;}
.err-btns{display:flex;gap:8px;justify-content:center;margin-top:26px;flex-wrap:wrap;}
.err-tel{margin-top:22px;font-size:12px;color:var(--gray-500);}

@media (max-width:560px){
  .err-wrap{padding:56px 16px 72px;}
  .err-code{font-size:62px;}
  .err-wrap h2{font-size:19px;}
}

/* ============================================================
   메인 — 날짜 스트립 / 날짜별 티타임 / 지역 요약

   설계 의도
     222golf 는 메인에 골프장 114 × 14일 매트릭스(1,140칸)를 통째로 깐다.
     여기서는 축을 날짜로 바꿔 한 화면이 하루가 되게 했다.
     칸 수가 14개로 줄어 모바일에서도 성립하고, 매트릭스는 지역 요약(.rgrid)
     아래로 접어 두어 필요한 사람만 펼치게 했다.
   ============================================================ */

/* ---------- ① 날짜 스트립 ---------- */
.dstrip{
  display:flex;gap:8px;padding:4px 2px 10px;
  /* 14칸이 좁은 화면에서는 가로 스크롤된다. .scroll-x 가 스크롤바를 감춘다 */
}
.dcell{
  flex:0 0 84px;display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:11px 6px;border-radius:var(--radius-md);
  border:1px solid var(--gray-200);background:var(--white);
  transition:transform .15s var(--ease),border-color .15s,box-shadow .15s;
}
.dcell .dow{font-size:11px;font-weight:700;color:var(--gray-500);}
.dcell b{font-size:16px;font-weight:800;color:var(--gray-900);letter-spacing:-.4px;line-height:1.2;}
.dcell .cnt{
  margin-top:2px;padding:1px 7px;border-radius:9px;font-size:11px;font-weight:700;
  background:var(--green-050);color:var(--green-700);
}
.dcell .fee{font-size:11px;color:var(--gray-500);letter-spacing:-.3px;}

/* 잔여 10팀 이하는 주황 — animation.css 의 .cnt.low 맥박과 짝을 이룬다 */
.dcell .cnt.low{background:#fff2e0;color:#e07b00;}

.dcell:hover{transform:translateY(-3px);border-color:var(--green-600);
  box-shadow:0 8px 18px rgba(16,110,66,.14);}
/* 선택된 날짜 */
.dcell.on{
  border-color:var(--green-700);background:var(--green-050);
  box-shadow:0 0 0 2px rgba(28,148,85,.2);
}
/* 마감 */
.dcell.off{background:var(--gray-050);cursor:default;}
.dcell.off b,.dcell.off .dow{color:var(--gray-400);}
.dcell.off .cnt{background:transparent;color:var(--gray-400);font-weight:500;}
/* 주말 */
.dcell.sat b,.dcell.sat .dow{color:#2f6fd0;}
.dcell.sun b,.dcell.sun .dow{color:#d0483f;}

/* ---------- ② 선택 날짜의 티타임 ---------- */
.dpick{
  margin-top:12px;padding:18px;border-radius:var(--radius-lg);
  background:var(--gray-050);border:1px solid var(--gray-200);
}
.dpick-head{
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;flex-wrap:wrap;margin-bottom:14px;
}
.dpick-head h4{font-size:16px;letter-spacing:-.4px;}
.dpick-head h4 b{color:var(--gray-900);}
.dpick-head h4 span{margin-left:8px;font-size:12px;font-weight:500;color:var(--gray-500);}

/* 정렬 — 칩보다 작게. 선택지가 셋뿐이라 눈에 띌 필요가 없다 */
.dsort{display:flex;gap:4px;}
.dsort a{
  padding:5px 11px;border-radius:14px;font-size:12px;font-weight:700;
  color:var(--gray-600);background:var(--white);border:1px solid var(--gray-200);
  transition:background .15s,color .15s,border-color .15s;
}
.dsort a:hover{border-color:var(--green-600);color:var(--green-700);}
.dsort a.on{background:var(--green-700);border-color:var(--green-700);color:#fff;}

.dgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;}
.dcard{
  position:relative;padding:13px 14px 13px 17px;border-radius:var(--radius-md);
  background:var(--white);border:1px solid var(--gray-200);overflow:hidden;
  transition:transform .15s var(--ease),box-shadow .15s,border-color .15s;
}
/* 좌측 컬러 스트라이프로 시간대를 표시한다(티타임 카드와 같은 규칙) */
.dcard::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--gray-300);}
.dcard.slot-dawn::before     {background:#7868d6;}
.dcard.slot-morning::before  {background:var(--green-600);}
.dcard.slot-afternoon::before{background:#f0a828;}
.dcard.slot-sunset::before   {background:#e67896;}

.dcard:hover{transform:translateY(-3px);border-color:var(--green-600);
  box-shadow:0 10px 22px rgba(16,110,66,.13);}
.dcard .t{display:flex;align-items:center;gap:6px;}
.dcard .t b{font-size:19px;font-weight:800;letter-spacing:-.6px;color:var(--gray-900);}
.dcard .c{margin-top:5px;font-size:14px;font-weight:700;color:var(--gray-800);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.dcard .m{margin-top:2px;font-size:12px;color:var(--gray-500);}
.dcard .p{margin-top:9px;font-size:12px;color:var(--gray-500);}
.dcard .p b{font-size:18px;font-weight:800;color:#e07b00;letter-spacing:-.5px;margin-right:1px;}
.dcard .p .origin{
  display:block;font-size:11px;color:var(--gray-400);text-decoration:line-through;line-height:1.2;
}

/* ---------- ③ 지역별 재고 요약 ---------- */
.rgrid{display:grid;grid-template-columns:repeat(7,1fr);gap:10px;}
.rcard{
  padding:15px 14px;border-radius:var(--radius-lg);text-align:center;
  background:var(--white);border:1px solid var(--gray-200);
  transition:transform .15s var(--ease),box-shadow .15s,border-color .15s;
}
.rcard:hover{transform:translateY(-3px);border-color:var(--green-600);
  box-shadow:0 10px 22px rgba(16,110,66,.13);}
.rcard h4{font-size:14px;letter-spacing:-.4px;color:var(--gray-800);}
.rcard .n{margin:7px 0 5px;font-size:12px;color:var(--gray-500);}
.rcard .n b{font-size:24px;font-weight:800;color:var(--green-700);letter-spacing:-.8px;margin-right:1px;}
.rcard .s{font-size:11px;color:var(--gray-500);line-height:1.6;}
.rcard .s span{display:block;}
/* 재고가 없는 지역은 흐리게 — 클릭은 되지만 기대치를 낮춘다 */
.rcard.empty{background:var(--gray-050);}
.rcard.empty h4,.rcard.empty .n b{color:var(--gray-400);}

/* ---------- 반응형 ---------- */
@media (max-width:1100px){
  .dgrid{grid-template-columns:repeat(3,1fr);}
  .rgrid{grid-template-columns:repeat(4,1fr);}
}
@media (max-width:820px){
  .dgrid{grid-template-columns:repeat(2,1fr);}
  .rgrid{grid-template-columns:repeat(3,1fr);}
}
@media (max-width:560px){
  .dcell{flex-basis:72px;padding:9px 4px;}
  .dcell b{font-size:14px;}
  .dcell .fee{display:none;}      /* 좁은 화면에서는 팀 수만 남긴다 */
  .dgrid{grid-template-columns:1fr;}
  .rgrid{grid-template-columns:repeat(2,1fr);}
  .dpick{padding:14px 12px;}
  .dpick-head{gap:8px;}
}

/* 티타임 카드의 예약금(그린피 선입) 표시 */
.tt-card .prepaid,.dcard .prepaid{
  margin-top:3px;font-size:11px;font-weight:700;color:#c2701f;
}

/* ============================================================
   홈 (222golf 형태) — 상단 [배너 | 통합검색] + 공지 + 실시간부킹 + 지역탭 + 매트릭스

   배경·그라디언트·그림자 없이 흰 바탕에 1px 보더만 쓰는 딱딱한 구성이다.
   ============================================================ */
.main-top{display:grid;grid-template-columns:400px 1fr;gap:18px;margin:20px 0 16px;}

/* 좌측 배너 — 사진 없이 평면 박스로 (외부 이미지 복제 금지) */
.main-banner{
  display:flex;flex-direction:column;justify-content:center;
  border:1px solid var(--gray-200);background:var(--white);
  padding:26px 24px;min-height:196px;
}
.main-banner .eyeb{font-size:13px;color:var(--gray-600);margin-bottom:8px;}
.main-banner strong{font-size:26px;font-weight:700;color:var(--navy-900);letter-spacing:-1.4px;line-height:1.3;}
.main-banner strong em{font-style:normal;color:var(--green-600);}
.main-banner p{margin-top:10px;font-size:12px;color:var(--gray-500);line-height:1.7;}

/* 우측 통합검색 */
.main-search{border:1px solid var(--gray-200);background:var(--white);padding:13px 14px;}
.ms-head{display:flex;align-items:center;gap:7px;margin-bottom:9px;}
.ms-head i{width:8px;height:8px;border-radius:50%;background:var(--green-600);}
.ms-head b{font-size:15px;font-weight:700;color:var(--gray-900);}
/* 통합검색 한 줄 */
.ms-total{display:flex;margin-bottom:9px;}
.ms-total .inp{flex:1;height:38px;border-right:0;}
.ms-total button{width:170px;height:38px;background:var(--navy-900);color:#fff;font-size:15px;font-weight:700;}
.ms-total button:hover{background:var(--navy-800);}
/* 조건 입력 패널 : 좌측 4줄 + 우측 조건검색 버튼 */
.ms-panel{display:grid;grid-template-columns:1fr 96px;gap:7px;}
.ms-rows{display:flex;flex-direction:column;gap:6px;}
.ms-row{display:flex;align-items:center;}
.ms-row .lb{
  width:132px;height:35px;line-height:35px;text-align:center;flex-shrink:0;
  background:var(--navy-900);color:#fff;font-size:14px;font-weight:600;
}
.ms-row .inp{flex:1;height:35px;min-width:0;}
.ms-row .pick{
  width:100px;height:35px;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;
  background:var(--navy-900);color:#fff;font-size:14px;font-weight:600;
}
.ms-row .pick:hover{background:var(--navy-800);}
.ms-cond{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;
  background:var(--navy-900);color:#fff;font-size:14px;font-weight:600;
}
.ms-cond:hover{background:var(--navy-800);color:#fff;}
.ms-cond svg{width:30px;height:30px;}
/* 공지사항 줄 */
.ms-notice{display:flex;align-items:center;margin-top:9px;border:1px solid var(--gray-200);}
.ms-notice .lb{
  height:34px;line-height:34px;padding:0 18px;flex-shrink:0;
  background:var(--navy-900);color:#fff;font-size:13px;font-weight:600;
}
.ms-notice a{
  padding:0 12px;font-size:12px;color:var(--gray-700);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.ms-notice a:hover{text-decoration:underline;}
.ms-notice .date{margin-left:auto;padding-right:12px;font-size:12px;color:var(--gray-400);flex-shrink:0;}

/* 실시간부킹 대표 버튼 */
.main-cta{width:210px;height:50px;font-size:18px;font-weight:700;margin:6px 0 16px;}

@media (max-width:1000px){
  .main-top{grid-template-columns:1fr;}
  .main-banner{min-height:0;padding:20px;}
  .main-banner strong{font-size:21px;}
}
@media (max-width:640px){
  .ms-panel{grid-template-columns:1fr;}
  .ms-cond{flex-direction:row;height:40px;}
  .ms-cond svg{width:20px;height:20px;}
  .ms-row .lb{width:96px;font-size:13px;}
  .ms-row .pick{width:74px;font-size:12px;}
  .ms-total button{width:104px;font-size:13px;}
  .main-cta{width:100%;}
}

/* ============================================================
   홈 — 배너 이미지 / 네이비 검색 배경의 골프 디자인 요소
   ============================================================ */
.main-banner.img{position:relative;border:0;padding:0;min-height:222px;overflow:hidden;}
.main-banner.img img{width:100%;height:222px;object-fit:cover;display:block;}
.main-banner.img .cap{
  position:absolute;left:0;right:0;bottom:0;padding:16px 18px;color:#fff;
  background:linear-gradient(to top, rgba(0,0,0,.62), rgba(0,0,0,0));
}
.main-banner.img .cap .eyeb{display:block;font-size:12px;color:#d6e6d6;margin-bottom:4px;}
.main-banner.img .cap strong{display:block;font-size:22px;font-weight:700;letter-spacing:-1.2px;line-height:1.3;}
.main-banner.img .cap strong em{font-style:normal;color:#9be86a;}

/* 통합검색 : 네이비 그라디언트 + 딤플 패턴 + 골프공 워터마크 */
.main-search.bg{
  position:relative;overflow:hidden;border:0;padding:0;
  background:linear-gradient(135deg,#07203f 0%,#123a6b 58%,#07203f 100%);
}
.main-search.bg::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.07) 1.2px, transparent 1.3px);
  background-size:13px 13px;
}
.main-search.bg::after{
  content:"";position:absolute;right:-46px;top:-56px;width:200px;height:200px;border-radius:50%;
  background:radial-gradient(circle at 34% 32%, rgba(255,255,255,.16), rgba(255,255,255,.04) 58%, transparent 70%);
  pointer-events:none;
}
/* 타이틀 밴드 : 좌 통합검색 / 우 깃대·홀컵·공 일러스트 */
.ms-band{position:relative;z-index:2;display:flex;align-items:flex-end;justify-content:space-between;
  padding:9px 16px 6px;}
.ms-band .ms-head{margin:0;}
.ms-band .art{display:none;}
.main-search.bg .ms-band .art{display:block;height:48px;}
.main-search.bg .ms-head b{color:#fff;}
.ms-inner{position:relative;z-index:2;padding:0 16px 14px;}
.main-search.bg .ms-notice{border-color:rgba(255,255,255,.28);background:#fff;}
.main-search.bg .ms-inner::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:3px;
  background:linear-gradient(90deg,var(--green-600) 0%,var(--green-600) 32%,rgba(82,188,28,0) 100%);
}
.main-cta{gap:9px;}
.main-cta svg{width:20px;height:20px;}

/* 매트릭스 지역 헤더 마커 */
.bk-group-head .region{position:relative;padding-left:11px;}
.bk-group-head .region::before{
  content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:4px;height:13px;background:var(--navy-900);
}

/* ============================================================
   모서리 다듬기 — 표·패널은 각지게, '조작하는 요소'만 살짝 둥글린다
   ============================================================ */
.btn,.ms-row .lb,.ms-row .pick,.ms-cond,.main-cta,.bk-next,.allmenu-btn{border-radius:4px;}
.inp,.sel,.txa,.ms-row input{border-radius:3px;}
.ms-total .inp{border-radius:3px 0 0 3px;}
.ms-total button{border-radius:0 4px 4px 0;}
.tabs a{border-radius:3px 3px 0 0;}

/* ============================================================
   메인 하단 섹션 (부킹게시판 / 1박2일)
   ============================================================ */
.sec-btn{display:inline-flex;align-items:center;justify-content:center;width:265px;height:58px;
  background:#5cb85c;color:#fff;font-size:20px;font-weight:700;border-radius:10px;margin:36px 0 16px;}
.sec-btn:hover{background:#4ea64e;color:#fff;}

/* 부킹게시판 탭 */
.bb-tabs{display:flex;margin-bottom:14px;}
.bb-tabs .g{display:flex;flex:1;border-bottom:3px solid var(--orange-600);border-radius:8px 8px 0 0;}
.bb-tabs a{flex:1;height:52px;line-height:52px;text-align:center;font-size:17px;font-weight:700;
  border-radius:8px;color:var(--gray-700);background:#e8edf3;}
.bb-tabs a.on{background:var(--orange-600);color:#fff;}

/* 지역 × 14일 매트릭스 (부킹게시판용) */
.rg-wrap{position:relative;}
.rg-next{position:absolute;right:0;top:-32px;display:inline-flex;align-items:center;height:24px;
  padding:0 13px;background:var(--navy-700);color:#fff;font-size:12px;font-weight:700;border-radius:20px;}
.rg-table{width:100%;font-size:12px;table-layout:fixed;min-width:1100px;}
.rg-table th,.rg-table td{border:1px solid var(--gray-200);text-align:center;}
.rg-table thead th{height:49px;background:#fff;font-weight:700;color:var(--gray-900);line-height:1.35;}
.rg-table thead th.sat{color:var(--blue-600);background:var(--gray-050);}
.rg-table thead th.sun{color:var(--red-600);background:var(--gray-050);}
.rg-table th.col-rg{width:140px;}
.rg-table td{height:62px;}
.rg-table td.rg{text-align:left;padding-left:16px;font-weight:600;color:var(--gray-900);}
.rg-table td.weekend{background:var(--gray-050);}
.rg-table td a{display:block;line-height:60px;}
.rg-table .cnt{font-size:16px;}

/* 투어 섹션 */
.tour-tabs{display:flex;background:var(--navy-700);margin-bottom:18px;border-radius:6px 6px 0 0;overflow:hidden;}
.tour-tabs a{flex:1;height:48px;line-height:48px;text-align:center;color:#fff;font-size:15px;font-weight:600;}
.tour-tabs a.on{background:#fff;color:var(--gray-900);font-weight:700;}
.tcards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-bottom:10px;}
.tcard{position:relative;border:1px solid var(--gray-200);background:#fff;border-radius:10px;overflow:hidden;}
.tthumb{height:150px;background:#2f5f47;}
.tcard .ribbon{position:absolute;left:14px;top:0;width:44px;padding:6px 0 9px;text-align:center;
  color:#fff;font-size:11px;font-weight:700;line-height:1.3;z-index:2;}
.tcard .ribbon.o{background:#e8a33d;}
.tcard .tb{padding:12px 14px 14px;}
.tcard .tb h4{font-size:15px;font-weight:700;color:var(--gray-900);letter-spacing:-.5px;}
.tcard .tb p{margin-top:5px;font-size:12px;color:var(--gray-500);line-height:1.5;height:36px;overflow:hidden;}
.tcard .tb .price{margin-top:9px;text-align:right;font-size:12px;color:var(--gray-500);}
.tcard .tb .price b{font-size:19px;color:#d64533;font-weight:700;letter-spacing:-.8px;}

@media (max-width:900px){
  .tcards{grid-template-columns:1fr;}
  .sec-btn{width:100%;}
  .bb-tabs a{font-size:15px;}
}

/* ============================================================
   트렌디 액센트 (.trendy 안에서만)
   재고를 읽는 '정보 영역(매트릭스·표)'은 각지게 두고,
   배너·검색·카드·퀵메뉴 같은 '브랜드/프로모션 영역'만 다듬는다.
   ============================================================ */
.trendy .main-banner.img,
.trendy .main-search.bg,
.trendy .tcard{border-radius:10px;overflow:hidden;}
.trendy .main-banner.img,
.trendy .main-search.bg{box-shadow:0 2px 12px rgba(7,32,63,.09);}
.trendy .tcard{transition:transform .22s ease, box-shadow .22s ease;}
.trendy .tcard:hover{transform:translateY(-4px);box-shadow:0 10px 24px rgba(7,32,63,.12);}
.trendy .main-cta{border-radius:8px;box-shadow:0 5px 14px rgba(82,188,28,.30);
  transition:transform .15s ease, box-shadow .15s ease;}
.trendy .main-cta:hover{transform:translateY(-2px);box-shadow:0 9px 20px rgba(82,188,28,.36);}
.trendy .bk-group-head .kind{background:#fdecec;color:var(--red-600);border-radius:20px;
  padding:3px 10px;font-size:11px;font-weight:600;}
.trendy .bk-group-head .kind.phone{background:#f4f4f4;color:var(--gray-600);}
.trendy .bk-group-head .kind.phone b{color:var(--red-600);}
.trendy .bk-next{border-radius:20px;padding:0 13px;}
.trendy .bk-table td a{transition:background .15s ease;}
.trendy .bk-table td a:hover{background:#f1f6ff;}

/* ============================================================
   골프장 상세 — 라운드일자 선택(가로형 달력) + 예약시간 선택(목록형 표)
   222golf 와 같은 구성. 한 줄 14일(2주) × 3줄.
   ============================================================ */
.cal-tbl{width:100%;table-layout:fixed;font-size:12px;min-width:1100px;}
.cal-tbl th,.cal-tbl td{border:1px solid var(--gray-200);text-align:center;}
.cal-tbl tr.dhead th{
  height:44px;background:var(--white);
  font-weight:700;color:var(--gray-900);font-size:12px;line-height:1.35;
}
.cal-tbl tr.dhead th.sat{color:var(--blue-600);background:var(--gray-050);}
.cal-tbl tr.dhead th.sun{color:var(--red-600);background:var(--gray-050);}
.cal-tbl tr.dval td{height:58px;padding:0;}
.cal-tbl td.weekend{background:var(--gray-050);}
.cal-tbl td a{display:block;padding:8px 2px;height:100%;}
.cal-tbl td a:hover{background:#f1f6ff;}
/* 예약 가능 팀 수 배지 + 1인 최저 그린피 */
.cal-tbl .team{
  display:inline-block;padding:2px 5px 1px;border-radius:2px;
  background:var(--gold-600);color:#fff;font-size:11px;font-weight:700;
}
.cal-tbl .fee{display:block;margin-top:5px;font-size:15px;color:var(--gray-800);letter-spacing:-.5px;}
/* 현재 선택된 날짜 */
.cal-tbl td.on{box-shadow:inset 0 0 0 2px var(--navy-900);}
.cal-tbl td.on a{background:#eef4ff;}
.cal-help{margin-top:10px;font-size:12px;color:var(--gray-500);}

/* 예약시간 선택 표 */
.tt-tbl{width:100%;font-size:12px;min-width:920px;border-top:2px solid var(--gray-900);}
.tt-tbl th{
  height:44px;padding:8px 6px;background:#fcfcfc;
  font-size:13px;font-weight:700;color:var(--gray-500);text-align:center;
  border-bottom:1px solid var(--gray-200);
}
.tt-tbl td{
  height:49px;padding:8px 6px;text-align:center;color:var(--gray-500);
  border-bottom:1px solid var(--gray-200);
}
.tt-tbl tbody tr:hover{background:var(--gray-050);}
.tt-tbl td.tit{font-weight:700;color:var(--gray-900);}
.tt-tbl td.memo{text-align:left;font-size:11px;line-height:1.55;color:var(--gray-500);}
.tt-tbl .b_txt{font-size:13px;font-weight:700;color:#d64533;}
.tt-tbl .origin{display:block;font-size:11px;color:var(--gray-400);text-decoration:line-through;}
.tt-tbl .empty{padding:56px 0;color:var(--gray-500);}
.tt-tbl input[type=radio]{width:15px;height:15px;accent-color:var(--navy-900);cursor:pointer;}
/* 줄마다 있는 예약 버튼 — 222 는 흰 바탕 + 회색 테두리 */
.btn-book{
  display:inline-flex;align-items:center;justify-content:center;
  width:58px;height:33px;border:1px solid var(--gray-300);border-radius:4px;
  background:var(--white);color:#636363;font-size:12px;font-weight:700;
}
.btn-book:hover{border-color:var(--navy-900);color:var(--navy-900);}

/* 상세 상단 : 가격은 네이비로 (이전 주황 → 사이트 톤에 맞춤) */
.pd-title{font-size:20px;letter-spacing:-1px;}
.pd-title .cat{font-size:16px;}
.pd-title .tag{color:var(--green-800);}
.pd-price b,.pd-price span{color:var(--navy-900);}
.pd-price b{font-size:28px;}

/* ============================================================
   선티 월별 달력 (/admin/suntee/calendar)
   한 달 보유 현황을 격자로 본다. 날짜 칸 = 요약 1줄 + 골프장별 N줄.
   ============================================================ */
/* 상단 줄 : 운영사(222golf) 달력과 같은 크기·모양으로 맞춘다.
   월 이동 버튼은 동그란 테두리 버튼, 연월과 '전체 선티' 는 크게 */
.sc-bar{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:18px;}
.sc-move{display:flex;align-items:center;gap:12px;}
.sc-move b{font-size:30px;font-weight:400;letter-spacing:-1px;min-width:186px;text-align:center;
  color:var(--gray-800);}
.sc-move .btn{width:40px;height:40px;padding:0;border-radius:50%;text-align:center;
  font-size:20px;line-height:38px;color:var(--gray-600);}
.sc-title{font-size:26px;font-weight:700;color:var(--gray-800);margin-left:10px;letter-spacing:-1px;}
.sc-filter{margin-left:auto;display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.sc-filter .sel{height:32px;padding:0 10px;border:1px solid var(--gray-150);font-size:13px;}
.sc-mine{display:inline-flex;align-items:center;gap:5px;font-size:13px;color:var(--gray-700);white-space:nowrap;}

.sc-tbl{width:100%;table-layout:fixed;border-collapse:collapse;}

/* 요일 머리 : 운영사와 같은 연보라 바탕 */
.sc-tbl th{height:42px;font-size:14px;font-weight:700;background:#f1f1fa;
  border:1px solid var(--gray-200);color:var(--gray-800);}
.sc-tbl th.sun{color:var(--red-600);} .sc-tbl th.sat{color:var(--blue-600);}
/* 칸 높이는 '최소' 로만 준다 — 골프장이 많은 날은 더 늘어나야 한다.
   table-layout:fixed 에서 td 의 height 는 최소 높이로 동작해서,
   내용이 적은 날도 같은 높이를 유지해 격자가 들쭉날쭉해 보이지 않는다. */
.sc-tbl td{border:1px solid var(--gray-200);vertical-align:top;text-align:left;
  padding:8px 10px 12px;height:122px;}
.sc-tbl td.out{background:#fafafa;}          /* 지난달·다음달 칸 */
.sc-tbl td.today{background:var(--green-050);}

/* 날짜는 제 줄을 차지해야 한다 — inline 이면 아래 요약/골프장 줄과 겹친다.
   선택자를 .sc-tbl td 까지 붙여 다른 달력 규칙에 밀리지 않게 한다. */
.sc-tbl td a.sc-day{display:block;padding:0;height:auto;background:none;
  font-size:20px;font-weight:700;font-style:italic;color:var(--gray-800);
  margin-bottom:7px;line-height:1.2;text-align:left;}
.sc-tbl td a.sc-day:hover{background:none;text-decoration:underline;}
/* 공휴일 이름 — 날짜 옆에 작게 */
.sc-hol{font-style:normal;font-size:12px;font-weight:700;margin-left:5px;color:var(--red-600);}
.sc-tbl td a.sc-day.sun{color:var(--red-600);}
.sc-tbl td a.sc-day.sat{color:var(--blue-600);}

/* 그날 전체 요약.
   정원이 다 찬 날을 회색으로 죽이던 규칙은 뺐다 — 운영사 달력은 마감 여부와 무관하게
   항상 같은 파란 배지라, 색이 다르면 다른 화면처럼 보인다.
   마감은 배지 안의 '정원 / 접수' 숫자가 같아지는 것으로 읽는다. */
.sc-sum{display:inline-block;background:#29a7e0;color:#fff;font-size:12.5px;font-weight:700;
         padding:3px 8px;border-radius:2px;line-height:1.35;}
/* 골프장별 한 줄 */
.sc-club{display:block;font-size:12.5px;color:var(--gray-800);line-height:1.6;margin-top:4px;
          word-break:keep-all;}

/* ---------- 상세 모드 (오늘·내일) ---------- */
/* 골프장명 소제목 */
.sc-cname{display:block;font-size:12px;font-weight:800;color:var(--gray-900);margin-top:5px;}
/* 티타임 한 줄 : 13:03 곤)김충범 6.9+0 남녀/무관, 남/무관 / 1 */
.sc-tee{display:block;font-size:11px;line-height:1.55;color:var(--gray-700);word-break:keep-all;}
.sc-tee b{font-weight:700;color:var(--gray-900);margin-right:3px;}
.sc-tee i{font-style:normal;color:#c0392b;font-weight:700;margin:0 3px;}
.sc-tee em{font-style:normal;color:var(--gray-500);margin-left:3px;}

.sc-help{margin-top:12px;font-size:12px;line-height:1.8;}
.sc-help .sc-sum{font-size:11px;}

@media (max-width:980px){
  .sc-tbl{min-width:860px;}
  .sc-filter{margin-left:0;}
}

/* 선티 리스트 빠른 조회 줄 */
.search-quick{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:-4px 0 14px;font-size:12px;}
.search-quick .quick-sep{width:1px;height:18px;background:var(--gray-200);margin:0 6px;}
.btn.btn-sky{background:#1aa3e8;color:#fff;border-color:#1aa3e8;}
.btn.btn-sky:hover{background:#148ac6;border-color:#148ac6;}