/* ========================================================= common.css - 골프 부킹 플랫폼 공통 스타일 - Mobile First 반응형 - 시니어 골퍼 고려: 큰 글씨(기본 16px+), 큰 터치영역(최소 48px) - Light / Dark Mode (CSS 변수) ========================================================= */ :root { --primary: #0F7B46; --primary-d: #0A5C34; --secondary: #F6C945; --bg: #F8F9FA; --card: #FFFFFF; --text: #222222; --text-sub: #6B7280; --line: #E5E7EB; --success: #32C671; --warning: #F59E0B; --danger: #EF4444; --shadow: 0 2px 12px rgba(0,0,0,.07); --radius: 14px; } /* ========================================================= 테마 방식 (v6) - 기본값 = 라이트 모드 (야외/시니어 가독성 우선) - 사용자가 헤더의 ☀/🌙 버튼으로 직접 선택 → localStorage 저장 - 클래스는 (documentElement)에 부여: html.dark ※ body가 아닌 html에 붙이는 이유 1) common.js가 head에서 실행돼도 documentElement는 항상 존재 2) 첫 페인트 전에 적용되어 화면 깜빡임(FOUC) 없음 ========================================================= */ html { color-scheme: light; } html.dark { color-scheme: dark; --bg: #14181B; --card: #1E2429; --text: #ECEFF1; --text-sub: #9AA5AD; --line: #2C343B; --shadow: 0 2px 12px rgba(0,0,0,.45); } /* 하위 호환 (기존 body.dark 사용 페이지가 있어도 동작) */ body.dark { --bg:#14181B; --card:#1E2429; --text:#ECEFF1; --text-sub:#9AA5AD; --line:#2C343B; --shadow:0 2px 12px rgba(0,0,0,.45); } * { margin:0; padding:0; box-sizing:border-box; } html { -webkit-text-size-adjust:100%; } body { font-family:"Pretendard","Malgun Gothic","Apple SD Gothic Neo",sans-serif; font-size:16px; line-height:1.5; background:var(--bg); color:var(--text); padding-bottom:calc(72px + env(safe-area-inset-bottom)); /* 하단 네비 공간 */ } a { color:inherit; text-decoration:none; } img { max-width:100%; display:block; } button { font:inherit; cursor:pointer; } input, select, textarea { font:inherit; color:var(--text); } /* ---------- 상단 헤더 (Sticky) ---------- */ .hd { position:sticky; top:0; z-index:100; background:var(--card); border-bottom:1px solid var(--line); padding-top:env(safe-area-inset-top); } .hd-in { display:flex; align-items:center; gap:8px; height:56px; padding:0 16px; max-width:720px; margin:0 auto; } .hd-back { display:flex; align-items:center; justify-content:center; width:40px; height:40px; margin-left:-6px; flex:0 0 auto; color:var(--text); background:var(--bg); border-radius:50%; transition:background-color .15s, transform .1s; } .hd-back svg { display:block; } .hd-back:active { background:var(--line); transform:scale(0.92); } .hd-theme { display:flex; align-items:center; justify-content:center; width:42px; height:42px; flex:0 0 auto; font-size:20px; line-height:1; background:var(--bg); border:0; border-radius:50%; transition:background-color .15s, transform .1s; } .hd-theme:active { background:var(--line); transform:scale(0.92); } .hd-logo { font-size:22px; font-weight:800; color:var(--primary); letter-spacing:-.5px; } .hd-right { margin-left:auto; display:flex; align-items:center; gap:4px; } .hd-ico { font-size:22px; padding:10px; } .hd-login { font-size:15px; font-weight:600; color:var(--primary); border:1.5px solid var(--primary); border-radius:999px; padding:7px 16px; } /* ---------- 본문 컨테이너 ---------- */ .wrap { max-width:720px; margin:0 auto; padding:16px; } /* ---------- 하단 네비게이션 ---------- */ .bnav { position:fixed; left:0; right:0; bottom:0; z-index:100; display:flex; background:var(--card); border-top:1px solid var(--line); padding-bottom:env(safe-area-inset-bottom); max-width:720px; margin:0 auto; } .bnav-item { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:64px; gap:2px; font-size:13px; color:var(--text-sub); font-weight:600; } .bnav-ico { font-size:22px; line-height:1; } .bnav-item.on { color:var(--primary); } .bnav-main .bnav-ico { background:var(--primary); color:#fff; width:44px; height:44px; display:flex; align-items:center; justify-content:center; border-radius:50%; margin-top:-18px; box-shadow:var(--shadow); } .bnav-main.on .bnav-ico { background:var(--primary-d); } /* ---------- 카드 ---------- */ .card { display:block; background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow); padding:16px; margin-bottom:14px; } .card-tit { font-size:18px; font-weight:700; margin-bottom:12px; display:flex; align-items:center; justify-content:space-between; } .card-tit .more { font-size:14px; color:var(--text-sub); font-weight:500; } /* ---------- 버튼 (최소 높이 52px : 시니어 터치 고려) ---------- */ .btn { display:inline-flex; align-items:center; justify-content:center; min-height:52px; padding:0 20px; border:0; border-radius:12px; font-size:17px; font-weight:700; width:100%; background:var(--primary); color:#fff; text-decoration:none; white-space:nowrap; cursor:pointer; transition:opacity .15s; } .btn:active { opacity:.85; } /* .btn-sm 은 .btn 없이 단독으로도(class="btn-sm btn-line" 등) 완전하게 동작하도록 정렬·좌우여백·기본 배경색까지 자체 포함합니다. */ .btn-sm { display:inline-flex; align-items:center; justify-content:center; min-height:40px; padding:0 16px; border:0; border-radius:10px; font-size:15px; font-weight:700; width:auto; background:var(--primary); color:#fff; text-decoration:none; white-space:nowrap; cursor:pointer; transition:opacity .15s; } .btn-sm:active { opacity:.85; } /* 색상/테두리 변형 - .btn / .btn-sm 뒤에 위치해야 배경색이 정상적으로 덮어써집니다 */ .btn-sub { background:var(--card); color:var(--primary); border:1.5px solid var(--primary); } .btn-gold { background:var(--secondary); color:#3a2e00; } .btn-line { background:var(--card); color:var(--text); border:1.5px solid var(--line); } .btn-danger { background:var(--danger); color:#fff; } /* ---------- 입력 ---------- */ .frm { display:flex; flex-direction:column; gap:14px; } .frm label { font-size:15px; font-weight:600; margin-bottom:6px; display:block; } .inp, .sel, .txa { width:100%; min-height:52px; padding:0 14px; border:1.5px solid var(--line); border-radius:12px; background:var(--card); font-size:16px; } .txa { min-height:120px; padding:14px; resize:vertical; } .inp:focus, .sel:focus, .txa:focus { outline:none; border-color:var(--primary); } /* ---------- 검색바 ---------- */ .searchbar { display:flex; align-items:center; gap:10px; background:var(--card); border:1.5px solid var(--line); border-radius:999px; padding:0 18px; min-height:54px; box-shadow:var(--shadow); font-size:16px; color:var(--text-sub); } .searchbar .ico { font-size:20px; } /* ---------- 칩(필터) ---------- */ .chips { display:flex; gap:8px; overflow-x:auto; padding:4px 0 8px; -webkit-overflow-scrolling:touch; } .chips::-webkit-scrollbar { display:none; } .chip { flex:0 0 auto; padding:10px 16px; border-radius:999px; border:1.5px solid var(--line); background:var(--card); font-size:15px; font-weight:600; color:var(--text-sub); white-space:nowrap; } .chip.on { background:var(--primary); border-color:var(--primary); color:#fff; } /* ---------- 티타임 리스트 ---------- */ .tee { display:flex; align-items:center; gap:14px; padding:14px 0; border-bottom:1px solid var(--line); } .tee:last-child { border-bottom:0; } .tee-time { font-size:20px; font-weight:800; color:var(--primary); min-width:64px; } .tee-info { flex:1; min-width:0; } .tee-club { font-size:16px; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .tee-sub { font-size:14px; color:var(--text-sub); } .tee-price { text-align:right; } .tee-price .now { font-size:18px; font-weight:800; } .tee-price .was { font-size:13px; color:var(--text-sub); text-decoration:line-through; } .tee-price .dc { font-size:13px; color:var(--danger); font-weight:700; } /* ---------- 배지 ---------- */ .badge { display:inline-block; font-size:12px; font-weight:700; padding:3px 8px; border-radius:6px; } .badge-hot { background:#FEF2F2; color:var(--danger); } .badge-ok { background:#ECFDF3; color:var(--success); } .badge-gold { background:#FFF8E1; color:#8a6d00; } html.dark .badge-hot { background:rgba(239,68,68,.16); } html.dark .badge-ok { background:rgba(50,198,113,.16); } html.dark .badge-gold { background:rgba(246,201,69,.16); color:#F6C945; } /* ---------- 가로 스크롤 카드 (인기 골프장) ---------- */ .hscroll { display:flex; gap:12px; overflow-x:auto; padding:4px 0 8px; -webkit-overflow-scrolling:touch; } .hscroll::-webkit-scrollbar { display:none; } .club-card { flex:0 0 200px; background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; } .club-card .thumb { height:120px; background:linear-gradient(135deg,#0F7B46,#32C671); } .club-card .body { padding:12px; } .club-card .nm { font-size:16px; font-weight:700; } .club-card .ar { font-size:13px; color:var(--text-sub); } .club-card .pr { font-size:16px; font-weight:800; margin-top:6px; } /* ---------- 토스트 ---------- */ .toast { position:fixed; left:50%; bottom:96px; transform:translateX(-50%) translateY(20px); background:rgba(20,24,27,.92); color:#fff; font-size:15px; padding:12px 22px; border-radius:999px; opacity:0; pointer-events:none; transition:all .25s; z-index:999; max-width:88%; text-align:center; } .toast.show { opacity:1; transform:translateX(-50%) translateY(0); } /* ---------- 모달 / 바텀시트 ---------- */ .dim { position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:200; display:none; } .dim.show { display:block; } .sheet { position:fixed; left:0; right:0; bottom:0; z-index:201; max-width:720px; margin:0 auto; background:var(--card); border-radius:20px 20px 0 0; padding:20px 16px calc(20px + env(safe-area-inset-bottom)); transform:translateY(100%); transition:transform .25s; } .sheet.show { transform:translateY(0); } .sheet-bar { width:44px; height:5px; background:var(--line); border-radius:99px; margin:0 auto 16px; } /* ---------- 스켈레톤 ---------- */ .skel { background:linear-gradient(90deg,var(--line) 25%,var(--bg) 50%,var(--line) 75%); background-size:200% 100%; animation:skel 1.2s infinite; border-radius:8px; } @keyframes skel { 0%{background-position:200% 0} 100%{background-position:-200% 0} } /* ---------- 맨 위로 가기 버튼 ---------- 위치(bottom)는 페이지별 하단 고정 요소(하단 네비/CTA 버튼)를 피해 footer.asp에서 인라인 style로 지정합니다. */ .top-btn { position: fixed; right: 16px; z-index: 95; bottom: calc(84px + env(safe-area-inset-bottom)); width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--card); color: var(--text); border: 1.5px solid var(--line); box-shadow: var(--shadow); font-size: 20px; line-height: 1; padding: 0; opacity: 0; transform: translateY(8px); pointer-events: none; transition: opacity .2s, transform .2s; } .top-btn.show { opacity: 1; transform: translateY(0); pointer-events: auto; } .top-btn:active { background: var(--bg); transform: scale(0.94); } /* ---------- 유틸 ---------- */ .mt8{margin-top:8px} .mt16{margin-top:16px} .mb8{margin-bottom:8px} .tc{text-align:center} .sub{color:var(--text-sub);font-size:14px} .flex{display:flex;align-items:center;gap:8px} .grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px} /* ---------- 태블릿 이상 ---------- */ @media (min-width:720px) { body { font-size:17px; } .club-card { flex-basis:240px; } } /* ---------- 접근성 ---------- */ @media (prefers-reduced-motion: reduce) { * { animation:none!important; transition:none!important; } } :focus-visible { outline:2px solid var(--primary); outline-offset:2px; }