/* TRACE ARKA — Layout (GNB, shell, rails, drawer, bottom tab, responsive grid)
 * Three genuine tiers:
 *   PC  (>=1024): GNB + full-label rail + content + right rail
 *   Tab (768–1023): GNB + icon-only rail, right rail hidden, drawer available
 *   Phone (<=767): compact GNB w/ hamburger → slide-in drawer, fixed bottom tab
 */

/* ===================== GNB ===================== */
.arka-gnb {
  position: sticky; top: 0; z-index: 500;
  height: var(--gnb-h);
  background: #fff; border-bottom: 1px solid #CBD0DD;  /* 배경/보더는 전폭 유지 · 관리자(Phoenix) 상단바 구분선(#CBD0DD)과 정합 (그림자 없음) */
  /* display/gap/padding 은 .arka-gnb__inner 로 이관 (B1: 헤더 내용물을 3단 셸과 동일 1520 cap 에 정렬) */
}
.arka-gnb__inner {
  position: relative;                 /* 검색 절대중앙 정렬 기준 */
  max-width: var(--content-max);      /* 3단 셸과 동일 1520 cap → 헤더 열·본문 열 세로선 일치 */
  margin: 0 auto; width: 100%; height: 100%;
  display: flex; align-items: center; gap: 16px;
  padding: 0 20px;
}
.arka-gnb__hamburger {
  display: none;              /* phone only */
  width: 38px; height: 38px; margin-left: -6px;
  align-items: center; justify-content: center; border-radius: var(--radius-md);
  flex: 0 0 auto; color: var(--ink);
}
.arka-gnb__hamburger:hover { background: var(--bg-soft); }
.arka-gnb__hamburger-bars { display: block; width: 20px; }
.arka-gnb__hamburger-bars i {
  display: block; height: 2px; border-radius: 2px; background: currentColor;
  margin: 4px 0;
}
.arka-gnb__brand { display: flex; align-items: center; gap: 8px; text-decoration: none; flex: 0 0 auto; }
.arka-gnb__brand:hover { text-decoration: none; }
.arka-gnb__logo { height: 26px; width: auto; }
.arka-gnb__wordmark { font-family: var(--font-display); font-size: 19px; color: var(--ink); line-height: 1; }
.arka-gnb__search {
  /* PC: 뷰포트 절대중앙 정렬 — flex 흐름에서 빠지므로 로고(좌)·우측클러스터(우)는 양끝 유지.
     좌우 클러스터 폭 차이와 무관하게 검색이 정확히 화면 중앙(cx≈뷰포트폭/2)에 온다. */
  position: absolute; left: 50%; transform: translateX(-50%); z-index: 1;
  width: 100%; max-width: 480px; margin: 0;
  display: flex; align-items: center; gap: 8px;
  height: 30px; padding: 0 14px;
  background: var(--bg-soft); border: 1px solid var(--line-2);
  border-radius: 16px;
}
.arka-gnb__search input { flex: 1 1 auto; border: none; background: transparent; font-size: 12.5px; min-width: 0; }
.arka-gnb__search input:focus { outline: none; }
.arka-gnb__search .ic { color: var(--text-5); font-size: 15px; display: inline-flex; }
.arka-gnb__searchicon {
  display: none;              /* PC: 검색 입력창이 보이므로 숨김. 모바일에서도 숨김(입력창 사용) */
  width: 38px; height: 38px; border-radius: 50%;
  align-items: center; justify-content: center; color: var(--text-3); font-size: 17px;
}
.arka-gnb__searchicon:hover { background: var(--bg-soft); text-decoration: none; }
.arka-gnb__right { flex: 0 0 auto; margin-left: auto; display: flex; align-items: center; gap: 8px; }   /* 우측 고정 (+작성·알림·메시지·프로필) */
.arka-gnb__iconbtn {
  width: 34px; height: 34px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--text-3); font-size: 17px; position: relative; transition: background .14s;
}
.arka-gnb__iconbtn:hover { background: var(--bg-soft); color: var(--ink); }
.arka-gnb__iconbtn .dot {
  position: absolute; top: 6px; right: 6px; width: 7px; height: 7px;
  background: var(--arka-accent); border-radius: 50%; border: 1.5px solid #fff;
}
/* 아바타 드롭다운 (로그인 후) */
.arka-gnb__menu { position: relative; flex: 0 0 auto; }
.arka-gnb__avatarbtn { cursor: pointer; border: 0; padding: 0; }
.arka-gnb__dropdown {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 600;
  min-width: 172px; background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius-md); box-shadow: var(--shadow-card);
  padding: var(--space-1); display: none;
}
.arka-gnb__menu.is-open .arka-gnb__dropdown { display: block; }
.arka-gnb__menuitem {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm);
  font-size: 13px; font-weight: 600; color: var(--text-2);
  text-decoration: none; background: none; border: 0; cursor: pointer; text-align: left;
}
.arka-gnb__menuitem:hover { background: var(--bg-soft); text-decoration: none; }
.arka-gnb__menuitem .ic { font-size: 15px; width: 18px; text-align: center; flex: 0 0 auto; }
.arka-gnb__menuitem--danger { color: var(--danger); }

