/* ============================================================
   웰파크골프 공통 스타일 - common.css
   색·글꼴·상단바·하단바 등 모든 페이지가 함께 쓰는 부분만 모았습니다.
   색을 바꾸려면 아래 :root 값만 고치면 전 페이지에 반영됩니다.
   ============================================================ */

/* 글꼴 — Pretendard (무료·상업이용 가능)
   글꼴 파일은 각 화면 <head> 에서 "화면을 기다리게 하지 않는 방식"으로 불러옵니다.
   못 불러와도 아래 body 의 예비 글꼴로 넘어가므로 화면이 비는 일은 없습니다. */

:root{
  --green:#159447;
  --deep:#0c7138;
  --soft:#eaf7ef;
  --bg:#f5f7f6;
  --line:#dfe7e2;
  --muted:#6b766f;
  /* 칸마다 바뀌는 색 — 화면이 저마다 다시 정합니다.
     안 정하면 지금까지의 초록 그대로입니다. */
  --sec:#eaf7ef;
  --secbg:#eaf7ef;
  --secd:#0c7138;
  --ink:#202722;
  --pink:#ef5f7b;
  --red:#e44d58;
  --orange:#f39a38;
  --purple:#7462d8;
  --blue:#3b7fc4;
  --warn:#fffaf0;
  --warnline:#f0dfb0;
  --appw:430px;          /* 모바일 기준 폭 */
  /* 하단바(게임·골프장·사진·모임·커뮤니티·여행)를 지금은 안 보이게 해두었습니다.
     ★ 다시 보이게 하시려면 아래 두 곳만 되돌리면 됩니다 —
       ① 여기 --barh 를 78px 로
       ② 조금 아래 ".bottom{display:none}" 줄을 지우기
     글(html)은 그대로 두었으니 언제든 되살릴 수 있습니다. */
  --barh:0px;            /* 하단바 높이 — 숨겨둔 동안은 0 */
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth}

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,
    "Apple SD Gothic Neo","Malgun Gothic","맑은 고딕","Noto Sans KR",sans-serif;
  padding-bottom:var(--barh);
  word-break:keep-all;          /* 한글이 낱말 중간에서 끊기지 않게 */
  overflow-wrap:break-word;     /* 긴 영문·주소는 그래도 줄을 바꿔줌 */
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
a{text-decoration:none;color:inherit}
button,input,select,textarea{font:inherit}
button{cursor:pointer}

