@charset "utf-8";
/* 매장찾기 */
.sf {max-width:1400px; margin:0 auto; padding:80px 20px; box-sizing:border-box; color:#222; font-size:16px; line-height:1.5}
.sf *, .sf *::before, .sf *::after {box-sizing:border-box}
.sf [hidden] {display:none !important}

/* 상단 : 지도 + 검색 */
.sf-top {display:flex; border:1px solid #e3e3e3; background:#fff}
.sf-map {flex:0 0 50%; display:flex; align-items:center; justify-content:center; padding:40px; background:#f7f7f7}
.sf-map-svg {display:block; width:100%; max-width:440px; height:auto}
.sf-region {fill:#fff; stroke:#c8c8c8; stroke-width:.8; stroke-linejoin:round; cursor:pointer; transition:fill .2s}
.sf-region.has-store {fill:#ffecc4}
.sf-region:hover, .sf-region.is-hover, .sf-region:focus {fill:#ffd683; outline:none}
.sf-region.is-active {fill:#ffbc45; stroke:#e09a1c}
.sf-label {font-size:14px; font-family:Pretendard, 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', sans-serif; fill:#444; text-anchor:middle; dominant-baseline:middle; cursor:pointer; user-select:none}
.sf-label.is-active {font-weight:700; fill:#111}

.sf-search {flex:1 1 50%; display:flex; flex-direction:column; justify-content:center; padding:60px 80px}
.sf-title {margin:0 0 24px; font-family:'GmarketSansBold', Pretendard, sans-serif; font-size:42px; line-height:1.35; letter-spacing:-1px; color:#111; font-weight:normal}
.sf-desc {margin:0 0 48px; font-size:18px; color:#444}

.sf-form {max-width:520px}
.sf-row {display:flex; gap:10px; margin-bottom:12px}
.sf-select, .sf-input {flex:1 1 0; min-width:0; height:60px; padding:0 18px; border:1px solid #222; border-radius:4px; background:#fff; font-size:16px; color:#222; font-family:inherit}
.sf-select {appearance:none; -webkit-appearance:none; padding-right:40px; background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23222' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 18px center; cursor:pointer}
.sf-select:disabled {color:#aaa; border-color:#ccc; cursor:default}
.sf-input:focus, .sf-select:focus {outline:2px solid #ffbc45; outline-offset:1px}
.sf-btn {display:inline-flex; align-items:center; justify-content:center; flex:0 0 180px; height:60px; padding:0 20px; border:0; border-radius:4px; background:#ffbc45; color:#222; font-size:17px; font-weight:600; cursor:pointer; text-decoration:none; transition:background .2s}
.sf-btn:hover {background:#ffab14}

/* 지역 탭 */
.sf-tabs {position:relative; display:grid; grid-template-columns:repeat(auto-fill, minmax(66px, 1fr)); margin-top:40px}
.sf-tab {height:44px; padding:0 6px; border:0; border-bottom:1px solid #222; border-radius:6px 6px 0 0; background:none; color:#444; font-size:16px; font-family:inherit; white-space:nowrap; cursor:pointer; transition:background .2s, color .2s}
.sf-tab:hover {color:#111; background:#fff3dc}
.sf-tab.is-active {background:#2b2b2b; color:#fff; font-weight:600}
.sf-tab:focus-visible {outline:2px solid #ffbc45; outline-offset:-2px}

/* 목록 */
.sf-result {margin-top:24px}
.sf-count {margin:0 0 14px; font-size:16px; color:#555}
.sf-count strong {color:#e08a00; font-weight:700}
.sf-table {width:100%; table-layout:fixed; border-collapse:collapse; border-top:2px solid #222; font-size:15px; text-align:center}
/* 열 너비 고정 (주소만 가변) : 지역을 바꿔도 열이 흔들리지 않도록 */
.sf-table th.sf-c-region {width:90px}
.sf-table th.sf-c-name {width:220px}
.sf-table th.sf-c-tel {width:150px}
.sf-table th.sf-c-open {width:130px}
.sf-table th.sf-c-btn {width:190px}
.sf-table td {word-break:keep-all; overflow-wrap:anywhere}
.sf-table th {height:56px; background:#fff3dc; font-weight:600; color:#222}
.sf-table td {height:72px; padding:8px 10px; border-bottom:1px solid #e5e5e5; color:#555}
.sf-table .sf-c-name {color:#222; font-weight:600}
.sf-table .sf-c-tel a {color:inherit; text-decoration:none}
.sf-detail {width:150px; height:46px; border:0; border-radius:4px; background:#ffbc45; color:#222; font-size:15px; font-weight:600; cursor:pointer; transition:background .2s}
.sf-detail:hover {background:#ffab14}

.sf-empty {padding:60px 20px; border-top:2px solid #222; border-bottom:1px solid #e5e5e5; text-align:center}
.sf-empty p {margin:0; font-size:18px; color:#333}
.sf-empty .sf-empty-sub {margin:8px 0 24px; font-size:15px; color:#777}
.sf-btn-line {flex:none; background:#fff; border:1px solid #222}
.sf-btn-line:hover {background:#ffbc45; border-color:#ffbc45}

.sf-more-wrap {margin-top:30px; text-align:center}
.sf-more {height:52px; padding:0 48px; border:1px solid #222; border-radius:26px; background:#fff; font-size:15px; cursor:pointer}
.sf-more:hover {background:#222; color:#fff}

.sf.sf-no-open .sf-c-open {display:none !important}

/* 상세 팝업 */
html.sf-modal-open, html.sf-modal-open body {overflow:hidden}
.sf-modal {position:fixed; inset:0; z-index:10000; display:flex; align-items:center; justify-content:center; padding:20px}
.sf-modal-dim {position:absolute; inset:0; background:rgba(0,0,0,.6)}
.sf-modal-box {position:relative; width:100%; max-width:480px; max-height:100%; overflow-y:auto; padding:44px 36px 32px; border-radius:12px; background:#fff; box-shadow:0 20px 50px rgba(0,0,0,.3); outline:none}
.sf-modal-close {position:absolute; top:10px; right:12px; z-index:1; width:40px; height:40px; border:0; border-radius:50%; background:rgba(255,255,255,.85); font-size:30px; line-height:1; color:#333; cursor:pointer}
.sf-modal-photo {margin:-44px -36px 28px; border-radius:12px 12px 0 0; overflow:hidden; background:#222}
.sf-modal-photo img {display:block; width:100%; aspect-ratio:16/10; object-fit:cover}
.sf-modal-region {margin:0 0 6px; font-size:14px; color:#e08a00; font-weight:600}
.sf-modal-title {margin:0 0 24px; font-family:'GmarketSansBold', Pretendard, sans-serif; font-size:26px; font-weight:normal; color:#111}
.sf-modal-info {display:grid; grid-template-columns:80px 1fr; gap:12px 10px; margin:0 0 28px; padding:20px 0; border-top:1px solid #eee; border-bottom:1px solid #eee; font-size:15px}
.sf-modal-info dt {color:#888}
.sf-modal-info dd {margin:0; color:#222; word-break:keep-all}
.sf-modal-links {display:flex; gap:8px}
.sf-modal-links a {flex:1; display:flex; align-items:center; justify-content:center; height:48px; border-radius:6px; font-size:15px; font-weight:600; text-decoration:none}
.sf-link-naver {background:#03c75a; color:#fff}
.sf-link-kakao {background:#fee500; color:#191919}
.sf-link-tel {background:#222; color:#fff}

/* 태블릿 */
@media (max-width:1100px) {
  .sf-search {padding:40px}
  .sf-title {font-size:34px}
  .sf-desc {margin-bottom:32px}
  .sf-btn {flex-basis:130px}
  .sf-table th.sf-c-region {width:70px}
  .sf-table th.sf-c-name {width:170px}
  .sf-table th.sf-c-tel {width:120px}
  .sf-table th.sf-c-open {width:110px}
  .sf-table th.sf-c-btn {width:140px}
  .sf-detail {width:110px}
}

/* 모바일 */
@media (max-width:768px) {
  .sf {padding:50px 16px}
  .sf-top {flex-direction:column}
  .sf-map {padding:24px 16px}
  .sf-map-svg {max-width:300px}
  .sf-label {font-size:15px}
  .sf-search {padding:28px 20px 24px}
  .sf-title {font-size:26px; margin-bottom:12px}
  .sf-desc {font-size:15px; margin-bottom:20px}
  .sf-select, .sf-input, .sf-btn {height:50px; font-size:15px}
  .sf-btn {flex-basis:100px}
  .sf-row {gap:8px; margin-bottom:8px}

  .sf-tabs {display:flex; margin:28px -16px 0; padding:0 16px; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none}
  .sf-tabs::-webkit-scrollbar {display:none}
  .sf-tab {flex:0 0 auto; height:40px; padding:0 14px; font-size:15px}
  .sf-result {margin-top:18px}
  .sf-table, .sf-table tbody, .sf-table tr, .sf-table td {display:block}
  .sf-table {border-top:2px solid #222; text-align:left}
  .sf-table thead {display:none}
  .sf-table tr {position:relative; padding:18px 4px; border-bottom:1px solid #e5e5e5}
  .sf-table td {height:auto; padding:2px 0; border:0; font-size:14px}
  .sf-table .sf-c-region {display:inline-block; margin-bottom:4px; padding:2px 8px; border-radius:3px; background:#fff3dc; color:#b36b00; font-size:12px; font-weight:600}
  .sf-table .sf-c-name {font-size:17px; margin-bottom:4px}
  .sf-table .sf-c-open:not(.is-soon):not(.is-empty)::before {content:'오픈 '}
  .sf-table td.is-empty {display:none}
  .sf-modal-photo {margin:-40px -22px 24px; border-radius:16px 16px 0 0}
  .sf-table .sf-c-btn {margin-top:12px}
  .sf-detail {width:100%; height:44px}

  .sf-modal {align-items:flex-end; padding:0}
  .sf-modal-box {max-width:none; border-radius:16px 16px 0 0; padding:40px 22px 28px}
  .sf-modal-title {font-size:22px}
}