/* ===================== Shell grid ===================== */
.arka-shell {
  display: grid;
  grid-template-columns: var(--rail-w) minmax(0, 1fr) var(--rightrail-w);
  max-width: var(--content-max);   /* 1520 — 3단을 반드시 이 폭 안에 결속 (B4) */
  margin: 0 auto;                  /* 가운데 정렬 (양끝 벌어짐 방지) */
  width: 100%;
  align-items: start;
}

/* ===================== Left rail ===================== */
.arka-rail {
  width: var(--rail-w);            /* 방어적 고정폭 — grid 미적용 폴백에서도 폭 유지 (B3) */
  flex: 0 0 var(--rail-w);         /* 광폭에서 찌그러짐/흰기둥 방지 */
  position: sticky; top: var(--gnb-h);
  height: calc(100vh - var(--gnb-h));
  overflow-y: auto;
  background: #fff; border-right: 1px solid var(--line);
  padding: var(--space-4) var(--space-3) var(--space-7);   /* 16 12 40 */
  display: flex; flex-direction: column; gap: 4px;
}
/* PC(≥1024)에서 좌레일 우측 구분선을 관리자(Phoenix) 사이드바 우측 보더(#CBD0DD)와 정합 */
@media (min-width: 1024px) { .arka-rail { border-right-color: #CBD0DD; } }
.arka-rail__nav { display: flex; flex-direction: column; gap: var(--space-1); }   /* 4 (was 2) */
.arka-rail__item {
  display: flex; align-items: center; gap: 10px;
  padding: var(--space-2) var(--space-3); border-radius: var(--radius-md);   /* 8 12 (was 9 12) */
  font-size: 13px; font-weight: 600; color: var(--text-2);
  transition: background .14s, color .14s; text-decoration: none;
}
.arka-rail__item:hover { background: var(--bg-soft); text-decoration: none; }
.arka-rail__item.is-active { background: var(--arka-accent-bg); color: var(--arka-accent); }
.arka-rail__item .ic { font-size: 16px; width: 18px; text-align: center; flex: 0 0 auto; }
/* 게시판 하위 링크(전체/사진형/일반형) — 살짝 작고 톤 낮춰 주 내비와 구분 */
.arka-rail__boardnav { display: flex; flex-direction: column; gap: 2px; }
.arka-rail__item--sub { font-size: 12.5px; font-weight: 500; color: var(--text-3); }
.arka-rail__item--sub .ic { font-size: 15px; }
.arka-rail__label { font-size: 9px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--sidebar-label); padding: var(--space-4) var(--space-3) var(--space-2); }   /* 16 12 8 */
.arka-rail__chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 2px 8px; }
.arka-rail__chip {
  font-size: 11.5px; font-weight: 600; color: var(--text-3);
  padding: 4px 10px; border-radius: var(--radius-pill);
  background: var(--bg-soft); border: 1px solid var(--line-2);
  transition: all .14s; text-decoration: none;
}
.arka-rail__chip:hover { color: var(--arka-accent); border-color: var(--arka-accent-soft); text-decoration: none; }
.arka-rail__label-icon { display: none; }
.arka-rail__sec { display: flex; flex-direction: column; gap: 2px; margin-top: 8px; border-top: 1px solid var(--line); padding-top: 4px; }
.arka-rail__dot { width: 10px; height: 10px; border-radius: 50%; flex: none; display: inline-block; }
/* '내 소모임' 헤더 행 — 라벨(좌) + '전체소모임' 바로가기(우) */
.arka-rail__sechead { display: flex; align-items: baseline; justify-content: space-between; }
.arka-rail__seclink { font-size: 10px; font-weight: 600; color: var(--arka-accent); text-decoration: none; white-space: nowrap; padding: var(--space-4) var(--space-3) var(--space-2); }
.arka-rail__seclink:hover { text-decoration: underline; }
@media (max-width: 1023px) { .arka-rail__seclink { display: none; } }   /* 태블릿 아이콘레일에선 숨김 */
/* 로그인전 '내 소모임' CTA 박스 (page-main 주입) */
.arka-rail__cta {
  display: block; margin: 6px 8px; padding: 12px;
  border-radius: var(--radius-md);
  background: var(--arka-accent-bg); color: var(--arka-accent);
  font-size: 12px; font-weight: 600; line-height: 1.45; text-decoration: none;
}
.arka-rail__cta:hover { text-decoration: none; opacity: .9; }
@media (max-width: 1023px) { .arka-rail__cta { display: none; } }   /* 태블릿 아이콘레일에선 숨김 */