/* ---------- 화면 틀 ---------- */
.app{
  width:min(100%,var(--appw));
  margin:auto;
  min-height:100vh;
  background:#fff;
}
/* PC에서 볼 때 가운데 카드처럼 보이도록 */
@media(min-width:760px){
  body{background:#eef2ef}
  .app{box-shadow:0 0 0 1px var(--line),0 10px 40px rgba(38,77,54,.10)}
}

.content{padding:14px 12px}

/* ---------- 상단바 : [← 뒤로] [페이지 제목] [🏠 홈] ---------- */
.topbar{
  height:62px;
  display:grid;grid-template-columns:44px 1fr 44px;align-items:center;
  padding:0 10px;border-bottom:1px solid var(--line);
  position:sticky;top:0;background:#fff;z-index:20;
}
.topbar h1{
  font-size:21px;text-align:center;margin:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.iconbtn{
  width:40px;height:40px;border:1px solid var(--line);border-radius:12px;background:#fff;
  display:grid;place-items:center;font-size:20px;color:inherit;
}
.iconbtn.home{border-color:#cfe4d5;background:var(--soft)}
.iconbtn:active{opacity:.6}

/* ---------- 하단바 : 홈 제외 6칸 고정 ---------- */
/* ★ 지금은 하단바를 숨겨 두었습니다. 이 한 줄만 지우면 다시 나옵니다
      (위 --barh 도 78px 로 되돌려주세요). */
.bottom{display:none !important}

.bottom{
  position:fixed;left:0;right:0;bottom:0;
  background:#fff;border-top:1px solid var(--line);
  display:grid;grid-template-columns:repeat(6,1fr);
  padding:8px 2px calc(8px + env(safe-area-inset-bottom));
  z-index:30;
}
.bottom a{text-align:center;color:#647169;font-size:11px;font-weight:800;padding:2px 0}
.bottom b{display:block;font-size:20px;margin-bottom:3px;font-weight:400}
.bottom a.active{color:var(--green)}
@media(min-width:431px){
  .bottom{width:var(--appw);left:50%;right:auto;transform:translateX(-50%)}
}

/* ---------- 자주 쓰는 조각들 ---------- */
.tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:14px}
.tabs a{
  text-align:center;padding:12px 6px;border-radius:13px;background:#f1f4f2;
  font-size:15px;font-weight:900;color:#536158
}
.tabs a.active{background:var(--sec);color:var(--secd)}
/* 네 칸짜리 탭 — 커뮤니티(게시판·대회/행사·답사투어·한장상식) */
.tabs.four{grid-template-columns:repeat(4,1fr);gap:6px}
.tabs.four a{font-size:14px;padding:12px 2px;letter-spacing:-.8px;word-break:keep-all}

.searchbar{display:grid;grid-template-columns:1fr 52px;gap:8px;margin:12px 0}
.searchbar input{
  min-width:0;border:1px solid var(--line);border-radius:13px;padding:13px 14px;font-size:16px
}
.searchbar button{border:0;border-radius:13px;background:var(--sec);color:var(--secd);font-size:19px}

.countbar{display:flex;align-items:center;padding:4px 2px 8px;font-size:13px;color:var(--muted)}
.countbar b{color:var(--deep)}

.pager{display:flex;justify-content:center;align-items:center;gap:8px;padding:18px 0 4px}
.pager a{
  min-width:44px;height:42px;border:1px solid var(--line);border-radius:11px;background:#fff;
  display:flex;align-items:center;justify-content:center;color:#536158;font-weight:900
}
.pager a.active{background:var(--sec);color:var(--secd);border-color:var(--secd)}
.pager a.disabled{opacity:.35;pointer-events:none}

.notice{
  margin-top:14px;background:var(--warn);border:1px solid var(--warnline);border-radius:15px;
  padding:13px;font-size:12px;line-height:1.65;color:#715b27
}
.listbtn{
  display:block;margin-top:16px;text-align:center;background:var(--soft);color:var(--deep);
  padding:14px;border-radius:13px;font-weight:900;font-size:16px
}
.empty{padding:44px 15px;text-align:center;color:var(--muted);line-height:1.7}

/* ── 서버에서 불러오는 동안 / 실패했을 때 ───────────────────── */
.wp-load{display:flex;align-items:center;justify-content:center;gap:9px;
  padding:34px 14px;color:var(--muted);font-size:15px;font-weight:700}
.wp-dot{width:16px;height:16px;border-radius:50%;border:3px solid #d9e5dd;
  border-top-color:var(--green);animation:wp-spin .8s linear infinite}
@keyframes wp-spin{to{transform:rotate(360deg)}}
.wp-fail{background:var(--warn);border:1px solid var(--warnline);border-radius:16px;
  padding:22px 16px;text-align:center;color:#715b27;margin:10px 0}
.wp-fail b{display:block;font-size:16px;margin-bottom:5px}
.wp-fail p{margin:0 0 13px;font-size:14px}
.wp-retry{display:inline-block;background:var(--green);color:#fff;border:0;border-radius:12px;
  padding:12px 22px;font-size:15px;font-weight:900;min-height:46px;line-height:22px}
a.wp-retry{text-decoration:none}

/* ── 올린 사진 (게시판·사진첩 공용) ─────────────────────────────
   잘리지 않게 전체를 보여줍니다. 세로로 아주 긴 사진만
   화면 높이에 맞춰 줄이되, 잘라내지는 않습니다.              */
.wp-shot{position:relative;margin:12px 0 14px;border-radius:16px;overflow:hidden;
  background:#eef2ef;border:1px solid var(--line);cursor:zoom-in;display:block;width:100%}
.wp-shot img{display:block;margin:0 auto;max-width:100%;max-height:78vh;
  width:auto;height:auto;background:#eef2ef}
.wp-shot .zoom{position:absolute;right:10px;bottom:10px;background:rgba(0,0,0,.62);
  color:#fff;border-radius:999px;padding:7px 12px;font-size:13px;font-weight:900;
  pointer-events:none;display:flex;align-items:center;gap:5px}

/* ── 사진 크게 보기 (팝업) ─────────────────────────────────── */
.wp-lightbox{position:fixed;inset:0;z-index:999;background:rgba(12,16,13,.94);
  display:flex;align-items:center;justify-content:center;padding:0}
.wp-lightbox .stage{width:100%;height:100%;overflow:auto;display:flex;
  align-items:center;justify-content:center;-webkit-overflow-scrolling:touch}
.wp-lightbox img{max-width:100%;max-height:100%;display:block;margin:auto;
  transition:none;cursor:zoom-in}
.wp-lightbox.big img{max-width:none;max-height:none;cursor:zoom-out}
.wp-lightbox .close{position:fixed;top:calc(12px + env(safe-area-inset-top));right:12px;
  width:54px;height:54px;border-radius:50%;border:0;background:rgba(255,255,255,.94);
  color:#202722;font-size:26px;font-weight:900;line-height:1;z-index:2}
.wp-lightbox .tip{position:fixed;left:0;right:0;
  bottom:calc(16px + env(safe-area-inset-bottom));text-align:center;
  color:rgba(255,255,255,.88);font-size:14px;font-weight:700;pointer-events:none}
/* 일정표처럼 저장해 두고 보실 사진에 달리는 단추 */
.wp-lightbox .save{position:fixed;left:50%;transform:translateX(-50%);
  bottom:calc(54px + env(safe-area-inset-bottom));min-height:50px;padding:0 20px;
  display:inline-flex;align-items:center;border-radius:13px;background:var(--green);
  color:#fff;font-size:16px;font-weight:900;text-decoration:none;z-index:2}
body.wp-locked{overflow:hidden}

/* 사진 파일이 없을 때 자리를 지켜주는 표시 */
.wp-noimg{position:absolute;inset:0;display:grid;place-items:center;
  background:#eaf1ec;color:#93ab99;font-size:40px}
/* 자리를 잡아두지 않은 곳에서는 사진 자리만큼만 차지합니다 */
.wp-noimg.flat{position:static;inset:auto;width:100%;height:150px;
  border-radius:13px;margin-bottom:10px}

/* 화면 안에서 묻는 칸 (신고·삭제) */
.wp-ask{margin-top:11px;border:1px solid var(--line);border-radius:17px;background:#fbfdfc;padding:15px;
  scroll-margin-top:78px}   /* 위 제목줄에 가리지 않게 */
.wp-ask h4{margin:0 0 11px;font-size:18px;line-height:1.45;word-break:keep-all}
.wp-ask .chips{display:grid;gap:8px;margin-bottom:11px}
.wp-ask .chips button{min-height:54px;border:1px solid var(--line);border-radius:13px;background:#fff;
  font-size:17px;font-weight:900;color:#4b584f;text-align:left;padding:0 15px}
.wp-ask .chips button.on{background:var(--secbg);border-color:var(--secd);color:var(--secd)}
.wp-ask input,.wp-ask textarea{width:100%;border:1px solid var(--line);border-radius:12px;
  padding:14px;font-size:17px;background:#fff}
.wp-ask textarea{min-height:76px;resize:vertical;line-height:1.6}
.wp-ask .note{font-size:14px;color:var(--muted);margin:9px 0 0;line-height:1.55}
.wp-ask .btns{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:11px}
.wp-ask .btns button{min-height:56px;border-radius:13px;font-size:18px;font-weight:900;
  border:1px solid var(--line);background:#fff;color:#54615a}
.wp-ask .btns .go{border:0;background:var(--sec);color:var(--secd)}
.wp-ask .btns .go.warn{background:#c23b4e}

/* 화면 맨 아래 푸터 */
/* 좌우 여백은 바깥 .content 가 이미 주고 있습니다.
   여기서 또 주면 방문자 칸만 안쪽으로 들어가 보입니다. */
.wp-foot{margin-top:24px;padding:20px 0 10px;border-top:1px solid var(--line);
  text-align:center;color:var(--muted);font-size:12px;line-height:1.75}
.wp-foot .visitbox{margin:0 0 16px;background:#f4f8f5;border:1px solid var(--line);
  border-radius:15px;padding:14px 12px;display:flex;align-items:center;justify-content:center;gap:9px}
.wp-foot .visitbox span{font-size:15px;color:#566257;font-weight:900}
.wp-foot .visitbox b{font-size:24px;color:#d4343f;letter-spacing:-.5px}
.wp-foot .footlinks{display:flex;justify-content:center;gap:8px;margin-bottom:15px;flex-wrap:wrap}
.wp-foot .footlinks a{min-height:42px;display:flex;align-items:center;padding:0 14px;
  border:1px solid var(--line);border-radius:11px;background:#fff;color:#55635b;font-size:13px;font-weight:900}
.wp-foot .footrun{font-size:13px;color:#5a675f;line-height:1.85}
.wp-foot .footrun b{color:var(--deep);font-size:14px}
/* 전화기 그림 — 이모지는 폰마다 색이 달라서 직접 그렸습니다 */
.wp-foot .telic{width:17px;height:17px;display:inline-block;vertical-align:-3px;
  margin-right:5px;color:#2b332e}
/* 전화번호는 눌러서 거는 자리입니다. 어르신이 주 고객이라
   글자를 15px 굵게 키우고, 짚기 쉽도록 높이를 48px 로 둡니다. */
.wp-foot .footrun a{color:#5a675f;text-decoration:underline;
  display:inline-flex;align-items:center;min-height:48px;padding:0 6px}
.wp-foot .footrun a.foottel{font-size:15px;font-weight:900;color:var(--deep);
  text-decoration:none;gap:4px}
.wp-foot .footbiz{margin-top:13px;padding-top:13px;border-top:1px dashed var(--line);
  font-size:12px;color:#7b857e;line-height:1.8}
.wp-foot .footbiz b{color:#5a675f}
.wp-foot .footbiz a{color:#7b857e;text-decoration:underline}
.wp-foot .footnote{margin-top:11px;font-size:12px;color:#8a938d;line-height:1.75}
.wp-foot .footnote b{color:#6b756e}
.wp-foot .footcopy{margin-top:12px;font-size:11px;color:#98a19b}

/* ── 페이지 번호 줄 (wpPagerHtml) ────────────────────────────────
   손가락으로 눌러야 하므로 단추를 작게 만들지 않습니다. 44px 이상. */
.wp-pager{display:flex;justify-content:center;align-items:center;gap:6px;
  flex-wrap:wrap;padding:16px 0 6px}
.wp-pg{min-width:44px;height:46px;padding:0 10px;border:1px solid var(--line);
  border-radius:12px;background:#fff;color:#55635b;font-size:15px;font-weight:900}
.wp-pg.on{background:var(--sec);color:var(--secd);border-color:var(--secd)}
.wp-pg:disabled{opacity:.35}
.wp-pg-gap{color:var(--muted);padding:0 2px;font-weight:900}

/* ── 글자딱지 색 (강력추천·추천·인기 …) ───────────────────────────
   자리(위치)는 각 화면에서 정하고, 색만 여기서 정합니다. */
.b-hot   {background:#fff1f0;color:#c0392b;box-shadow:inset 0 0 0 1px #f3c6c1}
.b-rec   {background:#fff8e6;color:#a1740d;box-shadow:inset 0 0 0 1px #f0dca8}
.b-pop   {background:#fff0f6;color:#c2185b;box-shadow:inset 0 0 0 1px #f3c4d8}
.b-new   {background:#eef7ff;color:#1565c0;box-shadow:inset 0 0 0 1px #c3ddf5}
.b-only  {background:#f3eefe;color:#6a35b8;box-shadow:inset 0 0 0 1px #d8c9f5}
.b-season{background:#eefaf1;color:#1f7a42;box-shadow:inset 0 0 0 1px #c3e7cf}
.b-sale  {background:#fff4e8;color:#c25e00;box-shadow:inset 0 0 0 1px #f5d5b2}
.b-soon  {background:#ffefef;color:#b3261e;box-shadow:inset 0 0 0 1px #f4c7c4}
.b-lux   {background:#fbf6ea;color:#8a6a1f;box-shadow:inset 0 0 0 1.5px #c9a227}
.b-value {background:#eef6f2;color:#2a6b52;box-shadow:inset 0 0 0 1px #c3ded2}

/* ══════════════ 기다리실 때 덮어드리는 칸 (wpBusy) ══════════════
   사진을 바꾸고 올리는 동안 화면을 덮습니다. 멈춘 것처럼 보이지 않고,
   그사이 실수로 두 번 누르거나 뒤로 가는 일도 없습니다. */
.wp-noscroll, .wp-noscroll body { overflow: hidden; }

.wp-busy{position:fixed;inset:0;z-index:2000;display:none;
  background:rgba(18,30,22,.55);align-items:center;justify-content:center;padding:22px}
.wp-busy.on{display:flex}
.wp-busy .wb-card{width:100%;max-width:330px;background:#fff;border-radius:20px;
  padding:26px 20px;text-align:center;box-shadow:0 14px 40px rgba(0,0,0,.22)}

.wp-busy .wb-ring{width:56px;height:56px;margin:0 auto 16px;border-radius:50%;
  border:5px solid #e2ece6;border-top-color:#1d7a43;animation:wb-spin .9s linear infinite}
.wp-busy .wb-ring.ok{border:0;background:#e8f6ed;color:#1d7a43;
  display:grid;place-items:center;font-size:32px;font-weight:900;animation:none}
@keyframes wb-spin{to{transform:rotate(360deg)}}

.wp-busy .wb-t{font-size:18px;font-weight:900;color:#1b2420;line-height:1.5}
.wp-busy .wb-s{font-size:14px;color:#6b776f;margin-top:9px;line-height:1.7}
.wp-busy .wb-sec{display:inline-block;margin-top:3px;font-size:16px;color:#1d7a43}

.wp-busy .wb-bar{height:10px;background:#e8efea;border-radius:99px;margin-top:17px;
  overflow:hidden}
.wp-busy .wb-bar i{display:block;height:100%;width:0;border-radius:99px;background:#1d7a43;
  transition:width .25s ease}
/* 몇 % 인지 알 수 없을 때 — 좌우로 흐르게 해서 돌아가고 있음을 보여드립니다 */
.wp-busy .wb-bar.indet i{width:42%;animation:wb-slide 1.25s ease-in-out infinite;
  background:linear-gradient(90deg,#9ed3b4,#1d7a43,#9ed3b4)}
@keyframes wb-slide{0%{transform:translateX(-110%)}100%{transform:translateX(250%)}}

.wp-busy .wb-pct{font-size:13px;font-weight:900;color:#1d7a43;margin-top:8px;min-height:17px}
.wp-busy .wb-steps{display:flex;gap:6px;justify-content:center;margin-top:15px}
.wp-busy .wb-steps i{width:8px;height:8px;border-radius:50%;background:#dde7e1}
.wp-busy .wb-steps i.on{background:#1d7a43}

@media (prefers-reduced-motion: reduce){
  .wp-busy .wb-ring{animation:none}
  .wp-busy .wb-bar.indet i{animation:none;width:100%}
}