/* 레이아웃: 상단 고정 헤더 + 업종 탭, 4열 카드 그리드(모바일 2열), 상세는 사진/정보 2단. 관리자 화면은 같은 토큰을 쓰는 표·폼 */
:root {
  --bg: #f6f4ef; --surface: #ffffff; --surface-2: #fbfaf7;
  --ink: #1b2330; --ink-2: #3a4452; --muted: #727a86; --line: #e6e1d8; --field: #d9d3c8;
  --brand: #1d5a48; --brand-soft: #e7f0ec; --brand-ink: #164a3b; --on-brand: #ffffff;
  --hero-bg: #1d5a48; --hero-hi: #ffc9a6;
  --accent: #e3612a; --accent-soft: #fff1e8; --accent-line: #f7d3bd; --benefit-ink: #9d3a10; --benefit-sub: #8a5a43;
  --pick-bg: #1b2330; --pick-fg: #ffd58a;
  --danger: #c0392b; --danger-soft: #fdecea; --warn-soft: #fff6dc; --warn-ink: #7a5b00;
  --ph-a: #e7f0ec; --ph-b: #f3efe6;
  --demo-bg: #1b2330; --demo-fg: #e8ecee;
  --spot-bg: #1b2330; --spot-fg: #ffffff; --spot-hi: #f5c04a; --spot-ribbon-ink: #2a1f00; --spot-chip: rgba(255,255,255,.14); --spot-glow: rgba(245,192,74,.28);
  --logo-tile: transparent; --logo-pad: 0;
  --font: "IBM Plex Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --radius: 14px;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --bg: #131719; --surface: #1b2023; --surface-2: #20262a;
  --ink: #e9edef; --ink-2: #c4cbcf; --muted: #8b959b; --line: #2c3438; --field: #3a4449;
  --brand: #2f7d64; --brand-soft: #1d3029; --brand-ink: #8fd3b8; --on-brand: #ffffff;
  --hero-bg: #173f34; --hero-hi: #ffb48c;
  --accent: #f07a43; --accent-soft: #33221a; --accent-line: #5a3524; --benefit-ink: #ffb48c; --benefit-sub: #d9a88f;
  --pick-bg: #e9edef; --pick-fg: #6b4a00;
  --danger: #ef6b5c; --danger-soft: #3a1f1c; --warn-soft: #3a3115; --warn-ink: #f1d37a;
  --ph-a: #1d3029; --ph-b: #262b2e;
  --demo-bg: #0b0e10; --demo-fg: #e9edef;
  --logo-tile: #f4f2ec; --logo-pad: 6px 10px;
  --spot-bg: #0e1214; --spot-fg: #f3f1ea; --spot-hi: #f5c04a; --spot-ribbon-ink: #2a1f00; --spot-chip: rgba(255,255,255,.1); --spot-glow: rgba(245,192,74,.16);
  color-scheme: dark;
} }
:root[data-theme="dark"] {
  --bg: #131719; --surface: #1b2023; --surface-2: #20262a;
  --ink: #e9edef; --ink-2: #c4cbcf; --muted: #8b959b; --line: #2c3438; --field: #3a4449;
  --brand: #2f7d64; --brand-soft: #1d3029; --brand-ink: #8fd3b8; --on-brand: #ffffff;
  --hero-bg: #173f34; --hero-hi: #ffb48c;
  --accent: #f07a43; --accent-soft: #33221a; --accent-line: #5a3524; --benefit-ink: #ffb48c; --benefit-sub: #d9a88f;
  --pick-bg: #e9edef; --pick-fg: #6b4a00;
  --danger: #ef6b5c; --danger-soft: #3a1f1c; --warn-soft: #3a3115; --warn-ink: #f1d37a;
  --ph-a: #1d3029; --ph-b: #262b2e;
  --demo-bg: #0b0e10; --demo-fg: #e9edef;
  --logo-tile: #f4f2ec; --logo-pad: 6px 10px;
  --spot-bg: #0e1214; --spot-fg: #f3f1ea; --spot-hi: #f5c04a; --spot-ribbon-ink: #2a1f00; --spot-chip: rgba(255,255,255,.1); --spot-glow: rgba(245,192,74,.16);
  color-scheme: dark;
}
* { box-sizing: border-box; }
body { background: var(--bg); color: var(--ink); font-family: var(--font); font-size: 15px; line-height: 1.55; word-break: keep-all; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding-inline: 16px; }
.ic { width: 16px; height: 16px; flex: none; }
.muted { color: var(--muted); font-weight: 500; }
.hint { color: var(--muted); font-size: 13px; margin: 6px 0 0; }

/* 헤더 */
.site-header { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 30; background: var(--surface); border-bottom: 1px solid var(--line); }
.header-inner { display: flex; align-items: center; gap: 16px; min-height: 60px; }
.logo { display: flex; align-items: center; gap: 9px; font-weight: 700; font-size: 18px; letter-spacing: -.02em; flex: none; background: none; border: 0; padding: 0; }
.logo-img { height: 48px; width: auto; display: block; margin-block: 6px; }
.footer-brand { display: flex; gap: 16px; align-items: center; min-width: 0; }
.footer-logo, .auth-logo { height: 64px; width: auto; flex: none; background: var(--logo-tile); border-radius: 10px; padding: var(--logo-pad); }
.auth-logo { height: 84px; margin: 0 auto 14px; display: block; }
.logo-mark { width: 32px; height: 32px; border-radius: 9px; background: var(--brand); color: var(--on-brand); display: grid; place-items: center; font-size: 15px; }
.logo em { font-style: normal; font-size: 12px; font-weight: 600; color: var(--brand-ink); background: var(--brand-soft); padding: 2px 8px; border-radius: 99px; }
.search { margin-left: auto; position: relative; width: 100%; max-width: 340px; min-width: 0; }
.search .ic { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--muted); }
.search input { width: 100%; height: 40px; border: 1px solid var(--line); background: var(--bg); border-radius: 99px; padding: 0 14px 0 38px; outline: none; }
.search input:focus { border-color: var(--brand); background: var(--surface); }
.admin-nav { margin-left: auto; display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.admin-nav a, .admin-nav button { padding: 8px 11px; border-radius: 8px; font-size: 14px; font-weight: 600; color: var(--ink-2); white-space: nowrap; background: none; border: 0; }
.admin-nav a:hover, .admin-nav button:hover { background: var(--bg); }
.admin-nav a.on, .admin-nav button.on { background: var(--ink); color: var(--surface); }

/* 히어로 */
.hero { background: var(--hero-bg); color: var(--on-brand); padding-block: 32px 28px; position: relative; overflow: hidden; }
.hero::after { content: ""; position: absolute; right: -80px; top: -120px; width: 380px; height: 380px; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.12), transparent 65%); pointer-events: none; }
.hero-kicker { margin: 0 0 6px; font-size: 13px; font-weight: 600; opacity: .8; }
.hero h1 { margin: 0; font-size: clamp(24px, 4vw, 34px); letter-spacing: -.03em; line-height: 1.25; text-wrap: balance; }
.hero h1 span { color: var(--hero-hi); }
.hero-sub { margin: 10px 0 0; opacity: .88; }

/* 업종 탭 */
.cats { background: var(--surface); border-bottom: 1px solid var(--line); }
.cats-inner { display: flex; gap: 8px; overflow-x: auto; padding-block: 12px; scrollbar-width: none; }
.cats-inner::-webkit-scrollbar { display: none; }
.cat { flex: none; padding: 7px 14px; border-radius: 99px; border: 1px solid var(--line); background: var(--surface); font-size: 14px; font-weight: 600; color: var(--ink-2); white-space: nowrap; }
.cat i { font-style: normal; font-size: 12px; color: var(--muted); margin-left: 2px; font-variant-numeric: tabular-nums; }
.cat:hover { border-color: var(--brand); }
.cat.on { background: var(--ink); border-color: var(--ink); color: var(--surface); }
.cat.on i { color: inherit; opacity: .7; }