/* ===================== Main ===================== */
.arka-main {
  min-width: 0;
  background: var(--bg-page);
  padding: var(--space-5) 20px 96px;   /* 24 20 96 — 좌우패딩 32→20 축소(가운데 860 도달·여백↓). 세로/하단 유지 */
}
.arka-main__inner { max-width: 1000px; margin: 0 auto; }   /* 가독 컬럼 확대(940→1000): 화면 확대 피드백 · 모바일 100% 유지 */
.arka-main--wide .arka-main__inner { max-width: 100%; }

/* ===================== Right rail ===================== */
.arka-rightrail {
  width: var(--rightrail-w);       /* 방어적 고정폭 (B2) */
  flex: 0 0 var(--rightrail-w);    /* 폭 붕괴 방지 */
  min-width: var(--rightrail-w);   /* 글자 세로 쪼개짐 원천 차단 */
  position: sticky; top: var(--gnb-h);
  height: calc(100vh - var(--gnb-h));
  overflow-y: auto;
  border-left: 1px solid var(--line);
  padding: var(--space-5) var(--space-3);   /* 24 12 (was 24 14) */
  background: var(--bg-page);
}
.arka-rightrail__ph {
  border: 1px dashed var(--line-2); border-radius: var(--radius-md);
  padding: 16px 8px; text-align: center; font-size: 9px; font-weight: 600;
  letter-spacing: .07em; text-transform: uppercase; color: var(--text-5);
  overflow-wrap: anywhere;         /* placeholder 텍스트 안전 줄바꿈 */
}
/* 우레일 위젯이 없는 화면(알림·설정 등)은 빈 우레일 숨김 */
.arka-rightrail:empty { display: none; }

/* 우레일 미사용 화면 — 셸을 rail+main 만으로 (discover·tag·noti·settings 공용).
 * specificity 0,2,0 로 ≥1520 :has 규칙까지 override. */
.arka-shell.arka-shell--full { grid-template-columns: var(--rail-w) minmax(0, 1fr); }
@media (min-width: 1520px) { .arka-shell.arka-shell--full { grid-template-columns: var(--rail-w) 1fr minmax(0, 1200px) 1fr; } }
@media (max-width: 1023px) { .arka-shell.arka-shell--full { grid-template-columns: 60px minmax(0, 1fr); } }
@media (max-width: 767px)  { .arka-shell.arka-shell--full { grid-template-columns: minmax(0, 1fr); } }

/* ===================== Drawer (phone slide-in) ===================== */
.arka-drawer-overlay {
  position: fixed; inset: 0; z-index: 900;
  background: rgba(34,40,52,.35);
  opacity: 0; visibility: hidden;
  transition: opacity .22s ease, visibility .22s ease;
}
.arka-drawer-overlay.is-open { opacity: 1; visibility: visible; }
.arka-drawer {
  position: fixed; top: 0; bottom: 0; left: 0; z-index: 950;
  width: 82%; max-width: 320px;
  background: #fff; box-shadow: 2px 0 30px rgba(13,27,72,.18);
  transform: translateX(-100%);
  transition: transform .24s cubic-bezier(.4,0,.2,1);
  display: flex; flex-direction: column;
  overflow-y: auto; overscroll-behavior: contain;
}
.arka-drawer.is-open { transform: translateX(0); }
.arka-drawer__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; border-bottom: 1px solid var(--line);
  position: sticky; top: 0; background: #fff; z-index: 1;
}
.arka-drawer__brand { display: flex; align-items: center; gap: 8px; text-decoration: none; }
.arka-drawer__logo { height: 28px; width: auto; }
.arka-drawer__wordmark { font-family: var(--font-display); font-size: 20px; color: var(--ink); line-height: 1; }
.arka-drawer__close { width: 34px; height: 34px; border-radius: 50%; font-size: 22px; line-height: 1; color: var(--text-4); display: inline-flex; align-items: center; justify-content: center; }
.arka-drawer__close:hover { background: var(--bg-soft); color: var(--ink); }
.arka-drawer__body { padding: 12px 12px 32px; display: flex; flex-direction: column; gap: 2px; }
.arka-drawer__item {
  display: flex; align-items: center; gap: 12px;
  min-height: 46px; padding: 10px 12px; border-radius: var(--radius-md);
  font-size: 14px; font-weight: 600; color: var(--text-2); text-decoration: none;
  width: 100%; text-align: left;
}
.arka-drawer__item:hover { background: var(--bg-soft); text-decoration: none; }
.arka-drawer__item.is-active { background: var(--arka-accent-bg); color: var(--arka-accent); }
.arka-drawer__item .ic { font-size: 17px; width: 22px; text-align: center; flex: 0 0 auto; }
.arka-drawer__item--btn { color: var(--danger); }
.arka-drawer__label { font-size: 9px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--sidebar-label); padding: 16px 12px 6px; }
.arka-drawer__chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 2px 12px 4px; }
.arka-drawer__chip {
  font-size: 12.5px; font-weight: 600; color: var(--text-3);
  padding: 6px 12px; border-radius: var(--radius-pill);
  background: var(--bg-soft); border: 1px solid var(--line-2); text-decoration: none;
  min-height: 32px; display: inline-flex; align-items: center;
}
.arka-drawer__chip:hover { color: var(--arka-accent); border-color: var(--arka-accent-soft); text-decoration: none; }
.arka-drawer__foot { padding: 16px 12px 4px; }

