/* ============================================================
   ENDOLPHIN — 공통 UI (hub-ui.css)
   ------------------------------------------------------------
   HOME 과 SOOP 등 여러 페이지가 같이 씁니다.
   바탕은 화이트·아이보리, 핑크는 브랜드 포인트로만.
   ============================================================ */
:root{
  --w-bg:#fffdfa; --w-bg2:#fbf7f4; --w-card:#ffffff;
  --w-line:#f0e9e4; --w-line2:#e4dbd5;
  --w-ink:#2c2724; --w-ink2:#6b625c; --w-ink3:#a79d97;
  --w-pink:#ff5f9e; --w-pink-d:#d63c78; --w-pink-s:#fff0f5;
  --w-lav:#8b7bd8; --w-lav-s:#f3f0ff;
  --w-blue:#5b8fd6; --w-blue-s:#eef4fc;
  --w-shadow:0 2px 10px rgba(66,50,58,.05);
  --w-shadow2:0 14px 40px rgba(66,50,58,.10);
  --w-r:18px; --w-r-lg:24px;
}
html[data-theme="dark"]{
  --w-bg:#12141f; --w-bg2:#171a28; --w-card:#1b1e2e;
  --w-line:#2a2e44; --w-line2:#3a3f5c;
  --w-ink:#eceaf5; --w-ink2:#a9a3bd; --w-ink3:#797390;
  --w-pink:#ff7fb0; --w-pink-d:#ffa8c9; --w-pink-s:#2c2036;
  --w-lav:#a68cf0; --w-lav-s:#241f3d; --w-blue:#7fb0f0; --w-blue-s:#1b2436;
  --w-shadow:0 2px 10px rgba(0,0,0,.3); --w-shadow2:0 14px 40px rgba(0,0,0,.45);
}

/* ══ 상단 헤더 ════════════════════════════════════════
   헤더 CSS 는 shared/site-header.css 로 옮겼습니다.
   전 페이지가 그 파일 하나만 씁니다. 여기서 다시 정의하지 마세요.
   (예전 'Endorphin / WORLD' 로고 규칙은 삭제 — 2026-08-27)   */

/* ══ 구역 제목 ═════════════════════════════════════════ */
.sec{ padding:44px 0; }
.sec-h{ display:flex; align-items:flex-end; gap:14px; margin-bottom:22px; }
.sec-h h2{ font-family:'Jua',sans-serif; font-weight:400; font-size:27px; letter-spacing:-.4px; }
.sec-h p{ font-size:14.5px; color:var(--w-ink3); padding-bottom:4px; }
.sec-h .more{ margin-left:auto; font-size:14px; font-weight:800; color:var(--w-ink2);
  padding:8px 16px; border-radius:999px; border:1.5px solid var(--w-line);
  background:var(--w-card); transition:.16s; white-space:nowrap; }
.sec-h .more:hover{ border-color:var(--w-pink); color:var(--w-pink-d); transform:translateY(-1px); }

.panel{ align-self:start; padding:24px 24px 22px; border-radius:var(--w-r-lg);
  background:var(--w-card); border:1.5px solid var(--w-line); box-shadow:var(--w-shadow); }
.two{ display:grid; grid-template-columns:1fr 1fr; gap:20px; align-items:start; }

/* ══ 탭 ════════════════════════════════════════════════ */
.hw-tabs{ display:flex; gap:6px; margin:14px 0 12px; flex-wrap:wrap; }
.hw-tab{ cursor:pointer; font-family:inherit; font-size:13.5px; font-weight:800;
  color:var(--w-ink2); padding:8px 14px; border-radius:999px;
  background:var(--w-bg2); border:1.5px solid var(--w-line); transition:.16s; }