/* 목록 */
.list { padding-block: 26px 48px; }
.list-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.list-head h2 { margin: 0; font-size: 20px; letter-spacing: -.02em; }
.list-head h2 span { font-size: 14px; color: var(--muted); font-weight: 600; margin-left: 4px; }
.linkish { background: none; border: 0; padding: 0; font-size: 13px; color: var(--muted); text-decoration: underline; }
.grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.card { background: var(--surface); border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); display: flex; flex-direction: column; text-align: left; padding: 0; transition: transform .15s, box-shadow .15s; min-width: 0; }
.card:hover { transform: translateY(-3px); box-shadow: 0 6px 18px rgba(0,0,0,.08); }
.card-thumb { position: relative; aspect-ratio: 4 / 3; max-width: 100%; background: var(--ph-b); overflow: hidden; }
.card-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumb-ph { width: 100%; height: 100%; display: grid; place-items: center; font-size: 40px; font-weight: 700; color: var(--brand-ink); background: linear-gradient(135deg, var(--ph-a), var(--ph-b)); }
.thumb-ph.big { font-size: 72px; }
.badges { position: absolute; left: 10px; top: 10px; display: flex; gap: 5px; }
.badge { display: inline-block; font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 6px; letter-spacing: .03em; line-height: 1.4; }
.badge-pick { background: var(--pick-bg); color: var(--pick-fg); }
.badge-new { background: var(--accent); color: #fff; }
.card-body { padding: 14px 15px 16px; display: flex; flex-direction: column; gap: 6px; flex: 1; width: 100%; }
.card-cat { font-size: 12px; font-weight: 700; color: var(--brand-ink); }
.card-name { margin: 0; font-size: 17px; letter-spacing: -.02em; line-height: 1.3; }
.card-sum { margin: 0; color: var(--ink-2); font-size: 13.5px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card-benefit { display: flex; gap: 6px; align-items: flex-start; background: var(--accent-soft); color: var(--benefit-ink); border-radius: 9px; padding: 8px 10px; font-size: 13px; font-weight: 600; }
.card-benefit .ic { margin-top: 2px; }
/* 마우스오버: 혜택 강조 */
.card-thumb img { transition: transform .5s ease; }
.card:hover .card-thumb img { transform: scale(1.06); }
.card-benefit { position: relative; overflow: hidden; transform-origin: left center; transition: background-color .25s, color .25s, transform .25s cubic-bezier(.3,1.6,.5,1), box-shadow .25s; }
.card-benefit::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent); transform: skewX(-20deg); pointer-events: none; opacity: 0; }
.card:hover .card-benefit, .card:focus-visible .card-benefit { background: var(--accent); color: #fff; transform: scale(1.045); box-shadow: 0 6px 16px var(--spot-glow), 0 4px 12px rgba(227,97,42,.35); }
.card:hover .card-benefit::after { opacity: 1; animation: benefitShine 1.1s ease .1s; }
.card:hover .card-benefit .ic { animation: giftWiggle .7s ease; }
@keyframes benefitShine { from { left: -60%; } to { left: 130%; } }
@keyframes giftWiggle { 0%,100% { transform: rotate(0) scale(1); } 20% { transform: rotate(-18deg) scale(1.25); } 40% { transform: rotate(14deg) scale(1.25); } 60% { transform: rotate(-8deg) scale(1.15); } 80% { transform: rotate(4deg) scale(1.05); } }
.spot:hover .spot-head mark { animation: markPop .6s cubic-bezier(.3,1.6,.5,1); display: inline-block; }
@keyframes markPop { 0% { transform: scale(1); } 45% { transform: scale(1.12) rotate(-2deg); } 100% { transform: scale(1); } }
.btn-spot { position: relative; overflow: hidden; }
.btn-spot::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.7), transparent); transform: skewX(-20deg); animation: benefitShine 2.6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .card-benefit, .card-thumb img { transition: none; }
  .card:hover .card-thumb img { transform: none; }
  .card:hover .card-benefit::after, .card:hover .card-benefit .ic, .spot:hover .spot-head mark, .btn-spot::after { animation: none; }
}
.card-benefit span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card-region { margin-top: auto; padding-top: 4px; display: flex; gap: 4px; align-items: flex-start; line-height: 1.45; font-size: 12.5px; color: var(--muted); }
.card-region .ic { width: 14px; height: 14px; margin-top: 1px; }
.more-wrap { text-align: center; margin-top: 28px; }
.empty { text-align: center; padding: 60px 16px; color: var(--muted); background: var(--surface); border-radius: var(--radius); border: 1px dashed var(--line); }

/* 버튼 */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 42px; padding: 0 18px; border-radius: 10px; border: 1px solid var(--ink); background: var(--ink); color: var(--surface); font-weight: 700; font-size: 14.5px; white-space: nowrap; }
.btn:hover { opacity: .9; }
.btn-primary { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.btn-ghost { background: var(--surface); color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--ink); opacity: 1; }
.btn-danger { background: var(--surface); color: var(--danger); border-color: var(--danger); }
.btn-on { background: var(--brand-soft); color: var(--brand-ink); border-color: var(--brand-soft); }
.btn-sm { height: 36px; padding: 0 13px; font-size: 13.5px; }
.btn-xs { height: 30px; padding: 0 10px; font-size: 12.5px; border-radius: 8px; }
.btn-more { min-width: 220px; height: 48px; background: var(--surface); color: var(--ink); border-color: var(--line); border-radius: 99px; }