/* body scroll lock while drawer open */
body.arka-scroll-lock { overflow: hidden; }

/* ===================== Bottom tab (phone) ===================== */
.arka-bottomtab {
  display: none;
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 600;
  background: #fff; border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.arka-bottomtab__row { display: flex; height: var(--bottomtab-h); }
.arka-bottomtab__item {
  flex: 1; min-height: 44px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  color: var(--text-4); font-size: 10px; font-weight: 600; text-decoration: none;
}
.arka-bottomtab__item:hover { text-decoration: none; }
.arka-bottomtab__item .ic { font-size: 20px; line-height: 1; }
.arka-bottomtab__item.is-active { color: var(--arka-accent); }

/* ===================== Responsive grid utility ===================== */
/* screens use .arka-grid for card collections: 1col phone / 2col tab / 3col PC */
.arka-grid {
  display: grid; gap: 16px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.arka-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.arka-grid--auto { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.arka-grid > * { min-width: 0; }        /* prevent blowout */
.arka-grid img { max-width: 100%; }

/* ===================== RESPONSIVE ===================== */

/* Tablet 768–1023: 좌레일 풀폭(라벨 표시 · #42), 우레일 숨김, 컬럼 간 여백 최소화, grids → 2col */
@media (max-width: 1023px) {
  /* 우레일만 숨기고 좌레일은 풀폭 유지 — 아이콘-only 축소 폐기(#42 게시판 제목이 안 보이던 문제) */
  .arka-shell { grid-template-columns: var(--rail-w) minmax(0, 1fr); }
  .arka-rightrail { display: none; }
  /* 좌레일: PC 와 동일하게 풀폭·좌정렬·라벨 노출 (60px 아이콘 override 제거) */
  .arka-rail { width: var(--rail-w); flex: 0 0 var(--rail-w); padding: var(--space-3) var(--space-2) 40px; align-items: stretch; }
  .arka-rail__item { justify-content: flex-start; padding: 8px 10px; width: 100%; gap: 10px; }
  .arka-rail__item .arka-rail__text { display: inline; }
  .arka-rail__label { display: block; }
  .arka-rail__label-icon { display: none; }   /* 라벨을 직접 보여주므로 '#' 대체 아이콘 불필요 */
  .arka-rail__chips { flex-direction: row; flex-wrap: wrap; align-items: flex-start; gap: 6px; padding: 2px 8px; }
  .arka-rail__chip { font-size: 12px; padding: 4px 8px; width: auto; height: auto; }
  .arka-rail__chip::before { content: none; }
  /* 컬럼 간 여백 최소화 — 본문 좌우 패딩 축소로 좌레일 풀폭 공간 확보 */
  .arka-main { padding: var(--space-4) var(--space-3) 100px; }   /* 24/24 → 16/12 */
  .arka-main__inner { max-width: 100%; }   /* 좁아진 폭을 꽉 사용 */
  /* 태블릿(768–1023): 절대중앙 검색 폭 축소 → 480px 가 좌우 클러스터와 겹치지 않게 */
  .arka-gnb__search { max-width: 360px; }
  .arka-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Phone <=767: rails hidden, hamburger + drawer + bottom tab, single column */
@media (max-width: 767px) {
  .arka-shell { grid-template-columns: minmax(0, 1fr); }
  .arka-rail { display: none; }
  .arka-rightrail { display: none; }
  .arka-main { padding: var(--space-4) var(--space-4) calc(var(--bottomtab-h) + 28px); }   /* 16 16 */
  .arka-main__inner { max-width: 100%; }
  .arka-bottomtab { display: block; }

  .arka-gnb__inner { padding: 0 10px; gap: 8px; }   /* padding/gap 은 inner 로 이관됨 */
  .arka-gnb__hamburger { display: inline-flex; }
  .arka-gnb__wordmark { display: none; }
  .arka-gnb__search { position: static; transform: none; left: auto; z-index: auto; flex: 1 1 auto; display: flex; width: auto; max-width: none; margin: 0; }   /* 모바일: 절대중앙 해제 → 로고~벨 사이 flex-grow 로 꽉 참 */
  .arka-gnb__searchicon { display: none; }                            /* 스펙 #3: 아이콘은 웹 전용 */
  .arka-gnb__write { display: none; }          /* 스펙 #4: 모바일 상단엔 작성버튼 없음(하단탭 유지) */
  .arka-gnb__login { display: none; }          /* keep 가입 only, login via drawer */
  .arka-gnb__right { margin-left: auto; }
  .arka-gnb__brand { margin: 0 auto 0 2px; }

  .arka-grid, .arka-grid--2 { grid-template-columns: minmax(0, 1fr); }
}

/* Drawer is only reachable on phone; hide leftover on larger just in case */
@media (min-width: 768px) {
  .arka-drawer, .arka-drawer-overlay { display: none; }
}

/* Ultra-wide >=1520 (clien style): 좌레일을 뷰포트 좌단(x=0)에 밀착, 피드는 화면 중앙정렬,
 * 우레일은 피드 우측에 밀착. 5열 그리드 — [레일 | 1fr | 중앙컬럼 | 우레일 | 1fr] —
 * 양끝 1fr 스페이서가 좌우 여백을 균형있게 흡수(양쪽 떠보임/과다여백 방지).
 * PC(1024–1519)·태블릿·모바일은 이 블록 미적용 → 현행 그대로(회귀 없음). */
@media (min-width: 1520px) {
  .arka-shell {
    max-width: none;                 /* 1520 cap 해제 — 전폭 그리드로 좌레일을 좌단에 */
    width: 100vw;                    /* 100% 는 세로 스크롤바 제외 폭이라 우레일이 물리 우단에서 스크롤바(10px)만큼 안쪽에서 멈춤 → 100vw 로 좌·우 레일을 물리적 뷰포트 양끝에 대칭 밀착 (초과분은 body overflow-x:clip 로 차단) */
    grid-template-columns: var(--rail-w) 1fr minmax(0, 800px) 1fr var(--rightrail-w);
  }
  .arka-rail      { grid-column: 1; }   /* 뷰포트 좌단 (x=0) */
  .arka-main      { grid-column: 3; }   /* 두 1fr 사이 — 중앙 정렬되는 읽기 컬럼(inner 680 유지) */
  .arka-rightrail { grid-column: 5; }   /* 뷰포트 우단 밀착 (좌우 대칭 · 폭붕괴/세로쪼개짐 방지 유지) */
  /* wide 화면(search/grp-explore)은 중앙 컬럼만 넓혀 그리드 수용 (레일 좌단·우레일 우단·중앙정렬 동일) */
  .arka-shell:has(.arka-main--wide) {
    grid-template-columns: var(--rail-w) 1fr minmax(0, 1200px) 1fr var(--rightrail-w);
  }
  /* 헤더는 전폭 — 브랜드가 좌단 레일 위, 검색바는 중앙(중앙 피드와 정렬) */
  .arka-gnb__inner { max-width: none; }
}

/* ============================================================================
 * [야간 Track A-P1] 소형폰(≤480) GNB 미세조정 — ≤480 에만 적용 → PC(≥1024)·태블릿(768–1023) 무회귀.
 *   767 블록 위에서 압착만 추가 완화(gap/padding/아이콘 축소·검색 최소폭). body overflow-x:clip 존치.
 * ==========================================================================*/
@media (max-width: 480px) {
  .arka-gnb__inner { padding: 0 8px; gap: 6px; }
  .arka-gnb__right { gap: 6px; }
  .arka-gnb__iconbtn { width: 32px; height: 32px; font-size: 16px; }
  .arka-gnb__search { min-width: 90px; }
}