.hw-tab span{ margin-left:5px; font-size:11.5px; color:var(--w-ink3); }
.hw-tab:hover{ border-color:var(--w-line2); }
.hw-tab[aria-pressed="true"]{ color:#fff; border-color:transparent;
  background:linear-gradient(135deg,#ff5f9e,#ff8ab8); }
.hw-tab[aria-pressed="true"] span{ color:rgba(255,255,255,.8); }

/* ══ FAN TALK ══════════════════════════════════════════ */
.ft-row{ display:flex; align-items:center; gap:10px; padding:13px 2px;
  border-bottom:1px solid var(--w-line); }
.ft-row:last-child{ border-bottom:none; }
.ft-tag{ flex:0 0 auto; font-size:11px; font-weight:900; color:var(--w-pink-d);
  background:var(--w-pink-s); padding:3px 9px; border-radius:999px; }
.ft-t{ flex:1; min-width:0; font-size:15px; font-weight:600;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ft-m{ flex:0 0 auto; display:flex; align-items:center; gap:9px;
  font-size:12.5px; color:var(--w-ink3); }
.ft-m i, .ft-m em{ font-style:normal; }

/* ══ MOMENTS ═══════════════════════════════════════════ */
.mo-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:9px; }
.mo-card{ display:block; aspect-ratio:1/1; border-radius:14px; overflow:hidden;
  background:var(--w-bg2); border:1.5px solid var(--w-line); transition:.18s; }
.mo-card:hover{ transform:translateY(-3px); border-color:var(--w-pink); }
.mo-card img{ width:100%; height:100%; object-fit:cover; }

/* ── 인스타 게시물 카드 ──
   인스타가 주는 창(embed)은 폭이 326px 로 고정이라, 네모 칸에 맞춰
   비율만 줄입니다. 위쪽 프로필줄(54px)은 잘라내고 사진만 보여줘요.
   줄이는 비율(--igs)은 community-preview.js 가 칸 폭을 재서 넣습니다. */
.mo-card.ig{ position:relative; display:block; aspect-ratio:1/1;
  border-radius:14px; overflow:hidden;
  background:var(--w-bg2); border:1.5px solid var(--w-line); transition:.18s; }
.mo-card.ig:hover{ transform:translateY(-3px); border-color:var(--w-pink); }
.mo-card.ig iframe{ position:absolute; left:0; top:0;
  width:326px; height:760px; border:0; pointer-events:none;
  transform-origin:top left;
  transform:scale(var(--igs,1)) translateY(-54px); }
.mo-card.ig .mo-open{ position:absolute; inset:0; display:flex;
  align-items:flex-start; justify-content:flex-end; padding:8px;
  font-size:0; color:transparent; }
.mo-card.ig .mo-open::after{ content:"↗"; display:flex;
  align-items:center; justify-content:center; width:30px; height:30px;
  border-radius:10px; font-size:15px; font-weight:800; color:var(--w-ink2);
  background:rgba(255,255,255,.9); border:1.5px solid var(--w-line);
  backdrop-filter:blur(6px); transition:.16s; }
.mo-card.ig:hover .mo-open::after{ color:#fff; border-color:transparent;
  background:linear-gradient(135deg,#ff5f9e,#ff8ab8); }

.mo-more{ grid-column:1 / -1; display:block; margin-top:4px; padding:12px;
  text-align:center; font-size:13.5px; font-weight:800; color:var(--w-ink2);
  background:var(--w-bg2); border:1.5px solid var(--w-line);
  border-radius:var(--w-r); transition:.16s; }
.mo-more:hover{ border-color:var(--w-pink); color:var(--w-pink-d); }

/* ══ 비어 있을 때 (작게) ═══════════════════════════════ */
.hw-empty{ padding:15px 16px; text-align:center; border-radius:var(--w-r);
  background:var(--w-bg2); }
.hw-empty.wide{ grid-column:1 / -1; }
.hw-empty b{ display:block; font-family:'Jua',sans-serif; font-weight:400;
  font-size:14.5px; color:var(--w-ink2); }
.hw-empty span{ display:block; margin-top:5px; font-size:12.5px; line-height:1.6;
  color:var(--w-ink3); }

/* ══ FOOTER ════════════════════════════════════════════ */
.foot{ margin:30px -20px 0; padding:52px 20px 34px;
  background:var(--w-bg2); border-top:1.5px solid var(--w-line); }
.foot-in{ max-width:1200px; margin:0 auto;
  display:grid; grid-template-columns:1.4fr .7fr 1.2fr; gap:40px; }
.foot-brand b{ font-family:'Parisienne',cursive; font-weight:400;
  font-size:28px; color:var(--w-pink); }
.foot-brand p{ margin-top:10px; font-size:14px; line-height:1.8;
  color:var(--w-ink2); max-width:30ch; }
.foot-col h4{ font-size:11.5px; font-weight:900; letter-spacing:1.6px;
  color:var(--w-ink3); margin-bottom:14px; }
.foot-col ul{ list-style:none; display:flex; flex-direction:column; gap:9px; }
.foot-col a{ font-size:14.5px; font-weight:600; color:var(--w-ink2); transition:.14s; }
.foot-col a:hover{ color:var(--w-pink-d); }
.foot-ct .ct-t{ font-size:15px; font-weight:800; }
.foot-ct .ct-d{ margin-top:6px; font-size:13.5px; line-height:1.7; color:var(--w-ink2); }
.foot-mail{ display:flex; align-items:center; gap:9px; margin-top:13px;
  padding:12px 14px; border-radius:14px;
  background:var(--w-card); border:1.5px solid var(--w-line); }
.foot-mail .mm{ flex:1; min-width:0; font-size:14.5px; font-weight:700;
  overflow:hidden; text-overflow:ellipsis; }
.foot-mail button{ flex:0 0 auto; cursor:pointer; font-family:inherit;
  font-size:12.5px; font-weight:800; color:#fff; border:none;
  padding:8px 14px; border-radius:999px;
  background:linear-gradient(135deg,#ff5f9e,#ff8ab8); transition:.16s; }
.foot-mail button:hover{ transform:translateY(-1px); }
.foot-mail button.ok{ background:linear-gradient(135deg,#3fb98a,#5fcfa0); }
.foot-sns{ display:flex; flex-wrap:wrap; gap:7px; margin-top:15px; }
.foot-sns a{ font-size:13px; font-weight:700; color:var(--w-ink2);
  padding:8px 13px; border-radius:999px;
  background:var(--w-card); border:1.5px solid var(--w-line); transition:.14s; }
.foot-sns a:hover{ border-color:var(--w-pink); color:var(--w-pink-d); }
.foot-sns a.soon{ opacity:.5; }
.foot-bot{ max-width:1200px; margin:34px auto 0; padding-top:22px;
  border-top:1.5px solid var(--w-line);
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  font-size:13px; color:var(--w-ink3); }
.foot-bot a{ font-weight:700; color:var(--w-ink2); }
.foot-bot a:hover{ color:var(--w-pink-d); }
.foot-bot .cp{ margin-left:auto; font-family:'Gaegu',cursive; font-size:15px; }

@media (max-width:900px){
  /* 헤더 태블릿 규칙 → shared/site-header.css */
  .two{ grid-template-columns:1fr; }
  .foot-in{ grid-template-columns:1fr; gap:28px; }
}
@media (max-width:640px){
  /* 헤더 모바일 규칙 → shared/site-header.css */
  .sec{ padding:32px 0; }
  .sec-h h2{ font-size:23px; }
  .sec-h p{ display:none; }
  .mo-grid{ grid-template-columns:repeat(2,1fr); }
  .foot{ margin:24px -14px 0; padding:38px 14px 26px; }
  .foot-bot .cp{ margin-left:0; width:100%; }
}
@media (prefers-reduced-motion:reduce){ *{ animation:none !important; } }

/* ── 아직 주소가 없는 SNS — 글자로도 '준비 중' 이라고 알려줍니다 ── */
.foot-sns a[data-soon]::after{ content:" · 준비 중"; font-weight:600; opacity:.8; }
.foot-sns a[data-soon]{ cursor:default; }
.foot-sns a[data-soon]:hover{ border-color:var(--w-line); color:var(--w-ink2); }