/* 상세 */
.detail { padding-block: 18px 56px; }
.detail-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.back { display: inline-flex; align-items: center; gap: 2px; font-weight: 600; color: var(--muted); background: none; border: 0; padding: 0; }
.detail-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 34px; align-items: start; }
.gallery-main { position: relative; display: block; width: 100%; padding: 0; border: 0; border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 3; max-width: 100%; background: var(--ph-b); cursor: zoom-in; }
.gallery-main img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gallery-count { position: absolute; right: 12px; bottom: 12px; background: rgba(0,0,0,.6); color: #fff; font-size: 12px; padding: 4px 10px; border-radius: 99px; font-variant-numeric: tabular-nums; }
.gallery-thumbs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-top: 10px; }
.gallery-thumbs button { padding: 0; border: 2px solid transparent; border-radius: 9px; overflow: hidden; aspect-ratio: 1; background: var(--ph-b); }
.gallery-thumbs button.on { border-color: var(--brand); }
.gallery-thumbs img { width: 100%; height: 100%; object-fit: cover; display: block; }
.info .badge { margin-left: 6px; vertical-align: 1px; }
.info-name { margin: 6px 0 4px; font-size: clamp(24px, 3.2vw, 32px); letter-spacing: -.03em; line-height: 1.25; text-wrap: balance; }
.info-sum { margin: 0 0 18px; color: var(--ink-2); font-size: 16px; }
.benefit-box { background: var(--accent-soft); border: 1px solid var(--accent-line); border-radius: var(--radius); padding: 16px 18px; margin-bottom: 18px; }
.benefit-label { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--accent); }
.benefit-text { margin: 6px 0 0; font-size: 19px; font-weight: 700; color: var(--benefit-ink); letter-spacing: -.02em; line-height: 1.4; }
.benefit-terms { margin: 8px 0 0; font-size: 13px; color: var(--benefit-sub); white-space: pre-line; }
.facts { margin: 0 0 18px; border-top: 1px solid var(--line); }
.facts > div { display: grid; grid-template-columns: 92px 1fr; gap: 8px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.facts dt { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 14px; }
.facts dd { margin: 0; font-weight: 500; min-width: 0; overflow-wrap: anywhere; }
.phone { color: var(--brand-ink); font-weight: 700; user-select: all; }
.maplinks { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.maplinks a { font-size: 12px; font-weight: 600; color: var(--ink-2); border: 1px solid var(--line); border-radius: 6px; padding: 2px 8px; }
.cta { display: flex; gap: 8px; margin-bottom: 18px; }
.cta .btn { flex: 1; }
.links { display: flex; flex-wrap: wrap; gap: 8px; }
.linkbtn { display: inline-flex; align-items: center; gap: 7px; padding: 9px 14px; border-radius: 10px; background: var(--surface); border: 1px solid var(--line); font-weight: 600; font-size: 14px; }
.linkbtn:hover { border-color: var(--ink); }
.lt-dot { width: 9px; height: 9px; border-radius: 50%; background: #9aa0a8; }
.lt-naver_place .lt-dot, .lt-blog .lt-dot, .lt-smartstore .lt-dot { background: #03c75a; }
.lt-youtube .lt-dot { background: #ff0033; }
.lt-instagram .lt-dot { background: #d6249f; }
.lt-kakao .lt-dot { background: #f7d000; }
.lt-homepage .lt-dot, .lt-booking .lt-dot { background: var(--brand); }
.desc { margin-top: 36px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; }
.desc h2 { margin: 0 0 12px; font-size: 18px; }
.desc-body { color: var(--ink-2); font-size: 15.5px; line-height: 1.75; white-space: pre-line; max-width: 70ch; }

.lightbox { position: fixed; inset: 0; z-index: 100; background: rgba(10,12,16,.92); display: flex; align-items: center; justify-content: center; }
.lightbox img { max-width: 92vw; max-height: 86vh; object-fit: contain; }
.lightbox button { position: absolute; background: none; border: 0; color: #fff; font-size: 44px; padding: 10px 18px; line-height: 1; }
.lb-close { top: 8px; right: 8px; } .lb-prev { left: 4px; top: 50%; transform: translateY(-50%); } .lb-next { right: 4px; top: 50%; transform: translateY(-50%); }

/* 푸터 */
.site-footer { border-top: 1px solid var(--line); background: var(--surface); padding-block: 28px 36px; font-size: 13px; color: var(--muted); }
.footer-inner { display: flex; justify-content: space-between; gap: 24px; align-items: flex-start; }
.footer-inner strong { color: var(--ink); font-size: 14px; }
.footer-inner p { margin: 6px 0 0; max-width: 620px; }
.footer-login { display: inline-flex; align-items: center; gap: 5px; flex: none; color: var(--ink-2); font-weight: 600; background: none; border: 0; padding: 0; }

/* 알림·모달 */
.flash { padding: 12px 14px; border-radius: 10px; margin: 0 0 14px; font-size: 14px; font-weight: 500; }
.flash-ok { background: var(--brand-soft); color: var(--brand-ink); }
.flash-err { background: var(--danger-soft); color: var(--danger); }
.flash-warn { background: var(--warn-soft); color: var(--warn-ink); }
.toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); background: var(--ink); color: var(--surface); padding: 11px 18px; border-radius: 10px; font-weight: 600; font-size: 14px; z-index: 120; max-width: calc(100vw - 32px); }
.modal { position: fixed; inset: 0; z-index: 110; background: rgba(0,0,0,.45); display: grid; place-items: center; padding: 16px; }
.modal-box { background: var(--surface); border-radius: var(--radius); padding: 22px; max-width: 400px; width: 100%; }
.modal-box h3 { margin: 0 0 6px; font-size: 18px; }
.modal-box p { margin: 0 0 18px; color: var(--ink-2); }
.modal-actions { display: flex; gap: 8px; justify-content: flex-end; }

/* 로그인 */
.auth { padding-block: 48px 64px; }
.auth-box { max-width: 400px; margin: 0 auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; }
.auth-box h1 { margin: 0 0 4px; font-size: 22px; }
.auth-box .btn { margin-top: 20px; width: 100%; }
.demo-creds { margin-top: 16px; font-size: 13px; color: var(--muted); background: var(--surface-2); border-radius: 9px; padding: 10px 12px; }
.demo-creds code { color: var(--ink); font-weight: 600; }

/* 폼 */
label.f { display: block; font-size: 13.5px; font-weight: 600; color: var(--ink-2); margin: 14px 0 0; }
.f input[type=text], .f input[type=password], .f input[type=number], .f input[type=tel], .f input[type=email], .f select, .f textarea, .ctl {
  display: block; width: 100%; margin-top: 6px; height: 42px; padding: 0 12px; border: 1px solid var(--field); border-radius: 9px; background: var(--surface); outline: none; font-weight: 400; font-size: 15px; }
.f textarea { height: auto; padding: 10px 12px; resize: vertical; line-height: 1.6; }
.f input:focus, .f select:focus, .f textarea:focus, .ctl:focus { border-color: var(--brand); }
label small, h2 small { font-weight: 500; color: var(--muted); font-size: 12.5px; margin-left: 4px; }
.req { color: var(--accent); }
input.num { width: 76px; display: inline-block; margin: 0; height: 32px; padding: 0 8px; border: 1px solid var(--field); border-radius: 8px; background: var(--surface); }

/* 관리자 */
.admin-main { padding-block: 24px 60px; }
.page-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }
.page-head h1 { margin: 0; font-size: 22px; letter-spacing: -.02em; }
.page-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; margin-bottom: 16px; }
.panel h2 { margin: 0 0 6px; font-size: 16px; }
.toplist { margin: 8px 0 0; padding-left: 22px; display: flex; flex-wrap: wrap; gap: 6px 22px; }
.toplist li { font-weight: 600; }
.toplist .badge { margin-left: 4px; }
.filters { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.filters .ctl { width: auto; margin: 0; height: 36px; min-width: 150px; }
.table-wrap { overflow-x: auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
.tbl th { text-align: left; font-size: 12.5px; color: var(--muted); font-weight: 600; padding: 11px 12px; border-bottom: 1px solid var(--line); background: var(--surface-2); white-space: nowrap; }
.tbl td { padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; white-space: nowrap; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl tr.is-hidden td { opacity: .55; }
.t-biz { display: flex; gap: 10px; align-items: center; min-width: 230px; }
.t-biz small { display: block; color: var(--muted); font-size: 12px; }
.t-thumb { width: 44px; height: 44px; border-radius: 8px; overflow: hidden; background: var(--brand-soft); color: var(--brand-ink); display: grid; place-items: center; font-weight: 700; flex: none; }
.t-thumb img { width: 100%; height: 100%; object-fit: cover; }
.row-gap { display: flex; gap: 5px; align-items: center; }
.tag-new { font-size: 12px; font-weight: 700; color: var(--accent); background: var(--accent-soft); padding: 2px 8px; border-radius: 6px; font-variant-numeric: tabular-nums; }

.bform { max-width: 860px; }
.fsec { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 22px 22px; margin-bottom: 14px; }
.fsec h2 { margin: 0 0 2px; font-size: 16px; }
.fsec-benefit { border-color: var(--accent-line); background: var(--accent-soft); }
.fsec-admin { border-color: var(--brand); background: var(--brand-soft); }
.frow { display: grid; gap: 0 14px; }
.frow.two { grid-template-columns: 1fr 1fr; }
.frow.four { grid-template-columns: 140px 1fr 1fr 1fr; }
.fgroup { margin-top: 14px; }
.flabel { display: block; font-size: 13.5px; font-weight: 600; color: var(--ink-2); margin-bottom: 6px; }
label.inline { display: inline-flex; align-items: center; gap: 6px; margin: 4px 16px 4px 0; font-weight: 500; font-size: 14px; }
.factions { position: sticky; bottom: env(safe-area-inset-bottom, 0px); padding-block: 14px; background: linear-gradient(transparent, var(--bg) 35%); }
.factions .btn { min-width: 200px; height: 48px; font-size: 15.5px; }
.imgedit { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; margin: 12px 0; }
.imgedit-item { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--surface); }
.imgedit-item.del { opacity: .4; }
.imgedit-item img { aspect-ratio: 1; object-fit: cover; width: 100%; display: block; }
.imgedit-item label { display: flex; align-items: center; gap: 5px; padding: 5px 8px; font-size: 12.5px; }
.imgedit-item label + label { color: var(--danger); border-top: 1px solid var(--line); }
.newtag { position: absolute; left: 6px; top: 6px; }
.filebox { display: block; margin-top: 12px; border: 2px dashed var(--field); border-radius: 12px; padding: 18px; text-align: center; cursor: pointer; background: var(--surface-2); font-weight: 600; color: var(--ink-2); }
.filebox:hover { border-color: var(--brand); }
.filebox input { display: none; }
.linkrow { display: grid; grid-template-columns: 150px 150px 1fr; gap: 8px; margin-top: 8px; }
.linkrow .ctl { margin: 0; }

/* 회원가입 */
.hdr-nav { display: flex; gap: 6px; align-items: center; flex: none; }
.hdr-nav .btn { height: 36px; padding: 0 12px; font-size: 13.5px; }
.hdr-user { font-size: 13.5px; font-weight: 600; color: var(--ink-2); white-space: nowrap; }
.signup { padding-block: 32px 64px; }
.su-box { max-width: 560px; margin: 0 auto; }
.su-box > h1 { margin: 0 0 6px; font-size: 24px; letter-spacing: -.02em; }
.su-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 18px 0 16px; padding: 0; list-style: none; counter-reset: st; }
.su-steps li { counter-increment: st; font-size: 12.5px; font-weight: 600; color: var(--muted); border-top: 3px solid var(--line); padding-top: 8px; }
.su-steps li::before { content: counter(st) ". "; }
.su-steps li.done { color: var(--brand-ink); border-color: var(--brand); }
.su-steps li.now { color: var(--ink); border-color: var(--accent); }
.su-sec { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 22px; margin-bottom: 12px; }
.su-sec.locked { opacity: .5; pointer-events: none; }
.su-sec.ok { border-color: var(--brand); }
.su-sec h2 { margin: 0; font-size: 16px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.su-sec h2 .chk { font-size: 12px; font-weight: 700; color: var(--brand-ink); background: var(--brand-soft); border-radius: 99px; padding: 2px 9px; }
.su-row { display: flex; gap: 8px; align-items: flex-end; }
.su-row label.f { flex: 1; min-width: 0; }
.su-row .btn { flex: none; height: 42px; }
.su-result { margin-top: 12px; font-size: 14px; border-radius: 10px; padding: 10px 12px; }
.su-result.ok { background: var(--brand-soft); color: var(--brand-ink); }
.su-result.bad { background: var(--danger-soft); color: var(--danger); }
.su-result dl { display: grid; grid-template-columns: 84px 1fr; gap: 3px 10px; margin: 6px 0 0; font-size: 13.5px; }
.su-result dt { opacity: .75; } .su-result dd { margin: 0; font-weight: 600; }
.timer { font-variant-numeric: tabular-nums; color: var(--accent); font-weight: 700; font-size: 13px; }
.demo-note { margin-top: 10px; font-size: 13px; background: var(--warn-soft); color: var(--warn-ink); border-radius: 9px; padding: 9px 12px; }
.demo-note b { letter-spacing: .15em; font-variant-numeric: tabular-nums; }
.agree { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 12px; display: grid; gap: 6px; font-size: 14px; }
.agree label { display: flex; gap: 8px; align-items: center; }
.agree .all { font-weight: 700; }
.pw-hint { font-size: 12.5px; color: var(--muted); margin-top: 4px; }
.status-pending { background: var(--warn-soft); color: var(--warn-ink); border-color: var(--warn-soft); }
.login-opts { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; font-size: 13.5px; }
.login-opts label { display: flex; gap: 6px; align-items: center; }
@media (max-width: 720px) { .hdr-user { display: none; } .hdr-nav .btn { padding: 0 10px; } .su-sec { padding: 16px; } .su-row { flex-wrap: wrap; } .su-row .btn { width: 100%; } }


/* ---------- 관리자 확장 ---------- */
.tiles { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.tile { text-align: left; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tile:not([disabled]):hover { border-color: var(--brand); }
.tile-l { font-size: 12.5px; color: var(--muted); font-weight: 600; }
.tile-v { font-size: 22px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tile-s { font-size: 12px; color: var(--muted); }
.warn-num { color: var(--accent); }
.dash-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.dash-grid .panel { margin: 0; min-width: 0; }
.panel h2 { display: flex; align-items: center; gap: 8px; }
.panel h2 .linkish { margin-left: auto; font-weight: 500; }
ul.plain { list-style: none; margin: 8px 0 0; padding: 0; }
ul.plain li { display: flex; align-items: center; gap: 8px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 14px; flex-wrap: wrap; }
ul.plain li:last-child { border-bottom: 0; }
.loglist { list-style: none; margin: 6px 0 0; padding: 0; }
.loglist li { padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.loglist li:last-child { border-bottom: 0; }
.log-h { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.log-t { margin-left: auto; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.lk { font-size: 11px; font-weight: 700; border-radius: 6px; padding: 2px 7px; background: var(--surface-2); color: var(--ink-2); border: 1px solid var(--line); }
.lk-member { background: var(--brand-soft); color: var(--brand-ink); border-color: transparent; }
.lk-biz { background: var(--accent-soft); color: var(--benefit-ink); border-color: transparent; }
.lk-admin { background: var(--pick-bg); color: var(--pick-fg); border-color: transparent; }
.log-ch { margin-top: 6px; display: grid; gap: 3px; font-size: 13px; padding-left: 10px; border-left: 2px solid var(--line); }
.log-ch > div { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; }
.cf { color: var(--muted); min-width: 70px; }
.log-ch del { color: var(--muted); }
.log-ch ins { text-decoration: none; font-weight: 600; color: var(--ink); background: var(--warn-soft); padding: 0 4px; border-radius: 4px; }
.seg { display: inline-flex; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 3px; gap: 2px; flex-wrap: wrap; }
.seg button { border: 0; background: none; padding: 6px 12px; border-radius: 7px; font-size: 13.5px; font-weight: 600; color: var(--ink-2); }
.seg button.on { background: var(--ink); color: var(--surface); }
.seg.big { margin-bottom: 16px; }
.seg.big button { padding: 8px 16px; font-size: 14.5px; }
.filters .seg + .ctl { flex: 1; min-width: 200px; }
.bulkbar { display: flex; gap: 8px; align-items: center; background: var(--brand-soft); color: var(--brand-ink); border-radius: 10px; padding: 8px 12px; margin-bottom: 10px; flex-wrap: wrap; }
.bulkbar b { margin-right: auto; }
.pill { display: inline-block; font-size: 11.5px; font-weight: 700; padding: 2px 8px; border-radius: 99px; background: var(--surface-2); color: var(--muted); border: 1px solid var(--line); }
.pill.ok { background: var(--brand-soft); color: var(--brand-ink); border-color: transparent; }
.pill.bad { background: var(--danger-soft); color: var(--danger); border-color: transparent; }
.pill.lms { background: var(--warn-soft); color: var(--warn-ink); border-color: transparent; }
.kind { font-size: 11.5px; font-weight: 700; padding: 2px 8px; border-radius: 6px; background: var(--surface-2); white-space: nowrap; }
.k-auto-spot { background: var(--spot-hi); color: var(--spot-ribbon-ink); }
.k-auto-newbiz { background: var(--accent-soft); color: var(--benefit-ink); }
.k-manual { background: var(--brand-soft); color: var(--brand-ink); }
.num-c { font-variant-numeric: tabular-nums; }
.tbl td.wrapcell { white-space: normal; min-width: 220px; max-width: 360px; }
.bad-t { color: var(--danger); font-weight: 700; }
.linkish.strong { font-size: 14px; font-weight: 700; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.radios { display: flex; flex-wrap: wrap; gap: 0 4px; margin-top: 6px; }
.sms-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 18px; align-items: start; }
.sms-grid .panel { margin: 0; }
.bytes { margin-top: 6px; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.phone-col { position: sticky; top: 90px; }
.phone-prev { background: var(--surface-2); border: 1px solid var(--line); border-radius: 14px; padding: 12px; margin-top: 10px; }
.phone-prev pre { margin: 0; white-space: pre-wrap; word-break: break-all; font-family: var(--font); font-size: 14px; line-height: 1.55; background: var(--surface); border-radius: 12px; padding: 10px 12px; }
.phone-prev span { display: block; font-size: 12px; color: var(--muted); margin-top: 6px; text-align: right; }
.phone-prev.big { border-radius: 28px; padding: 18px 14px 22px; border: 8px solid var(--ink); background: var(--bg); min-height: 420px; margin: 0; }
.pp-top { text-align: center; font-size: 12.5px; font-weight: 700; color: var(--muted); margin-bottom: 12px; }
.pp-title { display: block; font-size: 14px; margin: 0 0 6px 4px; }
.phone-prev.big pre { background: var(--surface); border: 1px solid var(--line); }
.modal-box.wide { max-width: 560px; max-height: calc(100vh - 32px); overflow-y: auto; }
.modal-box.wide p { margin-bottom: 0; }
.mem-dl { display: grid; grid-template-columns: 100px 1fr; gap: 8px 12px; margin: 10px 0 0; font-size: 14px; }
.mem-dl dt { color: var(--muted); } .mem-dl dd { margin: 0; font-weight: 500; overflow-wrap: anywhere; }
.tmp-pw { margin-top: 12px; background: var(--warn-soft); color: var(--warn-ink); border-radius: 9px; padding: 10px 12px; font-size: 13.5px; }
.tmp-pw b { letter-spacing: .05em; user-select: all; }
.wrapbtns { flex-wrap: wrap; }
.panel.narrow2 { max-width: 620px; }

/* 업체 목록 속 소개 영상 */
.vtile { grid-column: span 2; position: relative; border: 0; padding: 0; border-radius: var(--radius); overflow: hidden; background: #111; color: #fff; text-align: left; min-height: 280px; isolation: isolate; }
.vtile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform .6s ease; }
.vtile::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(0,0,0,.15) 30%, rgba(0,0,0,.78)); }
.vtile:hover img { transform: scale(1.05); }
.vt-chip { position: absolute; left: 14px; top: 14px; background: #ff0033; color: #fff; font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 6px; }
.vt-play { position: absolute; left: 50%; top: 45%; transform: translate(-50%, -50%); width: 76px; height: 76px; border-radius: 50%; background: rgba(255,255,255,.92); color: #ff0033; display: grid; place-items: center; box-shadow: 0 8px 24px rgba(0,0,0,.35); transition: transform .25s cubic-bezier(.3,1.6,.5,1); }
.vt-play svg { width: 34px; height: 34px; margin-left: 4px; }
.vtile:hover .vt-play { transform: translate(-50%, -50%) scale(1.12); }
.vt-text { position: absolute; left: 18px; right: 18px; bottom: 16px; display: flex; flex-direction: column; gap: 2px; }
.vt-text b { font-size: 19px; letter-spacing: -.02em; line-height: 1.3; }
.vt-text span { font-size: 13px; opacity: .85; }
.vmodal { background: rgba(5,7,9,.86); }
.vbox { width: min(960px, 100%); background: var(--surface); border-radius: 16px; overflow: hidden; position: relative; }
.vclose { position: absolute; right: 10px; top: 8px; z-index: 3; width: 38px; height: 38px; border-radius: 50%; border: 0; background: rgba(0,0,0,.55); color: #fff; font-size: 24px; line-height: 1; }
.vframe { position: relative; aspect-ratio: 16 / 9; max-width: 100%; background: #000; }
.vframe img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .55; }
.vframe-play { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: 10px; color: #fff; font-weight: 700; }
.vframe-play .vt-play { position: static; transform: none; }
.vframe-play:hover .vt-play { transform: scale(1.1); }
.vinfo { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; padding: 14px 18px 4px; }
.vinfo b { font-size: 17px; }
.vnote { padding: 0 18px 16px; }
@media (max-width: 1100px) { .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 860px) { .dash-grid, .sms-grid { grid-template-columns: 1fr; } .phone-col { position: static; } }
@media (max-width: 720px) { .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } .vtile { min-height: 220px; } .vt-play { width: 60px; height: 60px; } .mem-dl { grid-template-columns: 84px 1fr; } }
@media (prefers-reduced-motion: reduce) { .vtile img, .vt-play { transition: none; } }

/* 역대급 혜택(1곳) */
.spot-sec { padding-block: 22px; }
.spot { position: relative; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); background: var(--spot-bg); color: var(--spot-fg); border-radius: 18px; overflow: hidden; border: 2px solid var(--spot-hi); box-shadow: 0 10px 30px var(--spot-glow); }
.spot { min-height: 590px; }
.spot-img { position: relative; min-height: 390px; background: var(--ph-b); }
.spot-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.spot-img .thumb-ph { position: absolute; inset: 0; }
.spot-img img.slide { opacity: 0; transition: opacity .8s ease; }
.spot-img img.slide.on { opacity: 1; }
.sl-btn { position: absolute; top: 50%; transform: translateY(-50%); width: 42px; height: 42px; border-radius: 50%; border: 0; background: rgba(0,0,0,.42); color: #fff; font-size: 26px; line-height: 1; display: grid; place-items: center; z-index: 2; }
.sl-btn:hover { background: rgba(0,0,0,.62); }
.sl-prev { left: 14px; } .sl-next { right: 14px; }
.sl-dots { position: absolute; left: 0; right: 0; bottom: 16px; display: flex; justify-content: center; gap: 8px; z-index: 2; }
.sl-dots button { width: 9px; height: 9px; padding: 0; border-radius: 99px; border: 0; background: rgba(255,255,255,.55); transition: width .3s; }
.sl-dots button.on { width: 26px; background: #fff; }
.spot-ribbon { z-index: 2; }
.sp-imgs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
.sp-imgs > div { position: relative; aspect-ratio: 4 / 3; border-radius: 8px; overflow: hidden; background: var(--ph-b); }
.sp-imgs img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sp-imgs button { position: absolute; right: 4px; top: 4px; width: 24px; height: 24px; border-radius: 50%; border: 0; background: rgba(0,0,0,.6); color: #fff; font-size: 15px; line-height: 1; }
.sp-imgs .n { position: absolute; left: 6px; bottom: 4px; color: #fff; font-size: 11px; font-weight: 700; text-shadow: 0 1px 2px rgba(0,0,0,.6); }
.sp-imgs .add { display: grid; place-items: center; border: 2px dashed var(--field); background: var(--surface-2); color: var(--ink-2); font-size: 13px; font-weight: 600; cursor: pointer; text-align: center; }
.sp-imgs .add input { display: none; }
@media (prefers-reduced-motion: reduce) { .spot-img img.slide { transition: none; } }
.spot-ribbon { position: absolute; left: 0; top: 18px; background: var(--spot-hi); color: var(--spot-ribbon-ink); font-weight: 700; font-size: 13px; letter-spacing: .04em; padding: 6px 14px 6px 16px; border-radius: 0 99px 99px 0; }
.spot-body { padding: 40px 40px 36px; display: flex; flex-direction: column; gap: 14px; min-width: 0; justify-content: center; }
.spot-kicker { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--spot-hi); flex-wrap: wrap; }
.spot-until { background: var(--spot-chip); color: var(--spot-fg); border-radius: 99px; padding: 2px 10px; font-size: 12px; font-variant-numeric: tabular-nums; }
.spot-name { margin: 0; font-size: 15px; font-weight: 600; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.spot-name > span { opacity: .85; }
.spot-addr { display: inline-flex; align-items: center; gap: 4px; font-size: 13.5px; font-weight: 500; color: var(--spot-fg); background: var(--spot-chip); border-radius: 99px; padding: 4px 11px 4px 9px; text-decoration: none; transition: background-color .2s, color .2s; }
.spot-addr:hover { background: var(--spot-hi); color: var(--spot-ribbon-ink); }
.spot-addr .ic { width: 14px; height: 14px; }
.spot-head { margin: 0; font-size: clamp(24px, 3.2vw, 36px); line-height: 1.3; letter-spacing: -.03em; text-wrap: balance; color: var(--spot-fg); }
.spot-head mark { background: none; color: var(--spot-hi); }
.spot-text { margin: 0; font-size: 15px; line-height: 1.8; opacity: .9; white-space: pre-line; display: -webkit-box; -webkit-line-clamp: 11; -webkit-box-orient: vertical; overflow: hidden; max-width: 62ch; }
.spot-actions { display: flex; gap: 8px; margin-top: auto; padding-top: 6px; flex-wrap: wrap; }
.btn-spot { background: var(--spot-hi); border-color: var(--spot-hi); color: var(--spot-ribbon-ink); }
.spot-meta { font-size: 13px; opacity: .75; display: flex; gap: 4px; align-items: center; }
.badge-spot { background: var(--spot-hi); color: var(--spot-ribbon-ink); }
.spot-detail { background: var(--spot-bg); color: var(--spot-fg); border: 2px solid var(--spot-hi); border-radius: var(--radius); padding: 18px 20px; margin-bottom: 18px; }
.spot-detail .spot-head { font-size: 21px; margin-top: 6px; }
.spot-detail .spot-text { display: block; margin-top: 10px; }
.spot-panel { border-color: var(--spot-hi); }
.spot-panel textarea { min-height: 140px; }
.spot-actions { margin-top: 8px; }
@media (max-width: 860px) { .spot { grid-template-columns: 1fr; min-height: 0; } .spot-img { min-height: 0; aspect-ratio: 8 / 7; } .spot-body { padding: 24px 20px; } }

@media (max-width: 1024px) { .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 860px) { .detail-grid { grid-template-columns: 1fr; gap: 22px; } .frow.four { grid-template-columns: 1fr 1fr; } }
@media (max-width: 720px) {
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .card-body { padding: 11px 11px 13px; gap: 5px; }
  .card-name { font-size: 15px; } .card-sum { font-size: 12.5px; }
  .card-benefit { font-size: 12px; padding: 6px 8px; } .card-benefit .ic { display: none; }
  .header-inner { gap: 10px; }
  .search { max-width: none; }
  .hero { padding-block: 24px 22px; }
  .frow.two, .frow.four { grid-template-columns: 1fr; }
  .linkrow { grid-template-columns: 1fr 1fr; } .linkrow .url { grid-column: 1 / -1; }
  .fsec { padding: 16px; }
  .footer-inner { flex-direction: column; }
  .admin .header-inner { flex-wrap: wrap; padding-block: 10px 8px; }
  .admin-nav { margin-left: 0; width: 100%; }
  .gallery-thumbs { grid-template-columns: repeat(5, 1fr); gap: 6px; }
}
@media (max-width: 420px) { .logo { font-size: 15px; } .logo-img { height: 32px; } .logo em { display: none; } }
@media (prefers-reduced-motion: reduce) { .card { transition: none; } .card:hover { transform: none; } }

/* ================= PHP 사이트 전용 보완 ================= */
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; }
img { max-width: 100%; }
[hidden] { display: none !important; }
.logo { color: var(--ink); }
.card { color: inherit; }
.hdr-nav a.btn { text-decoration: none; }
.site-footer a { color: var(--ink-2); }
/* 업체 입력 폼(관리자·사장님 공용)의 기본 입력칸 */
.bform label, .panel label:not(.inline):not(.add), .auth-box label { display: block; font-size: 13.5px; font-weight: 600; color: var(--ink-2); margin: 14px 0 0; }
.bform label.inline, .bform .imgedit-item label, .panel label.inline { display: inline-flex; margin: 4px 16px 4px 0; font-weight: 500; }
.bform input[type=text], .bform input[type=tel], .bform input[type=number], .bform select, .bform textarea,
.panel input[type=text], .panel input[type=tel], .panel input[type=email], .panel input[type=password], .panel input[type=search], .panel input[type=date], .panel input[type=datetime-local], .panel select, .panel textarea,
.auth-box input[type=text], .auth-box input[type=email], .auth-box input[type=password], .auth-box input[type=tel] {
  display: block; width: 100%; margin-top: 6px; height: 42px; padding: 0 12px; border: 1px solid var(--field); border-radius: 9px; background: var(--surface); color: var(--ink); outline: none; font-weight: 400; font-size: 15px; font-family: var(--font); }
.bform textarea, .panel textarea { height: auto; padding: 10px 12px; resize: vertical; line-height: 1.6; }
.bform input:focus, .bform select:focus, .bform textarea:focus, .panel input:focus, .panel select:focus, .panel textarea:focus, .auth-box input:focus { border-color: var(--brand); }
.bform input.num, .panel input.num, input.num { width: 76px; display: inline-block; margin: 0; height: 32px; }
input.short { width: 130px; display: inline-block; margin: 0; height: 30px; font-size: 13px; padding: 0 8px; border: 1px solid var(--field); border-radius: 8px; background: var(--surface); color: var(--ink); }
.imgedit-item { position: relative; }
.imgedit-item label { display: flex !important; align-items: center; gap: 5px; margin: 0 !important; padding: 5px 8px; font-size: 12.5px; font-weight: 500; }
.imgedit-item label.del { color: var(--danger); border-top: 1px solid var(--line); }
.imgpreview { display: grid; grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: 8px; margin-top: 10px; }
.imgpreview img { aspect-ratio: 1; object-fit: cover; border-radius: 8px; width: 100%; }
.linkrow select, .linkrow input { margin: 0 !important; }
.fgroup label.inline { display: inline-flex; }
.inline-form { display: inline-flex; gap: 5px; align-items: center; margin: 0; }
.checks { list-style: none; padding: 0; margin: 14px 0; font-size: 14px; }
.checks li { padding: 4px 0 4px 22px; position: relative; }
.checks li::before { position: absolute; left: 0; font-weight: 800; }
.checks li.ok::before { content: "✓"; color: var(--brand); }
.checks li.bad::before { content: "!"; color: var(--danger); }
.checks li.bad { color: var(--danger); }
.btn[disabled] { opacity: .5; cursor: default; }
a.btn { text-decoration: none; }
.legal { max-width: 760px; margin: 0 auto; padding-block: 32px 64px; line-height: 1.8; }
.legal h1 { font-size: 24px; } .legal h2 { font-size: 17px; margin-top: 28px; }
.legal .draft { background: var(--warn-soft); color: var(--warn-ink); border-radius: 9px; padding: 10px 14px; font-size: 14px; }
.vframe iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.mem-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.mem-actions form { margin: 0; }
a.tile { color: inherit; text-decoration: none; }
a.tile:hover { border-color: var(--brand); }
.seg a { padding: 6px 12px; border-radius: 7px; font-size: 13.5px; font-weight: 600; color: var(--ink-2); text-decoration: none; }
.seg a.on { background: var(--ink); color: var(--surface); }
.seg.big a { padding: 8px 16px; font-size: 14.5px; }
.sp-imgs .sp-del { position: absolute; right: 4px; top: 4px; display: flex !important; align-items: center; gap: 3px; margin: 0 !important; background: rgba(0,0,0,.6); color: #fff !important; font-size: 11.5px !important; padding: 2px 7px; border-radius: 99px; }
.sp-imgs .sp-del input { margin: 0; }
.login-opts label.inline { margin: 0; display: inline-flex; gap: 6px; font-size: 13.5px; }
.auth-box .btn { width: 100%; }
.su-row form, form.su-row { margin: 0; }
.su-sec form + form { margin-top: 4px; }
.footer-brand p a { text-decoration: none; }
.panel .mem-dl { margin-bottom: 4px; }
.flash { line-height: 1.6; }
.conn-h { font-size: 15px; margin: 22px 0 2px; display: flex; align-items: center; gap: 8px; padding-top: 14px; border-top: 1px solid var(--line); }
.panel label.f .pill { margin-left: 4px; vertical-align: 1px; }

/* ================= 모바일 최적화 ================= */
@media (max-width: 720px) {
  /* 헤더: 1줄 로고·버튼, 2줄 검색 */
  .site-header .header-inner { flex-wrap: wrap; gap: 8px 10px; min-height: 0; padding-block: 8px; }
  .logo-img { height: 36px; margin-block: 0; }
  .logo { font-size: 16px; gap: 6px; }
  .hdr-nav { margin-left: auto; gap: 4px; }
  .hdr-nav .btn { height: 32px; padding: 0 10px; font-size: 13px; border-radius: 8px; }
  .search { order: 3; flex: 1 0 100%; max-width: none; margin: 0 0 4px; }
  .search input, .search input[type=search] { height: 40px; font-size: 16px; }
  /* 입력칸 16px: 아이폰에서 확대되지 않게 */
  input[type=text], input[type=email], input[type=tel], input[type=password], input[type=search], input[type=number], input[type=date], input[type=datetime-local], select, textarea { font-size: 16px !important; }

  /* 역대급 혜택 배너: 더 짧게 */
  .spot-sec { padding-block: 14px; }
  .spot { border-radius: 14px; }
  .spot-img { aspect-ratio: 4 / 3; }
  .sl-btn { display: none; }
  .sl-dots { bottom: 10px; }
  .spot-ribbon { top: 12px; font-size: 12px; padding: 5px 12px 5px 12px; }
  .spot-body { padding: 18px 18px 20px; gap: 10px; }
  .spot-kicker { font-size: 12px; }
  .spot-name { font-size: 14px; }
  .spot-addr { font-size: 12.5px; }
  .spot-head { font-size: 22px; }
  .spot-text { font-size: 14px; line-height: 1.65; -webkit-line-clamp: 4; }
  .spot-actions .btn { width: 100%; height: 46px; }

  /* 업종 탭 */
  .cats-inner { padding-block: 10px; gap: 6px; }
  .cat { padding: 6px 12px; font-size: 13.5px; }
  .list { padding-top: 18px; }
  .list-head h2 { font-size: 18px; }

  /* 카드: 높이 고르게 */
  .card-sum { -webkit-line-clamp: 1; }
  .card-region { white-space: nowrap; overflow: hidden; }
  .card-region span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .card-name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .badge { font-size: 10.5px; padding: 2px 6px; }
  .badges { left: 8px; top: 8px; }
  .vtile { min-height: 200px; }
  .vt-text b { font-size: 16px; }
  .btn-more { width: 100%; }

  /* 상세: 아래 고정 버튼 */
  body.has-cta { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
  .detail .cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; margin: 0; padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)); background: var(--surface); border-top: 1px solid var(--line); box-shadow: 0 -4px 16px rgba(0,0,0,.06); }
  .detail .cta .btn { height: 48px; }
  .info-name { font-size: 24px; }
  .benefit-text { font-size: 17px; }
  .facts > div { grid-template-columns: 78px 1fr; }
  .desc { padding: 18px; margin-top: 24px; }
  .gallery-thumbs { grid-template-columns: repeat(5, 1fr); gap: 6px; }

  /* 로그인·가입 */
  .auth { padding-block: 20px 40px; }
  .auth-box { padding: 22px 18px; }
  .auth-logo { height: 64px; }
  .login-opts { flex-direction: column; align-items: flex-start; gap: 8px; }
  .signup { padding-block: 20px 40px; }
  .su-box > h1 { font-size: 22px; }
  .su-steps li { font-size: 11.5px; }

  /* 푸터 */
  .site-footer { padding-block: 22px 28px; }
  .footer-brand { flex-direction: column; align-items: flex-start; gap: 10px; }
  .footer-logo { height: 48px; }

  /* 관리자 */
  .admin-main { padding-top: 16px; }
  .admin-nav { gap: 2px; padding-bottom: 2px; -webkit-overflow-scrolling: touch; }
  .admin-nav a { padding: 7px 10px; font-size: 13.5px; }
  .page-head { margin-bottom: 12px; }
  .page-head h1 { font-size: 19px; }
  .panel, .fsec { padding: 16px; border-radius: 12px; }
  .tiles { gap: 8px; }
  .tile { padding: 12px; }
  .tile-v { font-size: 19px; }
  .filters { gap: 6px; }
  .filters .ctl, .filters select, .filters input { flex: 1 1 140px; min-width: 0; }
  .seg { width: 100%; overflow-x: auto; flex-wrap: nowrap; }
  .seg a, .seg button { white-space: nowrap; }
  .factions .btn { width: 100%; }
  .sms-grid .phone-col { display: none; }
  .imgedit { grid-template-columns: repeat(3, 1fr); }
  .linkrow { grid-template-columns: 1fr 1fr; }
  .mem-actions .btn { width: 100%; }
  .mem-actions form { flex: 1 1 100%; }

  /* 표 → 카드형 목록 */
  .tbl.stack thead { display: none; }
  .tbl.stack, .tbl.stack tbody { display: block; }
  .tbl.stack tr { display: block; padding: 10px 12px; border-bottom: 1px solid var(--line); }
  .tbl.stack tr:last-child { border-bottom: 0; }
  .tbl.stack td { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 4px 0; border: 0; white-space: normal; text-align: right; }
  .tbl.stack td::before { content: attr(data-label); color: var(--muted); font-size: 12px; font-weight: 600; text-align: left; flex: none; }
  .tbl.stack td.full { display: block; text-align: left; }
  .tbl.stack td.full::before { display: none; }
  .tbl.stack td .t-biz { min-width: 0; }
  .tbl.stack td .row-gap, .tbl.stack td .inline-form { flex-wrap: wrap; justify-content: flex-end; }
  .table-wrap:has(.tbl.stack) { overflow-x: visible; }
  .tbl.stack td.wrapcell { min-width: 0; max-width: none; }
}
@media (max-width: 380px) {
  .logo span { font-size: 14px; }
  .hdr-user { display: none; }
}
@media (max-width: 720px) {
  .tbl.stack td.m-hide { display: none; }
  .tbl.stack tr { position: relative; }
  .tbl.stack td.m-sel { position: absolute; right: 12px; top: 10px; padding: 0; }
  .tbl.stack td.m-sel::before { display: none; }
  .tbl.stack td.m-sel + td { padding-right: 34px; }
}
/* 업종: 모바일 드롭다운 */
.cat-drop-wrap { display: none; }
@media (max-width: 720px) {
  .cats-inner { display: none; }
  .cat-drop-wrap { display: block; padding-block: 10px; }
  .cat-drop { width: 100%; position: relative; }
  .cat-drop summary { list-style: none; display: flex; align-items: center; gap: 8px; width: 100%; height: 46px; padding: 0 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); cursor: pointer; font-size: 15px; -webkit-tap-highlight-color: transparent; }
  .cat-drop summary::-webkit-details-marker { display: none; }
  .cat-drop[open] summary { border-color: var(--ink); border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
  .cd-label { font-size: 12.5px; font-weight: 600; color: var(--muted); }
  .cat-drop summary b { font-weight: 700; color: var(--ink); }
  .cat-drop summary i, .cd-menu i { font-style: normal; font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
  .cd-arrow { margin-left: auto; width: 10px; height: 10px; border-right: 2px solid var(--ink-2); border-bottom: 2px solid var(--ink-2); transform: rotate(45deg) translate(-2px, -2px); transition: transform .2s; }
  .cat-drop[open] .cd-arrow { transform: rotate(-135deg) translate(-2px, -2px); }
  .cd-menu { position: absolute; left: 0; right: 0; top: 100%; z-index: 25; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; padding: 10px; background: var(--surface); border: 1px solid var(--ink); border-top: 0; border-radius: 0 0 12px 12px; box-shadow: 0 12px 24px rgba(0,0,0,.12); }
  .cd-menu a { display: flex; justify-content: space-between; align-items: center; gap: 6px; padding: 11px 12px; border-radius: 9px; background: var(--bg); font-size: 14.5px; font-weight: 600; color: var(--ink-2); text-decoration: none; }
  .cd-menu a.on { background: var(--ink); color: var(--surface); }
  .cd-menu a.on i { color: inherit; opacity: .7; }
}
@media (prefers-reduced-motion: reduce) { .cd-arrow { transition: none; } }
/* 소개 링크: 순서 바꾸기 */
.linkrows { display: grid; gap: 8px; margin-top: 8px; }
.linkrow { display: grid; grid-template-columns: 44px 140px 140px minmax(0, 1fr) auto; gap: 8px; align-items: center; margin: 0; padding: 6px; border: 1px solid transparent; border-radius: 12px; background: var(--surface); transition: box-shadow .15s, border-color .15s, background-color .4s; }
.linkrow.dragging { border-color: var(--brand); box-shadow: 0 10px 24px rgba(0,0,0,.14); position: relative; z-index: 2; }
.linkrow.moved { animation: lrMoved .7s ease; }
@keyframes lrMoved { 0% { background: var(--brand-soft); } 100% { background: var(--surface); } }
.lr-handle { display: flex; align-items: center; justify-content: center; gap: 2px; height: 42px; border: 1px dashed var(--field); border-radius: 9px; background: var(--surface-2); color: var(--muted); cursor: grab; touch-action: none; padding: 0; }
.lr-handle:active { cursor: grabbing; }
.lr-handle svg { width: 16px; height: 16px; fill: currentColor; }
.lr-num { font-size: 12px; font-weight: 700; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.lr-ctl { display: flex; gap: 4px; }
.lr-ctl button { width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink-2); font-size: 16px; line-height: 1; cursor: pointer; }
.lr-ctl button:hover:not(:disabled) { border-color: var(--ink); }
.lr-ctl button:disabled { opacity: .35; cursor: default; }
.lr-ctl .lr-del { color: var(--danger); }
#addLink { margin-top: 10px; }
@media (max-width: 720px) {
  .linkrow { grid-template-columns: 40px minmax(0, 1fr) auto; grid-template-areas: "h t c" "h l l" "h u u"; gap: 6px 8px; padding: 8px; border-color: var(--line); }
  .lr-handle { grid-area: h; height: 100%; min-height: 120px; flex-direction: column; }
  .linkrow .lr-type { grid-area: t; } .linkrow .lr-label { grid-area: l; } .linkrow .lr-url { grid-area: u; grid-column: 2 / -1; } .linkrow .lr-ctl { grid-area: c; }
}
@media (prefers-reduced-motion: reduce) { .linkrow.moved { animation: none; } }
/* ---------- 휴대폰 오류 보완 ---------- */
.lr-handle, .sl-btn, .sl-dots button, .gallery-thumbs button, .cat-drop summary { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
a, button, summary, label { -webkit-tap-highlight-color: rgba(0,0,0,.06); }
.lightbox img { max-height: calc(var(--vh, 1vh) * 86); }
.lightbox { height: 100vh; height: 100dvh; padding: env(safe-area-inset-top, 0px) 0 env(safe-area-inset-bottom, 0px); }
.modal { padding-top: max(16px, env(safe-area-inset-top, 0px)); padding-bottom: max(16px, env(safe-area-inset-bottom, 0px)); }
.vbox { max-height: calc(var(--vh, 1vh) * 100 - 32px); overflow-y: auto; }
body.has-cta .toast { bottom: calc(92px + env(safe-area-inset-bottom, 0px)); }
.toast { width: max-content; text-align: center; line-height: 1.5; }
.card-name, .info-name, .spot-head, .desc-body, .benefit-text, .facts dd, .card-sum, .card-benefit span { overflow-wrap: anywhere; word-break: keep-all; }
.desc-body a, .facts dd a { word-break: break-all; }
button[disabled] { cursor: default; }
@media (max-width: 720px) {
  .factions { padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px)); }
  .detail .cta { padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
  .tbl.stack td { min-width: 0; overflow-wrap: anywhere; }
  .admin-nav { scrollbar-width: none; }
  .admin-nav::-webkit-scrollbar { display: none; }
}
.mem-del { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.mem-del select { height: 34px; padding: 0 8px; border: 1px solid var(--line, #ddd); border-radius: 8px; font: inherit; font-size: 13px; max-width: 100%; }
@media (max-width: 720px) { .mem-del select { flex: 1 1 100%; } }

/* ================= 모바일 헤더 고정 (글자 크게 보기·좁은 화면에서도 한 줄 유지) ================= */
@media (max-width: 720px) {
  .site-header .header-inner { flex-wrap: wrap; }
  .site-header .logo { flex: 1 1 auto; min-width: 0; }
  .site-header .logo span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .site-header .logo-img { height: 34px; flex: none; }
  .site-header .hdr-nav { flex: none; margin-left: 0; flex-wrap: nowrap; }
  .site-header .hdr-nav .btn { white-space: nowrap; padding: 0 9px; }
  .site-header .search { flex: 1 0 100%; }
}
@media (max-width: 400px) {
  .site-header .logo { font-size: 15px; gap: 5px; }
  .site-header .logo-img { height: 30px; }
  .site-header .hdr-nav .btn { padding: 0 8px; font-size: 12.5px; }
}
@media (max-width: 340px) {
  .site-header .logo { font-size: 13.5px; gap: 4px; }
  .site-header .logo-img { height: 26px; }
  .site-header .hdr-nav .btn { padding: 0 7px; font-size: 12px; height: 30px; }
}
/* 업종 관리 등 입력칸이 들어간 작은 표 */
.panel-row { display: flex; gap: 8px; align-items: center; }
.panel-row > input { flex: 1; min-width: 0; height: 40px; }
.tbl-compact input[type=text] { width: 100%; min-width: 0; }
@media (max-width: 720px) {
  .tbl-compact { width: 100%; table-layout: fixed; }
  .tbl-compact th, .tbl-compact td { padding: 8px 4px; }
  .tbl-compact th:nth-child(1), .tbl-compact td:nth-child(1) { width: 64px; }
  .tbl-compact th:nth-child(3), .tbl-compact td:nth-child(3) { width: 52px; text-align: center; }
  .tbl-compact th:nth-child(4), .tbl-compact td:nth-child(4) { width: 52px; }
  .tbl-compact input.num { width: 56px; height: 40px; padding: 0 6px; }
  .tbl-compact input[type=text] { height: 40px; padding: 0 10px; }
  .panel-row { flex-wrap: wrap; }
  .panel-row > input { flex: 1 1 100%; }
  .panel-row > .btn { width: 100%; }
}
.agree label { align-items: flex-start; line-height: 1.5; }
.agree label input { margin-top: 3px; flex: none; }
.agree label span { min-width: 0; }
label.inline > span { min-width: 0; }
label.inline > span small { display: inline; }