/* ============================================================
   list.skin.css - miniclub1.11 클럽홈 메인 레이아웃 (레딧 스타일)
   정리본 — 중복 블록 제거, 토큰 일원화
   ============================================================ */

:root{
  --gs-bg:#f3f7f4;
  --gs-bg-2:#f8fbf8;
  --gs-panel:#ffffff;
  --gs-surface:#ffffff;
  --gs-surface-2:#f0f4f2;
  --gs-line:#dfe8e3;
  --gs-line-soft:#ebf1ed;
  --gs-text:#132017;
  --gs-text-strong:#0a1410;
  --gs-text-2:#3b5468;
  --gs-text-3:#7a9aae;
  --gs-sub:#6f8275;
  --gs-sub-2:#8ea093;
  --gs-green:#1f7a45;
  --gs-green-2:#2d9b59;
  --gs-green-d:#009960;
  --gs-green-soft:#e8f5ec;
  --gs-green-mid:rgba(31,122,69,.13);
  --gs-green-glow:rgba(31,122,69,.35);
  --gs-blue:#2563eb;
  --gs-blue-soft:#ecf4ff;
  --gs-orange:#c2410c;
  --gs-orange-soft:#fff5e8;
  --gs-red:#ef4444;
  --gs-shadow:0 18px 40px rgba(15,26,17,.08);
  --gs-shadow-sm:0 2px 12px rgba(12,29,44,.06);
  --gs-radius:10px;
  --gs-radius-pill:999px;
  --gs-radius-lg:22px;
  --gs-radius-md:18px;
  --gs-radius-sm:14px;
  --gs-border:#dfe8e3;
  --gs-topbar-h:54px;
  --gs-grad: linear-gradient(110deg,#1f7a45 0%,#00b4cc 50%,#2563eb 100%);
  --gs-font-ui: 'GmarketSans', sans-serif;
}

html[data-theme="dark"]{
  color-scheme:dark;
  --gs-bg:#0e1924;
  --gs-bg-2:#162233;
  --gs-panel:#162233;
  --gs-surface:#162233;
  --gs-surface-2:#1c2128;
  --gs-line:rgba(122,160,184,.18);
  --gs-line-soft:rgba(122,160,184,.10);
  --gs-text:#d4e8f4;
  --gs-text-strong:#ffffff;
  --gs-text-2:#7aa0b8;
  --gs-text-3:#3e6070;
  --gs-sub:#8aa3b6;
  --gs-sub-2:#6b859a;
  --gs-green:#34d399;
  --gs-green-2:#22c55e;
  --gs-green-d:#34d399;
  --gs-green-soft:rgba(34,197,94,.14);
  --gs-green-mid:rgba(0,193,124,.14);
  --gs-blue:#60a5fa;
  --gs-blue-soft:rgba(96,165,250,.16);
  --gs-orange:#fb923c;
  --gs-orange-soft:rgba(251,146,60,.14);
  --gs-red:#f87171;
  --gs-shadow:0 18px 40px rgba(0,0,0,.42);
  --gs-border:rgba(122,160,184,.18);
  --gs-grad: linear-gradient(110deg,#00c17c 0%,#00b4cc 50%,#1b72f4 100%);
}

.myclub-links,.tab-container{display:none!important;}

html,body{
  background:
    radial-gradient(circle at top left, rgba(43,154,86,.08), transparent 22%),
    linear-gradient(180deg,#f8fbf8 0%, var(--gs-bg) 100%);
}
html[data-theme="dark"] body{
  background:
    radial-gradient(circle at top left, rgba(34,197,94,.10), transparent 22%),
    linear-gradient(180deg,#0e1924 0%, #0a121a 100%)!important;
}

/* ============================================================
   상단 sticky 바
============================================================ */
.gsTopbar{
  position:sticky; top:0; z-index:1000;
  display:flex; align-items:center; gap:10px;
  height:var(--gs-topbar-h);
  padding:0 14px;
  background:var(--gs-panel);
  border-bottom:1px solid var(--gs-line-soft);
  backdrop-filter: saturate(1.4) blur(8px);
  -webkit-backdrop-filter: saturate(1.4) blur(8px);
}
html[data-theme="dark"] .gsTopbar{ background:rgba(22,34,51,.92); }

.gsHamburger{
  display:none;
  flex-direction:column; justify-content:center; align-items:center; gap:4px;
  width:38px; height:38px;
  background:transparent; border:none; cursor:pointer; padding:0;
}
.gsHamburger span{
  display:block;
  width:18px; height:2px;
  background:currentColor;
  border-radius:2px;
  transition:transform .2s;
}

.gsTopbarClub{
  display:inline-flex; align-items:center; gap:8px;
  text-decoration:none!important;
  color:var(--gs-text);
  font-weight:1000;
  font-size:14px;
  letter-spacing:-.02em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  min-width:0; flex:0 1 auto;
}
.gsTopbarClub img{
  width:32px; height:32px;
  border-radius:10px;
  object-fit:cover;
  border:1px solid var(--gs-line);
  flex:0 0 32px;
}
.gsTopbarClub span{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.gsTabs{
  margin-left:auto;
  display:flex; gap:4px; align-items:center;
  flex:1 1 auto;
  justify-content:flex-end;
  overflow-x:auto;
  scrollbar-width:none;
}
.gsTabs::-webkit-scrollbar{display:none;}

.gsTab{
  position:relative;
  display:inline-flex; align-items:center; gap:6px;
  height:38px; padding:0 14px;
  border-radius:999px;
  border:1px solid transparent;
  background:transparent;
  color:var(--gs-sub);
  text-decoration:none!important;
  font-size:13px; font-weight:1000;
  letter-spacing:-.01em;
  flex:0 0 auto;
  transition: background .15s, color .15s, border-color .15s;
}
.gsTab i{ font-size:13px; }
.gsTab:hover{ background:var(--gs-bg-2); color:var(--gs-text); }
html[data-theme="dark"] .gsTab:hover{ background:rgba(255,255,255,.05); }
.gsTab.is-active{
  background:var(--gs-green-soft);
  color:var(--gs-green);
  border-color: rgba(31,122,69,.18);
}
html[data-theme="dark"] .gsTab.is-active{ border-color: rgba(52,211,153,.35); }

.gsTabBadge{
  font-style:normal;
  display:inline-flex; align-items:center; justify-content:center;
  min-width:22px; height:20px;
  padding:0 6px;
  border-radius:999px;
  background:var(--gs-bg-2);
  color:var(--gs-sub);
  font-size:11px; font-weight:1000;
  margin-left:2px;
}
html[data-theme="dark"] .gsTabBadge{ background:rgba(255,255,255,.06); }
.gsTab.is-active .gsTabBadge{ background:var(--gs-panel); color:var(--gs-green); }
.gsTabBadge .gsCouponIn{ color:var(--gs-red); }
.gsTabBadge .gsCouponTot{ color:inherit; }

/* ============================================================
   드로어
============================================================ */
.gsDrawer{
  position:fixed; inset:0;
  z-index:9500;
  pointer-events:none;
  visibility:hidden;
}
.gsDrawer.is-open{ pointer-events:auto; visibility:visible; }

.gsDrawerBackdrop{
  position:absolute; inset:0;
  background:rgba(12,29,44,.55);
  opacity:0;
  transition:opacity .25s ease;
  backdrop-filter:blur(3px);
}
.gsDrawer.is-open .gsDrawerBackdrop{ opacity:1; }

.gsDrawerPanel{
  position:absolute;
  left:0; top:0; bottom:0;
  width:min(85vw, 320px);
  background:var(--gs-surface, #fff);
  transform:translateX(-100%);
  transition:transform .28s cubic-bezier(.32,.72,0,1);
  overflow-y:auto;
  box-shadow:8px 0 32px rgba(0,0,0,.20);
  display:flex;
  flex-direction:column;
}
.gsDrawer.is-open .gsDrawerPanel{ transform:translateX(0); }
html[data-theme="dark"] .gsDrawerPanel{ background:#162233; color:#d4e8f4; }

.gsDrawerHead{ display:flex; justify-content:flex-end; padding:14px 16px; }
.gsDrawerClose{
  width:36px; height:36px;
  border-radius:50%;
  border:1px solid var(--gs-border, #dde8f2);
  background:var(--gs-surface, #fff);
  cursor:pointer;
  font-size:14px;
  color:var(--gs-text, #0c1d2c);
  display:inline-flex; align-items:center; justify-content:center;
}

.gsDrawerClub{
  text-align:center;
  padding:0 20px 18px;
  border-bottom:1px solid var(--gs-border, #dde8f2);
}
.gsDrawerClubAvatar{
  width:64px; height:64px;
  border-radius:50%;
  object-fit:cover;
  border:2px solid var(--gs-green, #00c17c);
  padding:2px;
  background:#fff;
}
.gsDrawerClubName{
  margin-top:10px;
  font-size:15px; font-weight:700;
  color:var(--gs-text, #0c1d2c);
  letter-spacing:-.02em;
}
.gsDrawerClubSub{
  margin-top:4px;
  font-size:11px;
  color:var(--gs-text-3, #7a9aae);
  letter-spacing:.06em;
  text-transform:uppercase;
}

.gsDrawerMe{
  display:flex; align-items:center; gap:10px;
  padding:14px 18px;
  border-bottom:1px solid var(--gs-border, #dde8f2);
}
.gsDrawerMeAvatar{ width:36px; height:36px; border-radius:50%; object-fit:cover; }
.gsDrawerMeMeta{ min-width:0; flex:1; }
.gsDrawerMeName{
  font-size:13px; font-weight:700;
  color:var(--gs-text, #0c1d2c);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.gsDrawerMeBadge{
  display:inline-block;
  margin-top:3px;
  font-size:10px; font-weight:700;
  letter-spacing:.04em;
  padding:2px 8px;
  border-radius:999px;
}
.gsDrawerMeBadge.role-admin{ background:#e4f9f1; color:#009960; }
.gsDrawerMeBadge.role-subadmin{ background:#eaf1ff; color:#1254d0; }
.gsDrawerMeBadge.role-member{ background:#f1f5f9; color:#475569; }
.gsDrawerMeBadge.role-wait{ background:#fef3c7; color:#92400e; }

.gsDrawerNav{ display:flex; flex-direction:column; padding:8px; }
.gsDrawerNav a{
  display:flex; align-items:center; gap:10px;
  padding:12px 14px;
  border-radius:10px;
  color:var(--gs-text-2, #3b5468);
  font-size:13.5px; font-weight:600;
  text-decoration:none;
  transition: background .15s, color .15s;
}
.gsDrawerNav a i{ width:20px; text-align:center; }
.gsDrawerNav a:hover{
  background:var(--gs-green-mid, rgba(0,193,124,.13));
  color:var(--gs-green-d, #009960);
}
.gsDrawerNav a.is-active{
  background:var(--gs-grad, linear-gradient(110deg,#00c17c 0%,#00b4cc 50%,#1b72f4 100%));
  color:#fff;
  box-shadow:0 4px 14px var(--gs-green-glow, rgba(0,193,124,.35));
}

.gsDrawerActions{
  margin-top:auto;
  padding:16px;
  border-top:1px solid var(--gs-border, #dde8f2);
  display:flex; flex-direction:column; gap:8px;
}
.gsDrawerBtn{
  display:flex; align-items:center; justify-content:center; gap:6px;
  padding:11px 14px;
  border-radius:10px;
  background:var(--gs-surface, #fff);
  border:1.5px solid var(--gs-border, #dde8f2);
  color:var(--gs-text-2, #3b5468);
  font-size:13px; font-weight:600;
  text-decoration:none;
  cursor:pointer;
}
.gsDrawerBtn.primary{
  background:var(--gs-grad, linear-gradient(110deg,#00c17c 0%,#00b4cc 50%,#1b72f4 100%));
  color:#fff !important;
  border:none;
  box-shadow:0 4px 14px var(--gs-green-glow, rgba(0,193,124,.35));
}

/* ============================================================
   메인 컨테이너 (데스크톱 폭 1100)
============================================================ */
.gsClubShell{
  max-width:1100px;
  margin:14px auto 30px;
  padding:0 14px;
}

.gsMain{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:14px;
}

/* ============================================================
   압축형 클럽 헤더 (브레드크럼)
============================================================ */
.gsClubCompact{
  display:flex; align-items:center; gap:12px;
  padding:12px 14px;
  border-radius:var(--gs-radius-md);
  border:1px solid var(--gs-line);
  background:var(--gs-panel);
  box-shadow:var(--gs-shadow);
  flex-wrap:wrap;
}
.gsCCAvatar{
  flex:0 0 auto;
  display:block;
  width:40px; height:40px;
  border-radius:12px;
  overflow:hidden;
  border:1px solid var(--gs-line);
}
.gsCCAvatar img{ width:100%; height:100%; object-fit:cover; }

.gsCCInfo{ flex:1 1 auto; min-width:0; }
.gsCCName{
  font-size:14px; font-weight:1000;
  color:var(--gs-text);
  letter-spacing:-.02em;
  display:flex; align-items:center; gap:6px;
  flex-wrap:wrap;
  line-height:1.2;
}
.gsCCSep{ color:var(--gs-sub-2); font-weight:1000; }
.gsCCRole{
  display:inline-flex; align-items:center;
  height:22px;
  padding:0 9px;
  border-radius:999px;
  font-size:10.5px; font-weight:1000;
  letter-spacing:.04em;
  border:1px solid var(--gs-line);
  background:var(--gs-bg-2);
  color:var(--gs-text);
}
.gsCCRole.role-admin{ background:var(--gs-green-soft); color:var(--gs-green); border-color: rgba(31,122,69,.20); }
.gsCCRole.role-subadmin{ background:#fef9c3; color:#a16207; border-color:#fde68a; }
.gsCCRole.role-member{ background:var(--gs-blue-soft); color:var(--gs-blue); border-color: rgba(37,99,235,.22); }
.gsCCRole.role-wait{ background:var(--gs-orange-soft); color:var(--gs-orange); border-color:#fed7aa; }
html[data-theme="dark"] .gsCCRole.role-subadmin{ background:rgba(250,204,21,.15); color:#fde047; border-color:rgba(250,204,21,.35); }

.gsCCSub{
  margin-top:2px;
  font-size:11px;
  color:var(--gs-sub);
  font-weight:900;
  letter-spacing:.04em;
  text-transform:uppercase;
}

.gsCCActions{ display:flex; gap:6px; flex-wrap:wrap; }
.gsCCBtn{
  display:inline-flex; align-items:center; gap:5px;
  height:32px; padding:0 12px;
  border-radius:999px;
  border:1px solid var(--gs-line);
  background:var(--gs-panel);
  color:var(--gs-text);
  font-size:12px; font-weight:1000;
  cursor:pointer;
  transition: background .15s, border-color .15s;
}
.gsCCBtn:hover{ background:var(--gs-bg-2); }
.gsCCBtn.is-on{
  background:linear-gradient(135deg, var(--gs-green) 0%, var(--gs-green-2) 100%);
  color:#fff;
  border-color:transparent;
}
.gsCCBtn.is-danger{ color:#dc2626; border-color:#fecaca; }
html[data-theme="dark"] .gsCCBtn.is-danger{ color:#f87171; border-color:rgba(248,113,113,.35); }
.gsCCBtn.is-danger:hover{ background:#fff1f2; }
html[data-theme="dark"] .gsCCBtn.is-danger:hover{ background: rgba(248,113,113,.10); }

/* club_headline 안의 액션버튼은 압축헤더와 중복이라 숨김 */
.club_headline .club-head-actions,
.club_headline .club-actions{ display:none !important; }

/* ============================================================
   pane 전환
============================================================ */
.gsPane{ display:none; }
.gsPane.is-active{ display:block; }
.gsPaneHead{ margin-bottom:12px; }
.gsPaneTitle{
  font-size:22px; font-weight:1000;
  color:var(--gs-text);
  letter-spacing:-.04em;
  line-height:1.2;
}
.gsPaneDesc{
  margin-top:6px;
  font-size:13px; line-height:1.7;
  color:var(--gs-sub);
  font-weight:900;
}

/* 홈 탭에 있을 때는 club_member.php의 회원/쿠폰 블록 숨김.
   JS가 #pane-coupon으로 옮기면 selector 매칭이 풀려 자동으로 보임. */
#pane-home .club-member-block{ display:none !important; }

/* ============================================================
   피드 - 정렬/뷰 컨트롤
============================================================ */
.gsFeedTools{
  display:flex; align-items:center; gap:8px;
  padding:10px 14px;
  border-radius:var(--gs-radius-md);
  border:1px solid var(--gs-line);
  background:var(--gs-panel);
  box-shadow:var(--gs-shadow);
  flex-wrap:wrap;
  position:sticky;
  top:calc(var(--gs-topbar-h) + 8px);
  z-index:50;
}

.gsFeedSort{ position:relative; }
.gsSortBtn{
  display:inline-flex; align-items:center; gap:6px;
  height:34px; padding:0 12px;
  border-radius:999px;
  border:1px solid var(--gs-line);
  background:var(--gs-panel);
  color:var(--gs-text);
  font-size:12.5px; font-weight:1000;
  cursor:pointer;
}
.gsSortBtn:hover{ background:var(--gs-bg-2); }
.gsSortBtn .fa-caret-down{ font-size:11px; color:var(--gs-sub); margin-left:2px; }

.gsSortMenu{
  display:none;
  position:absolute;
  top:calc(100% + 6px); left:0;
  z-index:60;
  min-width:160px;
  padding:6px;
  border-radius:14px;
  border:1px solid var(--gs-line);
  background:var(--gs-panel);
  box-shadow:0 18px 40px rgba(15,26,17,.18);
}
.gsSortMenu.is-open{ display:block; }
.gsSortMenu a{
  display:flex; align-items:center;
  height:36px; padding:0 12px;
  border-radius:10px;
  text-decoration:none!important;
  color:var(--gs-text);
  font-size:13px; font-weight:1000;
}
.gsSortMenu a:hover{ background:var(--gs-bg-2); }
.gsSortMenu a.is-active{ background:var(--gs-green-soft); color:var(--gs-green); }

.gsFeedView{
  display:inline-flex; align-items:center;
  border-radius:999px;
  border:1px solid var(--gs-line);
  background:var(--gs-panel);
  overflow:hidden;
}
.gsViewBtn{
  width:34px; height:34px;
  border:0; background:transparent;
  color:var(--gs-sub);
  cursor:pointer;
  font-size:13px;
}
.gsViewBtn:hover{ color:var(--gs-text); background:var(--gs-bg-2); }
.gsViewBtn.is-active{ background:var(--gs-green-soft); color:var(--gs-green); }

.gsFeedWriteBtn{
  margin-left:auto;
  display:inline-flex; align-items:center; gap:6px;
  height:36px; padding:0 14px;
  border-radius:999px;
  background:linear-gradient(135deg, var(--gs-green) 0%, var(--gs-green-2) 100%);
  color:#fff!important;
  font-size:12.5px; font-weight:1000;
  text-decoration:none!important;
  border:none;
  box-shadow:0 8px 18px rgba(31,122,69,.18);
  cursor:pointer;
}
.gsFeedWriteBtn:hover{ filter:brightness(.96); }

.gsCategoryBox{
  padding:12px 14px;
  border:1px solid var(--gs-line-soft);
  border-radius:var(--gs-radius-md);
  background:var(--gs-panel);
}

/* ============================================================
   피드 카드 (레딧 스타일)
============================================================ */
.gsFeedList{
  display:flex; flex-direction:column;
  gap:10px;
}

/* ── 타일형 (그리드) ── */
.gsFeedList.is-tile{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:12px;
  flex-direction: initial;
}
@media (max-width:980px){
  .gsFeedList.is-tile{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width:520px){
  .gsFeedList.is-tile{ grid-template-columns: 1fr; gap:10px; }
}

.gsFeedList.is-tile .gsFeedItem{
  padding: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.gsFeedList.is-tile .gsFeedHead{
  padding: 12px 14px 0;
  margin-bottom: 6px;
  padding-right: 38px;
}
.gsFeedList.is-tile .gsFeedTitle{
  padding: 0 14px;
  margin: 4px 0 8px;
  font-size: 15px;
  -webkit-line-clamp: 2;
}
/* 타일에서 본문은 숨김, 썸네일만 보임 */
.gsFeedList.is-tile .gsFeedMain{ margin: 0 0 8px; }
.gsFeedList.is-tile .gsFeedMain.has-thumb{
  display: block;
  gap: 0;
  order: -1; /* 썸네일을 제목 위로 */
  margin: 0;
}
.gsFeedList.is-tile .gsFeedItem.has-thumb .gsFeedTitle{ order: 1; }
.gsFeedList.is-tile .gsFeedItem.has-thumb .gsFeedHead{ order: 2; }
.gsFeedList.is-tile .gsFeedItem.has-thumb .gsFeedFoot{ order: 3; margin-top: auto; }

.gsFeedList.is-tile .gsFeedThumb{
  flex: none;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  border-radius: 0;
  border: none;
  border-bottom: 1px solid var(--gs-line-soft);
}
.gsFeedList.is-tile .gsFeedThumb:hover{ border-color: transparent; border-bottom-color: var(--gs-line-soft); }

.gsFeedList.is-tile .gsFeedBody{ display: none; }
.gsFeedList.is-tile .gsFeedExpandBtn{ display: none !important; }

/* 썸네일 없는 타일 카드 — 본문 미리보기 보이게 */
.gsFeedList.is-tile .gsFeedItem.no-thumb .gsFeedBody{
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 13px;
  line-height: 1.6;
  padding: 0 14px;
  margin: 4px 0 8px;
  max-height: none;
  color: var(--gs-sub);
}
.gsFeedList.is-tile .gsFeedItem.no-thumb .gsFeedBody::after{ display: none; }

.gsFeedList.is-tile .gsFeedFoot{
  padding: 8px 14px 12px;
  border-top: 1px solid var(--gs-line-soft);
  margin-top: auto;
}
.gsFeedList.is-tile .gsInlineComment{ display: none !important; }
.gsFeedList.is-tile .gsFeedDelete{ top: 8px; right: 8px; }

.gsFeedItem{
  position:relative;
  padding:14px 16px;
  border:1px solid var(--gs-line);
  border-radius:14px;
  background:var(--gs-panel);
  transition: border-color .18s, box-shadow .18s, transform .12s;
  overflow:hidden;
}
.gsFeedItem:hover{
  border-color:var(--gs-green);
  box-shadow:0 10px 24px rgba(15,26,17,.06);
}
html[data-theme="dark"] .gsFeedItem:hover{
  box-shadow:0 10px 24px rgba(0,0,0,.4);
}

.gsFeedHead{
  display:flex; align-items:center; gap:10px;
  margin-bottom:8px;
  flex-wrap:wrap;
  padding-right:38px; /* 우측 상단 삭제 버튼 자리 */
}
.gsFeedAuthor{
  display:flex; align-items:center; gap:8px;
  min-width:0;
  flex:1 1 auto;
}
.gsFeedAvatar{
  width:28px; height:28px;
  border-radius:999px;
  object-fit:cover;
  border:1px solid var(--gs-line);
  flex:0 0 28px;
}
.gsFeedAuthorMeta{
  display:flex; align-items:center; gap:6px;
  min-width:0;
  flex-wrap:wrap;
}
.gsFeedAuthorName{
  font-size:12.5px; font-weight:1000;
  color:var(--gs-text);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  max-width:120px;
}
.gsFeedAuthorMeta::before{ content:"·"; color:var(--gs-sub-2); font-weight:1000; }
.gsFeedTime{
  font-size:11.5px;
  color:var(--gs-sub);
  font-weight:900;
}
.gsFeedCategory{
  display:inline-flex; align-items:center; gap:4px;
  height:22px;
  padding:0 9px;
  border-radius:999px;
  border:1px solid var(--gs-line-soft);
  background:var(--gs-bg-2);
  color:var(--gs-sub);
  font-size:11px; font-weight:1000;
}

/* 제목 — 클릭 가능한 버튼 */
.gsFeedTitle{
  display:flex;
  align-items:flex-start;
  flex-wrap:wrap;
  gap:6px;
  width:100%;
  margin:6px 0 8px;
  padding:0;
  font-size:18px;
  line-height:1.4;
  font-weight:1000;
  letter-spacing:-.03em;
  color:var(--gs-text);
  text-decoration:none!important;
  word-break:break-word; overflow-wrap:anywhere;
  background:transparent;
  border:none;
  text-align:left;
  cursor:pointer;
  font-family:inherit;
  transition: color .15s;
}
.gsFeedTitle:hover{ color: var(--gs-green); }
.gsFeedTitle:hover .gsFeedTitleText{ text-decoration: underline; text-underline-offset: 3px; }
.gsFeedTitleText{
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  flex:1 1 auto;
  min-width:0;
}

.gsFeedFlag{
  display:inline-flex; align-items:center;
  height:18px;
  padding:0 7px;
  margin-left:6px;
  border-radius:999px;
  font-size:9.5px; font-weight:1000;
  letter-spacing:.04em;
  vertical-align:2px;
}
.gsFeedFlag.is-new{ background:var(--gs-green-soft); color:var(--gs-green); }
.gsFeedFlag.is-hot{ background:#fee2e2; color:#dc2626; }

.gsFeedExcerpt{
  margin:0 0 10px;
  font-size:13.5px; line-height:1.7;
  color:var(--gs-text);
  word-break:break-word; overflow-wrap:anywhere;
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
html[data-theme="dark"] .gsFeedExcerpt{ color:#a8c0d0; }

/* 본문 + 더보기 토글 */
.gsFeedBody{
  position:relative;
  margin:0 0 10px;
  font-size:13.5px; line-height:1.7;
  color: var(--gs-text);
  word-break:break-word; overflow-wrap:anywhere;
}
.gsFeedBody p{ margin:0 0 8px; }
.gsFeedBody p:last-child{ margin-bottom:0; }
.gsFeedBody img{
  max-width:100% !important;
  height:auto !important;
  border-radius:8px;
  margin:6px 0;
}
.gsFeedBody a{ color: var(--gs-green); }
.gsFeedBody.is-collapsed{ max-height:200px; overflow:hidden; }
.gsFeedBody.is-collapsed::after{
  content:"";
  position:absolute; left:0; right:0; bottom:0;
  height:60px;
  pointer-events:none;
  background: linear-gradient(transparent, var(--gs-panel) 92%);
}
html[data-theme="dark"] .gsFeedBody{ color:#d4e8f4; }
html[data-theme="dark"] .gsFeedBody.is-collapsed::after{
  background: linear-gradient(transparent, #162233 92%);
}

.gsFeedExpandBtn{
  display:inline-flex; align-items:center; gap:5px;
  margin: 0 0 10px;
  height:30px; padding:0 14px;
  border-radius:999px;
  border:1px solid var(--gs-line);
  background: var(--gs-bg-2);
  color: var(--gs-text);
  font-size:11.5px; font-weight:1000;
  cursor:pointer;
  font-family: inherit;
}
.gsFeedExpandBtn:hover{
  border-color: var(--gs-green);
  color: var(--gs-green);
}

/* 본문 + 좌측 작은 썸네일 가로 배치 */
.gsFeedMain{ margin: 0 0 10px; }
.gsFeedMain.has-thumb{
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.gsFeedMain.has-thumb .gsFeedBody{
  flex: 1;
  min-width: 0;
  margin: 0;
}

/* 좌측 썸네일 (96x96) */
.gsFeedThumb{
  flex: 0 0 96px;
  width: 96px;
  height: 96px;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  border: 1px solid var(--gs-line);
  background: var(--gs-bg-2);
  cursor: zoom-in;
  padding: 0;
  display: block;
  font-family: inherit;
}
.gsFeedThumb img{
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .25s ease;
}
.gsFeedThumb:hover img{ transform: scale(1.06); }
.gsFeedThumb:hover{ border-color: var(--gs-green); }
html[data-theme="dark"] .gsFeedThumb{
  border-color: rgba(122,160,184,.22);
  background: rgba(14,25,36,.5);
}

.gsFeedThumbCount{
  position: absolute;
  right: 5px; bottom: 5px;
  display: inline-flex; align-items: center; gap: 4px;
  background: rgba(0,0,0,.72);
  color: #fff;
  font-size: 10.5px; font-weight: 1000;
  padding: 3px 8px;
  border-radius: 999px;
  letter-spacing: .02em;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  pointer-events: none;
}
.gsFeedThumbCount i{ font-size: 9px; }

/* 게시글 카드 우측 상단 삭제 버튼 */
.gsFeedDelete{
  position:absolute;
  top:12px; right:12px;
  width:30px; height:30px;
  border-radius:999px;
  border:1px solid var(--gs-line);
  background: var(--gs-panel);
  color: var(--gs-sub);
  cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:13px;
  opacity:.5;
  transition: all .15s;
  z-index: 3;
  padding:0;
  font-family: inherit;
}
.gsFeedDelete:hover{
  opacity: 1;
  color:#dc2626;
  border-color:#fecaca;
  background:#fff1f2;
  box-shadow: 0 4px 12px rgba(220,38,38,.12);
}
.gsFeedDelete:disabled{ opacity:.6; cursor: not-allowed; }
html[data-theme="dark"] .gsFeedDelete{
  background: rgba(28,40,56,.7);
  border-color: rgba(122,160,184,.22);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
html[data-theme="dark"] .gsFeedDelete:hover{
  color:#f87171;
  border-color: rgba(248,113,113,.45);
  background: rgba(248,113,113,.14);
}

/* ============================================================
   다중 이미지 갤러리 (하위 호환 — 기본은 좌측 썸네일)
============================================================ */
.gsFeedMedia{
  position:relative;
  margin:10px 0 12px;
  border-radius:var(--gs-radius);
  overflow:hidden;
  background:var(--gs-surface-2);
  border:1px solid var(--gs-border);
}
.gsFeedGallery{
  display:flex;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
.gsFeedGallery::-webkit-scrollbar{ display:none; }
.gsFeedSlide{
  flex:0 0 100%;
  scroll-snap-align:start;
  aspect-ratio:4/3;
  display:grid;
  place-items:center;
  background:#000;
  overflow:hidden;
}
.gsFeedSlide img{
  width:100%; height:100%;
  object-fit:cover;
  cursor:zoom-in;
  display:block;
}
.gsFeedMedia:not(.has-multi) .gsFeedSlide{
  aspect-ratio:auto;
  max-height:520px;
}
.gsFeedMedia:not(.has-multi) .gsFeedSlide img{
  height:auto;
  max-height:520px;
  object-fit:contain;
  background:#000;
}

.gsFeedNav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:36px; height:36px;
  border-radius:50%;
  background:rgba(0,0,0,.55);
  color:#fff;
  border:none;
  display:grid; place-items:center;
  cursor:pointer;
  z-index:2;
  transition:background .15s, opacity .15s;
  opacity:.85;
}
.gsFeedNav:hover{ background:rgba(0,0,0,.85); opacity:1; }
.gsFeedNav.prev{ left:8px; }
.gsFeedNav.next{ right:8px; }

.gsFeedDots{
  position:absolute;
  bottom:10px; left:50%;
  transform:translateX(-50%);
  display:flex; gap:5px;
  z-index:2;
  background:rgba(0,0,0,.35);
  padding:5px 9px;
  border-radius:var(--gs-radius-pill);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
}
.gsFeedDots span{
  width:6px; height:6px;
  border-radius:50%;
  background:rgba(255,255,255,.5);
  cursor:pointer;
  transition:background .15s, transform .15s;
}
.gsFeedDots span.is-active{ background:#fff; transform:scale(1.2); }

.gsFeedCounter{
  position:absolute;
  top:10px; right:10px;
  background:rgba(0,0,0,.6);
  color:#fff;
  font-size:11px;
  padding:4px 10px;
  border-radius:var(--gs-radius-pill);
  z-index:2;
  font-family:var(--gs-font-ui);
  letter-spacing:.04em;
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
}

@media (hover: none){
  .gsFeedMedia.has-multi .gsFeedNav{ display:inline-flex; }
}

/* ============================================================
   푸터 - 투표/댓글/공유
============================================================ */
.gsFeedFoot{
  display:flex; align-items:center; gap:8px;
  padding-top:8px;
  flex-wrap:wrap;
}
.gsFeedVotes{
  display:inline-flex; align-items:center;
  border-radius:999px;
  border:1px solid var(--gs-line);
  background:var(--gs-panel);
  overflow:hidden;
  height:32px;
}
.gsFeedVote{
  width:30px; height:30px;
  border:0; background:transparent;
  color:var(--gs-sub);
  cursor:pointer;
  font-size:12px;
}
.gsFeedVote:hover{ color:var(--gs-text); background:var(--gs-bg-2); }
.gsFeedVote.up:hover{ color:var(--gs-green); }
.gsFeedVote.down:hover{ color:#dc2626; }
.gsFeedVoteNum{
  padding:0 8px;
  font-size:12px; font-weight:1000;
  color:var(--gs-text);
}

.gsFeedComments,
.gsFeedShare{
  display:inline-flex; align-items:center; gap:5px;
  height:32px; padding:0 12px;
  border-radius:999px;
  border:1px solid var(--gs-line);
  background:var(--gs-panel);
  color:var(--gs-text);
  font-size:12px; font-weight:1000;
  text-decoration:none!important;
  cursor:pointer;
}
.gsFeedComments:hover,
.gsFeedShare:hover{ background:var(--gs-bg-2); }

.gsFeedSelect{
  display:inline-flex; align-items:center; gap:4px;
  height:32px; padding:0 10px;
  border-radius:999px;
  border:1px solid var(--gs-line);
  background:var(--gs-panel);
  color:var(--gs-sub);
  font-size:11px; font-weight:1000;
  cursor:pointer;
}
.gsFeedSelect input{ margin:0; }

/* 빈 상태 */
.gsEmptyState{
  padding:44px 20px;
  border-radius:18px;
  border:1px dashed var(--gs-line);
  background:var(--gs-panel);
  text-align:center;
}
.gsEmptyState strong{
  display:block;
  color:var(--gs-text);
  font-size:16px; font-weight:1000;
}
.gsEmptyState span{
  display:block;
  margin-top:6px;
  font-size:13px;
  color:var(--gs-sub);
  font-weight:900;
}

.gsFeedBottomActions{
  margin-top:12px;
  display:flex; gap:6px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.gsGhostBtn{
  display:inline-flex; align-items:center;
  height:34px; padding:0 12px;
  border-radius:999px;
  border:1px solid var(--gs-line);
  background:var(--gs-panel);
  color:var(--gs-text);
  font-size:12px; font-weight:1000;
  cursor:pointer;
  text-decoration:none!important;
}
.gsGhostBtn:hover{ background:var(--gs-bg-2); }

.gsPaging{ margin-top:14px; text-align:center; }

/* 방금 올린 글 강조 */
.gsFeedItem.is-just-posted{
  border-color: var(--gs-green) !important;
  box-shadow: 0 0 0 3px rgba(31,122,69,.22), 0 18px 40px rgba(31,122,69,.18) !important;
  position: relative;
  animation: gsJustPosted 1.2s ease-out;
}
.gsFeedItem.is-just-posted::before{
  content:"방금 올린 글";
  position:absolute;
  top:-12px; left:14px;
  background: linear-gradient(135deg, var(--gs-green) 0%, var(--gs-green-2) 100%);
  color:#fff;
  font-size:10.5px; font-weight:1000;
  letter-spacing:.04em;
  padding:5px 12px;
  border-radius:999px;
  box-shadow: 0 4px 10px rgba(31,122,69,.22);
  z-index:2;
}
@keyframes gsJustPosted{
  0%{ transform:scale(.98); box-shadow: 0 0 0 0 rgba(31,122,69,.6); }
  60%{ transform:scale(1.02); box-shadow: 0 0 0 14px rgba(31,122,69,0); }
  100%{ transform:scale(1); box-shadow: 0 0 0 3px rgba(31,122,69,.22); }
}

/* ============================================================
   라이트박스
============================================================ */
.gsLightbox{
  display:none;
  position:fixed; inset:0;
  background:rgba(0,0,0,.94);
  z-index:9999;
  align-items:center;
  justify-content:center;
}
.gsLightbox.is-open{ display:flex; }
.gsLightboxImg{
  max-width:94vw;
  max-height:94vh;
  object-fit:contain;
  display:block;
  user-select:none;
  border-radius:8px;
}
.gsLightboxClose,
.gsLightboxNav{
  position:absolute;
  background:rgba(255,255,255,.14);
  color:#fff;
  border:none;
  width:46px; height:46px;
  border-radius:50%;
  display:grid; place-items:center;
  cursor:pointer;
  font-size:18px;
  transition:background .15s;
}
.gsLightboxClose:hover,
.gsLightboxNav:hover{ background:rgba(255,255,255,.28); }
.gsLightboxClose{ top:24px; right:24px; }
.gsLightboxNav.prev{ left:24px; top:50%; transform:translateY(-50%); }
.gsLightboxNav.next{ right:24px; top:50%; transform:translateY(-50%); }

/* ============================================================
   피드 iframe 모달 (글쓰기 전용)
============================================================ */
.gsFeedModal{
  display:none;
  position:fixed;
  inset:0;
  z-index:5500;
  background:rgba(2,6,23,.66);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  align-items:flex-start;   /* center → flex-start : 패널을 화면 상단에 붙여 위아래 잘림 방지 */
  justify-content:center;
  padding:14px;
  overflow-y:auto;          /* 패널이 화면보다 길어도 모달 자체 스크롤 */
}
.gsFeedModal.show{ display:flex; }

.gsFeedModalPanel{
  width:min(96vw, 880px);
  height:min(92vh, 920px);
  background:var(--gs-panel);
  border:1px solid var(--gs-line);
  border-radius:18px;
  box-shadow:0 30px 70px rgba(0,0,0,.45);
  display:flex;
  flex-direction:column;
  overflow:hidden;
}

.gsFeedModalHeader{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 16px;
  border-bottom:1px solid var(--gs-line-soft);
}

.gsFeedModalTitle{
  display:flex; align-items:center; gap:8px;
  font-size:13px; font-weight:1000;
  color:var(--gs-text);
}
.gsFeedModalTitle i{ color:var(--gs-green); }

.gsFeedModalActions{ display:flex; gap:6px; }

.gsFeedModalIconBtn{
  width:34px; height:34px;
  border-radius:999px;
  border:1px solid var(--gs-line);
  background:var(--gs-panel);
  color:var(--gs-text);
  cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:12px;
}
.gsFeedModalIconBtn:hover{ background:var(--gs-bg-2); }

.gsFeedModalBody{
  flex:1;
  min-height:0;
  position:relative;
  background:#fff;
}
html[data-theme="dark"] .gsFeedModalBody{ background:#14202c; }

.gsFeedModalIframe{
  width:100%; height:100%;
  border:0;
  display:block;
  background:transparent;
}

.gsFeedModalLoading{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  gap:10px;
  background:var(--gs-panel);
  color:var(--gs-sub);
  font-size:13px; font-weight:900;
  pointer-events:none;
  opacity:0;
  transition: opacity .2s;
}
.gsFeedModalLoading.is-on{ opacity:1; }
.gsFeedModalLoading::before{
  content:"";
  width:18px; height:18px;
  border-radius:50%;
  border:2px solid var(--gs-line);
  border-top-color:var(--gs-green);
  animation: gsFeedSpin .9s linear infinite;
}
@keyframes gsFeedSpin{ to{ transform:rotate(360deg); } }

@media (max-width:680px){
  .gsFeedModal{ padding:0; }
  .gsFeedModalPanel{
    width:100%; height:100%;
    border-radius:0;
    border:0;
  }
}

/* ============================================================
   인라인 댓글
============================================================ */
.gsInlineComment{
  display:none;
  margin:10px -16px -16px;
  padding:12px 16px 14px;
  background: var(--gs-bg-2, #f3f7f4);
  border-top:1px solid var(--gs-line-soft, #ebf1ed);
  border-radius:0 0 14px 14px;
}
.gsInlineComment.is-open{
  display:block;
  margin-top:12px;
  animation: gsIcSlide .22s ease;
}
@keyframes gsIcSlide{
  from{ opacity:0; transform: translateY(-6px); }
  to  { opacity:1; transform: translateY(0); }
}

.gsInlineCommentForm{
  background: var(--gs-panel, #fff);
  border:1.5px solid var(--gs-line, #dfe8e3);
  border-radius:12px;
  padding:10px;
  display:flex; flex-direction:column;
  gap:10px;
  transition: border-color .15s, box-shadow .15s;
}
.gsInlineCommentForm:focus-within{
  border-color: var(--gs-green, #1f7a45);
  box-shadow: 0 0 0 3px rgba(31,122,69,.14);
}
.gsInlineCommentForm textarea{
  width:100%;
  min-height:64px;
  padding:8px 10px;
  border:0;
  background:transparent;
  color: var(--gs-text, #132017);
  font-size:14px; line-height:1.55;
  font-family: inherit;
  outline:none;
  resize:vertical;
  box-sizing:border-box;
}
.gsInlineCommentBar{
  display:flex; align-items:center; gap:8px;
  flex-wrap:wrap;
}
.gsInlineCommentSecret{
  display:inline-flex; align-items:center; gap:5px;
  font-size:12px; font-weight:1000;
  color: var(--gs-sub, #6f8275);
  cursor:pointer;
  margin-right:auto;
}
.gsInlineCommentSecret input{
  accent-color: var(--gs-green, #1f7a45);
  width:14px; height:14px;
  margin:0;
}
.gsInlineCommentCancel{
  height:34px; padding:0 14px;
  border-radius:999px;
  border:1px solid var(--gs-line, #dfe8e3);
  background: var(--gs-panel, #fff);
  color: var(--gs-text, #132017);
  font-size:12px; font-weight:1000;
  cursor:pointer;
  font-family: inherit;
}
.gsInlineCommentCancel:hover{
  border-color: var(--gs-green, #1f7a45);
  color: var(--gs-green, #1f7a45);
}
.gsInlineCommentSubmit{
  height:34px; padding:0 18px;
  border-radius:999px;
  border:0;
  background: linear-gradient(135deg, var(--gs-green, #1f7a45), var(--gs-green-2, #2d9b59));
  color:#fff;
  font-size:12.5px; font-weight:1000;
  cursor:pointer;
  font-family: inherit;
  box-shadow: 0 6px 14px rgba(31,122,69,.18);
}
.gsInlineCommentSubmit:hover{ filter: brightness(.95); }
.gsInlineCommentSubmit:disabled{ opacity:.6; cursor:not-allowed; }

/* 댓글 목록 / 로그인 안내 */
.gsInlineCommentList{
  display:flex; flex-direction:column;
  gap:6px;
  margin:0 0 10px;
}
.gsInlineCommentList:empty{ display:none; }

.gsInlineCommentLoading,
.gsInlineCommentEmpty{
  padding:14px;
  text-align:center;
  color: var(--gs-sub, #6f8275);
  font-size:12.5px; font-weight:1000;
  background: var(--gs-panel, #fff);
  border:1px dashed var(--gs-line, #dfe8e3);
  border-radius:10px;
}

.gsInlineCommentLogin{
  padding:14px;
  text-align:center;
  background: var(--gs-panel, #fff);
  border:1px solid var(--gs-line, #dfe8e3);
  border-radius:12px;
  font-size:13px;
  color: var(--gs-sub, #6f8275);
  font-weight:1000;
}
.gsInlineCommentLogin a{
  color: var(--gs-green, #1f7a45);
  font-weight:1000;
  text-decoration:none;
}

/* 댓글 카드 */
.gsCmItem{
  position:relative;
  display:flex;
  gap:10px;
  padding:10px 12px;
  padding-right:40px;
  background: var(--gs-panel, #fff);
  border:1px solid var(--gs-line-soft, #ebf1ed);
  border-radius:10px;
}
.gsCmThumb{
  flex:0 0 32px;
  width:32px; height:32px;
}
.gsCmThumb a{ display:block; width:32px; height:32px; }
.gsCmThumb img,
.gsCmThumb .gsCmAvatar{
  width:32px !important; height:32px !important;
  border-radius:999px !important;
  object-fit:cover;
  border:1px solid var(--gs-line, #dfe8e3);
  display:block;
  background: var(--gs-bg-2, #f3f7f4);
}
.gsCmBody{ flex:1; min-width:0; }
.gsCmHead{
  display:flex; align-items:baseline; gap:6px;
  flex-wrap:wrap;
  margin-bottom:3px;
  font-size:11.5px;
  color: var(--gs-sub, #6f8275);
}
.gsCmName{
  color: var(--gs-text-strong, #0a1410);
  font-size:12.5px; font-weight:1000;
}
.gsCmIp,
.gsCmDate{
  color: var(--gs-sub, #6f8275);
  font-size:11.5px; font-weight:900;
}
.gsCmText{
  font-size:13.5px; line-height:1.55;
  color: var(--gs-text, #132017);
  word-break:break-word; overflow-wrap:anywhere;
}
.gsCmText p{ margin:0 0 4px; }
.gsCmText img{ max-width:100% !important; height:auto !important; border-radius:6px; }

.gsCmDel{
  position:absolute;
  top:8px; right:8px;
  width:26px; height:26px;
  border-radius:999px;
  border:1px solid var(--gs-line);
  background: var(--gs-panel);
  color: var(--gs-sub);
  cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:11px;
  opacity:.55;
  transition: all .15s;
  padding:0;
}
.gsCmDel:hover{
  opacity:1;
  color:#dc2626;
  border-color:#fecaca;
  background:#fff1f2;
}
html[data-theme="dark"] .gsCmDel{
  background:#1c2a3b;
  border-color:rgba(122,160,184,.22);
}
html[data-theme="dark"] .gsCmDel:hover{
  color:#f87171;
  border-color:rgba(248,113,113,.4);
  background:rgba(248,113,113,.10);
}

.gsCmSecret{
  display:inline-flex; align-items:center;
  color: var(--gs-orange);
  font-size:11px;
  margin-left:2px;
}
.gsCmLocked{
  display:inline-flex; align-items:center;
  gap:5px;
  color: var(--gs-sub);
  font-style: italic;
  font-size:13px;
}
html[data-theme="dark"] .gsCmLocked{ color:#a8c0d0; }

/* 다크 — 댓글 영역 */
html[data-theme="dark"] .gsInlineComment{
  background: rgba(14,25,36,.5);
  border-top-color: rgba(122,160,184,.16);
}
html[data-theme="dark"] .gsInlineCommentForm{
  background: #0e1924;
  border-color: rgba(122,160,184,.22);
}
html[data-theme="dark"] .gsInlineCommentForm textarea{ color:#fff; }
html[data-theme="dark"] .gsInlineCommentSecret{ color:#a8c0d0; }
html[data-theme="dark"] .gsInlineCommentCancel{
  background:#1a2839;
  color:#e8f1f8;
  border-color:rgba(122,160,184,.22);
}
html[data-theme="dark"] .gsInlineCommentLoading,
html[data-theme="dark"] .gsInlineCommentEmpty,
html[data-theme="dark"] .gsInlineCommentLogin{
  background:#0e1924;
  border-color:rgba(122,160,184,.22);
  color:#a8c0d0;
}
html[data-theme="dark"] .gsInlineCommentLogin a{ color:#34d399; }
html[data-theme="dark"] .gsCmItem{
  background:#162233;
  border-color:rgba(122,160,184,.18);
}
html[data-theme="dark"] .gsCmName{ color:#fff; }
html[data-theme="dark"] .gsCmText,
html[data-theme="dark"] .gsCmText *{ color:#e8f1f8; }
html[data-theme="dark"] .gsCmIp,
html[data-theme="dark"] .gsCmDate,
html[data-theme="dark"] .gsCmHead{ color:#a8c0d0; }
html[data-theme="dark"] .gsCmThumb img,
html[data-theme="dark"] .gsCmThumb .gsCmAvatar{
  border-color: rgba(122,160,184,.22);
  background:#0e1924;
}

/* ============================================================
   토스트
============================================================ */
.gsToast{
  position:fixed; left:50%; bottom:90px;
  transform: translate(-50%, 16px);
  background: var(--gs-text-strong, #0a1410);
  color: #fff;
  padding: 10px 18px;
  border-radius: 999px;
  font-size:13px; font-weight:1000;
  opacity:0;
  pointer-events:none;
  z-index: 99999;
  transition: opacity .22s, transform .22s;
  box-shadow: 0 14px 32px rgba(0,0,0,.22);
}
.gsToast.is-on{ opacity:1; transform: translate(-50%, 0); }
.gsToast.is-err{ background:#dc2626; }
html[data-theme="dark"] .gsToast{ background:#fff; color:#14202c; }
html[data-theme="dark"] .gsToast.is-err{ background:#ef4444; color:#fff; }

/* ============================================================
   쿠폰 모달 (기존 구조 유지)
============================================================ */
.modal{
  display:none;
  position:fixed; inset:0;
  z-index:1000;
  background:rgba(0,0,0,.42);
  align-items:center;
  justify-content:center;
  padding:24px;
  overflow:auto;
}
.modal.show{ display:flex; }
.modal-content{
  background:var(--gs-panel);
  border:1px solid var(--gs-line);
  border-radius:20px;
  width:min(92vw, 620px);
  max-height:90vh;
  overflow:auto;
  position:relative;
  padding:22px;
  box-shadow:0 20px 46px rgba(0,0,0,.18);
}
.modal-header{
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding-bottom:14px;
  border-bottom:1px solid var(--gs-line-soft);
  margin-bottom:14px;
}
.modal-title{ font-size:18px; font-weight:1000; color:var(--gs-text); }
.modal-sub{ font-size:13px; color:var(--gs-sub); margin-top:4px; line-height:1.5; }
.modal-section{ margin-top:14px; }
.modal-section h4{ font-size:14px; color:var(--gs-text); margin:0 0 10px; font-weight:1000; }
.btn{
  border:1px solid var(--gs-line);
  background:var(--gs-panel);
  color:var(--gs-text);
  border-radius:12px;
  cursor:pointer;
  padding:8px 12px;
  font-weight:1000;
}
.btn:hover{ background:var(--gs-bg-2); }
.btn-primary{ background:var(--gs-green); color:#fff; border-color:var(--gs-green); }
.close-btn{
  position:absolute; top:14px; right:14px;
  width:38px; height:38px;
  border-radius:9999px;
  border:1px solid var(--gs-line);
  background:var(--gs-panel);
  color:var(--gs-text);
  cursor:pointer;
}

#stampsContainer{ display:flex; flex-direction:column; gap:10px; }
.row{ text-align:center; padding:2px 0; }
.stamp{
  width:70px; height:70px;
  border-radius:50%;
  display:inline-block;
  background-size:cover;
  background-position:center;
  margin:4px;
  border:1px solid var(--gs-line);
}
.stamp.empty{ background-color: var(--gs-bg-2); }
#settingsContainer{
  display:none;
  margin-top:0;
  padding-top:14px;
  border-top:1px solid var(--gs-line-soft);
}
.form-grid{
  display:grid;
  grid-template-columns:110px 1fr;
  gap:10px;
  align-items:center;
}
.form-grid input,.form-grid select{
  border:1px solid var(--gs-line);
  border-radius:10px;
  padding:10px 12px;
  min-height:42px;
  background:var(--gs-panel);
  color:var(--gs-text);
}

/* ============================================================
   QR 오버레이
============================================================ */
.gsQrOverlay{
  display:none;
  position:fixed; inset:0;
  z-index:3500;
  background:rgba(0,0,0,.88);
  align-items:center;
  justify-content:center;
  padding:18px;
}
.gsQrOverlay.is-open{ display:flex; }
.gsQrOverlay #gsQrBig{
  width:min(92vw, 560px);
  max-height:92vh;
  object-fit:contain;
  background:#fff;
  border-radius:18px;
  padding:14px;
}
.gsQrClose{
  position:fixed; top:16px; right:16px;
  width:44px; height:44px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.22);
  background:rgba(0,0,0,.4);
  color:#fff;
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  z-index:3501;
}
.gsQrThumb{ cursor:zoom-in; }

/* ============================================================
   매장정보 수정 버튼 / 매력도 레이어
============================================================ */
.gsStoreManageFoot{
  margin-top:14px;
  padding-top:12px;
  border-top:1px solid var(--gs-line);
  display:flex;
  justify-content:flex-end;
}
.gsStoreManageBtn{
  display:inline-flex; align-items:center; gap:6px;
  height:38px;
  padding:0 14px;
  border-radius:999px;
  background:#111827;
  color:#fff;
  border:1px solid #111827;
  font-size:12px; font-weight:1000;
  text-decoration:none!important;
}
html[data-theme="dark"] .gsStoreManageBtn{
  background:var(--gs-green);
  border-color:var(--gs-green);
  color:#0a1218;
}

.gsLayer{
  display:none;
  position:fixed; inset:0;
  z-index:4200;
  background:rgba(2,6,23,.55);
  align-items:center;
  justify-content:center;
  padding:18px;
}
.gsLayer.show{ display:flex; }
.gsLayerPanel{
  width:min(92vw, 620px);
  max-height:88vh;
  overflow:auto;
  background:var(--gs-panel);
  border:1px solid var(--gs-line);
  border-radius:22px;
  padding:20px;
  position:relative;
}
.gsLayerClose{
  position:absolute; top:12px; right:12px;
  width:40px; height:40px;
  border-radius:999px;
  border:1px solid var(--gs-line);
  background:var(--gs-panel);
  color:var(--gs-text);
  cursor:pointer;
}
.gsLayerTitle{ font-size:18px; font-weight:1000; color:var(--gs-text); margin-bottom:6px; }
.gsLayerSub{ font-size:12px; color:var(--gs-sub); margin-bottom:12px; line-height:1.6; }
.gsLayerBody{ font-size:13px; color:var(--gs-text); line-height:1.7; }
.gsKpi{ display:grid; grid-template-columns:1fr; gap:10px; margin:10px 0; }
.gsKpiItem{
  border:1px solid var(--gs-line);
  border-radius:16px;
  padding:12px 13px;
  background:var(--gs-bg-2);
}
.gsKpiItem b{ display:block; margin-bottom:4px; font-weight:1000; }
.gsLayerHint{ margin-top:10px; font-size:12px; color:var(--gs-sub); }

/* ============================================================
   반응형
============================================================ */
@media (max-width:980px){
  .gsClubShell{ padding:0 10px; max-width:100%; }
  .gsHamburger{ display:flex; }
  .gsTopbarClub span{ display:none; }
}
@media (max-width:680px){
  .gsClubShell{ margin:8px auto 22px; padding:0 8px; }
  .gsTopbar{ padding:0 10px; gap:8px; height:50px; }
  :root{ --gs-topbar-h:50px; }
  .gsTab{ padding:0 10px; height:34px; font-size:12px; }
  .gsTab span{ display:none; }
  .gsClubCompact{ padding:10px 12px; gap:8px; }
  .gsCCAvatar{ width:36px; height:36px; flex-basis:36px; }
  .gsCCActions{ width:100%; }
  .gsCCBtn span{ display:none; }
  .gsCCBtn{ padding:0 10px; }
  .gsFeedTools{ padding:8px 10px; gap:6px; }
  .gsFeedWriteBtn span{ display:none; }
  .gsFeedItem{ padding:12px 14px; }
  .gsFeedTitle{ font-size:16px; }
}
@media (max-width:520px){
  .gsFeedThumb{
    flex-basis: 76px;
    width: 76px;
    height: 76px;
    border-radius: 10px;
  }
  .gsFeedMain.has-thumb{ gap: 10px; }
}
@media (max-width:480px){
  .gsFeedNav{ width:32px; height:32px; }
  .gsLightboxNav{ width:40px; height:40px; }
  .gsLightboxClose{ top:16px; right:16px; width:40px; height:40px; }
}


/* ============================================================
   글 보기 모달 (제목 클릭) + 이미지 슬라이더
============================================================ */
.gsArticleModal{
  display:none;
  position:fixed; inset:0;
  z-index:5800;
  align-items:center;
  justify-content:center;
  padding:20px;
}
.gsArticleModal.is-open{ display:flex; }

.gsArticleModalBackdrop{
  position:absolute; inset:0;
  background:rgba(2,6,23,.66);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}

.gsArticleModalPanel{
  position:relative;
  width:min(96vw, 760px);
  max-height:92vh;
  overflow:auto;
  background:var(--gs-panel);
  border:1px solid var(--gs-line);
  border-radius:18px;
  box-shadow:0 30px 70px rgba(0,0,0,.45);
  padding:24px 26px 18px;
  -webkit-overflow-scrolling:touch;
}

.gsArticleModalClose{
  position:absolute;
  top:14px; right:14px;
  width:36px; height:36px;
  border-radius:999px;
  border:1px solid var(--gs-line);
  background:var(--gs-panel);
  color:var(--gs-text);
  cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:13px;
  z-index:2;
}
.gsArticleModalClose:hover{ background:var(--gs-bg-2); }

.gsArticleModalHead{
  margin-bottom:14px;
  padding-right:50px;
}
.gsArticleModalAuthor{
  display:flex; align-items:center; gap:10px;
  margin-bottom:10px;
}
.gsAmAvatar{
  width:38px; height:38px;
  border-radius:999px;
  object-fit:cover;
  border:1px solid var(--gs-line);
  flex:0 0 38px;
}
.gsAmMeta{ min-width:0; flex:1; }
.gsAmAuthorName{
  font-size:13px; font-weight:1000;
  color:var(--gs-text);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.gsAmAuthorSub{
  display:flex; align-items:center; gap:6px;
  margin-top:2px;
  font-size:11.5px;
  color:var(--gs-sub);
  font-weight:900;
  flex-wrap:wrap;
}
.gsAmCat{
  display:inline-flex; align-items:center;
  padding:1px 8px;
  border-radius:999px;
  background:var(--gs-bg-2);
  color:var(--gs-sub);
  font-size:11px;
  border:1px solid var(--gs-line-soft);
}
.gsArticleModalTitle{
  font-size:22px;
  line-height:1.35;
  font-weight:1000;
  letter-spacing:-.03em;
  color:var(--gs-text);
  word-break:break-word; overflow-wrap:anywhere;
  margin:0;
}

/* 슬라이더 */
.gsArticleModalSlider{
  position:relative;
  margin:0 0 16px;
  border-radius:12px;
  overflow:hidden;
  background:#000;
  border:1px solid var(--gs-line-soft);
  aspect-ratio:16/10;
}
.gsArticleModalSlider[hidden]{ display:none; }
.gsAmTrack{
  display:flex;
  width:100%;
  height:100%;
  transition: transform .35s cubic-bezier(.4,.0,.2,1);
}
.gsAmSlide{
  flex:0 0 100%;
  width:100%;
  height:100%;
  display:grid;
  place-items:center;
  background:#000;
}
.gsAmSlide img{
  width:100%;
  height:100%;
  object-fit:contain;
  cursor:zoom-in;
  display:block;
}

.gsAmNav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:38px; height:38px;
  border-radius:50%;
  background:rgba(0,0,0,.55);
  color:#fff;
  border:none;
  display:none;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  z-index:2;
  transition:background .15s, opacity .15s;
}
.gsAmNav:hover{ background:rgba(0,0,0,.85); }
.gsAmNav.prev{ left:10px; }
.gsAmNav.next{ right:10px; }
.gsArticleModalSlider.has-multi .gsAmNav{ display:inline-flex; }

.gsAmDots{
  position:absolute;
  bottom:12px;
  left:50%;
  transform:translateX(-50%);
  display:none;
  gap:6px;
  z-index:2;
  background:rgba(0,0,0,.45);
  padding:6px 10px;
  border-radius:999px;
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
}
.gsAmDots span{
  width:7px; height:7px;
  border-radius:50%;
  background:rgba(255,255,255,.5);
  cursor:pointer;
  transition:background .15s, transform .15s;
}
.gsAmDots span.is-active{ background:#fff; transform:scale(1.2); }
.gsArticleModalSlider.has-multi .gsAmDots{ display:flex; }

.gsAmCounter{
  position:absolute;
  top:12px; right:12px;
  background:rgba(0,0,0,.6);
  color:#fff;
  font-size:11.5px;
  font-weight:1000;
  padding:5px 12px;
  border-radius:999px;
  z-index:2;
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
  display:none;
}
.gsArticleModalSlider.has-multi .gsAmCounter{ display:inline-flex; }

/* 본문 */
.gsArticleModalBody{
  font-size:14.5px;
  line-height:1.8;
  color:var(--gs-text);
  word-break:break-word;
  overflow-wrap:anywhere;
  margin-bottom:16px;
}
.gsArticleModalBody p{ margin:0 0 10px; }
.gsArticleModalBody p:last-child{ margin-bottom:0; }
.gsArticleModalBody img{
  max-width:100% !important;
  height:auto !important;
  border-radius:8px;
  margin:8px 0;
}
.gsArticleModalBody a{ color:var(--gs-green); }
html[data-theme="dark"] .gsArticleModalBody{ color:#d4e8f4; }

/* 푸터 통계 */
.gsArticleModalFoot{
  display:flex;
  align-items:center;
  gap:14px;
  padding-top:14px;
  border-top:1px solid var(--gs-line-soft);
  flex-wrap:wrap;
}
.gsAmStat{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:12.5px;
  font-weight:1000;
  color:var(--gs-sub);
}
.gsAmStat i{ color:var(--gs-sub-2); font-size:13px; }

/* 모바일 */
@media (max-width:680px){
  .gsArticleModal{ padding:0; align-items:stretch; }
  .gsArticleModalPanel{
    width:100%;
    max-height:100vh;
    height:100vh;
    border-radius:0;
    border:0;
    padding:18px 18px 14px;
  }
  .gsArticleModalTitle{ font-size:18px; }
  .gsArticleModalBody{ font-size:14px; }
  .gsAmNav{ width:32px; height:32px; }
}

/* ============================================================
   글 보기 모달 안의 댓글 영역
   카드의 .gsInlineComment 노드를 빌려와서 모달에 끼워넣음
============================================================ */
.gsArticleModalComment{
  margin-top:14px;
  padding-top:14px;
  border-top:1px solid var(--gs-line-soft);
}
/* 모달 안에 있을 때는 카드용 음수 마진/배경 다 풀어줌 */
.gsArticleModalComment .gsInlineComment{
  display:block;
  margin:0;
  padding:0;
  background:transparent;
  border:none;
  border-radius:0;
  animation:none;
}
.gsArticleModalComment .gsInlineCommentList{ margin-bottom:12px; }

/* 추천 버튼 비활성 시 */
.gsFeedVote:disabled{ opacity:.5; cursor:wait; }