/* ===== 나사장 ===== */

/* ----- 디자인 토큰 ----- */
:root {
  --navy: #1E2A4A;          /* 헤더·주 색상 */
  --navy-2: #2B3B66;
  --orange: #F07A2B;        /* 강조(버튼·가격) */
  --orange-dark: #D9651A;
  --yellow: #FFC83D;        /* 로고·배너 강조 */
  --hero: #3B5BA9;          /* 히어로 배경 */
  --text: #222;
  --muted: #888;
  --line: #E5E5E5;
  --soft: #F6F7F9;
  --menu-head: #4A5060;    /* 사이드바 큰 메뉴 바탕 */
  --menu-head-hover: #5A6172;
  --bg: #fff;
  --red: #D9534F;
  --radius: 12px;
  --radius-sm: 8px;
  --pill: 999px;
  --sidebar-w: 220px;
  --max-w: 1280px;
  --font: "Pretendard", "Noto Sans KR", -apple-system, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --shadow: 0 6px 20px rgba(30, 42, 74, .10);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { overflow-x: clip; }
body {
  font-family: var(--font); font-size: 15px; line-height: 1.6; color: var(--text); background: var(--bg);
  -webkit-font-smoothing: antialiased; letter-spacing: -0.01em;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font: inherit; cursor: pointer; background: none; border: 0; color: inherit; }
ul, ol { list-style: none; }
h1, h2, h3, h4 { font-weight: 800; letter-spacing: -0.03em; }
.ico { flex-shrink: 0; }
.wrap { max-width: var(--max-w); margin: 0 auto; padding: 0 24px; }
code { font-family: var(--font); background: var(--soft); padding: 1px 6px; border-radius: 4px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 8px; z-index: 100; background: #fff; padding: 8px 12px; border-radius: var(--radius-sm); }
:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }

/* ----- 버튼 ----- */
.pill {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 10px 20px; border-radius: var(--pill); font-weight: 700; font-size: 14px; white-space: nowrap;
  border: 1px solid transparent; transition: background .2s, box-shadow .2s, color .2s;
}
.pill-orange { background: var(--orange); color: #fff; }
.pill-orange:hover { background: var(--orange-dark); box-shadow: 0 4px 14px rgba(240, 122, 43, .35); }
.pill-white { background: #fff; color: var(--navy); }
.pill-white:hover { background: #F0F3FA; }
.pill-navy { background: var(--navy); color: #fff; }
.pill-navy:hover { background: var(--navy-2); }
.pill-block { display: flex; width: 100%; }
.btn-line {
  display: inline-block; padding: 8px 16px; border: 1px solid var(--line); border-radius: var(--pill);
  background: #fff; color: #555; font-size: 13px; font-weight: 600; transition: .2s;
}
.btn-line:hover { border-color: var(--navy); color: var(--navy); }
.btn-del { background: #fff; border: 1px solid #f0caca; color: var(--red); padding: 6px 14px; border-radius: var(--pill); font-size: 12px; }
.btn-del:hover { background: #fdf2f2; }

/* ----- 헤더 ----- */
.site-header { background: var(--navy); color: #fff; position: relative; z-index: 30; }   /* 고정하지 않음: 로고 줄과 본문이 한 페이지로 함께 스크롤 */
.header-inner { display: flex; align-items: center; gap: 28px; height: 72px; }
.menu-btn { display: none; color: #fff; padding: 6px; margin-left: -6px; }
.brand { display: flex; align-items: baseline; gap: 12px; white-space: nowrap; }
.logo {
  font-size: 28px; font-weight: 900; letter-spacing: -0.05em; line-height: 1;
  background: linear-gradient(100deg, var(--orange) 10%, var(--yellow) 90%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.slogan { font-size: 13px; color: rgba(255, 255, 255, .9); }
.top-search {
  flex: 1; max-width: 520px; margin: 0 auto; display: flex; align-items: center;
  background: #fff; border-radius: var(--pill); padding-left: 20px;
}
.top-search input { flex: 1; min-width: 0; border: 0; background: transparent; padding: 11px 0; font: inherit; font-size: 14px; color: var(--text); outline: none; }
.top-search input::placeholder { color: #999; }
.top-search button { display: flex; padding: 8px 16px 8px 10px; color: var(--navy); }
.top-search:focus-within { box-shadow: 0 0 0 3px rgba(240, 122, 43, .5); }
.member { display: flex; align-items: center; gap: 16px; white-space: nowrap; font-size: 14px; }
.member-link { color: rgba(255, 255, 255, .9); }
.member-link:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.member-name b { color: var(--yellow); }

/* ----- 사이드바 + 본문 ----- */
.layout { display: grid; grid-template-columns: var(--sidebar-w) minmax(0, 1fr); align-items: stretch; }
.sidebar { border-right: 1px solid var(--line); padding: 20px 16px 40px 0; min-height: calc(100vh - 72px); }
.drawer-head, .drawer-dim { display: none; }
.side-menu a { display: flex; align-items: center; padding: 7px 12px; border-radius: var(--radius-sm); font-size: 14.5px; color: #333; transition: background .15s; }
.side-menu a:hover { background: var(--soft); }
/* 선택된 메뉴: 네이버 카페처럼 배경 없이 굵은 강조색 글씨 */
.side-menu a.on { font-weight: 800; color: var(--orange); }
.side-menu a.on:hover { background: var(--soft); }
.side-top a { font-weight: 700; }
.side-group { margin-top: 12px; }
/* 큰 메뉴(그룹 제목): 배경색으로 구분 */
.side-group h4, .side-group summary {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 9px 12px; border-radius: var(--radius-sm); background: var(--menu-head);
  font-size: 14px; font-weight: 800; color: #fff; letter-spacing: -0.02em;
}
.side-group summary { list-style: none; cursor: pointer; transition: background .15s; }
.side-group summary::-webkit-details-marker { display: none; }
.side-group summary:hover { background: var(--menu-head-hover); }
.side-group summary .ico { color: #fff; opacity: .8; transition: transform .2s; }
.side-group[open] summary .ico { transform: rotate(90deg); }
.side-group ul { padding: 4px 0 2px; }
.content { min-width: 0; padding: 24px 0 72px 28px; }

/* ----- 공통 ----- */
.flash { background: #FFF4EC; color: #A2501A; border: 1px solid #FBD9C2; padding: 12px 16px; margin-bottom: 20px; font-weight: 600; border-radius: var(--radius-sm); }
.sec-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 14px; }
.sec-head h2 { font-size: 19px; }
.sec-head h2 small { font-size: 13px; font-weight: 500; color: var(--muted); margin-left: 4px; letter-spacing: 0; }
.more { display: inline-flex; align-items: center; gap: 2px; font-size: 13px; color: var(--muted); white-space: nowrap; }
.more:hover { color: var(--orange); }
.page-head { padding-bottom: 18px; margin-bottom: 24px; border-bottom: 1px solid var(--line); }
.page-head h1 { font-size: 24px; }
.page-head p { color: var(--muted); margin-top: 2px; font-size: 14px; }
.page-head a { color: var(--navy); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.page-title { font-size: 24px; margin-bottom: 6px; }
.page-desc { color: var(--muted); font-size: 14px; margin-bottom: 18px; }
.narrow { max-width: 820px; }
.block { margin-bottom: 40px; }
.empty { color: var(--muted); text-align: center; padding: 36px 0; font-size: 14px; }
.empty.big { padding: 64px 0; }
.empty a { color: var(--orange); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.empty-box { text-align: center; padding: 56px 20px; background: var(--soft); border-radius: var(--radius); color: #555; }
.empty-box p { margin-bottom: 16px; font-weight: 600; }
.empty-page { text-align: center; padding: 80px 20px; }
.empty-page h1 { margin-bottom: 24px; font-size: 20px; }
.hint { font-size: 12.5px; color: var(--muted); font-weight: 400; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.chips a { padding: 5px 12px; border: 1px solid var(--line); border-radius: var(--pill); font-size: 13px; color: #555; text-decoration: none !important; font-weight: 500 !important; }
.chips a.on { background: var(--navy); border-color: var(--navy); color: #fff; }

/* ----- 히어로 배너 ----- */
.hero {
  position: relative; overflow: hidden; height: 280px; border-radius: 16px; color: #fff;
  background: radial-gradient(520px 260px at 85% 30%, rgba(255, 255, 255, .14), transparent 70%), var(--hero);
}
.hero-track { display: flex; height: 100%; transition: transform .6s ease; }
.hero-slide { flex: 0 0 100%; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 32px 40px 40px 44px; }
.hero-text h2 { font-size: 30px; line-height: 1.35; max-width: 15em; word-break: keep-all; }
.hero-text h2 em { font-style: normal; color: var(--yellow); }
.hero-text .hero-headline { font-size: 54px; font-weight: 900; color: #fff; margin-top: 0; line-height: 1.1; letter-spacing: -0.05em; margin-bottom: 10px; text-shadow: 0 3px 14px rgba(20, 30, 70, .25); }
.has-headline .hero-text h2 { font-size: 21px; max-width: none; }
.has-headline .hero-text p:not(.hero-headline) { margin-top: 6px; }
.has-headline .hero-btns { margin-top: 18px; }
.hero-text p { margin-top: 10px; font-size: 15px; color: rgba(255, 255, 255, .88); word-break: keep-all; }
.hero-btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.hero-btns .pill { padding: 11px 22px; }
.hero-art img { height: 236px; width: auto; }
.hero-dots { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); display: flex; gap: 6px; }
.hero-dots button { width: 8px; height: 8px; border-radius: var(--pill); background: rgba(255, 255, 255, .45); transition: width .3s, background .3s; }
.hero-dots button.on { width: 22px; background: #fff; }
@media (prefers-reduced-motion: reduce) { .hero-track { transition: none; } }

/* ----- 메인 하단 (인기 홍보 | 우측 컬럼) ----- */
.home-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 3fr); gap: 32px; margin-top: 36px; }
.side-col { display: flex; flex-direction: column; gap: 32px; min-width: 0; }

/* 홍보 카드 */
.card-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px 16px; }
.card-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pcard { position: relative; min-width: 0; }
.pcard-link { display: block; }
.pcard-img { aspect-ratio: 1; border-radius: var(--radius); overflow: hidden; background: var(--soft); }
.pcard-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s; }
.pcard-link:hover .pcard-img img { transform: scale(1.04); }
.pcard-body { padding: 10px 2px 0; }
.pcard-price { color: var(--orange); font-size: 18px; font-weight: 800; line-height: 1.3; }
.pcard-price small { font-size: 13px; font-weight: 700; margin-left: 1px; }
.pcard-price.none { color: var(--muted); font-size: 14px; font-weight: 600; }
.pcard-title { font-size: 15px; font-weight: 700; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: -0.02em; }
.pcard-link:hover .pcard-title { text-decoration: underline; text-underline-offset: 3px; }
.pcard-region { font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pcard-meta { display: flex; gap: 12px; margin-top: 6px; font-size: 12.5px; color: var(--muted); }
.pcard-meta span { display: inline-flex; align-items: center; gap: 4px; }
.pcard-meta b { font-weight: 500; }
.like-btn {
  position: absolute; top: 8px; right: 8px; width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, .28); color: #fff; transition: background .2s, transform .15s;
}
.like-btn:hover { background: rgba(0, 0, 0, .45); }
.like-btn:active, .like-big:active { transform: scale(.9); }
.like-btn.on { background: #fff; color: var(--orange); }
.like-btn.on svg, .like-big.on svg { fill: currentColor; }

/* 실시간 자유 소통 피드 */
.feed-list li { padding: 11px 0; border-bottom: 1px solid var(--line); }
.feed-list li:first-child { border-top: 1px solid var(--text); }
.feed-list a { display: block; font-weight: 700; font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.feed-list a:hover { color: var(--orange); }
.feed-list small { font-size: 12.5px; color: var(--muted); }
.feed-list .feed-empty { color: var(--muted); font-size: 14px; text-align: center; padding: 28px 0; }
.feed-list li.fresh { animation: fresh 1.6s ease; }
@keyframes fresh { from { background: #FFF4EC; } to { background: transparent; } }

/* 이번 주 인기 업소 */
.weekly-wrap { position: relative; }
.weekly-list { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; padding-bottom: 4px; }
.weekly-list::-webkit-scrollbar { display: none; }
.weekly-list li { flex: 0 0 148px; scroll-snap-align: start; }
.weekly-list img { width: 148px; height: 111px; object-fit: cover; border-radius: 10px; background: var(--soft); }
.weekly-list strong { display: block; font-size: 14px; margin-top: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.weekly-list small { display: block; font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.weekly-list a:hover strong { color: var(--orange); }
.weekly-next {
  position: absolute; right: -8px; top: 37px; width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: #fff; color: var(--navy); border: 1px solid var(--line); box-shadow: var(--shadow);
}
.weekly-next:hover { color: var(--orange); }
.side-empty { color: var(--muted); font-size: 13.5px; text-align: center; padding: 28px 12px; background: var(--soft); border-radius: var(--radius); }

/* ----- 게시판 ----- */
.board-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 18px; }
.board-group { font-size: 13px; font-weight: 700; color: var(--muted); }
.board-head h1 { font-size: 24px; }
.board-head p { color: var(--muted); font-size: 13.5px; }
.board-table { width: 100%; border-collapse: collapse; font-size: 14px; border-top: 1px solid var(--text); table-layout: fixed; }
.board-table th { padding: 11px 8px; border-bottom: 1px solid var(--line); font-weight: 600; font-size: 12.5px; color: var(--muted); }
.board-table td { padding: 12px 8px; border-bottom: 1px solid var(--line); text-align: center; color: var(--muted); }
.board-table tbody tr:hover { background: #FAFBFC; }
.board-table td.c-title { text-align: left; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.board-table td a:hover { color: var(--orange); }
.board-table td.c-title em { font-style: normal; color: var(--orange); font-weight: 700; font-size: 12.5px; }
/* 상단 고정글 (필독·공지·추천) */
.board-table tr.pinned { background: #FFF8F2; }
.board-table tr.pinned:hover { background: #FFF1E6; }
.board-table tr.pinned td.c-title a { font-weight: 700; }
.pin-table { margin-bottom: 24px; }
.pin-badge { display: inline-block; margin-right: 8px; padding: 1px 8px; border-radius: var(--pill); font-size: 12px; font-weight: 800; line-height: 1.6; vertical-align: 1px; color: #fff; }
.pin-must { background: #E5484D; }
.pin-notice { background: var(--orange); }
.pin-recommend { background: #2E9E6A; }
.t-price { margin-left: 6px; font-size: 12.5px; font-weight: 700; color: var(--orange); }
.c-no { width: 72px; font-size: 12.5px; color: var(--muted); }
.c-no .pin-badge { margin-right: 0; }
.c-title .pin-badge { display: none; }   /* PC: 고정 표시는 번호 칸에, 모바일: 제목 앞에 */
.c-board { width: 120px; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.c-author { width: 110px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #555 !important; }
.c-date { width: 84px; font-size: 12.5px; } .c-num { width: 56px; font-size: 12.5px; }
.pager { display: flex; justify-content: center; flex-wrap: wrap; gap: 4px; margin-top: 28px; }
.pager a { min-width: 34px; height: 34px; line-height: 34px; text-align: center; border-radius: var(--pill); color: #555; font-size: 14px; }
.pager a:hover { background: var(--soft); }
.pager a.on { background: var(--navy); color: #fff; font-weight: 700; }

/* ----- 게시글 ----- */
.post-board { display: inline-flex; align-items: center; color: var(--orange); font-weight: 700; font-size: 13.5px; }
.post h1 { font-size: 26px; margin: 4px 0 16px; line-height: 1.4; word-break: keep-all; }
.badge-hidden { font-size: 12px; vertical-align: middle; background: #555; color: #fff; padding: 2px 8px; border-radius: var(--pill); }
.post-meta { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; padding-bottom: 16px; border-bottom: 1px solid var(--line); font-size: 12.5px; color: var(--muted); }
.author-chip strong { color: var(--text); font-size: 14.5px; }
.author-chip:hover strong { color: var(--orange); }
.listing { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 24px; align-items: start; margin-top: 24px; }
.listing-img img { width: 100%; height: auto; border-radius: var(--radius); }
.listing-info { display: grid; grid-template-columns: 56px 1fr; gap: 10px; padding: 20px; background: var(--soft); border-radius: var(--radius); font-size: 14.5px; }
.listing-info dt { color: var(--muted); }
.listing-info .price { color: var(--orange); font-weight: 800; font-size: 20px; line-height: 1.2; }
.post-body { padding: 28px 0 32px; font-size: 16px; line-height: 1.85; min-height: 140px; word-break: break-word; }
.post-like { display: flex; flex-direction: column; align-items: center; gap: 6px; padding-bottom: 28px; font-size: 13.5px; color: var(--muted); }
.like-big { width: 56px; height: 56px; border-radius: 50%; border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; color: #aaa; transition: .2s; }
.like-big:hover { border-color: var(--orange); color: var(--orange); }
.like-big.on { color: var(--orange); border-color: var(--orange); background: #FFF4EC; }
.post-like b { color: var(--text); }
.post-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 8px; margin-bottom: 20px; }
.pin-form { display: flex; align-items: center; gap: 6px; margin-right: auto; font-size: 13px; color: #555; }
.pin-form label { display: flex; align-items: center; gap: 6px; font-weight: 600; }
.pin-form select { padding: 6px 8px; border: 1px solid var(--line); border-radius: var(--radius-sm); font: inherit; background: #fff; }
.post h1 .pin-badge { font-size: 14px; vertical-align: 4px; }
.comments { border-top: 1px solid var(--line); padding-top: 24px; }
.comments h2 { font-size: 17px; margin-bottom: 6px; }
.comment { padding: 14px 0; border-bottom: 1px solid var(--line); }
.comment-head { font-size: 13.5px; font-weight: 700; margin-bottom: 4px; }
.comment-head small, .comment-head time { font-weight: 400; color: var(--muted); font-size: 12.5px; margin-left: 6px; }
.comment p { font-size: 14.5px; }
.comment-form { display: flex; gap: 10px; align-items: flex-end; margin-top: 18px; }
.comment-form textarea { flex: 1; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius); font: inherit; resize: vertical; }
.comment-form textarea:focus { outline: none; border-color: var(--navy); }
.back { display: flex; justify-content: space-between; align-items: center; margin-top: 32px; }

/* ----- 가게 카드 / 가게 페이지 ----- */
.shop-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.shop-card { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: #fff; transition: .25s; min-width: 0; }
.shop-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.shop-cover { aspect-ratio: 4/3; background: linear-gradient(135deg, var(--navy-2), var(--navy)); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.shop-cover img { width: 100%; height: 100%; object-fit: cover; }
.shop-cover span { font-size: 36px; font-weight: 800; color: var(--yellow); }
.shop-body { padding: 12px 14px 14px; }
.shop-body em { font-style: normal; font-size: 12px; color: var(--orange); font-weight: 700; }
.shop-body strong { display: block; font-size: 15px; margin: 2px 0 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.shop-body p { font-size: 13px; color: var(--muted); line-height: 1.5; }
.shop-hero {
  padding: 56px 36px 36px; color: #fff; border-radius: 16px;
  background: linear-gradient(180deg, rgba(30, 42, 74, .3) 0%, rgba(30, 42, 74, .9) 100%), var(--cover, var(--hero));
  background-size: cover; background-position: center;
}
.shop-hero h1 { font-size: 34px; margin: 10px 0 2px; }
.shop-hero p { color: rgba(255, 255, 255, .85); margin-bottom: 16px; }
.badge { display: inline-block; padding: 4px 12px; border-radius: var(--pill); background: rgba(255, 255, 255, .16); font-size: 12.5px; font-weight: 600; }
.shop-layout { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 32px; padding-top: 32px; }
.block h2 { font-size: 18px; padding-bottom: 12px; margin-bottom: 18px; border-bottom: 1px solid var(--text); }
.block h2 small { color: var(--orange); font-size: 14px; margin-left: 4px; }
.block .sec-head h2 { padding: 0; margin: 0; border: 0; }
.intro { font-size: 15px; line-height: 1.85; color: #444; }
.product-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.product { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; padding-bottom: 16px; }
.product-img { aspect-ratio: 1; background: var(--soft); margin-bottom: 12px; }
.product-img img { width: 100%; height: 100%; object-fit: cover; }
.product h3, .product p, .product a { margin-inline: 14px; }
.product h3 { font-size: 15px; }
.price { color: var(--orange); font-weight: 800; }
.desc { font-size: 13px; color: var(--muted); margin-block: 4px 12px; }
.news { padding: 22px 0; border-bottom: 1px solid var(--line); }
.news h3 { font-size: 17px; }
.news time { font-size: 12.5px; color: var(--muted); }
.news img { margin: 14px 0; border-radius: var(--radius); width: 100%; height: auto; }
.news div { margin-top: 8px; color: #444; line-height: 1.8; }
.shop-side { display: flex; flex-direction: column; gap: 16px; }
.side-box { background: var(--soft); border-radius: var(--radius); padding: 22px; }
.side-box h3 { font-size: 15px; margin-bottom: 14px; }
.side-box dl { display: grid; grid-template-columns: 64px 1fr; gap: 8px; font-size: 13.5px; margin-bottom: 16px; }
.side-box dt { color: var(--muted); }
.mini-list li { padding: 7px 0; border-bottom: 1px solid var(--line); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 13.5px; }
.mini-list a:hover { color: var(--orange); }

/* ----- 폼 ----- */
.form { display: flex; flex-direction: column; gap: 16px; }
.form label { display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; font-weight: 600; color: #444; }
.form input:not([type=file]):not([type=checkbox]):not([type=radio]):not([type=color]), .form select, .form textarea {
  padding: 11px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); font: inherit; font-weight: 400; color: var(--text); background: #fff;
}
.form input:focus, .form select:focus, .form textarea:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px rgba(30, 42, 74, .08); }
.form input[type=file] { font-size: 13px; color: var(--muted); }
.form fieldset { border: 0; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.form legend { font-size: 13px; font-weight: 800; color: var(--orange); margin-bottom: 10px; }
.form h2 { font-size: 17px; }
.form > .pill { align-self: flex-start; padding: 12px 28px; }
.form > .pill-block { align-self: stretch; }
.form fieldset[hidden], .form [data-shop-fields][hidden] { display: none; }
.member-type .type-card { flex-direction: row; align-items: flex-start; gap: 10px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius); cursor: pointer; font-weight: 400; }
.member-type .type-card:has(input:checked) { border-color: var(--orange); background: #FFF8F2; }
.member-type .type-card input { margin-top: 4px; accent-color: var(--orange); }
.member-type .type-card b { display: block; font-size: 15px; color: var(--text); }
.member-type .type-card small { display: block; font-size: 13px; color: var(--muted); line-height: 1.5; }
.listing-fields { padding: 18px; background: var(--soft); border-radius: var(--radius); }
.listing-fields[hidden] { display: none; }
.panel { border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; }
.form label.chk-row { flex-direction: row; align-items: center; gap: 8px; align-self: end; padding-bottom: 12px; }
.form-btns { display: flex; align-items: center; gap: 10px; }
.form-btns .pill { padding: 12px 28px; }
.edit-image { display: flex; align-items: center; gap: 16px; }
.edit-image img { width: 120px; height: 120px; object-fit: cover; border-radius: var(--radius-sm); }
.manage-item .btn-line { flex-shrink: 0; }
.theme-pick { display: flex; flex-direction: column; gap: 8px; }
.theme-label { font-size: 13.5px; font-weight: 600; color: #444; }
.theme-label small { font-weight: 400; color: var(--muted); margin-left: 6px; }
.theme-swatches { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.swatch { width: 34px; height: 34px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .1); transition: transform .15s; }
.swatch:hover { transform: scale(1.1); }
.swatch.on { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--text); }
.form .swatch-custom { flex-direction: row; align-items: center; gap: 6px; margin-left: 6px; font-weight: 500; font-size: 13px; }
.swatch-custom input { width: 40px; height: 34px; padding: 0; border: 1px solid var(--line); border-radius: 8px; background: #fff; cursor: pointer; }
.landing-fields { padding: 20px; border: 1px dashed var(--line) !important; border-radius: var(--radius); }
.landing-fields legend small { font-weight: 500; color: var(--muted); margin-left: 6px; letter-spacing: 0; }
.hl-row { display: grid; grid-template-columns: 28px minmax(0, 1fr) minmax(0, 1.6fr); gap: 8px; align-items: center; }
.hl-no { font-weight: 900; color: var(--orange); font-size: 13px; }
@media (max-width: 768px) { .hl-row { grid-template-columns: 28px minmax(0, 1fr); } .hl-row input:last-child { grid-column: 2; } }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.errors { background: #fdf2f2; color: #a33a36; border: 1px solid #f5d5d5; border-radius: var(--radius-sm); padding: 12px 16px; font-size: 13.5px; margin-bottom: 16px; }
.thumb-preview { width: 240px; height: auto; border-radius: var(--radius-sm); }

/* ----- 로그인/가입 ----- */
.auth { padding: 24px 0; }
.auth-box { max-width: 420px; margin: 0 auto; }
.auth-box.wide { max-width: 520px; }
.auth-box h1 { font-size: 26px; text-align: center; }
.auth-desc { text-align: center; color: var(--muted); margin: 4px 0 28px; }
.auth-desc strong { color: var(--orange); }
.auth-foot { text-align: center; margin-top: 22px; font-size: 13.5px; color: var(--muted); }
.auth-foot a { color: var(--navy); font-weight: 700; }

/* ----- 내 정보 / 관리자 ----- */
.tabs { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 24px; }
.tabs a { padding: 12px 16px; font-weight: 600; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tabs a:hover { color: var(--text); }
.tabs a.on { color: var(--navy); border-color: var(--orange); }
.tabs .preview { margin-left: auto; color: var(--navy); }
.manage-list { margin-top: 24px; display: flex; flex-direction: column; gap: 10px; }
.manage-item { display: flex; align-items: center; gap: 16px; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius); }
.manage-item img { width: 60px; height: 60px; object-fit: cover; border-radius: var(--radius-sm); flex-shrink: 0; }
.manage-item div { flex: 1; min-width: 0; }
.manage-item strong { display: block; }
.manage-item span { font-size: 12.5px; color: var(--muted); }
.admin-menu { display: flex; flex-direction: column; gap: 16px; }
.admin-menu .panel { padding: 18px 20px; border: 1px solid var(--line); }
.admin-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--soft); }
.admin-row.group { border-bottom: 1px solid var(--line); padding-bottom: 12px; margin-bottom: 4px; }
.admin-row label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 600; color: #666; flex: 1 1 140px; }
.admin-row label.sm { flex: 0 0 80px; }
.admin-row label.chk { flex: 0 0 auto; flex-direction: row; align-items: center; gap: 6px; padding-bottom: 10px; }
.admin-row input:not([type=checkbox]) { padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); font: inherit; font-size: 14px; width: 100%; }
.admin-icon { padding-bottom: 10px; color: var(--muted); }
.admin-banner { margin-bottom: 18px; }

/* ----- 푸터 ----- */
/* 푸터 */
.footer { position: relative; background: #17213B; color: rgba(255, 255, 255, .62); font-size: 13px; }
.footer::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: linear-gradient(90deg, #F07A2B, #FFC83D); }
.footer-top { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.footer-logo { margin: 0; font-size: 28px; font-weight: 900; letter-spacing: -0.04em; background: linear-gradient(90deg, #F7923A, #FFC83D); -webkit-background-clip: text; background-clip: text; color: transparent; }
.footer-slogan { margin: 4px 0 8px; font-size: 14px; font-weight: 700; color: #fff; }
.footer-desc { margin: 0; line-height: 1.7; }
.footer-cta { flex-shrink: 0; display: inline-flex; align-items: center; gap: 4px; padding: 12px 22px; border-radius: 999px; background: #F07A2B; color: #fff; font-size: 14px; font-weight: 700; transition: background .15s; }
.footer-cta:hover { background: #E0661A; }
.footer-bottom { border-top: 1px solid rgba(255, 255, 255, .1); }
.footer-bottom .wrap { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 12px; color: rgba(255, 255, 255, .45); }
.footer-policy { display: flex; gap: 18px; font-size: 13px; }
.footer-policy a { color: rgba(255, 255, 255, .7); }
.footer-policy a:hover { color: #FFC83D; }
.footer-policy b { color: #fff; font-weight: 700; }
@media (max-width: 900px) {
  .footer-top { flex-direction: column; align-items: flex-start; }
  .footer-bottom .wrap { flex-direction: column; align-items: flex-start; gap: 8px; }
}


/* ===== 반응형 ===== */
@media (max-width: 1200px) {
  .slogan { display: none; }
}
@media (max-width: 1024px) {
  .home-grid { grid-template-columns: minmax(0, 1fr); }
  .side-col { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; }
  .card-grid, .shop-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .shop-layout { grid-template-columns: minmax(0, 1fr); }
  .hero { height: auto; min-height: 280px; }
  .hero-text h2 { font-size: 26px; }
  .hero-art img { height: 200px; }
  .hero-text .hero-headline { font-size: 46px; }
  .member-link[href="/signup.php"], .member-name { display: none; }
}
@media (max-width: 768px) {
  .wrap { padding: 0 16px; }
  .header-inner { flex-wrap: wrap; height: auto; gap: 10px 12px; padding-block: 10px 12px; }
  .menu-btn { display: flex; }
  .logo { font-size: 24px; }
  .member { margin-left: auto; gap: 12px; font-size: 13.5px; }
  .member .pill { padding: 8px 12px; }
  .member .pill span { display: none; }
  .member-link[href="/mypage.php"] { display: none; }
  .top-search { order: 3; flex: 1 0 100%; max-width: none; padding-left: 16px; }

  .layout { grid-template-columns: minmax(0, 1fr); }
  .content { padding: 16px 0 56px; }
  /* 사이드바 → 왼쪽 서랍 메뉴 */
  .sidebar {
    position: fixed; z-index: 60; top: 0; left: 0; bottom: 0; width: min(300px, 84vw); min-height: 0;
    background: #fff; border-right: 0; padding: 0 12px 32px; overflow-y: auto;
    transform: translateX(-100%); transition: transform .25s ease; visibility: hidden;
  }
  .drawer-open .sidebar { transform: none; visibility: visible; box-shadow: 8px 0 24px rgba(0, 0, 0, .15); }
  .drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 4px 12px 10px; }
  .drawer-close { padding: 6px; color: #555; }
  .drawer-dim { display: block; position: fixed; inset: 0; z-index: 55; background: rgba(0, 0, 0, .4); }
  .drawer-dim[hidden] { display: none; }
  .drawer-open { overflow: hidden; }

  .hero { height: auto; }
  .hero-slide { grid-template-columns: minmax(0, 1fr); padding: 26px 22px 40px; text-align: left; }
  .hero-text h2 { font-size: 22px; }
  .hero-text .hero-headline { font-size: 40px; }
  .has-headline .hero-text h2 { font-size: 17px; }
  .hero-text p { font-size: 14px; }
  .hero-btns .pill { padding: 10px 16px; font-size: 13.5px; }
  .hero-art { justify-self: center; }
  .hero-art img { height: 150px; }
  .home-grid { margin-top: 28px; gap: 36px; }
  .side-col { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .card-grid, .card-grid.cols-3, .shop-grid, .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 12px; }
  .weekly-next { right: 0; }
  .grid-2, .listing { grid-template-columns: minmax(0, 1fr); }
  .c-board, .c-date, .c-num, .c-no { display: none; }
  .c-title .pin-badge { display: inline-block; }
  .board-head { align-items: center; }
  .shop-hero { padding: 40px 22px 28px; }
  .shop-hero h1 { font-size: 26px; }
  .panel { padding: 20px 16px; }
  .post h1 { font-size: 22px; }
}
@media (max-width: 420px) {
  .comment-form { flex-direction: column; align-items: stretch; }
  .member-link[href="/login.php"] { font-size: 13px; }
}
.weekly-next[hidden] { display: none; }
.edit-image img[width="240"] { width: 240px; height: 112px; }
/* 내 정보: 가게 페이지 테마 칩, 휴무 요일 */
.theme-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.form .theme-chip { flex-direction: row; font-weight: 600; }
.theme-chip input { position: absolute; opacity: 0; pointer-events: none; }
.theme-chip-face { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px 0 10px; border: 1.5px solid var(--line); border-radius: 999px; background: #fff; cursor: pointer; }
.theme-chip-face i { width: 22px; height: 22px; border-radius: 50%; }
.theme-chip input:checked + .theme-chip-face { border-color: var(--text); box-shadow: 0 0 0 2px var(--text) inset; }
.theme-chip input:focus-visible + .theme-chip-face { outline: 2px solid var(--orange); outline-offset: 2px; }
.closed-days { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-size: 13.5px; font-weight: 600; color: #444; }
.form .closed-days label { flex-direction: row; align-items: center; gap: 4px; font-weight: 500; }
.gb-item strong { font-weight: 500; }

/* 로그인·회원가입: 사이드바 없이 가운데 */
.no-sidebar .layout { grid-template-columns: minmax(0, 1fr); }
.no-sidebar .content { padding: 56px 0 88px; }
/* 내용이 짧아도 푸터가 화면 맨 아래에 붙도록 */
body.no-sidebar { min-height: 100vh; display: flex; flex-direction: column; }
.no-sidebar .layout { flex: 1; width: 100%; }
.fallback-fields { display: flex; flex-direction: column; gap: 14px; }
.fallback-fields summary { cursor: pointer; font-size: 13.5px; font-weight: 800; color: var(--orange); }
.fallback-fields summary small { display: block; margin-top: 2px; font-weight: 500; color: var(--muted); }
/* 가게 홍보합니다: 목록 제목 앞 작은 대표 사진 */
.board-table td.c-title .t-thumb { display: inline-block; vertical-align: middle; margin-right: 12px; }
.t-thumb img { width: 52px; height: 52px; object-fit: cover; border-radius: 8px; background: var(--soft); }
.t-region { margin-left: 8px; font-size: 12.5px; color: var(--muted); }
.write [data-price-field][hidden], label[data-price-field][hidden] { display: none; }
/* 서울·경기 세부 지역 버튼 */
/* (서울·경기 세부 지역 버튼은 사이드바 탭으로 대체됨) */
.sub-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: -4px 0 20px; }
.sub-chips a { padding: 6px 12px; border: 1px solid var(--line); border-radius: var(--pill); font-size: 13px; color: #555; background: #fff; }
.sub-chips a:hover { border-color: var(--navy); color: var(--navy); }
.sub-chips a.on { background: var(--navy); border-color: var(--navy); color: #fff; font-weight: 700; }
.t-sub { display: inline-block; margin-right: 8px; padding: 1px 8px; border-radius: 6px; background: var(--soft); font-size: 12px; color: #555; vertical-align: 1px; }
@media (max-width: 768px) {
  .sub-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: -16px; padding-inline: 16px; }
  .sub-chips::-webkit-scrollbar { display: none; }
  .sub-chips a { flex-shrink: 0; }
}
/* 사이드바 지역별 게시판 탭: 큰 메뉴(그룹 제목)보다 작게, 고른 탭만 주황 */
.region-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin: 6px 0 4px; padding: 6px; border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--menu-head) 14%, #fff); }   /* 큰 메뉴 색을 옅게 */
.region-tabs button {
  min-height: 30px; border: 1px solid var(--line); border-radius: 999px; background: #fff;
  font-size: 13px; font-weight: 600; color: #666; transition: border-color .15s, color .15s, background .15s;
}
.region-tabs button:hover { border-color: var(--orange); color: var(--orange); }
.region-tabs button[aria-selected="true"] { background: var(--orange); border-color: var(--orange); color: #fff; font-weight: 700; }
.region-tabs button:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
.region-panel { padding: 2px 0 6px; }

.region-panel[hidden] { display: none; }
/* 로그인 편의 기능 (사이트·가게 로그인 공용) */
.pw-wrap { position: relative; display: block; }
.pw-wrap input { width: 100%; padding-right: 48px !important; }
.pw-toggle { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 8px; color: #888; }
.pw-toggle:hover { color: #333; background: rgba(0, 0, 0, .04); }
.pw-toggle[aria-pressed="true"] { color: var(--orange, #F07A2B); }
.caps-warn { display: block; margin-top: 6px; font-size: 12.5px; font-weight: 700; color: #C2410C; }
.caps-warn[hidden], .login-hint[hidden] { display: none; }
.login-opts { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; margin-top: 4px; }
.form .login-chk, .login-chk { flex-direction: row; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 500; color: #555; cursor: pointer; }
.login-chk input { width: 18px; height: 18px; accent-color: var(--orange, #F07A2B); }
.login-hint { margin-top: -4px; font-size: 12.5px; color: #888; }
/* 헤더 알림 */
.noti { position: relative; }
.noti-btn { position: relative; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 50%; color: #fff; }
.noti-btn:hover, .noti-btn[aria-expanded="true"] { background: rgba(255, 255, 255, .12); }
.noti-badge { position: absolute; top: 3px; right: 1px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: #E5484D; color: #fff; font-size: 11px; font-weight: 800; line-height: 18px; text-align: center; border: 2px solid var(--navy); box-sizing: content-box; }
.noti-panel { position: absolute; top: calc(100% + 10px); right: -8px; z-index: 60; width: 360px; max-width: calc(100vw - 24px); background: #fff; color: var(--text); border-radius: 14px; box-shadow: 0 12px 32px rgba(15, 23, 42, .18); overflow: hidden; }
.noti-panel[hidden] { display: none; }
.noti-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.noti-head strong { font-size: 15px; }
.noti-head button { font-size: 12.5px; color: var(--muted); }
.noti-head button:hover { color: var(--orange); }
.noti-list { list-style: none; margin: 0; padding: 0; }
.noti-panel .noti-list { max-height: 400px; overflow-y: auto; }
.noti-item a { display: flex; gap: 12px; padding: 12px 16px; border-bottom: 1px solid #F1F2F4; color: var(--text); }
.noti-item a:hover { background: #FAFAFB; }
.noti-item.unread a { background: #FFF6EF; }
.noti-item.unread a:hover { background: #FFEFE3; }
.noti-ico { flex-shrink: 0; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--soft); color: #666; }
.noti-like .ico, .noti-ico.noti-like { color: #E5484D; }
.noti-comment, .noti-comment_also { color: var(--navy) !important; }
.noti-guestbook, .noti-gb_featured { color: var(--orange) !important; }
.noti-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; font-size: 13.5px; line-height: 1.45; }
.noti-text span { word-break: keep-all; overflow-wrap: anywhere; }
.noti-text time { font-size: 12px; color: var(--muted); }
.noti-item.unread .noti-text span { font-weight: 600; }
.noti-empty { padding: 32px 16px; text-align: center; font-size: 13.5px; color: var(--muted); }
.noti-all { display: block; padding: 12px; text-align: center; font-size: 13px; font-weight: 700; color: var(--navy); background: #FAFAFB; }
.noti-all:hover { color: var(--orange); }
.noti-page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.noti-list-page { border-top: 2px solid var(--text); }
.noti-list-page .noti-text { font-size: 14.5px; }
@media (max-width: 768px) {
  .noti-panel { position: fixed; top: 60px; right: 12px; left: 12px; width: auto; }
}
.noti-panel { white-space: normal; text-align: left; }
.noti-badge { top: -1px; right: -3px; }
/* 메인 오른쪽 '가게 입소문 내기' */
.wom-box { padding: 20px; border-radius: 16px; background: linear-gradient(160deg, #FFF6EC 0%, #FFFFFF 70%); border: 1px solid #F6DFC8; }
.wom-lead { margin: 0 0 6px; font-size: 17px; font-weight: 800; letter-spacing: -0.02em; }
.wom-lead b { color: var(--orange); }
.wom-desc { margin: 0 0 14px; font-size: 13.5px; line-height: 1.65; color: #555; word-break: keep-all; }
.wom-desc b { color: var(--text); }
.wom-points { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.wom-points li { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: #444; }
.wom-points .ico { color: var(--orange); flex-shrink: 0; }
.wom-points code { font-family: inherit; font-size: 12.5px; padding: 1px 6px; border-radius: 5px; background: #fff; border: 1px solid var(--line); }
.wom-sample-title { margin: 0 0 8px; font-size: 12.5px; font-weight: 800; color: var(--muted); }
.wom-samples { list-style: none; margin: 0 0 16px; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.wom-samples a { display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 8px; border-radius: 10px; background: #fff; border: 1px solid var(--line); transition: border-color .15s, box-shadow .15s; }
.wom-samples a:hover { border-color: var(--orange); box-shadow: 0 2px 8px rgba(240, 122, 43, .15); }
.wom-samples a > .ico { margin-left: auto; color: #bbb; flex-shrink: 0; }
.wom-logo { flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 13px; font-weight: 800; }
.wom-name { display: flex; flex-direction: column; min-width: 0; font-size: 13px; font-weight: 700; line-height: 1.3; }
.wom-name, .wom-name small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wom-name small { font-size: 11px; font-weight: 500; color: var(--muted); }
.wom-cta { min-height: 46px; }
.wom-samples { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wom-samples li { min-width: 0; }
.wom-samples a { padding: 8px 6px 8px 8px; }
/* 샘플은 한 줄에 하나: 업종 + 가게 이름이 다 보이게 */
.wom-samples { grid-template-columns: minmax(0, 1fr); gap: 5px; }
.wom-samples a { padding: 7px 10px 7px 8px; }
.wom-name { flex-direction: row; align-items: baseline; gap: 8px; }
.wom-name small { order: 2; font-size: 11.5px; }
/* 메인 가운데: 인기 사장님 + 인기글 */
.main-col { min-width: 0; display: flex; flex-direction: column; gap: 40px; }
.shop-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.shop-card { display: block; height: 100%; border-radius: 14px; background: #fff; border: 1px solid var(--line); overflow: hidden; transition: box-shadow .2s, transform .2s; }
.shop-card:hover { box-shadow: 0 8px 20px rgba(15, 23, 42, .1); transform: translateY(-2px); }
.shop-card-img { display: block; aspect-ratio: 4 / 3; background: var(--soft); }
.shop-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.shop-card-body { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 22px 12px 14px; }
.shop-card-logo { position: absolute; top: -18px; left: 12px; width: 36px; height: 36px; border-radius: 50%; border: 3px solid #fff; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 14px; font-weight: 800; }
.shop-card-body strong { font-size: 15px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.shop-card-body small { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.shop-card-tag { margin-top: 4px; font-size: 12.5px; line-height: 1.45; color: #555; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: keep-all; }
.hot-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--text); }
.hot-list li { display: flex; align-items: center; gap: 12px; padding: 12px 4px; border-bottom: 1px solid var(--line); }
.hot-board { flex-shrink: 0; max-width: 120px; padding: 2px 8px; border-radius: 6px; background: var(--soft); font-size: 12px; color: #555; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hot-board:hover { color: var(--orange); }
.hot-title { flex: 1; min-width: 0; font-size: 14.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hot-title:hover { color: var(--orange); }
.hot-title em { font-style: normal; color: var(--orange); font-weight: 700; }
.hot-time { flex-shrink: 0; font-size: 12.5px; color: var(--muted); }
@media (max-width: 1100px) { .shop-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 768px) {
  .shop-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .hot-list li { flex-wrap: wrap; gap: 4px 8px; }
  .hot-title { flex-basis: 100%; order: 2; }
  .hot-time { margin-left: auto; }
}
.shop-card-body small { display: flex; align-items: center; gap: 3px; }
.shop-card-body small .ico { flex-shrink: 0; }
.footer .footer-top { padding-top: 56px; padding-bottom: 44px; }
.footer .footer-bottom .wrap { padding-top: 18px; padding-bottom: 22px; }
@media (max-width: 900px) { .footer .footer-top { padding-top: 40px; padding-bottom: 32px; } }

/* 이용약관·개인정보처리방침 */
.policy { max-width: 820px; margin: 0 auto; }
.policy-head { padding-bottom: 20px; margin-bottom: 28px; border-bottom: 2px solid var(--text); }
.policy-head h1 { margin: 0 0 6px; font-size: 28px; font-weight: 900; }
.policy-head p { margin: 0; color: var(--muted); font-size: 13.5px; }
.policy-tabs { display: flex; gap: 6px; margin-bottom: 24px; }
.policy-tabs a { padding: 8px 16px; border-radius: 999px; border: 1px solid var(--line); font-size: 14px; font-weight: 600; color: #555; }
.policy-tabs a.on { background: var(--navy); border-color: var(--navy); color: #fff; }
.policy-summary { margin: 0 0 32px; padding: 18px 20px; border-radius: 12px; background: #FFF6EC; border: 1px solid #F6DFC8; font-size: 14px; line-height: 1.7; }
.policy-summary ul { margin: 8px 0 0; padding-left: 18px; }
.policy h2 { margin: 36px 0 12px; font-size: 18px; font-weight: 800; }
.policy p, .policy li { font-size: 14.5px; line-height: 1.8; color: #333; word-break: keep-all; }
.policy ol, .policy ul { padding-left: 22px; }
.policy table { width: 100%; border-collapse: collapse; margin: 8px 0 16px; font-size: 13.5px; }
.policy th, .policy td { padding: 10px 12px; border: 1px solid var(--line); text-align: left; vertical-align: top; line-height: 1.6; }
.policy th { background: var(--soft); font-weight: 700; white-space: nowrap; }
.policy .tbd { color: #C2410C; font-weight: 700; }
.policy-foot { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; }
@media (max-width: 768px) { .policy table { display: block; overflow-x: auto; } }
.agree-chk { align-items: flex-start !important; line-height: 1.5; margin-top: 4px; }
.agree-chk input { margin-top: 1px; flex-shrink: 0; }
.agree-chk a { color: var(--navy); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.policy ol { list-style: decimal; }
.policy ul { list-style: disc; }
.policy li { margin: 2px 0; }
.policy-summary ul { list-style: disc; }
.policy code { font-family: inherit; padding: 1px 6px; border-radius: 5px; background: var(--soft); font-size: 13px; }
.noti-suggest { color: #2D8A5B !important; }
/* 비밀글 */
.t-secret { display: inline-flex; align-items: center; gap: 5px; }
.t-secret .ico { color: #C2410C; flex-shrink: 0; }
.t-secret.is-locked { color: var(--muted); }
.secret-chk small { color: var(--muted); font-weight: 400; }
.secret-chk[hidden] { display: none; }
.empty-page > .ico { color: var(--muted); margin-bottom: 8px; }
/* 분야별 샘플 12곳: 2칸, 분야 이름 굵게 + 가게 이름 작게 */
.wom-samples { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.wom-samples a { padding: 7px 8px; gap: 8px; }
.wom-name { flex-direction: column; align-items: flex-start; gap: 0; }
.wom-name b { font-size: 13px; font-weight: 800; }
.wom-name small { order: 0; font-size: 11px; font-weight: 500; color: var(--muted); max-width: 100%; }
/* 분야별 샘플: 한 줄에 하나 (분야 이름 + 가게 이름) */
.wom-samples { grid-template-columns: minmax(0, 1fr); gap: 5px; }
.wom-samples a { padding: 7px 10px 7px 8px; }
.wom-name { flex-direction: row; align-items: baseline; gap: 8px; }
.wom-name b { flex-shrink: 0; }
.wom-name small { font-size: 12px; }
/* 프로필 썸네일 */
.av { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--navy); color: #fff; font-weight: 800; line-height: 1; overflow: hidden; vertical-align: middle; }
.av.has-img { background: var(--soft); }
.av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.member-name { display: inline-flex; align-items: center; gap: 6px; }
.av-head { border: 2px solid rgba(255, 255, 255, .25); background: var(--orange); }
.post-meta { align-items: center; }
.post-meta .av-author { margin-right: -4px; }
.comment-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.avatar-edit { display: flex; align-items: center; gap: 16px; }
.av-edit { background: var(--orange); }
.shop-card-logo.has-img, .wom-logo.has-img { background: #fff; }
/* 썸네일 보정: 메인 카드·샘플 목록은 동그랗게 잘라서, 글쓴이는 사진+이름 한 덩어리 */
.shop-card-logo, .wom-logo { overflow: hidden; }
.shop-card-logo img, .wom-logo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.author-chip { display: inline-flex !important; flex-direction: row !important; align-items: center; gap: 8px; }
.author-text { display: flex; flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }   /* 닉네임 · 가게 이름 · 지역 한 줄 (댓글과 같게) */
.author-text span { font-size: 12.5px; color: var(--muted); }
/* 게시판 목록 글쓴이 썸네일 */
.author-cell { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; }
.author-cell > a, .author-cell > span:not(.av) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board-table th.c-author, .board-table td.c-author { width: 140px; }
.act-as-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; padding: 12px 16px; border-radius: 10px; background: #FFF4E5; border: 1px solid #F6C78E; color: #8A4B08; font-size: 14px; }
.act-as-bar a { margin-left: auto; padding: 6px 12px; border-radius: 999px; background: #fff; border: 1px solid #F6C78E; font-weight: 700; color: #8A4B08; }
/* 내 정보: 전용 사이드바 */
.my-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 36px; align-items: start; margin-top: -24px; }
.my-side { position: sticky; top: 16px; padding: 18px 14px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.my-side-user { display: flex; align-items: center; gap: 10px; padding: 0 4px 16px; margin-bottom: 8px; border-bottom: 1px solid var(--line); }
.my-side-user > div { display: flex; flex-direction: column; min-width: 0; }
.my-side-user strong { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.my-side-user small { font-size: 12px; color: var(--muted); }
.my-side-av { background: var(--orange); }
.my-side-head { margin: 14px 6px 6px; font-size: 12px; font-weight: 800; color: var(--muted); letter-spacing: .02em; }
.my-side nav { display: flex; flex-direction: column; gap: 2px; }
.my-side nav a { display: flex; align-items: center; justify-content: space-between; padding: 9px 10px; border-radius: 8px; font-size: 14.5px; color: #333; }
.my-side nav a:hover { background: var(--soft); }
.my-side nav a.on { background: #FFF1E6; color: var(--orange); font-weight: 800; }
.my-side nav a small { font-size: 12px; color: var(--muted); font-weight: 500; }
.my-main { min-width: 0; }
.my-main .page-head { margin-top: 0; }
.my-narrow { max-width: 560px; }
.my-narrow h2, .my-activity h2 { margin: 0 0 6px; font-size: 18px; }
.my-activity h2 { margin-top: 8px; }
.my-activity h2 small { font-size: 13px; color: var(--muted); font-weight: 600; }
.my-activity h2 + ul, .my-activity h2 + .empty { margin-bottom: 28px; }
.my-activity ul { list-style: none; margin: 8px 0 0; padding: 0; border-top: 1px solid var(--text); }
.my-activity li { display: flex; align-items: center; gap: 10px; padding: 11px 2px; border-bottom: 1px solid var(--line); font-size: 14px; }
.my-activity li a { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.my-activity li a:hover { color: var(--orange); }
.my-activity li em { font-style: normal; color: var(--orange); font-weight: 700; }
.my-activity li time { margin-left: auto; flex-shrink: 0; font-size: 12.5px; color: var(--muted); }
.my-on { flex-shrink: 0; font-size: 12.5px; color: var(--muted); }
.my-warn { padding: 14px 16px; border-radius: 10px; background: #FFF1F1; border: 1px solid #F5C2C2; color: #8A1C1C; font-size: 14px; line-height: 1.6; }
.my-warn ul { margin: 6px 0 0; padding-left: 18px; list-style: disc; }
@media (max-width: 900px) {
  .my-layout { grid-template-columns: minmax(0, 1fr); gap: 20px; margin-top: -32px; }
  .my-side { position: static; padding: 14px; }
  .my-side nav { flex-direction: row; flex-wrap: nowrap; overflow-x: auto; gap: 6px; scrollbar-width: none; }
  .my-side nav::-webkit-scrollbar { display: none; }
  .my-side nav a { flex-shrink: 0; padding: 7px 12px; border: 1px solid var(--line); border-radius: 999px; font-size: 13.5px; gap: 4px; }
  .my-side-user { padding-bottom: 12px; }
}
/* 글 수정·삭제 */
.write-actions { display: flex; justify-content: flex-end; align-items: center; gap: 10px; }
.comment-del { margin-left: auto; }
.comment-del button { font-size: 12.5px; color: var(--muted); }
.comment-del button:hover { color: #C8202B; text-decoration: underline; }
/* 내 정보: 포토 관리 */
.my-photos { list-style: none; margin: 20px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.my-photos li { display: flex; flex-direction: column; gap: 8px; padding: 10px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.my-photos img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; }
.my-photo-edit { display: flex; gap: 6px; }
.my-photo-edit input[name=caption] { flex: 1; min-width: 0; }
.my-photo-edit input[name=sort] { width: 56px; }
.my-photo-edit input { padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px; font: inherit; font-size: 13px; }
.board-table tr.no-num .c-title .pin-badge { display: inline-block; }   /* 번호 칸 없는 전체글·인기글: 고정 표시를 제목 앞에 */
/* 글 상세: 공지·추천·필독 고정 토글 버튼 (운영자) */
.pin-toggle { display: inline-flex; gap: 4px; padding: 3px; border-radius: 999px; background: var(--soft); }
.pin-btn { padding: 6px 14px; border-radius: 999px; font-size: 13px; font-weight: 700; color: #666; }
.pin-btn:hover { background: #fff; color: var(--text); }
.pin-btn.on { color: #fff; }
.pin-btn.pt-notice.on { background: var(--orange); }
.pin-btn.pt-recommend.on { background: #2D8A5B; }
.pin-btn.pt-must.on { background: #E5484D; }
.post-actions { justify-content: space-between; }
.post-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.post-tools form { margin: 0; }
.post-actions > .btn-line:last-child { margin-left: auto; }   /* 목록으로는 항상 오른쪽 */
.post-tools .btn-del, .post-tools .btn-line, .post-actions > .btn-line { display: inline-flex; align-items: center; min-height: 38px; padding: 0 16px; font-size: 13.5px; }
/* 좋아요 · 공유하기 · 신고하기 */
.post-reacts { display: flex; justify-content: center; gap: 28px; }
.react-btn { color: #888; background: #fff; cursor: pointer; }
.react-btn:hover { border-color: var(--navy); color: var(--navy); }
.react-report:hover { border-color: #E5484D; color: #E5484D; }
.toast { position: fixed; left: 50%; bottom: 32px; z-index: 100; transform: translate(-50%, 16px); padding: 12px 20px; border-radius: 999px; background: rgba(20, 24, 36, .92); color: #fff; font-size: 14px; opacity: 0; transition: opacity .25s, transform .25s; max-width: calc(100vw - 32px); }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.report-dialog { width: min(440px, calc(100vw - 32px)); padding: 24px; border: 0; border-radius: 16px; box-shadow: 0 20px 50px rgba(0, 0, 0, .25); }
.report-dialog::backdrop { background: rgba(0, 0, 0, .45); }
.report-dialog h2 { margin: 0 0 6px; font-size: 18px; }
.report-dialog fieldset { display: flex; flex-direction: column; gap: 8px; margin: 14px 0; padding: 0; border: 0; }
.report-dialog fieldset label { display: flex; align-items: center; gap: 8px; font-size: 14.5px; cursor: pointer; }
.report-dialog textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; font: inherit; font-size: 14px; resize: vertical; }
.report-btns { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
.report-dialog { position: fixed; inset: 0; margin: auto; height: fit-content; }
.post-reacts { margin-top: 56px; }
@media (max-width: 768px) { .post-reacts { margin-top: 40px; gap: 20px; } }
.react-item { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 13.5px; color: var(--muted); }
.my-layout.is-solo { grid-template-columns: minmax(0, 1fr); max-width: 980px; margin-left: auto; margin-right: auto; }
/* 인기 사장님 카드: 프로필 사진이 카드 사진 (작은 로고 동그라미 없음) */
.shop-card-img { aspect-ratio: 1 / 1; }
.shop-card-body { padding-top: 12px; }
/* 로고 줄: 닉네임을 누르면 내 메뉴 */
.member-menu { position: relative; }
.member-menu summary { list-style: none; cursor: pointer; padding: 4px 8px 4px 4px; border-radius: 999px; color: rgba(255, 255, 255, .9); }
.member-menu summary::-webkit-details-marker { display: none; }
.member-menu summary:hover, .member-menu[open] summary { background: rgba(255, 255, 255, .12); }
.member-menu summary .ico { transform: rotate(90deg); opacity: .7; transition: transform .15s; }
.member-menu[open] summary .ico { transform: rotate(-90deg); }
.member-pop { position: absolute; right: 0; top: calc(100% + 8px); z-index: 60; min-width: 200px; padding: 8px; border-radius: 14px; background: #fff; box-shadow: 0 12px 32px rgba(15, 23, 42, .18); white-space: normal; }
.member-pop p { display: flex; flex-direction: column; margin: 0 0 6px; padding: 8px 10px 10px; border-bottom: 1px solid var(--line); }
.member-pop p strong { font-size: 14.5px; color: var(--text); }
.member-pop p small { font-size: 12px; color: var(--muted); }
.member-pop a { display: block; padding: 9px 10px; border-radius: 8px; font-size: 14px; color: var(--text); }
.member-pop a:hover { background: var(--soft); color: var(--orange); }
@media (max-width: 768px) {
  .member .member-name { display: inline-flex !important; }
  .member-name b, .member-nim, .member-menu summary .ico { display: none; }
  .member-menu summary { padding: 2px; }
  .member-pop { position: fixed; top: 60px; right: 12px; }
}
/* 내 정보: 내 활동 (글·댓글·알림) */
.my-badge { display: inline-block; min-width: 20px; padding: 0 6px; border-radius: 10px; background: #E5484D; color: #fff !important; font-size: 11.5px; font-weight: 800; line-height: 20px; text-align: center; }
.my-side nav a .my-badge { margin-left: auto; }
.my-act-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.my-act-head h2 { margin: 0; }
.my-activity .noti-list-page { margin-top: 12px; border-top: 1px solid var(--text); }
.my-activity .noti-list-page .noti-item a { padding: 14px 6px; white-space: normal; font-weight: 400; }
.my-activity .noti-list-page li { display: block; padding: 0; }
.my-activity .noti-list-page li a { display: flex; overflow: visible; text-overflow: clip; }
.my-activity .noti-list-page .noti-text { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; flex: 1; text-align: left; }
.my-activity .noti-list-page .noti-text time { font-size: 12.5px; color: var(--muted); }
.my-activity .noti-list-page li a { align-items: center; gap: 12px; }
.my-activity .noti-list-page .noti-text time { align-self: flex-start; margin: 0; text-align: left; }
/* 내 정보 사이드바 묶음 제목: 메인 사이드바처럼 배경색 */
.my-side-head { margin: 16px 0 6px; padding: 9px 12px; border-radius: var(--radius-sm); background: var(--menu-head); color: #fff; font-size: 13.5px; font-weight: 800; letter-spacing: -0.02em; }
/* 프로필 사진 바로 올리기 */
.ns-file-btn, .avatar-pick { display: inline-flex !important; align-items: center; gap: 6px; width: auto !important; padding: 9px 16px; border: 1px solid var(--line, #d1d5db); border-radius: 999px; background: #fff; font-size: 14px; font-weight: 700; cursor: pointer; }
.ns-file-btn input, .avatar-pick input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.ns-file-btn:focus-within, .avatar-pick:focus-within { outline: 2px solid currentColor; outline-offset: 2px; }
.ns-av-del { margin-left: 6px; padding: 9px 16px; border: 1px solid var(--line, #d1d5db); border-radius: 999px; background: #fff; font-size: 14px; font-weight: 600; cursor: pointer; }
.ns-avatar-msg, .avatar-msg { min-height: 1.4em; margin: 8px 0 2px; font-size: 13.5px; font-weight: 700; }
.is-ok { color: #1F8A4C; } .is-err { color: #E5484D; } .is-busy { color: #6b7280; }
[data-avatar-instant].is-busy .ns-logo, [data-avatar-instant].is-busy .av { opacity: .5; }
.avatar-edit-title { margin: 0 0 8px; font-weight: 700; }
[data-avatar-instant] [data-avatar-remove][hidden] { display: none !important; }
/* 푸터 아래: 회사·약관 링크 / 사업자 정보 / 저작권 (세 줄) */
.footer .footer-bottom .wrap { flex-direction: column; align-items: flex-start; gap: 10px; }
.footer-policy { flex-wrap: wrap; gap: 6px 0; }
.footer-policy a + a::before { content: "|"; margin: 0 12px; color: rgba(255, 255, 255, .25); }
.footer-company { display: flex; flex-wrap: wrap; gap: 4px 0; font-style: normal; font-size: 12.5px; line-height: 1.7; color: rgba(255, 255, 255, .55); }
.footer-company span + span::before { content: ""; display: inline-block; width: 1px; height: 10px; margin: 0 10px; background: rgba(255, 255, 255, .25); vertical-align: -1px; }
.footer-company a { color: inherit; }
.footer-company a:hover { color: #FFC83D; }
.footer-copy { font-size: 12px; color: rgba(255, 255, 255, .4); }
.policy-tabs { flex-wrap: wrap; }
@media (max-width: 900px) {   /* 좁은 화면: 줄 앞에 구분선이 오지 않게 — 링크는 간격만, 회사 정보는 한 줄에 하나씩 */
  .footer-policy { gap: 8px 18px; }
  .footer-policy a + a::before { content: none; }
  .footer-company { flex-direction: column; gap: 2px; }
  .footer-company span + span::before { content: none; }
}
.member-pop a small, .ns-me-menu a small { margin-left: 4px; font-size: 11.5px; font-weight: 700; color: var(--muted, #8A90A0); }
.region-link { color: inherit; text-decoration: none; text-underline-offset: 3px; }   /* 지역 링크: 평소엔 밑줄 없이, 마우스를 올리면 밑줄 */
.region-link:hover, .region-link:focus-visible { color: var(--orange); text-decoration: underline; }
.author-chip strong a { color: inherit; }
/* 내 정보 > 기본 정보: 한 줄에 한 항목, 항목 이름은 모두 같은 글씨로 왼쪽, 부연 설명은 다른 색 */
.my-profile { gap: 22px; }
.my-profile label, .my-profile .field-label, .my-profile summary { font-size: 14px; font-weight: 700; color: var(--text); }
.my-profile .field { display: flex; flex-direction: column; gap: 8px; }
.my-profile legend.field-label { margin-bottom: 8px; padding: 0; }
.my-profile .group-label { width: 100%; margin: 6px 0 4px; padding-top: 22px; border-top: 1px solid var(--line); font-size: 15px; font-weight: 800; color: var(--orange); }
.my-profile [data-shop-fields] { gap: 22px; }
.my-profile .hint { display: block; margin-top: 2px; font-size: 13px; font-weight: 400; line-height: 1.55; color: #3F6E9C; }   /* 부연 설명: 파란빛 회색 */
.my-profile .hint a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.my-profile .avatar-edit { gap: 14px; }
.my-profile .avatar-edit .avatar-msg { margin: 6px 0 0; }
.my-profile .type-card { font-size: 13.5px; }
.my-profile .landing-fields { display: flex; flex-direction: column; gap: 18px; }
.my-profile .landing-fields summary { cursor: pointer; }
.my-profile .closed-days { font-weight: 500; }
.my-profile .member-type .grid-2 { grid-template-columns: 1fr 1fr; }
@media (max-width: 600px) { .my-profile .member-type .grid-2 { grid-template-columns: 1fr; } }
.my-profile details.landing-fields[open] { display: flex; flex-direction: column; gap: 18px; }
.my-profile details.landing-fields > summary { margin-bottom: -6px; }
.my-profile .avatar-edit .btn-line { font-size: 13.5px; font-weight: 600; }
.my-profile .details-body { display: flex; flex-direction: column; gap: 18px; margin-top: 14px; }
.my-profile .details-body > .hint { margin-top: -8px; }
.my-profile .avatar-edit .avatar-pick, .my-profile .avatar-edit button.btn-line { box-sizing: border-box; height: 36px; min-height: 36px; padding: 0 16px; font-size: 13.5px; font-weight: 600; align-items: center; vertical-align: middle; }   /* 사진 바꾸기·삭제 같은 크기 */
.my-profile .avatar-edit .avatar-pick { flex-direction: row !important; justify-content: center; }
/* 내 정보 전체: 항목 사이 세로 간격 넓게, 부연 설명은 파란빛 회색 */
.my-main .form { gap: 28px; }
.my-main .my-profile, .my-main .my-profile [data-shop-fields] { gap: 32px; }
.my-main .my-profile .details-body { gap: 26px; }
.my-main .form label { gap: 8px; }
.my-main .hint, .my-main .form small.hint, .my-main p.hint { color: #3F6E9C; font-size: 13px; line-height: 1.55; }
.my-main .form > label, .my-main .form fieldset > label { font-size: 14px; font-weight: 700; color: var(--text); }   /* 내 정보 모든 탭: 항목 이름 같은 글씨 */
.my-profile .member-type .grid-2 { grid-template-columns: minmax(0, 1fr); gap: 10px; }   /* 업소회원·일반회원 위아래 두 줄로 */
/* 내 정보 회원 유형: 한 박스 안에 두 줄 (각 줄: 동그라미 · 이름 · 설명 한 줄로) */
.my-profile .member-type .grid-2 { display: flex; flex-direction: column; gap: 0; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.my-profile .member-type .type-card { align-items: center; margin: 0; padding: 14px 18px; border: 0; border-radius: 0; }
.my-profile .member-type .type-card + .type-card { border-top: 1px solid var(--line); }
.my-profile .member-type .type-card:has(input:checked) { border-color: var(--line); background: #FFF8F2; }
.my-profile .member-type .type-card input { margin-top: 0; }
.my-profile .member-type .type-card > span { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.my-profile .member-type .type-card b, .my-profile .member-type .type-card small { display: inline; }
/* 내 정보: 항목 사이를 더 넉넉하게 */
.my-main .form { gap: 40px; }
.my-main .my-profile, .my-main .my-profile [data-shop-fields] { gap: 44px; }
.my-main .my-profile .details-body { gap: 34px; }
.my-main .form label, .my-main .my-profile .field { gap: 10px; }
/* 내 정보: 항목 이름(회원 유형·프로필 사진·닉네임 …)은 갈색 */
.my-main .form > label, .my-main .form fieldset > label, .my-main .my-profile label:not(.type-card):not(.theme-chip):not(.avatar-pick):not(.chk-row), .my-main .my-profile .field-label, .my-main .my-profile summary { color: #8B5A2B; }
.my-main .form input, .my-main .form select, .my-main .form textarea { color: var(--text); }
.my-main .closed-days label { color: var(--text); }
.my-main .my-profile .closed-days label { color: var(--text) !important; font-weight: 500; }   /* 휴무 요일은 항목 이름이 아니라 보기 → 기본 글씨 */
.my-side-shop { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.my-side-shop a { font-weight: 700; color: var(--orange); }
/* 내 정보 사이드바 맨 아래: 내 가게 바로가기 두 개 (아이콘 + 이름, 새 창) */
.my-side .my-side-shop { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.my-side .my-side-shop a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid #F3D9C4; border-radius: 12px; background: #FFF8F2; color: var(--text); font-size: 14px; font-weight: 700; }
.my-side .my-side-shop a:hover { border-color: var(--orange); background: #FFF1E5; }
.my-shop-ico { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 9px; background: var(--orange); color: #fff; }
.my-shop-txt { flex: 1; min-width: 0; }
.my-shop-go { color: var(--muted); font-size: 13px; }
/* 회원가입 회원 유형: 내 정보와 같은 한 박스 두 줄 */
.member-type .type-box { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.member-type .type-box .type-card { align-items: center; margin: 0; padding: 14px 18px; border: 0; border-radius: 0; }
.member-type .type-box .type-card + .type-card { border-top: 1px solid var(--line); }
.member-type .type-box .type-card:has(input:checked) { border-color: var(--line); background: #FFF8F2; }
.member-type .type-box .type-card input { margin-top: 0; }
.member-type .type-box .type-card > span { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.member-type .type-box .type-card b, .member-type .type-box .type-card small { display: inline; }
/* 회원가입 화면: 넓게, 글씨 크게 */
.auth-box.wide { max-width: 680px; }
.auth-box.wide h1 { font-size: 32px; }
.auth-box.wide .auth-desc { font-size: 16.5px; margin-bottom: 34px; }
.auth-box.wide .form { gap: 22px; }
.auth-box.wide .form legend { font-size: 15.5px; margin-bottom: 12px; }
.auth-box.wide .form label { font-size: 15.5px; gap: 8px; }
.auth-box.wide .form input:not([type=checkbox]):not([type=radio]), .auth-box.wide .form select { min-height: 52px; font-size: 16.5px; }
.auth-box.wide .hint { font-size: 14px; }
.auth-box.wide .member-type .type-box .type-card { padding: 16px 20px; }
.auth-box.wide .member-type .type-card b { font-size: 17px; }
.auth-box.wide .member-type .type-card small { font-size: 14.5px; }
.auth-box.wide .agree-chk { font-size: 15px !important; }
.auth-box.wide .pill-block { min-height: 56px; font-size: 17px; }
.auth-box.wide + .auth-foot, .auth-box.wide .auth-foot { font-size: 15px; }
/* 로그인 화면: 글씨 크게 (회원가입과 맞춤) */
.auth-box:not(.wide) { max-width: 480px; }
.auth-box:not(.wide) h1 { font-size: 32px; }
.auth-box:not(.wide) .auth-desc { font-size: 16.5px; }
.auth-box:not(.wide) .form { gap: 20px; }
.auth-box:not(.wide) .form label { font-size: 15.5px; gap: 8px; }
.auth-box:not(.wide) .form input:not([type=checkbox]):not([type=radio]) { min-height: 52px; font-size: 16.5px; }
.auth-box:not(.wide) .login-chk { font-size: 15px !important; }
.auth-box:not(.wide) .login-hint, .auth-box:not(.wide) .caps-warn { font-size: 14px; }
.auth-box:not(.wide) .pill-block { min-height: 56px; font-size: 17px; }
.auth-box:not(.wide) .auth-foot { font-size: 15px; }
.auth-box .form label[for] + .pw-wrap { margin-top: -12px; }   /* '비밀번호' 이름과 입력칸 간격을 아이디와 같게 */
/* 회원가입 휴대폰 인증 */
.phone-verify .pv-row { display: flex; gap: 8px; }
.phone-verify .pv-row input { flex: 1; min-width: 0; }
.phone-verify .pv-btn { flex: 0 0 auto; min-height: 52px; padding: 0 18px; font-size: 15px; font-weight: 700; white-space: nowrap; }
.phone-verify .pv-btn:disabled { opacity: .55; cursor: default; }
.phone-verify input[readonly] { background: #F4F6F8; color: var(--muted); }
.pv-msg { min-height: 1.4em; margin: 0; font-size: 14.5px; font-weight: 700; }
.pv-msg.is-ok { color: #1F8A4C; } .pv-msg.is-err { color: #E5484D; } .pv-msg.is-test { color: #9A6500; }
.pv-test { color: #9A6500; }
.phone-verify [hidden] { display: none !important; }   /* 인증번호 칸·받기 버튼 숨김이 레이아웃에 덮이지 않게 */
.my-main .phone-verify { display: flex; flex-direction: column; gap: 10px; }
.my-main .phone-verify > label { font-size: 14px; font-weight: 700; color: #8B5A2B; }   /* 내 정보 항목 이름과 같게 */
/* 댓글: 사진 작게, 답글은 안쪽으로 (두 단계까지) */
.comment-head .av { width: 22px !important; height: 22px !important; font-size: 10px !important; }
.comment.depth-1 { margin-left: 28px; padding-left: 16px; border-left: 2px solid var(--line); }
.comment.depth-2 { margin-left: 56px; padding-left: 16px; border-left: 2px solid var(--line); }
.comment-reply-btn { margin-top: 6px; padding: 0; border: 0; background: none; font-size: 12.5px; font-weight: 700; color: var(--muted); cursor: pointer; }
.comment-reply-btn:hover { color: var(--orange); text-decoration: underline; }
.comment-gone { color: var(--muted); font-size: 13.5px; font-style: italic; }
.comment-reply-form { margin: 8px 0 14px; padding-left: 16px; }
.comment-reply-form.depth-0 { margin-left: 28px; } .comment-reply-form.depth-1, .comment-reply-form.depth-2 { margin-left: 56px; }
.comment-reply-btns { display: flex; gap: 6px; }
@media (max-width: 600px) { .comment.depth-1 { margin-left: 12px; } .comment.depth-2 { margin-left: 24px; } .comment-reply-form.depth-0 { margin-left: 12px; } .comment-reply-form.depth-1, .comment-reply-form.depth-2 { margin-left: 24px; } }
.comment-reply-form[hidden] { display: none !important; }
/* ---------- 글 편집기 ---------- */
.rte-field { display: flex; flex-direction: column; gap: 6px; }
.rte-label { font-size: 13.5px; font-weight: 600; color: #444; }
.rte { border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.rte:focus-within { border-color: var(--navy); box-shadow: 0 0 0 3px rgba(30, 42, 74, .08); }
.rte-bar { position: sticky; top: 72px; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 8px; border-bottom: 1px solid var(--line); border-radius: var(--radius) var(--radius) 0 0; background: #FAFAFB; }
.rte-bar button, .rte-bar select { min-height: 34px; padding: 0 10px; border: 1px solid transparent; border-radius: 8px; background: none; font: inherit; font-size: 13.5px; color: #333; cursor: pointer; white-space: nowrap; }
.rte-bar select { border-color: var(--line); background: #fff; padding-right: 6px; }
.rte-bar button:hover { background: #EEF0F4; }
.rte-bar button.on { background: #E3E8F3; border-color: #C8D2E6; color: var(--navy); }
.rte-bar button b, .rte-bar button i, .rte-bar button u, .rte-bar button s { font-size: 15px; }
.rte-bar .rte-strong { font-weight: 800; color: var(--orange); }
.rte-sep { width: 1px; height: 20px; margin: 0 4px; background: var(--line); }
.rte-pop-wrap { position: relative; display: inline-flex; }
.rte-a { font-weight: 800; }
.rte-hl { padding: 0 3px; background: #FFF3A3; }
.rte-swatch { display: inline-block; width: 14px; height: 4px; margin-left: 4px; border-radius: 2px; vertical-align: -2px; }
.rte-pop { position: absolute; top: 40px; left: 0; z-index: 10; display: grid; grid-template-columns: repeat(4, 30px); gap: 6px; padding: 10px; border: 1px solid var(--line); border-radius: 12px; background: #fff; box-shadow: 0 8px 24px rgba(0, 0, 0, .12); }
.rte-pop[hidden] { display: none; }
.rte-chip { width: 30px !important; height: 30px; min-height: 0 !important; padding: 0 !important; border: 1px solid rgba(0, 0, 0, .12) !important; border-radius: 8px !important; }
.rte-chip.is-none { background: linear-gradient(135deg, #fff 45%, #E5484D 47%, #E5484D 53%, #fff 55%) !important; }
.rte-area { min-height: 320px; padding: 16px 18px; font-size: 15.5px; line-height: 1.8; outline: none; overflow-wrap: anywhere; }
.rte-area.is-empty::before { content: attr(data-placeholder); position: absolute; color: #9AA0AA; pointer-events: none; }
.rte-area.is-drop { background: #FFF8F2; }
.rte-foot { display: flex; justify-content: space-between; gap: 10px; padding: 8px 14px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--muted); }
.rte-foot .is-err { color: #E5484D; font-weight: 700; }
@media (max-width: 768px) { .rte-bar { top: 56px; overflow-x: auto; flex-wrap: nowrap; } .rte-area { min-height: 260px; } }
/* 편집기 글 보여 주기 (편집 중·글 화면 같게) */
.rte-area h2, .post-body h2 { margin: 22px 0 10px; font-size: 22px; font-weight: 800; line-height: 1.4; }
.rte-area h3, .post-body h3 { margin: 18px 0 8px; font-size: 18px; font-weight: 800; line-height: 1.45; }
.rte-area p, .post-body p { margin: 0 0 6px; }
.rte-area ul, .rte-area ol, .post-body ul, .post-body ol { margin: 6px 0 10px; padding-left: 24px; }
.rte-area ul, .post-body ul { list-style: disc; } .rte-area ol, .post-body ol { list-style: decimal; }
.rte-area blockquote, .post-body blockquote { margin: 12px 0; padding: 10px 16px; border-left: 4px solid var(--orange); background: #FFF8F2; color: #444; }
.rte-area hr, .post-body hr { margin: 20px 0; border: 0; border-top: 1px solid var(--line); }
.rte-area img, .post-body img { display: block; max-width: 100%; height: auto; margin: 12px 0; border-radius: 10px; }
.rte-area a, .post-body a { color: #2D6BD8; text-decoration: underline; text-underline-offset: 3px; }
.rte-area { position: relative; }
.rte-area.is-empty::before { left: 18px; right: 18px; }
@media (max-width: 768px) { .rte-bar { overflow-x: visible; flex-wrap: wrap; } .rte-bar button, .rte-bar select { padding: 0 8px; font-size: 13px; } }
/* 가게 게시판 댓글 */
.ns-comments { margin-top: 28px; }
.ns-comments-empty { margin: 8px 0 14px; color: var(--muted); font-size: 14px; }
.ns-comments-empty a { color: inherit; text-decoration: underline; }
.ns-board-cmt { font-style: normal; font-weight: 700; color: var(--orange); font-size: .9em; }
.ns-write-form .rte-bar select { width: auto; height: 34px; min-height: 34px; padding: 0 6px 0 10px; border-radius: 8px; font-size: 13.5px; }
.ns-write-form .rte-label { font-size: inherit; }